Τι είναι μια full-stack εφαρμογή; Εξήγηση με απλά λόγια

Μια full-stack εφαρμογή είναι μια εφαρμογή που περιλαμβάνει όλα τα επίπεδα που χρειάζεται για να λειτουργήσει: το frontend που βλέπουν και πατούν οι άνθρωποι, το backend που τρέχει σε server και εφαρμόζει τους κανόνες, και τη βάση δεδομένων που θυμάται τα πάντα. Μια λίστα εργασιών που αποθηκεύει τις εργασίες σας, σας αφήνει να συνδεθείτε από οποιαδήποτε συσκευή και δεν δείχνει τη λίστα σας σε κανέναν άλλο είναι full-stack. Μια μόνο σελίδα που δείχνει τα ωράρια λειτουργίας σας δεν είναι.

Το «stack» απλώς σημαίνει τα επίπεδα τεχνολογίας που είναι στοιβαγμένα το ένα πάνω στο άλλο. Το «full» σημαίνει ότι είναι όλα εκεί.

Γιατί έχει σημασία όταν φτιάχνετε με AI

Όταν περιγράφετε μια εφαρμογή σε έναν builder με AI, οι λέξεις που χρησιμοποιείτε καθορίζουν ποια επίπεδα θα φτιάξει. Το «φτιάξε μια σελίδα που δείχνει τον κατάλογό μας» παράγει frontend. Το «άφησε τους πελάτες να παραγγέλνουν από τον κατάλογό μας και την κουζίνα να βλέπει τις νέες παραγγελίες» χρειάζεται και τα τρία επίπεδα, επειδή οι παραγγελίες πρέπει να αποθηκεύονται, να μοιράζονται ανάμεσα σε δύο είδη χρηστών και να μένουν ιδιωτικές.

Ο εντοπισμός της διαφοράς σας βοηθά με τρεις τρόπους:

• Ζητάτε το σωστό πράγμα. Αν θέλετε να αποθηκεύονται δεδομένα, πείτε το. Ένας builder που φτιάχνει μόνο το frontend θα φαίνεται έτοιμος αλλά θα ξεχνά τα πάντα με την ανανέωση.
• Αναγνωρίζετε την ψεύτικη πληρότητα. Μια demo με δείγματα δεδομένων μπορεί να μοιάζει ακριβώς με μια λειτουργική εφαρμογή. Η γνώση των επιπέδων σας επιτρέπει να ελέγξετε ότι τα δεδομένα πράγματι πηγαίνουν κάπου.
• Καταλαβαίνετε το κόστος λειτουργίας. Ένα μόνο frontend μπορεί να σερβίρεται ως στατικά αρχεία. Ένα backend και μια βάση είναι προγράμματα που τρέχουν σε servers, και εκεί προέρχεται το μεγαλύτερο μέρος του κόστους φιλοξενίας.

Μια καθημερινή αναλογία: ένα εστιατόριο

Σκεφτείτε ένα εστιατόριο.

• Η αίθουσα είναι το frontend. Μενού, τραπέζια και το σημειωματάριο του σερβιτόρου. Είναι αυτό που βλέπουν οι πελάτες και πρέπει να είναι ευχάριστο και εύκολο στη χρήση.
• Η κουζίνα είναι το backend. Οι πελάτες δεν μπαίνουν μέσα. Παίρνει τις παραγγελίες, ελέγχει αν το πιάτο είναι διαθέσιμο, το μαγειρεύει και αρνείται περίεργα αιτήματα. Εδώ ζουν οι κανόνες.
• Η αποθήκη και το βιβλίο παραγγελιών είναι η βάση δεδομένων. Κρατούν ό,τι υπάρχει και ό,τι έχει παραγγελθεί, ώστε τίποτα να μην ξεχνιέται όταν αλλάζει η βάρδια.

Ένα εστιατόριο με μόνο αίθουσα μπορεί να σας δείξει ένα ωραίο μενού, αλλά δεν μπορείτε να φάτε. Αυτή είναι μια εφαρμογή μόνο frontend που προσποιείται ότι είναι full-stack.

Τα τρία επίπεδα αναλυτικά

Τα επίπεδα επικοινωνούν με σταθερή σειρά. Το frontend ζητά κάτι από το backend μέσω API — ένα καθορισμένο σύνολο αιτημάτων που δέχεται το backend. Το backend ελέγχει το αίτημα, διαβάζει ή γράφει στη βάση και στέλνει πίσω απάντηση. Το frontend δεν μιλά ποτέ απευθείας με τη βάση.

Αυτή η σειρά είναι η σημαντικότερη ιδέα ασφαλείας σε όλη τη στοίβα. Ό,τι υπάρχει στο frontend μπορεί να διαβαστεί και να αλλαχθεί από τον επισκέπτη, επειδή τρέχει στη συσκευή του. Άρα οι κανόνες — «μόνο ο ιδιοκτήτης βλέπει αυτό το τιμολόγιο», «ένα κουπόνι χρησιμοποιείται μία φορά» — πρέπει να επιβάλλονται στο backend. Για περισσότερα σχετικά με τον διαχωρισμό, δείτε frontend vs backend.

Ένα παράδειγμα βήμα προς βήμα: μια εφαρμογή κρατήσεων μαθημάτων

Υποθέστε ότι διευθύνετε ένα στούντιο γιόγκα και θέλετε οι άνθρωποι να κλείνουν μαθήματα online.

Τι κάνει ο επισκέπτης: ανοίγει το site, βλέπει τα μαθήματα της εβδομάδας, πατά ένα, συνδέεται και κλείνει μια θέση.

Τι γίνεται από κάτω:

1. Το frontend δείχνει το πρόγραμμα. Για να το γεμίσει, ρωτά το backend: «Ποια μαθήματα είναι αυτή την εβδομάδα και πόσες θέσεις μένουν;»
2. Το backend ρωτά τη βάση δεδομένων για τα μαθήματα, μετράει τις κρατήσεις για το καθένα και απαντά.
3. Ο επισκέπτης πατά Κράτηση. Το frontend στέλνει «κράτησε το μάθημα 42 για αυτό το συνδεδεμένο άτομο».
4. Το backend ελέγχει: είναι πράγματι συνδεδεμένο αυτό το άτομο; Είναι γεμάτο το μάθημα; Το έχει ήδη κλείσει; Μόνο αν όλα είναι εντάξει γράφει μια νέα γραμμή κράτησης στη βάση.
5. Το backend απαντά «κλείστηκε», και το frontend δείχνει επιβεβαίωση.
6. Αργότερα, η ιδιοκτήτρια του στούντιο συνδέεται και βλέπει τη λίστα μαθημάτων. Το backend ελέγχει ότι είναι διαχειρίστρια πριν δείξει τα ονόματα όλων.

Τώρα φανταστείτε ότι αυτό είχε φτιαχτεί ως μόνο frontend. Το πρόγραμμα μπορεί να εμφανίζεται, και το κουμπί Κράτηση να δείχνει ένα ωραίο σημάδι επιβεβαίωσης, αλλά η κράτηση θα εξαφανιζόταν με την ανανέωση, η μέτρηση «μένουν θέσεις» θα ήταν λάθος για όλους τους άλλους, και η ιδιοκτήτρια δεν θα έβλεπε ποτέ τίποτα. Το βήμα 4 — οι έλεγχοι — θα έλειπε εντελώς. Αυτή είναι η πρακτική διαφορά.

Βασικοί όροι

• Frontend (πλευρά πελάτη): το κομμάτι που τρέχει στον browser.
• Backend (πλευρά server): το κομμάτι που τρέχει σε server. Λέγεται επίσης API server.
• Βάση δεδομένων: εκεί αποθηκεύονται τα δεδομένα με οργανωμένο τρόπο. Δείτε τι είναι μια βάση δεδομένων.
• API: ο κατάλογος των αιτημάτων που δέχεται το backend από το frontend ή από άλλα προγράμματα.
• Αυθεντικοποίηση: έλεγχος του ποιος είναι κάποιος (σύνδεση). Εξουσιοδότηση: έλεγχος του τι επιτρέπεται να κάνει.
• Deployment: τοποθέτηση όλων των επιπέδων σε servers ώστε να μπορεί να τα χρησιμοποιήσει το κοινό.
• Μονολιθική vs υπηρεσίες: ένα πρόγραμμα που κάνει τα πάντα, έναντι πολλών μικρότερων (για παράδειγμα ένα site και ένα ξεχωριστό API). Και τα δύο είναι full-stack.

Συνηθισμένα λάθη και παρανοήσεις

• «Φαίνεται έτοιμο, άρα είναι έτοιμο». Τα δείγματα δεδομένων και ένα κουμπί που φαίνεται να δουλεύει δεν είναι το ίδιο με αποθηκευμένα δεδομένα. Ανανεώστε τη σελίδα, ανοίξτε την σε ιδιωτικό παράθυρο και ελέγξτε ότι τα δεδομένα υπάρχουν ακόμα.
• Βάζετε τους κανόνες στο frontend. Η απόκρυψη ενός κουμπιού δεν είναι ασφάλεια. Αν το backend δεν ελέγχει, όποιος ξέρει το αίτημα μπορεί να το κάνει.
• Βάζετε μυστικά κλειδιά στο frontend. Ένα κλειδί πληρωμών ή AI μέσα στον κώδικα του browser είναι αναγνώσιμο από κάθε επισκέπτη. Τα κλειδιά ανήκουν στο backend, σε μεταβλητές περιβάλλοντος — δείτε μεταβλητές περιβάλλοντος και μυστικά.
• Νομίζετε ότι το full-stack σημαίνει πολύπλοκο. Μια μικρή full-stack εφαρμογή μπορεί να είναι λίγες οθόνες, μερικές διαδρομές backend και τρεις πίνακες βάσης. Είναι περιγραφή των επιπέδων, όχι του μεγέθους.
• Νομίζετε ότι πρέπει να διαλέξετε μόνοι σας κάθε τεχνολογία. Οποιαδήποτε λογική, ευρέως χρησιμοποιούμενη στοίβα αρκεί για μια πρώτη έκδοση. Πιο σημαντική είναι η καθαρή περιγραφή των δεδομένων και των κανόνων.

Τι να ζητήσετε από τον builder σας με AI

Περιγράψτε την εφαρμογή με βάση τα τρία επίπεδα, ακόμα κι αν δεν τα ονομάζετε:

• Τα δεδομένα: «Αποθήκευσε τα μαθήματα (όνομα, ώρα, χωρητικότητα) και τις κρατήσεις (μάθημα, άτομο, ώρα κράτησης) σε βάση δεδομένων.»
• Οι κανόνες: «Δεν μπορεί να γίνει κράτηση σε μάθημα πέρα από τη χωρητικότητα. Ένα άτομο μπορεί να κλείσει ένα μάθημα μόνο μία φορά. Μόνο οι διαχειριστές βλέπουν ποιος έκλεισε.»
• Οι οθόνες: «Ένα εβδομαδιαίο πρόγραμμα, μια επιβεβαίωση κράτησης, μια σελίδα διαχειριστή με τις κρατήσεις ανά μάθημα.»
• Οι έλεγχοι: «Επέβαλε αυτούς τους κανόνες στον server, όχι μόνο στη σελίδα. Κράτα τα κλειδιά API στον server.»

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

Full-stack εφαρμογές στο Mythex

Το Mythex φτιάχνει full-stack web εφαρμογές από μια περιγραφή στη συνομιλία. Από προεπιλογή, μια νέα εφαρμογή παίρνει frontend σε React και TypeScript· όταν η εφαρμογή χρειάζεται να αποθηκεύει δεδομένα, το Mythex προσθέτει στο project μια αποκλειστική βάση Postgres, και μπορείτε να ζητήσετε ξεχωριστό API server (για παράδειγμα σε Python, Node, C# ή Java) δίπλα στο site. Όλα τρέχουν μαζί σε ζωντανή προεπισκόπηση και δημοσιεύονται σε δημόσιο URL. Η σελίδα της τεκμηρίωσης για τις εφαρμογές πολλαπλών υπηρεσιών δείχνει πώς προεπισκοπούνται και δημοσιεύονται μαζί ένα site και ένα API, και οι full-stack builders εφαρμογών έχουν σημεία εκκίνησης.

Ερωτήσεις