Περισσότερες ιδέες έργου για τη βελτίωση των δεξιοτήτων κωδικοποίησης

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

Επίσης, το αποθετήριο εφαρμογών-ιδεών έχει πάρει σχεδόν 3000 αστέρια από τότε που δημοσίευσα αυτό το άρθρο. Αυτό είναι τρελό! ;

Ευχαριστώ όλους για αυτό! ;

Σε αυτήν την ανάρτηση θα εξετάσουμε μερικά νέα έργα που έχουν προστεθεί στο αποθετήριο από τότε.

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

Παρακάτω θα βρείτε 2 ιδέες για αρχάριους , 4 ενδιάμεσους και 3 προχωρημένους .

1. ΥΠΟΛΟΓΙΣΤΗΣ

Επίπεδο: 1 - Αρχάριος

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

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

Περιορισμοί

  • Δεν μπορείτε να χρησιμοποιήσετε τη eval()συνάρτηση για την εκτέλεση υπολογισμών

Ιστορίες χρηστών

  • Ο χρήστης μπορεί να δει μια οθόνη που δείχνει τον τρέχοντα αριθμό που έχει εισαχθεί ή το αποτέλεσμα της τελευταίας λειτουργίας.
  • Ο χρήστης μπορεί να δει ένα πληκτρολόγιο εισαγωγής που περιέχει κουμπιά για τα ψηφία 0-9, λειτουργίες - '+', '-', '/', και '=', ένα κουμπί 'C' (για διαγραφή) και ένα κουμπί 'AC' (για καθαρά όλα).
  • Ο χρήστης μπορεί να εισαγάγει αριθμούς ως ακολουθίες έως και 8 ψηφία κάνοντας κλικ στα ψηφία στο πληκτρολόγιο εισαγωγής. Η εισαγωγή οποιωνδήποτε ψηφίων άνω των 8 θα αγνοηθεί.
  • Ο χρήστης μπορεί να κάνει κλικ σε ένα κουμπί λειτουργίας για να εμφανίσει το αποτέλεσμα αυτής της λειτουργίας: _ το αποτέλεσμα της προηγούμενης λειτουργίας και τον τελευταίο αριθμό που καταχωρήθηκε Ή _ τους δύο τελευταίους αριθμούς που εισήχθησαν Ή * τον τελευταίο αριθμό που εισήχθη
  • Ο χρήστης μπορεί να κάνει κλικ στο κουμπί 'C' για να διαγράψει τον τελευταίο αριθμό ή την τελευταία λειτουργία. Εάν η τελευταία καταχώριση των χρηστών ήταν μια λειτουργία, η οθόνη θα ενημερωθεί στην τιμή που προηγήθηκε.
  • Ο χρήστης μπορεί να κάνει κλικ στο κουμπί «AC» για να καθαρίσει όλες τις εσωτερικές περιοχές εργασίας και να ρυθμίσει την οθόνη σε 0.
  • Ο χρήστης μπορεί να δει το «ERR» να εμφανίζεται εάν οποιαδήποτε λειτουργία υπερβαίνει το 8ψήφιο μέγιστο.

Χαρακτηριστικά μπόνους

  • Ο χρήστης μπορεί να κάνει κλικ στο κουμπί '+/-' για να αλλάξει το σύμβολο του αριθμού που εμφανίζεται αυτήν τη στιγμή.
  • Ο χρήστης μπορεί να δει ένα κουμπί δεκαδικού σημείου (.) Στο πληκτρολόγιο εισόδου που επιτρέπει την εισαγωγή αριθμών κυμαινόμενου σημείου έως και 3 θέσεων και τη διεξαγωγή εργασιών με τον μέγιστο αριθμό δεκαδικών ψηφίων που έχουν εισαχθεί για οποιοδήποτε αριθμό.

Χρήσιμοι σύνδεσμοι και πόροι

  • Αριθμομηχανή (Wikipedia)
  • MDN

Παραδείγματα έργων

2. ΕΦΑΡΜΟΓΗ ΣΥΝΔΕΣΗΣ

Επίπεδο: 1 - Αρχάριος

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

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

Περιορισμοί

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

Ιστορίες χρηστών

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

Χαρακτηριστικά μπόνους

  • Ο χρήστης μπορεί να δει μια φωτογραφία που δείχνει την εμφάνιση του αντικειμένου μετά την προετοιμασία του.
  • Ο χρήστης μπορεί να αναζητήσει μια συνταγή που δεν περιλαμβάνεται στη λίστα των τίτλων συνταγών εισάγοντας το όνομα του γεύματος σε ένα πλαίσιο αναζήτησης και κάνοντας κλικ στο κουμπί «Αναζήτηση». Οποιοδήποτε API συνταγών ανοιχτού κώδικα μπορεί να χρησιμοποιηθεί ως πηγή συνταγών (δείτε το The MealDB παρακάτω).
  • Ο χρήστης μπορεί να δει μια λίστα συνταγών που ταιριάζουν με τους όρους αναζήτησης
  • Ο χρήστης μπορεί να κάνει κλικ στο όνομα της συνταγής για να εμφανίσει την κάρτα συνταγής της.
  • Ο χρήστης μπορεί να δει ένα προειδοποιητικό μήνυμα εάν δεν βρέθηκε συνταγή που να ταιριάζει.
  • Ο χρήστης μπορεί να κάνει κλικ στο κουμπί "Αποθήκευση" στις κάρτες για συνταγές που βρίσκονται μέσω του API για να αποθηκεύσει ένα αντίγραφο σε αυτό το αρχείο ή τη βάση δεδομένων συνταγών εφαρμογών.

Χρήσιμοι σύνδεσμοι και πόροι

  • Χρήση ανάκτησης
  • Άξιος
  • Το API MealDB

Παραδείγματα έργων

3. ΣΧΕΔΙΟ ΕΦΑΡΜΟΓΗΣ

Επίπεδο: 2 - Ενδιάμεσο

Δημιουργήστε ψηφιακά έργα τέχνης σε καμβά στον ιστό για κοινή χρήση στο διαδίκτυο και επίσης εξαγωγή ως εικόνες.

Ιστορίες χρηστών

  • Ο χρήστης μπορεί να τραβήξει canvasχρησιμοποιώντας το ποντίκι
  • Ο χρήστης μπορεί να αλλάξει το χρώμα
  • Ο χρήστης μπορεί να αλλάξει το μέγεθος του εργαλείου
  • Ο χρήστης μπορεί να πατήσει ένα κουμπί για να καθαρίσει το canvas

Χαρακτηριστικά μπόνους

  • Ο χρήστης μπορεί να σώσει το έργο τέχνης ως εικόνα ( .png, .jpg, κ.λπ. μορφή)
  • Ο χρήστης μπορεί να αντλήσει διάφορα σχήματα ( rectangle, circle, star, κλπ)
  • Ο χρήστης μπορεί να μοιραστεί το έργο τέχνης στα κοινωνικά μέσα

Χρήσιμοι σύνδεσμοι και πόροι

  • Μάθετε πώς να δημιουργείτε μια εφαρμογή σχεδίασης χρησιμοποιώντας p5js

Παραδείγματα έργων

4. ΜΕΤΑΦΡΑΣΗ EMOJI

Επίπεδο: 2 - Ενδιάμεσο

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

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

Ιστορίες χρηστών

  • Ο χρήστης μπορεί να εισαγάγει μια σειρά λέξεων, αριθμών και σημείων στίξης σε ένα πλαίσιο κειμένου
  • Ο χρήστης μπορεί να κάνει κλικ σε ένα κουμπί «Μετάφραση» για να μεταφράσει λέξεις στο κείμενο που έχει εισαχθεί στα αντίστοιχα emoji τους.
  • Ο χρήστης μπορεί να δει ένα προειδοποιητικό μήνυμα εάν έγινε κλικ στο «Μετάφραση», αλλά το πλαίσιο κειμένου εισαγωγής ήταν κενό ή αμετάβλητο από την τελευταία μετάφραση.
  • Ο χρήστης μπορεί να δει στοιχεία κειμένου στο εισαγόμενο κείμενο μεταφρασμένο στα αντίστοιχα emoji τους σε ένα πλαίσιο κειμένου εξόδου. Τα στοιχεία κειμένου για τα οποία δεν υπάρχει emoji θα παραμείνουν αμετάβλητα.
  • Ο χρήστης μπορεί να κάνει κλικ σε ένα κουμπί "Εκκαθάριση" για να καταργήσετε τα πλαίσια κειμένου εισόδου και εξόδου.

Χαρακτηριστικά μπόνους

  • Ο προγραμματιστής θα εφαρμόσει μια λειτουργία συνωνύμου emoji για να επιτρέψει στην εφαρμογή να μεταφράσει μια ευρύτερη ποικιλία λέξεων σε emoji.
  • Ο χρήστης μπορεί να επιλέξει τη γλώσσα που εισάγεται το κείμενο εισαγωγής από μια αναπτυσσόμενη λίστα γλωσσών.

Χρήσιμοι σύνδεσμοι και πόροι

Πλήρης λίστα Emoji v12.0

Παραδείγματα έργων

Μετάφραση Emoji

5. Εφαρμογή MEME GENERATOR

Επίπεδο: 2 - Ενδιάμεσο

Επιτρέψτε στους χρήστες να δημιουργούν προσαρμοσμένα meme προσθέτοντας κείμενο σε μια εικόνα

Ιστορίες χρηστών

  • Ο χρήστης μπορεί να ανεβάσει μια εικόνα που θα εμφανίζεται σε καμβά
  • Ο χρήστης μπορεί να προσθέσει κείμενο στο πάνω μέρος της εικόνας
  • Ο χρήστης μπορεί να προσθέσει κείμενο στο κάτω μέρος της εικόνας
  • Ο χρήστης μπορεί να επιλέξει το χρώμα του κειμένου
  • Ο χρήστης μπορεί να επιλέξει το μέγεθος του κειμένου
  • Ο χρήστης μπορεί να αποθηκεύσει το προκύπτον meme

Χαρακτηριστικά μπόνους

  • Ο χρήστης μπορεί να επιλέξει την οικογένεια γραμματοσειρών για το κείμενο
  • Ο χρήστης μπορεί να μοιραστεί το meme στα κοινωνικά μέσα (twitter, reddit, facebook κ.λπ.)
  • Ο χρήστης μπορεί να σύρει το κείμενο γύρω και να το τοποθετήσει όπου θέλει πάνω από την εικόνα
  • Ο χρήστης μπορεί να σχεδιάσει σχήματα στο πάνω μέρος της εικόνας (κύκλοι, ορθογώνια ή δωρεάν σχεδίαση με το ποντίκι)

Χρήσιμοι σύνδεσμοι και πόροι

Η εργασία με καμβά γίνεται πολύ εύκολη από τη βιβλιοθήκη p5js.

Παραδείγματα έργων

Meme Generator από imgflip

6. ΠΡΑΚΤΙΚΗ ΣΥΝΔΕΣΗΣ

Επίπεδο: 2 - Ενδιάμεσο

Μερικά πράγματα είναι τόσο προφανή που μπορούν εύκολα να αγνοηθούν Ως προγραμματιστής, η ικανότητά σας να πληκτρολογείτε γρήγορα και με ακρίβεια είναι ένας παράγοντας που επηρεάζει την παραγωγικότητά σας. Ο στόχος της εφαρμογής Typing Practice είναι να σας παρέχει πρακτική πληκτρολόγησης μαζί με μετρήσεις που θα σας επιτρέψουν να μετρήσετε την πρόοδό σας.

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

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

Ιστορίες χρηστών

  • Ο χρήστης μπορεί να δει το χρονικό διάστημα λέξεων που πρέπει να πληκτρολογούνται στο παράθυρο της εφαρμογής.
  • Ο χρήστης μπορεί να δει τον αριθμό των επιτυχημένων προσπαθειών και τον αριθμό των συνολικών προσπαθειών σε ένα κουτί σκορ.
  • Ο χρήστης μπορεί να κάνει κλικ στο κουμπί "Έναρξη πρακτικής" για να ξεκινήσει η προπόνηση.
  • Ο χρήστης μπορεί να δει την προτροπή λέξη που εμφανίζεται σε ένα πλαίσιο κειμένου.
  • Ο χρήστης μπορεί να αρχίσει να πληκτρολογεί τη λέξη σε ένα πλαίσιο εισαγωγής κειμένου.
  • Ο χρήστης μπορεί να δει τα γράμματα που έχουν πληκτρολογηθεί φλας εάν εισαχθεί λάθος γράμμα και το πλαίσιο εισαγωγής κειμένου θα διαγραφεί.
  • Ο χρήστης μπορεί να δει το μήνυμα δίπλα στο πλαίσιο εισαγωγής κειμένου που υποδεικνύει ότι ο χρήστης θα πρέπει να προσπαθήσει ξανά εάν εισαχθεί λάθος γράμμα.
  • Ο χρήστης μπορεί να δει τον αριθμό των συνολικών προσπαθειών που έχουν αυξηθεί στο πλαίσιο βαθμολογίας.
  • Ο χρήστης μπορεί να δει ένα μήνυμα συγχαρητηρίων εάν η λέξη έχει πληκτρολογηθεί σωστά.
  • Ο χρήστης μπορεί να δει το χρονικό διάστημα λέξεων πρέπει να πληκτρολογηθεί μειωμένο κατά ένα μικρό ποσό εάν η λέξη είναι σωστά δακτυλογραφημένη.
  • Ο χρήστης μπορεί να δει τον αριθμό των επιτυχημένων προσπαθειών που αυξάνονται στο πλαίσιο σκορ εάν η λέξη είχε πληκτρολογηθεί σωστά.
  • Ο χρήστης μπορεί να κάνει κλικ σε ένα κουμπί «Διακοπή πρακτικής» για να σταματήσει η προπόνηση.

Χαρακτηριστικά μπόνους

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

Χρήσιμοι σύνδεσμοι και πόροι

  • κλειδί
  • setInterval

Παραδείγματα έργων

Εκπαιδευτής πληκτρολόγησης Twiddler

7. ΑΥΤΟΚΙΝΗΤΟΣ

Επίπεδο: 3 - Για προχωρημένους

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

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

Περιορισμοί

  • Πρέπει να εφαρμόσετε ένα χειριστή συμβάντων για τα κουμπιά πάνω και κάτω σε κάθε όροφο. Για παράδειγμα, εάν υπάρχουν 4 ορόφους, πρέπει να εφαρμοστεί ένας χειριστής συμβάντος αντί για 8 (δύο κουμπιά ανά όροφο).
  • Παρομοίως, ένας χειριστής συμβάντων πρέπει να εφαρμόζεται για όλα τα κουμπιά στον πίνακα ελέγχου του ανελκυστήρα και όχι για έναν μοναδικό χειριστή συμβάντων για κάθε κουμπί.

Ιστορίες χρηστών

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

Χαρακτηριστικά μπόνους

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

Χρήσιμοι σύνδεσμοι και πόροι

Ουρά πρώτης, πρώτης εξόδου (Wikipedia)

Παραδείγματα έργων

8. ΕΦΑΡΜΟΓΗ ΓΡΗΓΟΡΗΣ ΤΡΟΦΙΜΩΝ

Επίπεδο: 3 - Για προχωρημένους

Η εφαρμογή Fast Food προσομοιώνει τη λειτουργία ενός απλού εστιατορίου και έχει σχεδιαστεί για να βοηθήσει τον προγραμματιστή να χρησιμοποιήσει τις γνώσεις του σχετικά με τις αρχές σχεδίασης Promises και SOLID.

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

Οι ιστορίες χρηστών που αποτελούν αυτό το κέντρο εφαρμογών γύρω από τέσσερις διαφορετικούς ρόλους:

  • Χρήστης - ο τελικός χρήστης που χρησιμοποιεί την εφαρμογή
  • Πελάτης - ο προσομοιωμένος Πελάτης
  • Παραλήπτης Παραγγελίας - ο προσομοιωμένος Λήψης Παραγγελιών
  • Cook - ο προσομοιωμένος Cook
  • Διακομιστής - ο προσομοιωμένος διακομιστής

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

Περιορισμοί

  • Τα εισιτήρια παραγγελίας μπορούν να αναπαρασταθούν ως δύο διαφορετικοί τύποι υποσχέσεων - ένας περιμένει ο διακομιστής ενώ ο μάγειρας προετοιμάζει την παραγγελία και άλλος ο πελάτης περιμένει ενώ βρίσκεται στη γραμμή εξυπηρέτησης.
  • Χρησιμοποιήστε το εγγενές ισοδύναμο του JS Promises σε οποιαδήποτε γλώσσα θέλετε να αναπτύξετε. Οι προγραμματιστές JS θα πρέπει να χρησιμοποιούν εγγενείς υποσχέσεις και όχι async/await.
  • Δημιουργήστε αυτήν την εφαρμογή χρησιμοποιώντας δυνατότητες μητρικής γλώσσας. ΔΕΝ μπορείτε να χρησιμοποιήσετε πακέτο προσομοίωσης ή βιβλιοθήκη.
  • Νέοι πελάτες φτάνουν στη γραμμή παραγγελίας σε καθορισμένο χρονικό διάστημα. Με άλλα λόγια, οι νέοι πελάτες φτάνουν με σταθερό ρυθμό.
  • Τα εισιτήρια παραγγελίας πληρούνται επίσης σε καθορισμένο χρονικό διάστημα. Ολοκληρώνονται με σταθερό ρυθμό.

Ιστορίες χρηστών

Λειτουργία εφαρμογής

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

Χαρακτηριστικά μπόνους

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

Χρήσιμοι σύνδεσμοι και πόροι

  • Προσομοιωτής γρήγορου φαγητού - Λογική ροή εργασίας
  • Agile Manifesto & 12 Principles of Agile Software
  • Αρχές SOLID που πρέπει να γνωρίζει κάθε προγραμματιστής
  • Χρησιμοποιώντας υποσχέσεις
  • Υπόσχεση

9. ΠΑΙΧΝΙΔΙ SHELL

Επίπεδο: 3 - Για προχωρημένους

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

Αυτό το παιχνίδι Shell προορίζεται να παρέχει μια γραφική διεπαφή στο κλασικό παιχνίδι κέλυφος και να παρέχει στον παίκτη ένα ειλικρινές παιχνίδι για να παίξει. Το παιχνίδι μας αντλεί τρία κελύφη στον καμβά μαζί με το μπιζέλι, μετακινεί το μπιζέλι κάτω από ένα, από τα κελύφη και ανακατεύει τα κελύφη για ένα συγκεκριμένο χρονικό διάστημα. Ο χρήστης πρέπει στη συνέχεια να κάνει κλικ στο κέλυφος που πιστεύει ότι το μπιζέλι είναι κρυμμένο κάτω. Ο χρήστης επιτρέπεται να συνεχίσει να μαντεύει μέχρι να εντοπιστεί το μπιζέλι.

Ιστορίες χρηστών

  • Ο χρήστης μπορεί να δει τον καμβά με τρία κελύφη και το μπιζέλι.
  • Ο χρήστης μπορεί να κάνει κλικ στο κέλυφος στο οποίο πρόκειται να κρυφτεί το μπιζέλι.
  • Ο χρήστης μπορεί να δει το μπιζέλι να κινείται κάτω από το κέλυφος στο οποίο έχει γίνει κλικ.
  • Ο χρήστης μπορεί να κάνει κλικ σε ένα κουμπί "Shuffle" για να ξεκινήσει μια κινούμενη αναδιάταξη των κελυφών για 5 δευτερόλεπτα.
  • Ο χρήστης μπορεί να κάνει κλικ στο κέλυφος που πιστεύει ότι το μπιζέλι κρύβεται κάτω όταν σταματήσει η κινούμενη εικόνα.
  • Ο χρήστης μπορεί να δει το κέλυφος στο οποίο έχει πατηθεί να ανέλθει για να αποκαλύψει εάν το μπιζέλι είναι κρυμμένο κάτω από αυτό.
  • Ο χρήστης μπορεί να συνεχίσει να κάνει κλικ στα κελύφη έως ότου βρεθεί το μπιζέλι.
  • Ο χρήστης μπορεί να δει ένα μήνυμα συγχαρητηρίων όταν βρίσκεται το μπιζέλι
  • Ο χρήστης μπορεί να ξεκινήσει ένα νέο παιχνίδι κάνοντας κλικ σε ένα κέλυφος στο οποίο πρόκειται να κρυφτεί το μπιζέλι (βήμα # 2 παραπάνω). Στη συνέχεια επαναλαμβάνονται τα παραπάνω βήματα.

Χαρακτηριστικά μπόνους

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

Χρήσιμοι σύνδεσμοι και πόροι

  • Παιχνίδι Shell (Wikipedia)
  • Javascript HTML DOM Animation
  • Βιβλιοθήκη κινουμένων σχεδίων p5js

Παραδείγματα έργων

συμπέρασμα

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

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

Έχετε κάποιες προτάσεις για το πώς θα μπορούσαμε να βελτιώσουμε αυτό το έργο συνολικά; Ενημέρωσέ μας! Θα θέλαμε πολύ να ακούσουμε τα σχόλιά σας!

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

Αρχικά δημοσιεύτηκε στο www.florin-pop.com.