Πώς να οικοδομήσουμε μια εφαρμογή με την Admance, ένα πρώτο πλαίσιο backend

Σε ένα σημείο, το τοπίο Frontend Framework είχε τρεις μεγάλους παίκτες: React, Vue και Angular. Γνωρίζοντας και τα τρία ήταν βασικά το χρυσό εισιτήριο όταν ήρθε στο κυνήγι εργασίας. Στη συνέχεια ήρθε η άνοδος των ελαφρών εφαρμογών, η απόδοση από την πλευρά του διακομιστή και η επιθυμία να μην δημιουργηθούν ξανά ένα πακέτο webpack. Ξαφνικά, τα μεγάλα τρία έγιναν πολλά. Και όταν ήρθε να επιλέξει ποια τεχνολογία θα χρησιμοποιήσει, το ερώτημα “Ξέρετε πώς να χρησιμοποιήσετε το x;” μετατοπίστηκε σε “Ποια τεχνολογία λειτουργεί καλύτερα για αυτό το έργο;”

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

Βελτίωση εναντίον Astro

Άλλα ελαφριά πλαίσια, όπως το Astro, τείνουν να είναι το Frontend-First. Η κύρια εστίαση του Astro είναι η οικοδόμηση στατικών τοποθεσιών ή σελίδων με διακομιστή, όπου το HTML, το CSS και το JavaScript που παραδίδετε στο πρόγραμμα περιήγησης είναι η κύρια εστίαση. Μπορείτε να προσθέσετε λογική backend, αλλά δεν είναι η βασική ροή εργασίας.

Η ενίσχυση είναι πρώτα. Η λογική της εφαρμογής, τα τελικά σημεία API και οι αλληλεπιδράσεις βάσεων δεδομένων έρχονται πρώτα. Δεν χρειάζεται να σκεφτείτε αμέσως τα στατικά HTML ή τα στοιχεία της σελίδας. Μπορείτε επίσης να χρησιμοποιήσετε ένα από τα πλαίσια “The Big Three” ως Frontend, χρησιμοποιώντας αυτές τις δεξιότητες.

Εάν δεν μπορείτε να αποφασίσετε μεταξύ Astro και Enhance, εδώ είναι ένας τρόπος να το προσεγγίσετε.

Κατά την οικοδόμηση με το Astro, οι προτεραιότητές σας είναι:

• Βελτιστοποίηση της απόδοσης του Frontend και της απόδοσης φόρτωσης σελίδας.
• Η δομή των εξαρτημάτων για διατάξεις για στατικές ή διακομιστές σελίδες.
• Ελαχιστοποιώντας το JavaScript από την πλευρά του πελάτη και τη διαχείριση της ενυδάτωσης.

Κατά την οικοδόμηση με την ενίσχυση, οι προτεραιότητές σας είναι:

• Σχεδιασμός λογικής Backend, τελικών σημείων API και λειτουργιών από την πλευρά του διακομιστή.
• Εύκολη ρύθμιση και διαδραστικότητα με βάση δεδομένων.
• Ταχέως πρωτότυπα χαρακτηριστικά πλήρους στοίβας χωρίς boilerplate.

Δημιουργία εφαρμογής ενίσχυσης

Τώρα που καλύψαμε τα βασικά, ας οικοδομήσουμε μια μικροσκοπική εφαρμογή πλήρους στοίβας με μια βάση δεδομένων SQL. Δεδομένου ότι το Frontend δεν είναι το επίκεντρο, θα δημιουργήσουμε μια απλή εφαρμογή CRUD (δημιουργία, ανάγνωση, ενημέρωση, διαγραφή) όπου μπορείτε να προσθέσετε μια ψηφοφορία μέσω ενός πλαισίου κειμένου στην οθόνη. Θα μπορείτε να επεξεργαστείτε και να διαγράψετε τις σημειώσεις. Δεδομένου ότι θα έχουμε μια πλήρως εργασιακή βάση δεδομένων, η ανανέωση της σελίδας δεν θα επηρεάσει τις σημειώσεις που έχετε ήδη αποθηκεύσει.

Ξεκινώντας: Αρχεία και εγκαταστάσεις

Δημιουργήστε και ανοίξτε ένα νέο φάκελο έργου.

Αρχικοποιήστε ένα έργο Node.js (αυτό θα δημιουργήσει ένα package.json).

Εγκαταστήστε τις εξαρτήσεις βελτιώσεων και SQLITE.

Τώρα θα δημιουργήσουμε τα αρχεία του έργου μας. Αυτά θα είναι αρκετά βασικά. Η δομή θα μοιάζει με αυτό:

Βεβαιωθείτε ότι βρίσκεστε στο notes-app Φάκελος πριν κάνετε το επόμενο βήμα.

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

Μπορείτε να επιβεβαιώσετε ότι το έχετε κάνει σωστά ανοίγοντας το κύριο notes-app ντοσιέ.

Τώρα είμαστε έτοιμοι να χτίσουμε.

Δημιουργία της βάσης δεδομένων SQLite

Το πρώτο πράγμα που πρόκειται να δημιουργήσουμε είναι η βάση δεδομένων, db.js.

Το αρχείο βάσης δεδομένων θα συνδεθεί με μια βάση δεδομένων SQLite που βασίζεται σε αρχεία (myapp.db). Θα δημιουργήσει επίσης ένα notes τραπέζι με id, title, content. Αυτό το αρχείο είναι ο λόγος για τον οποίο μπορείτε να ανανεώσετε τη σελίδα χωρίς να διαγράψετε τις σημειώσεις.

Μπορεί να παρατηρήσετε ότι χρησιμοποιούμε τον όρο require προκειμένου import σε αυτόν τον κώδικα. Θα συνεχίσουμε να το κάνουμε αυτό για το υπόλοιπο του σεμινάριο, επειδή χρησιμοποιούμε τη σύνταξη του κοινού ουσία και όχι τις ενότητες ES. Μπορείτε να μεταβείτε σε μονάδες ES εάν σας package.json περιλαμβάνει ”type”: “module”. Σημειώστε ότι τα παραδείγματα και τα έγγραφα του Enhance δείχνουν συχνά commonjs επειδή είναι η απλούστερη ρύθμιση.

Προσθήκη λειτουργικότητας CRUD

Αυτή η σελίδα, api.js είναι το κρέας της εφαρμογής. Οι λειτουργίες είναι:

getNotes()

Αυτό είναι ένα αίτημα GET. Είναι κύριος σκοπός είναι να φτάσετε όλες τις σημειώσεις από τη βάση δεδομένων.

addNotes()

Πρόκειται για ένα αίτημα δημοσίευσης επειδή προσθέτει ένα νέο αίτημα στη βάση δεδομένων.

editNote()

Αυτό είναι το αίτημα θέσης. Θα ενημερώσει μια σημείωση όταν καθορίζεται από τον χρήστη (μέσω ενός κουμπιού επεξεργασίας θα προσθέσουμε αργότερα).

deleteNote()

Αυτό είναι ένα αίτημα διαγραφής και θα διαγράψει μια σημείωση χρησιμοποιώντας το id Όταν καθορίζεται από το χρήστη (ένα άλλο κουμπί θα προσθέσουμε αργότερα).

Θα χτίσουμε async Κωδικός για να διατηρήσουμε τον κωδικό μας καθαρό και μη αποκλεισμό.

Δημιουργία του διακομιστή

Μας server.js Το αρχείο πρόκειται να συμπεριλάβει την κατασκευή για έναν βασικό διακομιστή HTTP. Δεν υπάρχει τίποτα μοναδικό για να βελτιωθεί σε αυτόν τον διακομιστή.

Το μπροστινό μέρος

Τέλος, ας χτίσουμε το δικό μας index.html. Για αυτό το σεμινάριο, θα χρησιμοποιήσουμε απλώς το HTML – αλλά μπορείτε να συνδέσετε ένα πιο ισχυρό πλαίσιο frontend σε αυτό το backend για πρόσθετη λειτουργικότητα.

Από το δικό μας notes-app χρησιμοποιεί ενσωματωμένο κόμβο http Ενότητα, μπορείτε να εκτελέσετε το διακομιστή DEV με αυτήν την απλή εντολή:

Όταν κατευθυνθείτε στο http: // localhost: 3000/, θα πρέπει να δείτε την αρχική σελίδα με δύο πλαίσια κειμένου, όπου μπορείτε να προσθέσετε σημειώσεις.

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

Πρόσβαση στη βάση δεδομένων

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

Μπορείτε να έχετε πρόσβαση στη βάση δεδομένων στο τερματικό σας με τις ακόλουθες εντολές:

Είναι τόσο απλό!

Σύναψη

Η ενίσχυση έχει άλλα πιο προηγμένα χαρακτηριστικά που δεν καλύπτονται σε αυτό το σεμινάριο. Ακολουθεί μια μη εξαντλητική λίστα:

• Σειριοποίηση του JSON: Βελτιώστε αυτόματα τη σειριοποίηση αίτησης/ απόκρισης, επιτρέποντάς σας να επιστρέψετε απλά αντικείμενα JavaScript που μετατρέπονται σε JSON.
• Λειτουργίες ως τελικά σημεία: Μπορείτε να γράψετε απλές λειτουργίες JavaScript που λειτουργούν ως τελικά σημεία API αντί να χρειάζεστε ξεχωριστό διακομιστή ή πλαίσιο.
• Μη μηδέν-JavaScript Από προεπιλογή: Μπορείτε να στρώσετε JavaScript όπου χρειάζεται, αλλά οι σελίδες είναι λειτουργικές και προσβάσιμες χωρίς να απαιτείται JavaScript από την πλευρά του πελάτη.

Τώρα έχετε το ίδρυμα για να δημιουργήσετε και να κλιμακώσετε πραγματικές εφαρμογές με την ενίσχυση. Τι θα χτίσετε;