Kas soovite MEAN-virnast kiiresti aru saada? Siin on kasulike diagrammidega dokumentatsioon.

See artikkel põhineb minu Seattle'i linnaülikooli nurgakivil. Minu uurimistöö pealkiri on "Tarkvaradokumentatsioon ja täieliku virnaarenduse arhitektuurianalüüs". Minu uurimistöö eesmärk oli vähendada õppekõverat avatud lähtekoodiga projektide mõistmisel ja kogu pinu arendamisel ning valisin MEAN Stacki.

Lihtsamaks mõistmiseks olen loonud järgmised skeemid, kasutades Lucidcharti. Need UML-diagrammid põhinesid arhitektuurivaate 4 + 1 mudelil:

  • Restorani analoogia
  • Protsessi vaade järjestuse skeemi abil
  • Stsenaarium järjestuse skeemi abil
  • Füüsiline vaade, kasutades juurutusskeemi
  • Arendavaade pakettdiagrammi abil
  • Loogiline vaade klassi skeemi abil

Uuringud keskendusid rohkem juurutamisele ning taotluste ja vastuste voogule.

TÄHENDA virna

MEAN Stack on täisvõrra JavaScripti avatud lähtekoodiga lahendus. Selle moodustavad MongoDB, Express, Angular ja Node.js.

Selle idee on lahendada levinud probleemid nende raamistike ühendamisega, luua kindel raamistik, mis toetaks igapäevaseid arendusvajadusi, ja aidata arendajatel parimate tavade kasutamist populaarsete JavaScripti komponentidega töötamisel.

Taustaga Node.js-iga

Node.js on loodud asünkroonse sisend- / väljundkäitluse jaoks, samal ajal kui JavaScripti on sisseehitatud kliendipoolne sündmuseaas. See muudab Node.js-i teiste keskkondadega võrreldes kiireks. Sündmuspõhine / tagasihelistamise lähenemine muudab aga Node.js-i õppimise ja silumise raskeks.

Node.js sisaldab selliseid mooduleid nagu Mongoose, mis on MongoDB objektide modelleerimine, ja Expressi veebirakenduste raamistik. Node moodulite abil on võimalik saavutada abstraktsioon, mis vähendab MEAN-i virna üldist keerukust.

Ekspressraamistiku tagumine osa

Express on Node.js-i minimalistlik ja avaldamata rakendusraamistik. See on kiht Node.js-i peal, mis on veebi- ja mobiiliarenduse jaoks funktsioonirikas, ilma et oleks peidetud ühtegi Node.js-i funktsionaalsust.

Esiosa nurgaga

Angular on TypeScripti sisse ehitatud veebiarendusplatvorm, mis pakub arendajatele tugevaid tööriistu veebirakenduste kliendipoole loomiseks.

See võimaldab arendada ühelehelisi veebirakendusi, kus sisu muutub kasutaja käitumise ja eelistuste põhjal dünaamiliselt. Sellel on sõltuvuse süstimine, mis tagab, et iga komponendi muutmisel muudetakse automaatselt ka muid sellega seotud komponente.

Andmebaas MongoDB-ga

MongoDB on NoSQL-i andmebaas, mis salvestab andmeid BJSON-i (binaarne JavaScripti objektide märge).

MongoDB-st sai Node.js-rakenduste de facto standardne andmebaas, et täita paradigma "JavaScripti kõikjal", kasutades JSON-i (JavaScripti objektimärge), et edastada andmeid erinevates astmetes (eesmine osa, tagumine osa ja andmebaas).

Nüüd, kui oleme need põhitõed teelt kõrvale jätnud, vaatame neid skeeme.

Restorani analoogia

Kuna tahtsin lahendada järsu õppimiskõvera, valisin restorani analoogia, et võimaldada kasutajal mõista ja säilitada taotluste ja vastuste protsess kogu virna rakenduses.

Klient (lõppkasutaja) taotleb oma tellimust kelneri (kontrolleri) kaudu ja kelner annab päringu isikule üle tellimisaknas (teenindustehases).

Need kolm komponenti moodustavad eesserveri. Teenindustehas on see, kes suhtleb tagaküljel asuva koka (kontrolleriga). Seejärel haarab kokk vajalikud koostisosad (andmed) külmkapis (andmebaasiserveris).

Külmkapp annab kokale vajaliku materjali (andmed) tagatipust. Kokk saab nüüd neid andmeid töödelda ja e-posti teenuse tehasesse tagasi saata.

Kontroller (kelner) annab valmistoidu kliendile (kasutajale) üle. Nüüd saab klient sööki tarbida (andmed).

Protsessi vaade järjestuse skeemi abil

Kes seda kasutab või mida see näitab:

  • Integraatorid
  • Performance
  • Skaalautuvus

Protsessivaates näitan esmalt eesserverit ja taustserverit eraldi ning seejärel ühendan need koos andmebaasiserveriga.

Esimeses näites juurutati nurgeline rakendus service.tsfailis (mis asub Service Factory'is) kõvakoodiga JSON-iga .

Rakendus Angular saab andmete hankimiseks ja kasutajale kuvamiseks suhelda kolmandate osapoolte API-dega.

Meie taustal algab rakenduse Node.js näide kõvakodeeritud JSON-iga, mida saab töödelda ja kasutada vastusena.

Selle back-endi saab JSON-i hankimiseks, selle töötlemiseks ja taotlejale tagasi saatmiseks ühendada kolmanda osapoole API-de või andmebaasiserveriga.

Selgitades eesmise serveri, tagumise serveri ja andmebaasiserveri protsesse, näitan allpool nende kolme serveri kombinatsiooni:

Kui HTTP-päring on tehtud, käivitatakse kasutajaliides ja Angular võtab päringu vastu. Taotlus edastatakse sisemiselt nurga all koos marsruudiga, saates vaate vaate / malli.

Vaade / mall taotleb kontrollerit. Seejärel loob kontroller HTTP-päringu serveripoolsele RESTful (representatiivse oleku edastus) lõpp-punktile, milleks on Express / Node.js. Seejärel edastatakse päring ettevõttes Express / Node.js selle marsruudilt kontrollerile / mudelile.

Kontroller / mudel esitab Mongoose ODM-i kaudu taotluse suhelda andmebaasi serveriga, millel on MongoDB. MongoDB töötleb päringut ja vastab tagasihelistamisnumbrile Express / Node.js.

Express / Node.js saadab nurgakontrollerile JSON-vastuse. Nurgakontroller reageeriks siis vaatega.

Stsenaariumi vaade järjestusdiagrammi abil

Kes seda kasutab või mida see näitab:

  • Kirjeldage objektide ja protsesside vastastikust mõju

Eespool kirjeldatud stsenaarium hõlmab kasutaja juurdepääsu raamatupoe rakendusele. Kui kasutaja sisestab URL-i, käivitatakse JavaScripti ja see tabab eesmise serveri ruuterit, milleks on AppRoutingModule. AppRoutingModule kutsub BooksComponenti, mis laadib sõltuvuse süstina fetchBooks.

Seejärel loob fetchBooks HTTP-päringu taustserverisse, millel on ruuter, kontroller ja mudel, et päringut töödelda ja andmebaasiserveri päringu vormistada.

Andmebaasiserver töötleb päringut ja tagasiserveri ootel haarab andmed ja saadab need JSON-vastusena tagasi eesserverisse.

Eesosas on nüüd andmed ja mallivaade, mida kasutajale näidata.

Füüsiline vaade, kasutades juurutusskeemi

Kes seda kasutab ja mida see näitab:

  • Süsteemiinsener
  • Topoloogia
  • Side

Juurutusskeemil on näidatud 3 serverit: eesmine osa, tagumine osa ja andmebaas. Eesosas vajame brauserit, kuna nurgarakendused on brauseripõhised veebirakendused.

Taustserver majutab meie Node.js-i koos Expressiga Node.js-i peal. Expressis on meil peal rakendus ja Mongoose. Express haldab suhtlust nii kasutajaliideses kui ka andmebaasis. Andmebaasiserveris on ainult MongoDB. Serverite vahel suhtlemiseks kasutab see JSON-i.

MEAN-korstna esimeses järgus juurutame kohaliku abi, kasutades kohalikku masinat (localhost), et juurutada eesserver, tagasiserver ja andmebaasiserver.

Kasutame järgmisi vaikeporte: Angular - port 4200, Node.js / Express - port 3000 ja MongoDB - port 27017.

Alloleval diagrammil kuvatakse kogu virna veebirakendus UML-i tähistuses.

Liikudes tegeliku tootmise juurde, on pilvesse migreeruv asi meie andmebaas. MongoDB jaoks valisin pilvelahenduseks MongoDB Atlase.

Tootmise juurutamise viimane etapp on meie esiotsa koodi üleslaadimine Amazon S3-sse ja tagasiside üleslaadimine AWS-iga EC2 eksemplari. Nad kõik suhtleksid omavahel HTTP / HTTPS-i lõpp-punktidega.

Siin on veel üks diagramm, mis näitab meie tootmise juurutamist ilma UML-i tähistust kasutamata.

Arendavaade pakettdiagrammi abil

Kes seda kasutab ja mida see näitab:

  • Programmeerijad
  • Tarkvarahaldus

Rakenduse Angular pakettvaade näitab, et kõik nurgakomponendid imporditakse AppModule'i. AppModule ja AppRoutingModule sõltuvad BooksComponentist. BooksComponent sõltub rakendustest BookDetailComponentDialog ja ApiService.

Rakenduse Node.js pakettvaade näitab, et rakendus impordib kõiki CRUD-toiminguid (kontrollerid), nagu näiteks kõigi raamatute toomine, raamatu toomine, raamatu värskendamine ja raamatu kustutamine. Samuti asub kogu CRUD-i toimingute loogika mudeliraamatus.

Loogiline vaade klassi skeemi abil

Kes seda kasutab ja mida see näitab:

  • Lõppkasutaja
  • Funktsionaalsus

Raamatupoe rakendus tutvustas ainult ühte klassi nimega Book. Klassiliikmed on: tiitel, isbn, autor, pilt ja hind. Meetodid on: addBook, fetchBooks, fetchBook, updateBook ja deleteBook.

Näidisraamatu struktuur JSON-vormingus.

Siin on mõned diagrammide videod:

Minu GitHubis saadaval olev dokumentatsioon:

clarkngo / cityu_capstone Aidake kaasa clarkngo / cityu_capstone arendamisele, luues GitHubis konto. clarkngo GitHub

Leia mind LinkedInist. =)