Θέλετε να καταλάβετε γρήγορα το MEAN Stack; Ακολουθεί τεκμηρίωση με χρήσιμα διαγράμματα.

Αυτό το άρθρο βασίζεται στην πέτρα μου για το City University of Seattle. Ο τίτλος της έρευνάς μου είναι "Τεκμηρίωση λογισμικού και αρχιτεκτονική ανάλυση της πλήρους ανάπτυξης στοίβας". Ο στόχος της έρευνάς μου ήταν να μειώσω την καμπύλη μάθησης στην κατανόηση των έργων ανοιχτού κώδικα και της ανάπτυξης πλήρους στοίβας και επιλέγω το MEAN Stack.

Έχω δημιουργήσει τα ακόλουθα διαγράμματα, χρησιμοποιώντας το Lucidchart, για ευκολότερη κατανόηση. Αυτά τα διαγράμματα UML βασίστηκαν στο μοντέλο αρχιτεκτονικής προβολής 4 + 1:

  • Αναλογία εστιατορίου
  • Προβολή διαδικασίας χρησιμοποιώντας το διάγραμμα ακολουθίας
  • Σενάριο χρησιμοποιώντας το διάγραμμα ακολουθίας
  • Φυσική προβολή χρησιμοποιώντας το διάγραμμα ανάπτυξης
  • Προβολή ανάπτυξης χρησιμοποιώντας το διάγραμμα πακέτων
  • Λογική προβολή χρησιμοποιώντας διάγραμμα κλάσης

Η έρευνα επικεντρώθηκε περισσότερο στην ανάπτυξη και στη ροή αιτημάτων και απόκρισης.

Σημαίνει στοίβα

Το MEAN Stack είναι μια λύση ανοιχτού κώδικα JavaScript πλήρους στοίβας. Αποτελείται από MongoDB, Express, Angular και Node.js.

Η ιδέα πίσω από αυτό είναι η επίλυση των κοινών προβλημάτων με τη σύνδεση αυτών των πλαισίων, η δημιουργία ενός ισχυρού πλαισίου για την υποστήριξη των καθημερινών αναγκών ανάπτυξης και η βοήθεια των προγραμματιστών να χρησιμοποιούν καλύτερες πρακτικές ενώ εργάζονται με δημοφιλή στοιχεία JavaScript.

Back-end με Node.js

Το Node.js έχει δημιουργηθεί για τον χειρισμό ασύγχρονων εισόδων / εξόδων ενώ το JavaScript διαθέτει ενσωματωμένο βρόχο συμβάντος για την πλευρά του πελάτη. Αυτό κάνει το Node.js γρήγορο σε σύγκριση με άλλα περιβάλλοντα. Ωστόσο, η προσέγγιση βάσει συμβάντων / επιστροφής κλήσεων καθιστά το Node.js δύσκολο να μάθει και να εντοπίσει τον εντοπισμό σφαλμάτων.

Το Node.js περιλαμβάνει λειτουργικές μονάδες όπως το Mongoose, το οποίο είναι μια μοντελοποίηση αντικειμένων MongoDB και το πλαίσιο εφαρμογής ιστού Express. Μέσω των μονάδων Node, μπορεί να επιτευχθεί αφαίρεση, η οποία μειώνει τη συνολική πολυπλοκότητα της στοίβας MEAN.

Back-end με Express Framework

Το Express είναι ένα μινιμαλιστικό και ανεξάρτητο πλαίσιο εφαρμογής για το Node.js. Είναι ένα επίπεδο πάνω από το Node.js που είναι πλούσιο σε χαρακτηριστικά για ανάπτυξη ιστού και κινητών χωρίς να κρύβεται καμία λειτουργικότητα Node.js.

Πρόσοψη με γωνιακό

Το Angular είναι μια πλατφόρμα ανάπτυξης ιστού ενσωματωμένη στο TypeScript που παρέχει στους προγραμματιστές ισχυρά εργαλεία για τη δημιουργία της πλευράς πελατών των εφαρμογών ιστού.

Επιτρέπει την ανάπτυξη εφαρμογών ιστού μίας σελίδας όπου το περιεχόμενο αλλάζει δυναμικά με βάση τη συμπεριφορά και τις προτιμήσεις των χρηστών. Διαθέτει έγχυση εξάρτησης για να διασφαλίσει ότι κάθε φορά που αλλάζει ένα στοιχείο, άλλα στοιχεία που σχετίζονται με αυτό θα αλλάζουν αυτόματα.

Βάση δεδομένων με το MongoDB

Το MongoDB είναι μια βάση δεδομένων NoSQL που αποθηκεύει δεδομένα στο BJSON (Binary JavaScript Object Notation).

Το MongoDB έγινε η de facto τυπική βάση δεδομένων για εφαρμογές Node.js για την εκπλήρωση του παραδείγματος "JavaScript παντού" χρησιμοποιώντας το JSON (JavaScript Object Notation) για τη μετάδοση δεδομένων σε διαφορετικές βαθμίδες (front-end, back-end και βάση δεδομένων).

Τώρα που έχουμε ξεπεράσει αυτά τα βασικά, ας δούμε αυτά τα διαγράμματα.

Αναλογία εστιατορίου

Καθώς ήθελα να αντιμετωπίσω την απότομη καμπύλη μάθησης, επέλεξα μια αναλογία εστιατορίου για να επιτρέψω στον χρήστη να κατανοήσει και να διατηρήσει τη διαδικασία για αίτηση και απάντηση σε μια πλήρη εφαρμογή στοίβας.

Ο πελάτης (τελικός χρήστης) ζητά την παραγγελία του μέσω του σερβιτόρου (ελεγκτής) και ο σερβιτόρος παραδίδει το αίτημα στο άτομο στο παράθυρο παραγγελίας (εργοστάσιο σέρβις).

Αυτά τα τρία στοιχεία αποτελούν τον διακομιστή front-end. Το εργοστάσιο σέρβις θα είναι εκείνο που θα επικοινωνεί με τον μάγειρα (ελεγκτής) στο πίσω μέρος. Ο μάγειρας θα πιάσει τα απαραίτητα συστατικά (δεδομένα) στο ψυγείο (διακομιστής βάσης δεδομένων).

Το ψυγείο θα μπορεί να παρέχει το απαραίτητο υλικό (δεδομένα) στον μάγειρα στο πίσω μέρος. Ο μάγειρας μπορεί τώρα να επεξεργαστεί αυτά τα δεδομένα και να στείλει πίσω στο εργοστάσιο σέρβις του front-end.

Ο ελεγκτής (σερβιτόρος) θα παραδώσει το έτοιμο γεύμα στον πελάτη (χρήστη). Ο πελάτης θα μπορεί πλέον να καταναλώνει το γεύμα (δεδομένα).

Προβολή διαδικασίας χρησιμοποιώντας το διάγραμμα ακολουθίας

Ποιος το χρησιμοποιεί ή τι δείχνει:

  • Ολοκληρωτές
  • Εκτέλεση
  • Επεκτασιμότητα

Στην προβολή διεργασίας, εμφανίζω πρώτα τον διακομιστή front-end και τον διακομιστή back-end και μετά τους συνδέω μαζί με τον διακομιστή βάσης δεδομένων.

Στο πρώτο παράδειγμα, αναπτύχθηκε μια γωνιακή εφαρμογή με σκληρό κωδικοποιημένο JSON σε ένα service.tsαρχείο (βρίσκεται στο Service Factory).

Η εφαρμογή Angular μπορεί να επικοινωνήσει με API τρίτων για τη λήψη δεδομένων και την προβολή τους στο χρήστη.

Στο back-end μας, το παράδειγμα εφαρμογής Node.js ξεκινά με ένα σκληρό κωδικοποιημένο JSON που μπορεί να υποβληθεί σε επεξεργασία και να χρησιμοποιηθεί ως απόκριση.

Αυτό το back-end μπορεί να συνδεθεί σε API τρίτων ή σε διακομιστή βάσης δεδομένων για να αποκτήσει το JSON, να το επεξεργαστεί και να το στείλει πίσω στον αιτούντα.

Με τις διεργασίες διακομιστή front-end, back-end server και server server βάσης δεδομένων, παρουσιάζω τον συνδυασμό αυτών των τριών διακομιστών παρακάτω:

Όταν υποβληθεί ένα αίτημα HTTP, το front-end θα ενεργοποιηθεί και το Angular θα παραλάβει το αίτημα. Το αίτημα θα περάσει εσωτερικά σε Γωνιακό με τη Διαδρομή να στέλνει ένα αίτημα για την προβολή στο Προβολή / Πρότυπο.

Το View / Template θα ζητήσει τον Ελεγκτή. Στη συνέχεια, ο ελεγκτής θα δημιουργήσει ένα αίτημα HTTP σε ένα τελικό σημείο RESTful (αντιπροσωπευτική μεταφορά κατάστασης) στην πλευρά διακομιστή, που είναι Express / Node.js. Στη συνέχεια, το αίτημα θα μεταφερθεί εσωτερικά με το Express / Node.js από τη διαδρομή του στον ελεγκτή / μοντέλο.

Ο ελεγκτής / μοντέλο θα υποβάλει ένα αίτημα μέσω του Mongoose ODM για αλληλεπίδραση με τον διακομιστή βάσης δεδομένων που διαθέτει MongoDB. Το MongoDB θα επεξεργαστεί το αίτημα και θα απαντήσει στην επιστροφή κλήσης στο Express / Node.js.

Το Express / Node.js στέλνει μια απάντηση JSON στον Γωνιακό Ελεγκτή. Ο Γωνιακός Ελεγκτής θα ανταποκρίνεται στη συνέχεια με θέα.

Προβολή σεναρίου χρησιμοποιώντας το διάγραμμα ακολουθίας

Ποιος το χρησιμοποιεί ή τι δείχνει:

  • Περιγράψτε τις αλληλεπιδράσεις μεταξύ αντικειμένων και μεταξύ διεργασιών

Το σενάριο που περιγράφεται παραπάνω περιλαμβάνει έναν χρήστη που έχει πρόσβαση σε μια εφαρμογή βιβλιοθήκης. Όταν ο χρήστης εισαγάγει τη διεύθυνση URL, θα εκτελεστεί το JavaScript και θα χτυπήσει το δρομολογητή του διακομιστή front-end, που είναι το AppRoutingModule. Το AppRoutingModule θα καλέσει το BooksComponent, το οποίο θα φορτώσει το fetchBooks ως ένεση εξάρτησής του.

Στη συνέχεια, το fetchBooks θα δημιουργήσει ένα αίτημα HTTP στον διακομιστή υποστήριξης που διαθέτει δρομολογητή, ελεγκτή και μοντέλο για την επεξεργασία του αιτήματος και την αναζήτηση του διακομιστή βάσης δεδομένων.

Ο διακομιστής βάσης δεδομένων επεξεργάζεται το ερώτημα και με την αναμονή του διακομιστή υποστήριξης, θα αρπάξει τα δεδομένα και θα τα στείλει πίσω στον διακομιστή διεπαφής ως απόκριση JSON.

Η διεπαφή θα έχει τώρα τα δεδομένα και την προβολή προτύπου για εμφάνιση στον χρήστη.

Φυσική προβολή χρησιμοποιώντας το διάγραμμα ανάπτυξης

Ποιος το χρησιμοποιεί και τι δείχνει:

  • Μηχανικός συστήματος
  • Τοπολογία
  • Διαβιβάσεις

Το διάγραμμα ανάπτυξης δείχνει 3 διακομιστές: front-end, back-end και βάση δεδομένων. Στο μπροστινό μέρος, απαιτούμε το πρόγραμμα περιήγησης, καθώς οι γωνιακές εφαρμογές είναι εφαρμογές ιστού που βασίζονται σε πρόγραμμα περιήγησης.

Ο διακομιστής back-end φιλοξενεί το Node.js με το Express στην κορυφή του Node.js. Στο Express, έχουμε την εφαρμογή και το Mongoose. Το Express θα χειριστεί την επικοινωνία τόσο στο front-end όσο και στη βάση δεδομένων. Ο διακομιστής βάσης δεδομένων περιλαμβάνει μόνο το MongoDB. Χρησιμοποιεί το JSON για επικοινωνία μεταξύ διακομιστών.

Στην πρώτη μας κατασκευή του MEAN Stack, θα αναπτύξουμε τοπικά χρησιμοποιώντας τον τοπικό μας υπολογιστή (localhost) για την ανάπτυξη του διακομιστή front-end, διακομιστή back-end και διακομιστή βάσης δεδομένων.

Θα χρησιμοποιήσουμε τις ακόλουθες προεπιλεγμένες θύρες: Γωνιακή - θύρα 4200, Node.js / Express - θύρα 3000 και MongoDB - θύρα 27017.

Το παρακάτω διάγραμμα δείχνει την πλήρη εφαρμογή ιστού στο συμβολισμό UML.

Προχωρώντας περισσότερο στην πραγματική παραγωγή, το πράγμα που πρέπει να μεταναστεύσουμε στο cloud είναι η βάση δεδομένων μας. Για το MongoDB, επέλεξα το MongoDB Atlas ως λύση cloud.

Το τελευταίο βήμα στην ανάπτυξη παραγωγής είναι η μεταφόρτωση του κώδικα front-end στο Amazon S3 και η μεταφόρτωση του back-end σε μια παρουσία EC2 με AWS. Όλοι θα επικοινωνούσαν μεταξύ τους με τελικά σημεία HTTP / HTTPS.

Ακολουθεί ένα άλλο διάγραμμα για να δείξουμε την ανάπτυξη παραγωγής μας χωρίς τη χρήση σημειογραφίας UML.

Προβολή ανάπτυξης χρησιμοποιώντας το διάγραμμα πακέτων

Ποιος το χρησιμοποιεί και τι δείχνει:

  • Προγραμματιστές
  • Διαχείριση λογισμικού

Η προβολή πακέτου της εφαρμογής Angular δείχνει ότι κάθε γωνιακό στοιχείο εισάγεται στο AppModule. Το AppModule και το AppRoutingModule εξαρτώνται από το BooksComponent. Το BooksComponent εξαρτάται από το BookDetailComponentDialog και το ApiService.

Η προβολή πακέτου της εφαρμογής Node.js δείχνει ότι όλες οι λειτουργίες CRUD (ελεγκτές) όπως η λήψη όλων των βιβλίων, η ανάκτηση ενός βιβλίου, η ενημέρωση ενός βιβλίου και η διαγραφή ενός βιβλίου εισάγονται από την εφαρμογή. Επίσης, όλη η λογική των λειτουργιών CRUD βρίσκεται στο βιβλίο του μοντέλου.

Λογική προβολή χρησιμοποιώντας διάγραμμα κλάσης

Ποιος το χρησιμοποιεί και τι δείχνει:

  • Τελικός χρήστης
  • Λειτουργικότητα

Η εφαρμογή βιβλιοπωλείου παρουσίασε μόνο μια κατηγορία που ονομάζεται Βιβλίο. Τα μέλη της τάξης είναι: τίτλος, isbn, συγγραφέας, εικόνα και τιμή. Οι μέθοδοι είναι: addBook, fetchBooks, fetchBook, updateBook και deleteBook.

Η δομή του πρότυπου βιβλίου σε μορφή JSON.

Ακολουθούν ορισμένα βίντεο για τα διαγράμματα:

Η τεκμηρίωση διατίθεται στο GitHub μου:

clarkngo / cityu_capstone Συμβάλλετε στην ανάπτυξη clarkngo / cityu_capstone δημιουργώντας έναν λογαριασμό στο GitHub. clarkngo GitHub

Βρείτε με στο LinkedIn. =)