Πριν ξεκινήσετε να χρησιμοποιείτε το εργαλείο AI, υπάρχουν κάποιες καλές πρακτικές που ισχύουν όταν κάνετε ερωτήσεις στο ChatGPT:
- Να είστε συγκεκριμένοι
- Δώστε πλαίσιο
- Χρησιμοποιήστε ρόλους
- Χρησιμοποιήστε διπλά εισαγωγικά
- Δώστε παραδείγματα
Ακολουθώντας αυτές τις συμβουλές, διασφαλίζετε ότι αξιοποιείτε το bot όσο πιο αποτελεσματικά γίνεται
What’s Inside:
- Prompts για αρχιτεκτονική web development
- Prompts για HTML και Markdown
- Prompts για CSS
- Prompts για JavaScript
- Prompts για ασφάλεια
- Prompts για εντοπισμό σφαλμάτων και βελτιστοποίηση κώδικα
Ας δούμε τη μεταμορφωτική δύναμη των prompts του ChatGPT στην ανάπτυξη ιστοσελίδων και όχι μόνο!
Prompts για αρχιτεκτονική web development
Με το ChatGPT μπορείτε να δημιουργήσετε μια στιβαρή δομή για το web project σας. Χρησιμοποιήστε τα παρακάτω prompts και προσαρμόστε τα στις προδιαγραφές του δικού σας έργου.
- Ανάπτυξε αρχιτεκτονική και κώδικα για έναν ιστότοπο σε JavaScript
- Λειτούργησε ως προγραμματιστής. Πρότεινε αρχιτεκτονική και κώδικα για την ανάπτυξη ιστότοπου [δικηγορικού γραφείου] με δυνατότητα ραντεβού, σε HTML.
- Φτιάχνω ιστότοπο για μια μικρή επιχείρηση που πουλάει χειροποίητα σαπούνια. Δώσε ιδέες για τη δομή του ιστότοπου σε WordPress.
- Ανάπτυξε αρχιτεκτονική και κώδικα για ένα διαδικτυακό εργαλείο διαχείρισης έργων, όπου οι χρήστες συνεργάζονται σε εργασίες και έργα.
- Μπορείς να προτείνεις βιβλιοθήκες ή frameworks για την ανάπτυξη [συγκεκριμένου τύπου εφαρμογής];
Prompts για HTML και Markdown
Η HTML είναι το πρώτο βήμα για να γίνει κανείς developer. Με το ChatGPT, το βήμα αυτό γίνεται ακόμη ευκολότερο. Δείτε τα prompts παρακάτω.
- Σε πίνακα, παράθεσε συντομεύσεις για [HTML / VS Code / React / Python] σε συσκευή Apple ή Windows.
- Γράψε έναν οδηγό αναφοράς για μορφοποίηση σε Markdown
- Γράψε κώδικα HTML για φόρμα που συλλέγει όνομα, email και τηλέφωνο.
- Γράψε ένα έγγραφο Markdown που περιλαμβάνει επικεφαλίδες, παραγράφους, κουκκίδες και έναν σύνδεσμο.
- Κάνε responsive τον παρακάτω κώδικα γκαλερί εικόνων σε HTML
- Μπορείς να μου δώσεις κώδικα HTML που δημιουργεί κουμπί με εφέ hover και σύνδεσμο προς την παρακάτω σελίδα [εισάγετε URL];
- Λειτούργησε ως web developer. Δημιούργησε ένα πλέγμα [αριθμός] επί [αριθμός] από HTML divs με φόντο [χρώμα].
Prompts για CSS
Όπως και με την HTML, αξιοποιώντας τις δυνατότητες επεξεργασίας φυσικής γλώσσας της πλατφόρμας, δουλεύετε με CSS πιο γρήγορα από ποτέ. Μπορείτε να βρείτε παραδείγματα κώδικα CSS, να τα αναλύσετε και να βελτιώσετε τις γνώσεις σας.
- Θέλω να προσθέσω navbar στον ιστότοπό μου. Μπορείς να μου δώσεις παράδειγμα με CSS και JavaScript;
- Παράθεσε τη συμβατότητα των browsers με το CSS Grid.
- Δώσε ένα παράδειγμα κώδικα με Flexbox.
- Δείξε μου πώς να φτιάξω responsive μενού μόνο με CSS.
- Δείξε μου πώς να φτιάξω φόντο με διαβάθμιση σε CSS.
- Δείξε μου πώς να φτιάξω animation CSS για κουμπί όταν περνάει από πάνω ο κέρσορας.
- Λειτούργησε ως web developer. Γράψε κώδικα HTML και CSS για [συγκεκριμένο τύπο σελίδας], με [συγκεκριμένες λειτουργίες].
- Πρότεινε ένα framework CSS για [συγκεκριμένο έργο].
Prompts για JavaScript
Αν χρησιμοποιείτε Javascript, μπορείτε να ζητήσετε από το ChatGPT να γράψει κώδικα για μια συγκεκριμένη λειτουργία ή να λύσει ένα συγκεκριμένο σφάλμα στον κώδικά σας. Δείτε τα παρακάτω prompts και προσαρμόστε τα στις ανάγκες σας.
- Συνέχισε να γράφεις αυτόν τον κώδικα σε JavaScript
- Λειτούργησε ως προγραμματιστής JavaScript. Γράψε πρόγραμμα που ελέγχει τα στοιχεία μιας φόρμας. Το όνομα και το τηλέφωνο είναι υποχρεωτικά, το email και η ηλικία όχι.
- Εντόπισε διαρροές μνήμης στον παρακάτω κώδικα JavaScript
- Μετέτρεψε τον παρακάτω κώδικα από [React] σε [Vue.js]:
- Ανάπτυξε εφαρμογή JavaScript που παίρνει δεδομένα από δημόσιο API και τα εμφανίζει σε ιστοσελίδα.
Prompts για ασφάλεια
Το να διασφαλίσετε ότι η εφαρμογή σας είναι ασφαλής είναι εξαιρετικά σημαντικό βήμα στην ανάπτυξη. Δείτε πώς μπορεί να βοηθήσει το ChatGPT.
- Εντόπισε το κενό ασφαλείας σε αυτό το απόσπασμα κώδικα από πακέτο npm ανοιχτού κώδικα
- Δείξε μου βήμα προς βήμα πώς να ενεργοποιήσω HTTPS στον ιστότοπό μου
- Δείξε μου πώς να προσθέσω έλεγχο ταυτότητας δύο παραγόντων στον ιστότοπό μου
- Λειτούργησε ως ειδικός κυβερνοασφάλειας. Θα σου δοθούν στοιχεία για τον τρόπο αποθήκευσης και κοινοποίησης των δεδομένων, και η δουλειά σου είναι να προτείνεις κατάλληλα μέτρα προστασίας τους από κακόβουλους. Αυτό μπορεί να περιλαμβάνει [εισάγετε].
- Γράψε μια ασφαλή συνάρτηση ή ενότητα σε [γλώσσα] που εκτελεί [συγκεκριμένη εργασία] αποτρέποντας [απειλή ή ευπάθεια].
Prompts για debugging και βελτιστοποίηση κώδικα
Το να διασφαλίσετε ότι η εφαρμογή σας είναι ασφαλής είναι εξαιρετικά σημαντικό βήμα στην ανάπτυξη. Δείτε πώς μπορεί να βοηθήσει το ChatGPT.
- Πρότεινε τρόπους βελτιστοποίησης της παρακάτω συνάρτησης
- Ο παραπάνω κώδικας δεν τρέχει. Μπορείς να μου πεις πού μπορεί να είναι το πρόβλημα;
- Λειτούργησε ως έμπειρος web developer. Μπορείς να αναδιαρθρώσεις τον παρακάτω κώδικα;
- Μπορείς να μου προτείνεις περιπτώσεις δοκιμών για τον παραπάνω κώδικα;
- Γράψε μια ασφαλή συνάρτηση ή ενότητα σε [γλώσσα] που εκτελεί [συγκεκριμένη εργασία] αποτρέποντας [απειλή ή ευπάθεια].
