Αναπτύξτε την πρώτη εφαρμογή λίστας υποχρεώσεων: 8 βήματα

2025 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2025-01-23 14:39

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

Λοιπόν, τα καλά νέα είναι ότι η κωδικοποίηση δεν είναι δύσκολη.

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

Χρόνος κατασκευής: 90 λεπτά.

Δυσκολία: Εύκολο.

Βήμα 1: Τι θα χτίσουμε;

Στο τέλος αυτού του σεμιναρίου θα:

• Δημιουργήστε μια απλή Εφαρμογή Ιστού λίστας υποχρεώσεων χρησιμοποιώντας HTML5.
• Ενσωματώστε το Bootstrap με την εφαρμογή μας για να προσθέσετε όμορφο και γρήγορο στυλ.
• Χρησιμοποιήστε τη βιβλιοθήκη JavaScript και JQuery για να προσθέσετε κάποια δυναμική συμπεριφορά στην εφαρμογή μας.
• Αναπτύξτε την εφαρμογή μας στο cloud χρησιμοποιώντας το Ziet/τώρα.

Σε δράση:

Βήμα 2: Εισαγωγή σε HTML, Bootstrap, JavaScript & JQuery

Τι είναι το HTML;

Η γλώσσα σήμανσης υπερκειμένου κειμένου (HTML) μπορεί να θεωρηθεί ως "η γλώσσα του διαδικτύου". Η HTML είναι η τυπική γλώσσα σήμανσης που χρησιμοποιείται για τη δημιουργία ιστοσελίδων. Αρχικά σχεδιάστηκε για την κοινή χρήση επιστημονικών εγγράφων. Οι προσαρμογές στο HTML με την πάροδο των ετών κατέστησαν κατάλληλη την περιγραφή αρκετών άλλων τύπων εγγράφων που μπορούν να εμφανίζονται ως ιστοσελίδες στο διαδίκτυο.

Η μόνη απαίτηση που απαιτείται για την εμφάνιση μιας σελίδας HTML είναι ένα πρόγραμμα περιήγησης ιστού, όπως ο Microsoft Internet Explorer (IE), ο Mozilla Firefox, ο Google Chrome ή το Apple Safari.

Τι είναι το Bootstrap;

Το Bootstrap είναι το πιο δημοφιλές πλαίσιο HTML, CSS και JavaScript για τη δημιουργία πρώτων ιστοσελίδων που ανταποκρίνονται, για κινητά. Το Bootstrap είναι ένα έργο ανοιχτού κώδικα που αναπτύχθηκε από το Twitter. αποτελείται από κλάσεις CSS που μπορούν να εφαρμοστούν σε στοιχεία για να τα διαμορφώσουν με συνέπεια και κώδικα JavaScript που εκτελεί επιπλέον βελτίωση.

Τι είναι το JavaScript;

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

Τι είναι το JQuery;

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

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

Για περισσότερες πληροφορίες:

HTML

JavaScript

JQuery

Bootstrap

Βήμα 3: Η πρώτη σας σελίδα με HTML

ΒΗΜΑ 1: δημιουργία νέου φακέλου:

mkdir simple-todolist

ΒΗΜΑ 2: Δημιουργήστε νέο αρχείο μέσα στο φάκελο απλής λίστας και ονομάστε το index.html.

cd simple-todolist

touch index.html

ΒΗΜΑ 3: προσθέστε τον ακόλουθο κώδικα στο index.html.

Λίστα υποχρεώσεων

My To-Do-List

ΒΗΜΑ 4: Ανοίξτε το index.html στο πρόγραμμα περιήγησής σας.

Θα δείτε το My To-Do-List να εμφανίζεται (δείτε την παραπάνω φωτογραφία).

Βήμα 4: Προσθήκη Bootstrap

Σε αυτήν την ενότητα θα προσθέσουμε υποστήριξη Bootstrap στη σελίδα index.html, προκειμένου να προσθέσουμε γρήγορο και καλό στυλ στην εφαρμογή λίστας υποχρεώσεων.

Σημείωση: Σε αυτήν την εφαρμογή θα χρησιμοποιήσουμε το Bootstrap 3, εσείς χρησιμοποιείτε οποιοδήποτε άλλο πλαίσιο CSS, όπως το Semantic UI.

ΒΗΜΑ 1: προσθέστε το αρχείο CSS Bootstrap στην ετικέτα κεφαλής:

ΒΗΜΑ 2: προσθέστε αρχεία δέσμης ενεργειών Bootstrap και JQuery στο τέλος της ετικέτας σώματος:

ΒΗΜΑ 3: Ανοίξτε το index.html στο πρόγραμμα περιήγησής σας.

Συγχαρητήρια, προσθέσαμε επιτυχώς υποστήριξη Bootstrap στη σελίδα μας σε λίγα βήματα.

Βήμα 5: Ολοκληρώστε το περιβάλλον χρήστη

Αφού προσθέσουμε με επιτυχία υποστήριξη Bootstrap στην εφαρμογή μας. Τώρα ας συνεχίσουμε και ανταγωνιζόμαστε το UI (User Interface) για να αφήσουμε τον χρήστη να προσθέσει νέες εργασίες. Η λίστα υποχρεώσεων θα μπορεί να προσθέσει νέα στοιχεία σε μια λίστα, καθώς και να αφαιρέσει υπάρχοντα στοιχεία.

ΒΗΜΑ 1: προσθέστε τον ακόλουθο κώδικα στο index.html.

Προσθήκη νέας εργασίας Προσθήκη διαγραφής όλων!

Λίστα εργασιών μου

ΒΗΜΑ 2: ανοίξτε το αρχείο index.html στο πρόγραμμα περιήγησής σας.

Βήμα 6: Προσθήκη της λογικής στην εφαρμογή

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

Στο τέλος αυτού του βήματος θα μετατρέψουμε το index.html σε μια δυναμική σελίδα, έτσι θα συμπεριφέρεται στην αλληλεπίδραση των χρηστών.

ΒΗΜΑ 1: δημιουργήστε ένα νέο φάκελο μέσα στο απλό-todolist, ονομάστε το js και ένα νέο αρχείο όνομα script.js μέσα σε αυτόν τον φάκελο:

mkdir js

cd js script script.js

ΒΗΜΑ 2: συνδέστε το script.js με το index.html προσθέτοντας τον ακόλουθο κώδικα στο τέλος της ετικέτας κεφαλής:

ΒΗΜΑ 3: προσθέστε τον ακόλουθο κώδικα στο αρχείο script.js

$ (έγγραφο). ήδη (() => {

εργασίες var = 0 $ ("#removeAll"). απόκρυψη (); / * add new task handler */ $ ("#add"). on ("click", (event) => {event.preventDefault (); event.stopPropagation (); var val = $ ("input") val (); if (val! == "") {task += 1; var elm = $ ("

• "); $ ("#mylist "). append (elem); $ (" input "). val (" "); / * αφαίρεση μοναδικού χειριστή εργασιών * / $ (". text-right "). on (" clikc ", λειτουργία (συμβάν) {event.preventDefault (); event.stopPropagation (); καθήκοντα -= 1; $ (αυτό).parent.remove ();}); /* εμφάνιση κουμπιού removeAll όταν έχουμε περισσότερα από 3 εργασίες */ if (task> 2) {$ ("#remveAll"). show ();}/ *removeAll handler */ $ ("#removeAll"). on ("click", event => {event.preventDefault (); event.stopPropagation (); $ (". απενεργοποιημένο"). αδέλφια (). αφαίρεση (); εργασίες = 0; $ ("#removeAll"). απόκρυψη ();});}})}}) ?

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

  git clone github.com/ahmnouira/simple-todolist

  ΒΗΜΑ 4: δοκιμάστε τον κωδικό

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

  Βήμα 7: (Προαιρετικό) Αναπτύξτε την εφαρμογή

  

  Μέχρι στιγμής έχουμε δημιουργήσει μια απλή εφαρμογή todo list, τώρα ήρθε η ώρα να την αναπτύξουμε στο cloud και να μοιραστούμε τη δουλειά μας με άλλους σε όλο τον κόσμο.

  Για να το πετύχουμε αυτό θα χρησιμοποιήσουμε την πλατφόρμα cloud που ονομάζεται ZEIT Now.

  Τι είναι το ZEIT τώρα;

  Το ZEIt Now είναι μια πλατφόρμα cloud για στατικούς ιστότοπους και λειτουργίες χωρίς διακομιστή, επιτρέπει στους προγραμματιστές να φιλοξενούν ιστότοπους και υπηρεσίες ιστού που αναπτύσσονται άμεσα, όλα αυτά με μηδενική διαμόρφωση.

  1. Εγκαταστήστε τώρα το CLI

  Για ανάπτυξη με το ZEIT Now, θα χρειαστεί να εγκαταστήσετε το Now CLI.

  σημαντικό: Βεβαιωθείτε ότι έχετε εγκαταστήσει το npm.

  npm -v # ελέγξτε αν η εγκατάσταση npm

  npm install -g now@latest # εγκαταστήστε την τελευταία έκδοση του Now CLI παγκοσμίως τώρα

  2. Ανάπτυξη

  Το μόνο που έχετε να κάνετε είναι να μετακινηθείτε στον κατάλογο και στη συνέχεια να αναπτύξετε την εφαρμογή σας με μία μόνο εντολή:

  τώρα --prod # αναπτύξτε την εφαρμογή

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

  η εφαρμογή μου:

  Βήμα 8: Συμπέρασμα

  Αυτό είναι το μόνο που υπάρχει!

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

  Για να δείτε περισσότερα έργα μου, επισκεφθείτε τον ανοιχτό κώδικα στο GitHub.

  myYouTube.

  myLinkedIn

  Ευχαριστώ που είχατε χρόνο να διαβάσετε το διδακτικό μου ^^.

  Να εχετε μια ομορφη μερα.

  Αχμέτ Νουίρα