Želite li brzo razumjeti stopu MEAN? Evo dokumentacije s korisnim dijagramima.

Ovaj se članak temelji na mojem glavnom spomeniku za Gradsko sveučilište u Seattlu. Naslov mog istraživanja je "Softverska dokumentacija i arhitektonska analiza cjelovitog razvoja". Cilj mog istraživanja bio je smanjiti krivulju učenja u razumijevanju projekata otvorenog koda i punog razvoja stacka, a ja odabirem MEAN Stack.

Stvorio sam sljedeće dijagrame, koristeći Lucidchart, radi lakšeg razumijevanja. Ovi UML dijagrami temeljili su se na modelu 4 + 1 arhitektonskog prikaza:

  • Analogija restorana
  • Prikaz procesa pomoću dijagrama sekvenci
  • Scenarij pomoću dijagrama sekvenci
  • Fizički prikaz pomoću dijagrama postavljanja
  • Pogled razvoja pomoću dijagrama paketa
  • Logički prikaz pomoću dijagrama razreda

Istraživanje je bilo više usredotočeno na raspoređivanje i tijek zahtjeva i odgovora.

ZNAČI Stog

MEAN Stack cjelovito je JavaScript rješenje otvorenog koda. Čine ga MongoDB, Express, Angular i Node.js.

Ideja koja stoji iza toga je riješiti uobičajene probleme s povezivanjem tih okvira, izgraditi robustan okvir koji podržava svakodnevne razvojne potrebe i pomoći programerima da koriste bolje prakse tijekom rada s popularnim JavaScript komponentama.

Pozadina s Node.js

Node.js je izgrađen za rukovanje asinkronim U / I dok JavaScript ima ugrađenu petlju događaja za klijentsku stranu. To čini Node.js brzim u usporedbi s drugim okruženjima. Međutim, pristup vođen događajima / povratnim pozivima čini Node.js teškim za učenje i otklanjanje pogrešaka.

Node.js uključuje module poput Mongoose, koji je MongoDB modeliranje objekata, i Express web aplikacijski okvir. Kroz Node module mogu se postići apstrakcije, što smanjuje ukupnu složenost MEAN stoga.

Pozadina s Express Frameworkom

Express je minimalistički i nepinionirani aplikacijski okvir za Node.js. To je sloj na vrhu Node.js koji je bogat značajkama za razvoj weba i mobilnih uređaja bez skrivanja bilo kakve Node.js funkcionalnosti.

Prednji kraj s kutnim

Angular je platforma za web razvoj ugrađena u TypeScript koja programerima pruža robusne alate za stvaranje klijentske strane web aplikacija.

Omogućuje razvoj web stranica s jednom stranicom gdje se sadržaj dinamički mijenja na temelju ponašanja i preferencija korisnika. Sadrži ubrizgavanje ovisnosti kako bi se osiguralo da će se, kad god se komponenta promijeni, ostale komponente povezane s njom automatski mijenjati.

Baza podataka s MongoDB-om

MongoDB je NoSQL baza podataka koja podatke pohranjuje u BJSON (Binarni JavaScript objektni zapis).

MongoDB je postao de facto standardna baza podataka za aplikacije Node.js kako bi ispunila paradigmu "JavaScript svugdje" koristeći JSON (JavaScript Object Notation) za prijenos podataka s različitih nivoa (front-end, back-end i baza podataka).

Sad kad smo uklonili te osnove, pogledajmo ove dijagrame.

Analogija restorana

Kako sam želio riješiti strmu krivulju učenja, odabrao sam analogiju restorana kako bih omogućio korisniku da razumije i zadrži postupak za zahtjev i odgovor u aplikaciji s punim stogom.

Kupac (krajnji korisnik) naručuje svoju narudžbu preko konobara (kontroler), a konobar predaje zahtjev osobi u prozoru narudžbe (tvornica usluga).

Te tri komponente čine prednji poslužitelj. Tvornica usluga bit će ta koja će u stražnjem dijelu komunicirati s kuharom (kontrolorom). Kuharica će tada u hladnjak (poslužitelj baze podataka) dohvatiti potrebne sastojke (podatke).

Hladnjak će u stražnjem dijelu moći osigurati potrebni materijal (podatke) kuharu. Kuhar sada može obraditi te podatke i poslati ih natrag u tvornicu usluga na prednjoj strani.

Kontrolor (konobar) će predati pripremljeni obrok kupcu (korisniku). Kupac će sada moći jesti obrok (podaci).

Prikaz procesa pomoću dijagrama sekvenci

Tko ga koristi ili što pokazuje:

  • Integratori
  • Izvođenje
  • Skalabilnost

U prikazu procesa isprva prikazujem zasebno prednji i pozadinski poslužitelj, a zatim ih povezujem zajedno s poslužiteljem baze podataka.

U prvom primjeru, Angular aplikacija je postavljena s tvrdo kodiranim JSON-om u service.tsdatoteci (koja se nalazi u Tvornici usluga).

Aplikacija Angular može komunicirati s API-jevima treće strane kako bi prikupila podatke i prikazala ih korisniku.

U našem pozadinskom okruženju, primjer aplikacije Node.js započinje čvrsto kodiranim JSON-om koji se može obraditi i koristiti kao odgovor.

Taj se back-end može povezati s API-jem treće strane ili poslužiteljem baze podataka da bi se dobio JSON, obradio i poslao natrag podnositelju zahtjeva.

Uz objašnjene procese prednjeg poslužitelja, pozadinskog poslužitelja i poslužitelja baze podataka, u nastavku prikazujem kombinaciju ova tri poslužitelja:

Kada se napravi HTTP zahtjev, pokrenut će se front-end i Angular će prihvatiti zahtjev. Zahtjev će se interno proslijediti u Angular-u, a Route šalje zahtjev za prikazom u View / Template.

View / Template zatražit će kontroler. Upravljač će tada stvoriti HTTP zahtjev za krajnju točku RESTful (prijenos reprezentativnog stanja) na strani poslužitelja, a to je Express / Node.js. Zahtjev će se zatim interno proslijediti Express / Node.js s njegove rute na kontroler / model.

Upravljač / model će putem Mongoose ODM-a zatražiti interakciju s poslužiteljem baze podataka koji ima MongoDB. MongoDB će obraditi zahtjev i odgovoriti na povratni poziv Express / Node.js.

Express / Node.js šalje JSON odgovor kutnom kontroleru. Kutni kontroler tada bi odgovorio pogledom.

Prikaz scenarija pomoću dijagrama sekvenci

Tko ga koristi ili što pokazuje:

  • Opišite interakcije između predmeta i između procesa

Gore opisani scenarij uključuje korisnika koji pristupa aplikaciji knjižare. Kada korisnik unese URL, pokrenut će se JavaScript koji će pogoditi usmjerivač prednjeg poslužitelja, a to je AppRoutingModule. AppRoutingModule pozvat će BooksComponent, koji će učitati fetchBooks kao svoju injekciju ovisnosti.

fetchBooks će tada stvoriti HTTP zahtjev za pozadinski poslužitelj koji ima usmjerivač, kontroler i model za obradu zahtjeva i postavljanje upita poslužitelju baze podataka.

Poslužitelj baze podataka obrađuje upit i sa čekanjem pozadinskog poslužitelja prikupit će podatke i poslati ih natrag na prednji poslužitelj kao JSON odgovor.

Prednji kraj sada će imati podatke i prikaz predloška koji će se prikazati korisniku.

Fizički prikaz pomoću dijagrama postavljanja

Tko ga koristi i što pokazuje:

  • Inženjer sustava
  • Topologija
  • Komunikacije

Dijagram implementacije prikazuje 3 poslužitelja: prednji, pozadinski i bazu podataka. Na prednjoj strani potreban nam je preglednik jer su Angularne aplikacije web-aplikacije temeljene na pregledniku.

Stražnji poslužitelj hostira naš Node.js s Expressom na vrhu Node.js. U Expressu imamo aplikaciju i Mongoosea na vrhu. Express će upravljati komunikacijom na front-endu i bazi podataka. Poslužitelj baze podataka uključuje samo MongoDB. Koristi JSON za komunikaciju između poslužitelja.

U našoj prvoj gradnji MEAN stoga, mi ćemo se lokalno implementirati pomoću našeg lokalnog stroja (localhost) za postavljanje prednjeg poslužitelja, pozadinskog poslužitelja i poslužitelja baze podataka.

Koristit ćemo sljedeće zadane priključke: Angular - port 4200, Node.js / Express - port 3000 i MongoDB - port 27017.

Dijagram u nastavku prikazuje cjelovitu web-aplikaciju u UML zapisu.

Prelazeći dalje na stvarnu proizvodnju, stvar koja se migrira u oblak je naša baza podataka. Za MongoDB sam odabrao MongoDB Atlas kao rješenje za oblak.

Posljednji korak u produkcijskoj implementaciji je prijenos našeg front-end koda na Amazon S3 i prijenos back-enda u EC2 instanci s AWS-om. Svi bi međusobno komunicirali s HTTP / HTTPS krajnjim točkama.

Evo još jednog dijagrama koji pokazuje našu implementaciju proizvodnje bez upotrebe UML notacije.

Pogled razvoja pomoću dijagrama paketa

Tko ga koristi i što pokazuje:

  • Programeri
  • Upravljanje softverom

Prikaz paketa aplikacije Angular pokazuje da se svaka kutna komponenta uvozi u AppModule. AppModule i AppRoutingModule ovise o BooksComponentu. BooksComponent ovisi o BookDetailComponentDialog i ApiService.

Prikaz paketa aplikacije Node.js pokazuje da aplikacija uvozi sve CRUD operacije (kontrolere), poput dohvaćanja svih knjiga, dohvaćanja knjige, ažuriranja knjige i brisanja knjiga. Također, sva logika CRUD operacija nalazi se u knjizi modela.

Logički prikaz pomoću dijagrama razreda

Tko ga koristi i što pokazuje:

  • Krajnji korisnik
  • Funkcionalnost

Aplikacija u knjižari prikazala je samo jedan razred nazvan Book. Članovi razreda su: naslov, isbn, autor, slika i cijena. Metode su: addBook, fetchBooks, fetchBook, updateBook i deleteBook.

Model strukture knjige u JSON formatu.

Evo nekoliko videozapisa za dijagrame:

Dokumentacija dostupna na mom GitHub-u:

clarkngo / cityu_capstone Doprinite razvoju clarkngo / cityu_capstone stvaranjem računa na GitHubu. clarkngo GitHub

Pronađite me na LinkedInu. =)