Πώς να δημιουργήσετε μια εφαρμογή Ιστού με το ChatGPT

Ένας από τους μεγαλύτερους ισχυρισμούς της διαφημιστικής εκστρατείας γύρω από το ChatGPT είναι ότι μπορεί να είναι ένα αποτελεσματικό εργαλείο προγραμματισμού. Η ιδέα έχει ως εξής: περιγράφετε αυτό που θέλετε σε φυσική γλώσσα. το chatbot δημιουργεί κώδικα που κάνει ακριβώς αυτό. Αλλά πόσο καλό είναι στην πραγματικότητα το ChatGPT στο να το κάνει αυτό;

Τι καλύτερος τρόπος για να το μάθετε από το να το δοκιμάσετε; Ζητήσαμε από το ChatGPT να δημιουργήσει μια απλή εφαρμογή Ιστού από την αρχή. Ακολουθεί το αποτέλεσμα της δοκιμής μας και τα βήματα που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε έναν ιστότοπο από την αρχή χρησιμοποιώντας το ChatGPT.

Βήμα 1: Δημιουργία του σχεδιαγράμματος για την εφαρμογή Ιστού σας

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

Για την πρώτη μας εργασία, ζητήσαμε από το ChatGPT να αναπτύξει ένα σχέδιο για μια απλή εφαρμογή συνομιλίας. Για να γίνει αυτό, περιγράψαμε τις απαιτήσεις για την εφαρμογή Ιστού μας και, στη συνέχεια, ζητήσαμε από το chatbot να αναφέρει λεπτομερώς ένα σχέδιο για την ανάπτυξη της εφαρμογής.

Αφού χρησιμοποιήσαμε την παραπάνω προτροπή, έχουμε το αποτέλεσμα:

Θα πρέπει να έχετε ενεργοποιημένη την προσθήκη "Δείξε μου" στον λογαριασμό σας στο ChatGPT για να δημιουργήσετε ένα διάγραμμα ροής όπως το παραπάνω. Μπορείς εγκαταστήστε και χρησιμοποιήστε τα πρόσθετα ChatGPT σε λίγα μόλις βήματα, αν και θα χρειαστείτε μια premium συνδρομή.

Χωρίς την προσθήκη, θα λάβετε ένα σχεδιάγραμμα που βασίζεται σε κείμενο ή ένα διάγραμμα ροής τέχνης ASCII. Αυτό είναι ακόμα εντάξει. Ακόμη και χωρίς την προσθήκη, το ChatGPT θα πρέπει να εξακολουθεί να παρέχει ένα σαφές σχέδιο της εφαρμογής όπως το παρακάτω παράδειγμα.

Βήμα 2: Διαχωρισμός του σχεδιαγράμματος σε μικρότερες μονάδες

Τώρα που έχουμε τη μεγάλη εικόνα, ζητήσαμε βοήθεια από το ChatGPT για να χωρίσουμε την εφαρμογή σε μικρότερα στοιχεία που μπορούμε να αναπτύξουμε ξεχωριστά και στη συνέχεια να ενσωματώσουμε για να σχηματίσουμε την πλήρη εφαρμογή Ιστού. Το ChatGPT πρότεινε να χωριστεί σε τρία στοιχεία:

1. Ενότητα εγγραφής
2. Μονάδα σύνδεσης
3. Μονάδα συνομιλίας

Είχαμε άλλες ιδέες, αλλά ο στόχος εδώ είναι να αφήσουμε το ChatGPT να κάνει τις λήψεις.

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

Πήγαμε αμέσως στη δημιουργία του στοιχείου εγγραφής. Ζητήσαμε από το ChatGPT να σχεδιάσει έναν κατάλληλο αλγόριθμο. Εδώ επεμβήκαμε προσδιορίζοντας ότι χρειαζόμαστε μόνο το όνομα χρήστη, το email και το avatar του χρήστη για εγγραφή. Εδώ είναι η προτροπή:

Και ιδού το αποτέλεσμα:

Στη συνέχεια, ζητήσαμε από το ChatGPT να δημιουργήσει το στοιχείο εγγραφής.

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

Στη συνέχεια, ζητήσαμε από το ChatGPT να δημιουργήσει το σενάριο εγγραφής PHP. Αρχικά, μας ζητήθηκε "Γράψτε έναν κώδικα PHP για τη λογική από την πλευρά του διακομιστή για τον χειρισμό της υποβολής φόρμας." Αν και το σενάριο που δημιουργήθηκε λειτουργούσε καλά, είχε πολλά τρωτά σημεία.

Δεν υπήρχε κατακερματισμός κωδικού πρόσβασης, κανένας χειρισμός σφαλμάτων και ήταν επιρρεπής σε ένεση SQL - το ChatGPT έκανε μόνο το ελάχιστο. Η διόρθωση αυτού ήταν σχετικά εύκολη. Απλώς ζητήσαμε από το ChatGPT να «προσδιορίσει οτιδήποτε είναι λάθος με τον κώδικα που μόλις δημιουργήσατε και στη συνέχεια χρησιμοποιήστε τα εντοπισμένα σημεία για να βελτιστοποιήσετε τον κώδικα." Με αυτό, το σενάριο εγγραφής PHP μας ήταν έτοιμο πηγαίνω.

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

Στη συνέχεια, ζητήσαμε από το ChatGPT να "Γράψτε έναν κώδικα SQL για να δημιουργήσετε μια βάση δεδομένων για τα δεδομένα που καταγράφονται στο σενάριο PHP." Εδώ είναι ο κώδικας SQL που προκύπτει:

Και εδώ είναι ο πίνακας που δημιουργήθηκε με την εκτέλεση της SQL:

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

2. Δημιουργία του στοιχείου σύνδεσης

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

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

Αφού δημιουργήσαμε ένα αρχείο "server.login.php" σύμφωνα με τις οδηγίες του ChatGPT και προσθέσαμε το σενάριο PHP που δημιουργήθηκε, πραγματοποιήσαμε την πρώτη μας επιτυχημένη σύνδεση χωρίς τροποποιήσεις ή εντοπισμό σφαλμάτων.

3. Δημιουργία του στοιχείου συνομιλίας

Η δημιουργία του στοιχείου συνομιλίας ήταν το τελευταίο —και πιθανώς το πιο δύσκολο μέρος— του μικρού μας πειράματος. Στην αρχή, απλώς ζητήσαμε από το ChatGPT να γράψει τον κώδικα για το στοιχείο συνομιλίας. Περιττό να πούμε ότι ήταν μια κολοσσιαία αποτυχία. Για πιο σύνθετα στοιχεία για οτιδήποτε θέλετε να δημιουργήσετε, θα πρέπει να το χωρίσετε σε μικρότερα στοιχεία και να τα αντιμετωπίσετε το ένα μετά το άλλο.

Ζητήσαμε από το ChatGPT προτάσεις για τον διαχωρισμό του στοιχείου συνομιλίας και μας πρότεινε να δημιουργήσουμε τρεις σελίδες:

1. Chat.php
2. Send-messages.php
3. Fetch-messages.php

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

Δημιουργία της Σελίδας Chat.php

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

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

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

Δημιουργία της Σελίδας "send-messages.php" και "Fetch-messages".

Ικανοποιημένοι με τη διεπαφή, προχωρήσαμε στη δημιουργία του σεναρίου για να χειριστούμε τη λογική συνομιλίας. Για να μπορέσουμε να στείλουμε και να ανακτήσουμε μηνύματα από τη βάση δεδομένων, το ChatGPT σωστά τόνισε ότι θα χρειαστούμε έναν πίνακα "μηνυμάτων". Ζητήσαμε από το chatbot να δημιουργήσει μια SQL για τον πίνακα μηνυμάτων.

Μετά τη δημιουργία ενός κώδικα SQL, ζητήσαμε από το chatbot να δημιουργήσει ένα σενάριο PHP για να χειριστεί τη λογική των μηνυμάτων.

Το ChatGPT δημιούργησε το σενάριο τόσο για τις σελίδες "send-messages.php" όσο και για τις σελίδες "fetch-messages.php". Κατά την εκτέλεση και των δύο σεναρίων, τελικά είχαμε το πρώτο μας σφάλμα (το οποίο ήταν παραδόξως ικανοποιητικό). Το να φτάσουμε τόσο μακριά στο έργο χωρίς να διορθώσουμε ούτε μια γραμμή κώδικα φαινόταν πολύ καλό για να είναι αληθινό, παρά τη σχετική απλότητά του.

Αποδεικνύεται ότι το σφάλμα προκλήθηκε από το ChatGPT που εισήγαγε έναν έλεγχο για μια μη δηλωμένη μεταβλητή περιόδου λειτουργίας ($_SESSION['user_id']) στο σενάριό μας. Υποψιαζόμαστε ότι αυτό ήταν αποτέλεσμα ενός μάλλον μεγάλου διαλείμματος από το έργο, με αποτέλεσμα το ChatGPT να ξεχάσει ορισμένα από τα περιβάλλοντα και τα ονόματα των μεταβλητών που χρησιμοποιούνται στο έργο.

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

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

ChatGPT: Ένας εξαιρετικός βοηθός κωδικοποίησης

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

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