Laboratorul 01: Introducere in programarea web si dezvoltarea de backend

Scopul laboratorului

Laboratorul de programare web isi propune sa invete studentii concepte fundamentale in acest domeniu si a fost gandit in asa fel incat sa se dobandeasca concepte uzuale pentru dezvoltarea de aplicatii web. Sustinem pluralismul in folosirea de tehnologii dar sugeram ca in practica sa fie folosita acea tehnologie care este cea mai adecvata pentru proiectul in cauza.

Laboratorul se va axa pe doua tehnologii care se gasesc pe piata de dezvoltare a aplicatiilor web, ASP.NET si React pentru dezvolatea a backend-ului respectiv a frontend-ului. Prima jumatate a laboratorului se va axa pe dezvoltarea backend-ului in .NET.

Introducere in .NET si unelte de dezvoltare

.NET este o platforma de dezvoltare creata de Microsoft initial pentru Windows dar care acum este cross-platform. Este una dintre platformele cele mai folosite pentru dezvoltare web pentru aplicatii enterprise, alta tehnologie foarte folosita este Java Spring. Avantajele de a folosi .NET sunt ca e cross-platform, usor de folosit, are o comunitate larga si are documentie buna. Principalul limbaj folosit pentru scrierea de aplicatii in .NET este C#, un limbaj orientat pe obiecte si functional similar cu Java.

Veti avea nevoie de urmatoarele inainte de a incepe dezvoltarea efectiva:

Un IDE si pachetele pentru .NET 6 (dependentele necesare vor fi instalate automat)
- Pentru Windows recomandam Visual Studio 2022 Community gasit aici sau puteti accesa prin MyUPB varianta Professional sau Enterprise de aici
- Pentru Linux/MacOSX sau daca vreti o alternativa puteti folosi platforma DotUltimate cu Rider ca IDE, puteti cere licenta academica pentru toata suita de la Jetbrains cu emailul institutional. Este posibil sa fie nevoie sa instalati SDK-ul pentru .NET 6 de aici.
- Bonus: puteti folosi Visual Studio cu ReSharper de la Jetbrains pentru o experienta mai buna cu IDE-ul dar trebuie sa aveti cel putin 16GB RAM.
Baza de date PostgreSQL
- O varianta este sa instalati PostreSQL pe masina locala, varianta pe care nu o recomandam.
- Alternativa mai buna este sa instalati Docker si docker compose, si sa rulati comanda de docker-compose cu fisierul YAML gasit in gitlab-ul laboratorului. Dupa instalare se ruleaza comanda urmatoare in forlaterul cu fisierul YAML: docker-compose -f .\docker-compose.yml -p mobylab-app-db up -d
Un client de baza de date
- Doar pentru PostgreSQL exista PGAdmin.
- Daca doriti un client universal puteti opta pentru DBeaver.

Pentru programarea efectiva in C# sunt necesare doar cunostinte de baza de programare orientate pe obiecte si programare functionala. Pentru cine stie deja Java adaptarea la C# nu ar trebui sa fie o problema, unde vor fi diferente majore vor fi explicate la laborator.

Exista particularitati in scrierea de cod C#, daca aveti probleme in a intelege scheletul de laborator puteti consulata documentatia de la Microsoft si cartea electronica a lor pentru dezvoltarea de aplicatii web de aici, chiar daca sunt expuse idei in implementarea arhitecturilor pe microservicii principiile de design patterns si best practice sunt folositoare si pentru dezvoltarea de aplicatii backend monolit.

Cateva concepte de baza in dezvoltarea de aplicatii web

In cadrul acestui laborator vom imparti aplicatia web in doua componente, frontend si backend. Frontend-ul este aplicatia vizibila pentu utilizator si ruleaza in browserul acestuia. Pentru ca avem frondend-ul ca componenta de sine statatoare acesta va fi o aplicatie SPA (Single-Page Application) care, in contrast cu un MPA (Multi-Page Application), este o singura pagina care doar isi schimba continutul dinamic in functie de actiunile utilizatorului si datele servite de catre backend. Backend-ul este un server de HTTP care expune date si servcii printr-un API sau poate chiar sa expuna continut static si pagini web.

Intr-o aplicatie MPA fiecare pagina servita pentru browser este creata printr-un template HTML si populata cu date direct de catre server iar modelul de programare folosit aici este MVC (Model-View-Controller), insa in acest laborator vom folosi un SPA pentru frontend astfel incat serverul va expune doar date si servicii printr-un API. Pentru simplitate API-ul va fi de tip REST (REpresentational State Transfer) unde datele schimbate intre server si client sunt date in format JSON.

Aplicatiile backend si ele pot fi impartite in doua categorii, monolit si bazate pe microservicii. Backend-ul monolit este un singur proces care are un server HTTP si contine intreaga logica a aplicatiei pe cand microserviciile sunt mai multe procese care lucreaza impreuna pentru a implementa logica aplicatiei, fiecare microserviciu avand propria responsabilitate in intregul sistem distinct de celelalte. Exista avantaje si dezavantaje pentru fiecare, noi o sa folosim o arhitectura de tip monolit pentru simplitatea implementarii.

Laboratorul va arata cum sa va faceti un backend cu arhitectura de tip monolit unde toata logica backend-ului este stransa intr-un singur proces. Aceleasi principii si concepte de dezvoltare se folosesc si intr-o arhitectura bazata pe microservicii insa aceasta arhitectura este avansata, necesita mult timp pentru a o stapanii si nu se recomanda a se folosi daca proiectul este la inceput mai ales daca echipa de dezvoltare e mica.

Primul proiect de backend

Pentru a va ajuta la implementarea proiectului de la laborator puteti folosi scheletul pentru proiectul de .NET de pe Gitlab, insa pentru a incepe vom crea un proiect de backend in IDE-ul preferat selectand un template pentru .NET core de Web API cum se arata mai jos.

Veti observa ca punctul de intrare a programului este fisierul Program.cs, practic este o functie main care nu este declarata in mod explicit. Aici se creaza un obiect care reprezinta aplicatia web si poate fi configurata cum este si in exemplu configurarea pentru autorizare, pentru maparea controller-elor sau configurarea swagger-ului. Urmeaza sa fie delaliate mai multe in laboratoarele viitoare.

Vedeti ca in C# vi se creaza un proiect intr-o solutie, solutia gestioneaza mai multe proiecte si o puteti folosi ca sa tineti referinte intre proiecte ca de exemplu sa refolositi clase comune intre diferite proiecte de backend printr-o biblioteca partajata.

Veti gasi si un fisier appsettings.json care contine un JSON pentru configurarea aplicatiei, o sa fie folosit pentru a seta variabile ce sa fie folosite de backend. De asemenea, veti gasi si un controller foarte simplu, acesta va raspunde la cererile HTTP de la clienti. Trebuie sa retineti ca in dezvoltarea de aplicatii web se foloseste extrem de mult Dependency Injection, desi conceptul o sa fie detaliat mai mult la laboratoarele urmatoare puteti observa in cod ca componentele/clasele din proiect cum este acel WeatherForecastController nu este instantiat in mod explicit, instantierea se face in mod implicit de catre framework calculand dependentele acelei componente si injectandu-le in componenta la instatiere prin constructor cu este si logger-ul din exemplu la cerere componentei. Asa o sa puteti in laboratoarele urmatoare sa va folositi de componente in tot codul vostru cerandu-le prin constructor de la framework.

Rulati aplicatia de backend, o sa va deschida o pagina in browser cu un Swagger, sau cum se mai numeste altfel, OpenAPI Specification. Swagger-ul este o interfata simpla pentru testarea cererilor HTTP fara sa fie nevoie de un client HTTP si, de asemenea, acesta va descrie intregul API HTTP al serverului cu toate rutele si tipurile de date schimbate cu clientul. Incercati sa executati o cerere catre backend din pagina Swagger-ului. Swagger-ul este important pentru ca va usureaza testarea backend-ului si pentru ca descriind cum API-ul poate fi folosit ca sa generati in mod automat clientii HTTP pentru aplicatiile care consuma API-ul expus.

Sarcini de laborator

Instalati-va uneltele necesare pentru laborator si intrebati de ajutor daca intampinati dificultati.

Urmariti codul din WeatherForecastController si incercati sa-l modificati mergand pe intuitie si testand cu swagger-ul. Daca aveti intrebari intrebati asistentul/a, mai multe informatii o sa fie furnizate la urmatoarele laboaratoare.

Descarcati template-ul de proiect de pe gitlab-ul grupului nostru si incercati sa urmariti codul cu explicatiile din comentarii, daca nu pentru acest laborator atunci pentru data viitoare un o sa fie folosit ca demonstrator.

Daca sunteti interesati ce poate fi capabil .NET intrati pe NuGet si explorati pachetele de C#, NuGet este un manager de pachete care ofera o gama larga de biblioteci care pot fi instale in proiecte Tools > NuGet Package Manager > Manage NuGet Package for Solution… pentru VS si Tools > NuGet > Manage NuGet Package for Solution pentru Rider.