Haluatko ymmärtää MEAN-pinoa nopeasti? Tässä on hyödyllisiä kaavioita sisältävä dokumentaatio.

Tämä artikkeli perustuu Seattlen kaupungin yliopiston huippukiviini. Tutkimukseni otsikko on "Ohjelmistodokumentaatio ja koko pinon kehityksen arkkitehtuurianalyysi". Tutkimukseni tavoitteena oli vähentää oppimiskäyrää avoimen lähdekoodin projektien ymmärtämisessä ja koko pinon kehittämisessä, ja valitsen MEAN-pino.

Olen luonut seuraavat kaaviot Lucidchartin avulla ymmärtämisen helpottamiseksi. Nämä UML-kaaviot perustuivat 4 + 1 -arkkitehtuurinäkymämalliin:

  • Ravintola-analogia
  • Prosessinäkymä sekvenssikaavion avulla
  • Skenaario sekvenssikaavion avulla
  • Fyysinen näkymä käyttöönottokaavion avulla
  • Kehitysnäkymä pakettikaavion avulla
  • Looginen näkymä luokan kaavion avulla

Tutkimus keskittyi enemmän käyttöönottoon sekä pyyntö- ja vastausvirtaan.

TÄRKE pino

MEAN-pino on täyden pinon JavaScript-avoimen lähdekoodin ratkaisu. Se koostuu MongoDB, Express, Angular ja Node.js.

Ajatuksena on ratkaista yleiset ongelmat näiden kehysten yhdistämisellä, luoda vankka kehys päivittäisten kehitystarpeiden tukemiseksi ja auttaa kehittäjiä käyttämään parempia käytäntöjä työskennellessään suosittujen JavaScript-komponenttien kanssa.

Taustapää Node.js: llä

Node.js on rakennettu käsittelemään asynkronista I / O: ta, kun taas JavaScriptissä on sisäänrakennettu tapahtumasilmukka asiakaspuolelle. Tämä tekee Node.js: stä nopeaa muihin ympäristöihin verrattuna. Tapahtumavetoinen / takaisinsoittotapa tekee kuitenkin Node.js: stä vaikean oppia ja virheenkorjauksen.

Node.js sisältää moduuleja, kuten Mongoose, joka on MongoDB-objektimallinnus, ja Express-verkkosovelluskehyksen. Solmumoduulien avulla voidaan saavuttaa abstraktio, mikä vähentää MEAN-pinon kokonaiskompleksuutta.

Taustakuva Express Frameworkilla

Express on Node.js: n minimalistinen ja lausumaton sovelluskehys. Se on Node.js: n päällä oleva kerros, joka on monipuolinen verkko- ja mobiilikehitykseen piilottamatta mitään Node.js-toiminnallisuutta.

Etuosa kulmalla

Angular on TypeScriptiin rakennettu web-kehitysalusta, joka tarjoaa kehittäjille vankat työkalut verkkosovellusten asiakaspuolen luomiseen.

Se mahdollistaa yhden sivun verkkosovellusten kehittämisen, joissa sisältö muuttuu dynaamisesti käyttäjän käyttäytymisen ja mieltymysten perusteella. Siinä on riippuvuusinjektio, jolla varmistetaan, että aina kun komponenttia vaihdetaan, muut siihen liittyvät komponentit vaihdetaan automaattisesti.

Tietokanta MongoDB: n kanssa

MongoDB on NoSQL-tietokanta, joka tallentaa tietoja BJSON-tiedostoon (Binary JavaScript Object Notation).

MongoDB: stä tuli tosiasiallinen vakiotietokanta Node.js-sovelluksille "JavaScript kaikkialla" -paradigman täyttämiseksi JSON: n (JavaScript Object Notation) avulla tietojen siirtämiseen eri tasoilla (käyttöliittymä, taustapuoli ja tietokanta).

Nyt kun olemme saaneet nuo perusasiat tieltä, katsotaanpa näitä kaavioita.

Ravintola-analogia

Kun halusin ratkaista jyrkän oppimiskäyrän, valitsin ravintolan analogian, jotta käyttäjä ymmärtäisi ja säilyttäisi pyynnön ja vastauksen prosessin koko pinon sovelluksessa.

Asiakas (loppukäyttäjä) pyytää tilauksensa tarjoilijan (ohjaimen) kautta, ja tarjoilija luovuttaa pyynnön henkilölle tilausikkunassa (palvelutehdas).

Nämä kolme komponenttia muodostavat etupalvelimen. Huoltotehdas kommunikoi taustan kokin (ohjaimen) kanssa. Kokki nappaa sitten tarvittavat ainesosat (tiedot) jääkaapissa (tietokantapalvelin).

Jääkaappi pystyy toimittamaan tarvittavan materiaalin (tiedot) kokille taustapuolella. Kokki voi nyt käsitellä kyseiset tiedot ja lähettää ne takaisin käyttöliittymän huoltotehtaalle.

Ohjaaja (tarjoilija) luovuttaa valmistetun aterian asiakkaalle (käyttäjälle). Asiakas voi nyt kuluttaa aterian (tiedot).

Prosessinäkymä sekvenssikaavion avulla

Kuka käyttää sitä tai mitä se näyttää:

  • Integraattorit
  • Esitys
  • Skaalautuvuus

Prosessinäkymässä näytän ensin käyttöliittymän palvelimen ja taustapalvelimen erikseen ja yhdistän ne sitten tietokantapalvelimen kanssa.

Ensimmäisessä esimerkissä kulmasovellus otettiin käyttöön kovakoodatun JSON: n kanssa service.tstiedostossa (sijaitsee Service Factoryssä).

Angular-sovellus voi olla yhteydessä kolmansien osapuolten sovellusliittymiin tietojen hankkimiseksi ja näyttämiseksi käyttäjälle.

Taustalla Node.js-sovellusesimerkki alkaa kovakoodatulla JSON: lla, jota voidaan käsitellä ja käyttää vastauksena.

Tämä taustapää voidaan liittää kolmannen osapuolen sovellusliittymiin tai tietokantapalvelimeen JSON: n hankkimiseksi, prosessoimiseksi ja lähettämiseksi takaisin pyynnön tekijälle.

Kun käyttöliittymä-, taustapalvelin- ja tietokantapalvelinprosessit on selitetty, näytän näiden kolmen palvelimen yhdistelmän alla:

Kun HTTP-pyyntö tehdään, käyttöliittymä käynnistyy ja Angular noutaa pyynnön. Pyyntö välitetään sisäisesti kulmana, jolloin Reitti lähettää näkymää koskevan pyynnön näkymään / malliin.

View / Template pyytää ohjainta. Ohjain luo sitten HTTP-pyynnön RESTful (edustustilan siirto) -päätteelle palvelinpuolelle, joka on Express / Node.js. Pyyntö välitetään sitten sisäisesti Express / Node.js: n kanssa sen reitiltä ohjaimeen / malliin.

Ohjain / malli pyytää Mongoose ODM: n kautta olemaan vuorovaikutuksessa tietokantapalvelimen kanssa, jolla on MongoDB. MongoDB käsittelee pyynnön ja vastaa soittopyyntöön Express / Node.js: lle.

Express / Node.js lähettää JSON-vastauksen kulmaohjaimelle. Kulmaohjain vastaisi sitten näkymällä.

Skenaarionäkymä sekvenssikaavion avulla

Kuka käyttää sitä tai mitä se näyttää:

  • Kuvaile esineiden ja prosessien välisiä vuorovaikutuksia

Edellä kuvattu skenaario sisältää käyttäjän pääsyn kirjakauppasovellukseen. Kun käyttäjä syöttää URL-osoitteen, JavaScript suoritetaan ja osuu käyttöliittymän reitittimeen, joka on AppRoutingModule. AppRoutingModule kutsuu BooksComponentin, joka lataa fetchBooksin riippuvuusinjektiona.

fetchBooks luo sitten HTTP-pyynnön taustapalvelimelle, jolla on reititin, ohjain ja malli pyynnön käsittelemiseen ja tietokantapalvelimen kyselyyn.

Tietokantapalvelin käsittelee kyselyn ja odottaessaan taustapalvelinta tarttuu dataan ja lähetti sen takaisin käyttöpalvelimelle JSON-vastauksena.

Käyttöliittymässä on nyt tiedot ja mallinäkymä, jotka näytetään käyttäjälle.

Fyysinen näkymä käyttöönottokaavion avulla

Kuka käyttää sitä ja mitä se näyttää:

  • Järjestelmäinsinööri
  • Topologia
  • Viestintä

Käyttöönottokaavio näyttää 3 palvelinta: käyttöliittymä, käyttöliittymä ja tietokanta. Käyttöliittymässä vaadimme selainta, koska Angular-sovellukset ovat selainpohjaisia ​​verkkosovelluksia.

Taustapalvelin isännöi Node.js: ää Expressin kanssa Node.js: n päällä. Expressissä meillä on sovellus ja sen päällä Mongoose. Express hoitaa viestinnän sekä käyttöliittymässä että tietokannassa. Tietokantapalvelin sisältää vain MongoDB: n. Se käyttää JSONia kommunikoimaan palvelinten välillä.

Ensimmäisessä MEAN-pino-rakennuksessamme otamme käyttöön paikallisesti paikallisen koneemme (localhost) avulla käyttöliittymän, taustapalvelimen ja tietokantapalvelimen käyttöönottoon.

Käytämme seuraavia oletusportteja: Angular - portti 4200, Node.js / Express - portti 3000 ja MongoDB - portti 27017.

Alla oleva kaavio näyttää koko pinon verkkosovelluksen UML-merkinnällä.

Siirtyminen pidemmälle varsinaiseen tuotantoon on pilvipalveluun siirtyminen, mikä on tietokanta. Valitsin MongoDB: lle MongoDB Atlasin pilviratkaisuksi.

Viimeinen vaihe tuotannon käyttöönottoon on käyttöliittymäkoodin lataaminen Amazon S3: een ja taustan lataaminen EC2-ilmentymään AWS: n avulla. He kaikki kommunikoivat keskenään HTTP / HTTPS-päätepisteiden kanssa.

Tässä on toinen kaavio, joka näyttää tuotannon käyttöönoton käyttämättä UML-merkintää.

Kehitysnäkymä pakettikaavion avulla

Kuka käyttää sitä ja mitä se näyttää:

  • Ohjelmoijat
  • Ohjelmistojen hallinta

Kulmasovelluksen pakettinäkymä osoittaa, että jokainen kulmakomponentti tuodaan AppModuleen. AppModule ja AppRoutingModule ovat riippuvaisia ​​BooksComponentista. BooksComponent on riippuvainen BookDetailComponentDialogista ja ApiServicestä.

Node.js-sovelluksen pakettinäkymä osoittaa, että sovellus tuo kaikki CRUD-toiminnot (ohjaimet), kuten kaikkien kirjojen noutaminen, kirjan noutaminen, kirjan päivittäminen ja poistaminen. Myös kaikki CRUD-toimintalogiikat sijaitsevat mallikirjassa.

Looginen näkymä luokan kaavion avulla

Kuka käyttää sitä ja mitä se näyttää:

  • Loppukäyttäjä
  • Toiminnallisuus

Kirjakauppasovellus esitteli vain yhden luokan nimeltä Kirja. Luokan jäsenet ovat: otsikko, isbn, tekijä, kuva ja hinta. Menetelmät ovat: addBook, fetchBooks, fetchBook, updateBook ja deleteBook.

Mallikirjan rakenne JSON-muodossa.

Tässä on joitain videoita kaavioille:

Asiakirjat, jotka ovat saatavilla GitHubissani:

clarkngo / cityu_capstone Osallistu clarkngo / cityu_capstone -kehitykseen luomalla tili GitHubiin. clarkngo GitHub

Löydä minut LinkedInistä. =)