Ez a cikk a Seattle-i Városi Egyetem alapkövén alapul. Kutatásom címe "Szoftverdokumentáció és a teljes verem fejlesztésének építészeti elemzése". Kutatásom célja a tanulási görbe csökkentése volt a nyílt forráskódú projektek megértésében és a teljes verem fejlesztésében, és a MEAN Stack-et választottam.

A könnyebb megértés érdekében a következő diagramokat hoztam létre Lucidchart segítségével. Ezek az UML diagramok a 4 + 1 építészeti nézet modelljén alapultak:

• Éttermi hasonlat
• Folyamat nézet a szekvencia diagram segítségével
• Forgatókönyv a szekvencia diagram használatával
• Fizikai nézet a telepítési diagram segítségével
• Fejlesztési nézet a Csomag diagram segítségével
• Logikai nézet az osztálydiagram segítségével

A kutatás inkább a telepítésre, valamint a kérelem és válaszadás folyamatára összpontosult.

ÉNT verem

A MEAN Stack egy teljes veremű JavaScript nyílt forráskódú megoldás. A MongoDB, az Express, az Angular és a Node.js alkotja.

Az ötlet az, hogy megoldja a közös problémákat a keretrendszerek összekapcsolásával, megbízható keretrendszert készítsen a napi fejlesztési igények támogatására, és segítse a fejlesztőket a jobb gyakorlatok alkalmazásában, miközben a népszerű JavaScript-összetevőkkel dolgoznak.

Háttér a Node.js-sel

A Node.js az aszinkron I / O kezelésére készült, míg a JavaScript egy eseményhurokkal rendelkezik, amely beépített az ügyféloldalra. Ez gyorsabbá teszi a Node.js-t más környezetekhez képest. Az eseményvezérelt / visszahívási megközelítés azonban megnehezíti a Node.js megtanulását és hibakeresését.

A Node.js olyan modulokat tartalmaz, mint a Mongoose, amely egy MongoDB objektum modellezés, és az Express webalkalmazás-keretrendszer. A Node modulok révén absztrakció érhető el, ami csökkenti a MEAN-verem teljes komplexitását.

Háttér az Express Framework-szel

Az Express egy minimalista és megalapozatlan alkalmazás keretrendszer a Node.js fájlhoz. Ez egy olyan réteg a Node.js tetején, amely funkciókban gazdag webes és mobil fejlesztéshez, anélkül, hogy elrejtené a Node.js funkcióit.

Front-end szögletes

Az Angular egy TypeScript-be épített webfejlesztő platform, amely robusztus eszközöket kínál a fejlesztőknek a webalkalmazások ügyféloldalának létrehozásához.

Lehetővé teszi egyoldalas webalkalmazások fejlesztését, ahol a tartalom dinamikusan változik a felhasználói viselkedés és preferenciák alapján. Függőség-injektálással rendelkezik annak biztosítására, hogy amikor egy alkatrészt cserélnek, a hozzá kapcsolódó többi alkatrész is automatikusan megváltozik.

Adatbázis a MongoDB-vel

A MongoDB egy NoSQL adatbázis, amely adatokat a BJSON-ban (bináris JavaScript objektum jelölés) tárol.

A MongoDB a de facto standard adatbázis lett a Node.js alkalmazások számára, hogy teljesítsék a "JavaScript mindenütt" paradigmát a JSON (JavaScript Object Notation) használatával az adatok különböző szinteken (front-end, back-end és adatbázis) keresztül történő továbbításához.

Most, hogy elértük ezeket az alapokat, nézzük meg ezeket a diagramokat.

Éttermi hasonlat

Mivel a meredek tanulási görbét akartam kezelni, egy éttermi analógiát választottam, hogy a felhasználó megértse és megtartsa a kérés és válasz folyamatát egy teljes verem alkalmazásban.

Az ügyfél (végfelhasználó) a pincéren (vezérlőn) keresztül kéri megrendelését, a pincér pedig a megrendelés ablakában (szervizgyárban) átadja a kérést az illetőnek.

Ez a három összetevő alkotja a front-end szervert. A szervizgyár lesz az, aki kommunikál a szakácssal (vezérlővel) a háttérben. A szakács ezután megkapja a szükséges összetevőket (adatokat) a hűtőszekrényben (adatbázis-szerver).

A hűtőszekrény képes lesz biztosítani a szükséges anyagot (adatokat) a szakács számára a háttérben. A szakács most feldolgozhatja ezeket az adatokat, és visszaküldheti a kezelőfelület szervizgyárába.

Az ellenőr (pincér) átadja az elkészített ételt az ügyfélnek (felhasználónak). Az ügyfél mostantól el tudja fogyasztani az étkezést (adatok).

Folyamat nézet a szekvencia diagram segítségével

Ki használja vagy mit mutat:

• Integrátorok
• Teljesítmény
• Méretezhetőség

A folyamat nézetben először a front-end kiszolgálót és a back-end szervert külön bemutatom, majd összekapcsolom őket az adatbázis-kiszolgálóval.

Az első példában egy Angular alkalmazást telepítettek kemény kódolású JSON-nal egy service.tsfájlban (a Service Factory-ban található).

Az Angular alkalmazás képes kommunikálni harmadik fél API -ival, hogy adatokat szerezzen és megjelenítse a felhasználó számára.

Háttérünkben a Node.js alkalmazáspélda egy kemény kódolású JSON-nal kezdődik, amely feldolgozható és válaszként használható.

Ez a háttér csatlakoztatható harmadik féltől származó API-khoz vagy egy adatbázis-kiszolgálóhoz a JSON megszerzéséhez, feldolgozásához és visszaküldéséhez az igénylőnek.

A front-end szerver, a back-end szerver és az adatbázis-kiszolgáló folyamatainak magyarázatával az alábbiakban bemutatom e három kiszolgáló kombinációját:

Amikor HTTP-kérést küld, a kezelőfelület aktiválódik, és az Angular felveszi a kérést. A kérelmet belsőleg, szögben továbbítjuk, az Útvonal kérelmet küld a nézet megtekintéséhez / sablonhoz.

A View / Template felkéri a Vezérlőt. Ezután a Vezérlő létrehoz egy HTTP-kérést egy RESTful (reprezentatív állapotátvitel) végponthoz a kiszolgálóoldalhoz, amely az Express / Node.js. Ezután a kérelmet az Express / Node.js segítségével belsőleg továbbítják az útvonaltól a vezérlőig / modellig.

A Vezérlő / Modell a Mongoose ODM-en keresztül kéri, hogy lépjen kapcsolatba a MongoDB-vel rendelkező adatbázis-kiszolgálóval. A MongoDB feldolgozza a kérést és válaszol a visszahívásra az Express / Node.js címre.

Az Express / Node.js JSON választ küld a szögvezérlőnek. A szögvezérlő ekkor nézettel válaszol.

Forgatókönyv nézet a szekvencia diagram segítségével

Ki használja vagy mit mutat:

• Ismertesse az objektumok és a folyamatok közötti kölcsönhatásokat

A fent leírt forgatókönyv szerint a felhasználó hozzáfér egy könyvesbolt alkalmazáshoz. Amikor a felhasználó megadja az URL-t, a JavaScript futtatásra kerül, és eléri a kezelőszerver útválasztóját, amely az AppRoutingModule. Az AppRoutingModule meghívja a BooksComponent szoftvert, amely a fetchBooks programot tölti be függőségi injekcióként.

A fetchBooks ezután létrehoz egy HTTP-kérést a háttérszervernek, amely rendelkezik útválasztóval, vezérlővel és modellel a kérés feldolgozásához és az adatbázis-kiszolgáló lekérdezéséhez.

Az adatbázis-kiszolgáló feldolgozza a lekérdezést, és a háttérszerver várakozásával megkaparintja az adatokat, és JSON válaszként visszaküldi a kezelőszervernek.

A kezelőfelületen mostantól az adatok és a sablon nézet jelenik meg a felhasználó számára.

Fizikai nézet a telepítési diagram segítségével

Ki használja és mit mutat:

• Rendszer mérnök
• Topológia
• Kommunikáció

A telepítési diagram 3 kiszolgálót mutat: kezelőfelületet, háttéroldalt és adatbázist. Az előtérben szükségünk van a böngészőre, mivel az Angular alkalmazások böngészőalapú webalkalmazások.

A háttérszerver a Node.js-t tárolja, az Express-szel a Node.js tetején. Az Express-ben van az alkalmazás és a tetején a Mongoose. Az Express kezeli a kommunikációt mind a kezelőfelületen, mind az adatbázisban. Az adatbázis-kiszolgáló csak a MongoDB-t tartalmazza. A JSON-t használja a szerverek közötti kommunikációhoz.

A MEAN Stack első felépítésében a helyi gépen (localhost) keresztül telepítjük a front-end szervert, a back-end szervert és az adatbázis-kiszolgálót.

A következő alapértelmezett portokat fogjuk használni: Angular - 4200 port, Node.js / Express - 3000 port és MongoDB - 27017 port.

Az alábbi ábra a teljes verem webalkalmazást mutatja UML jelöléssel.

Továbblépve a tényleges gyártáshoz, a felhőbe való migrálás az adatbázisunk. A MongoDB esetében felhőmegoldásként a MongoDB Atlas szolgáltatást választottam.

A gyártási telepítés utolsó lépése a front-end kód feltöltése az Amazon S3-ba, a háttér feltöltése az AWS-sel ellátott EC2 példányban. Mindannyian HTTP / HTTPS végpontokkal kommunikálnának egymással.

Itt van egy másik ábra, amely bemutatja a termelési telepítést UML jelölés használata nélkül.

Fejlesztési nézet a Csomag diagram segítségével

Ki használja és mit mutat:

• Programozók
• Szoftverkezelés

Az Angular alkalmazás csomagnézete azt mutatja, hogy minden szögletes komponenst importál az AppModule. Az AppModule és az AppRoutingModule a BooksComponent függvénye. A BooksComponent a BookDetailComponentDialog és az ApiService függvénye.

A Node.js alkalmazás csomagnézete azt mutatja, hogy az alkalmazás importálja az összes CRUD műveletet (vezérlőt), például az összes könyv beolvasását, a könyv beolvasását, a könyv frissítését és a könyv törlését. Emellett az összes CRUD műveleti logika a modellkönyvben található.

Logikai nézet az osztálydiagram segítségével

Ki használja és mit mutat:

• Végfelhasználó
• Funkcionalitás

A könyvesbolt alkalmazás csak egyetlen, Book nevű osztályt mutatott be. Az osztály tagjai: cím, isbn, szerző, kép és ár. A módszerek a következők: addBook, fetchBooks, fetchBook, updateBook és deleteBook.

A modellkönyv felépítése JSON formátumban.

Íme néhány videó az ábrákhoz:

A GitHub-on elérhető dokumentáció:

clarkngo / cityu_capstone Hozzájárulás a clarkngo / cityu_capstone fejlesztéséhez egy fiók létrehozásával a GitHubon. clarkngo GitHub

Keressen meg a LinkedIn-en. =)