5 Αντιδράστε έργα που χρειάζεστε στο χαρτοφυλάκιό σας

Έχετε βάλει το έργο και τώρα έχετε μια σταθερή κατανόηση της βιβλιοθήκης του React.

Επιπλέον, έχετε καλή κατανόηση της JavaScript και χρησιμοποιείτε τις πιο χρήσιμες δυνατότητές της για χρήση στον κώδικα React.

Έχετε σημειώσει μεγάλη πρόοδο ... αλλά τώρα τι κάνετε;

Πώς γεφυρώνετε το χάσμα μεταξύ της γνώσης των βασικών στοιχείων του React και του να γίνετε επαγγελματίας προγραμματιστής;

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

Γιατί πρέπει να δημιουργείτε εφαρμογές

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

Αλλά ποιες εφαρμογές πρέπει να δημιουργήσετε με το React για να βελτιώσετε την ικανότητά σας ως προγραμματιστής;

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

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

Πώς να ξεκινήσετε τη δημιουργία εφαρμογών με το React

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

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

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

Σημείωση: Μια εσφαλμένη αντίληψη που είχα όταν άρχισα να δημιουργώ πραγματικές εφαρμογές όπως αυτές ήταν ότι έπρεπε να δημιουργήσω ένα ολόκληρο backend / API με Node ή Python για να αποκτήσω τη λειτουργικότητα που χρειαζόμουν. Δεν χρειάζεται να το κάνετε. Εξετάστε ισχυρές τεχνολογίες χωρίς διακομιστές όπως το Firebase, το AWS Amplify ή το Hasura που σας δίνουν ένα πλήρες backend εκτός του κουτιού χωρίς να χρειάζεται να δημιουργήσετε και να αναπτύξετε μόνοι σας. Επενδύστε σε εργαλεία που σας κάνουν πιο παραγωγικούς και εξοικονομείτε χρόνο.

Δημιουργήστε μια εφαρμογή κοινωνικών μέσων

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

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

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

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

Παραδείγματα εφαρμογών: Instagram, Twitter, Snapchat, Reddit

Τεχνολογίες προς χρήση:

  • Δημιουργήστε την εφαρμογή React ή Next.js για να δημιουργήσετε ένα δυναμικό περιβάλλον εργασίας χρήστη για αναρτήσεις, επισημάνσεις "μου αρέσει" και μηνύματα
  • Firebase, AWS Amplify ή Hasura (χρησιμοποιώντας GraphQL με συνδρομές) για δεδομένα σε πραγματικό χρόνο
  • Λειτουργίες χωρίς διακομιστές όπως AWS Lambda ή Firebase Functions για ειδοποιήσεις
  • Cloudinary ή Firebase αποθήκευση για μεταφόρτωση εικόνων ή βίντεο

Δημιουργήστε μια εφαρμογή ηλεκτρονικού εμπορίου

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

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

Αντί για μια αγορά που παρέχει όλα τα πράγματα σε όλους τους ανθρώπους, πηγαίνετε με μια βιομηχανία που σας ενδιαφέρει. Για παράδειγμα, αν σας αρέσουν τα οικιακά είδη, μπορείτε να ρίξετε μια ματιά σε αυτό που έχουν δημιουργήσει οι Crate & Barrel ή Williams-Sonoma για τους ιστότοπούς τους.

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

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

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

Δημοφιλή παραδείγματα: Airbnb, Uber, UberEats, Doordash, Etsy, Udemy

Τεχνολογίες προς χρήση:

  • Δημιουργήστε την εφαρμογή React ή το Gatsby για τη βιτρίνα και την προβολή προϊόντων
  • Λωρίδα με τα στοιχεία αντίδρασης-λωρίδας για το χειρισμό της διαδικασίας πληρωμής
  • Λειτουργία χωρίς διακομιστή όπως το Netlify / AWS Lambda για τη διαχείριση της διαδικασίας ολοκλήρωσης αγοράς
  • Algolia για γρήγορη αναζήτηση προϊόντων
  • Snipcart για εύκολη δημιουργία καλαθιού και διαχείριση προϊόντων καλαθιού

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

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

Μερικά εξαιρετικά παραδείγματα αυτού, αντίστοιχα, θα ήταν το Netflix, το Audible και το Soundcloud ή το Spotify. Εάν συμπεριλάβετε τέχνη ή σχέδιο σε αυτήν την κατηγορία, θα μπορούσαμε να προσθέσουμε ιστότοπους όπως Behance ή Dribbble στη λίστα.

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

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

Δημοφιλή παραδείγματα: YouTube, Netflix, Audible, Spotify, Tiktok

Τεχνολογίες προς χρήση:

  • Δημιουργήστε την εφαρμογή React, Next.js ή Gatsby για να δημιουργήσετε το περιβάλλον εργασίας της εφαρμογής
  • πακέτο npm react-player για αναπαραγωγή πολυμέσων
  • Cloudinary ή Firebase storage για μεταφόρτωση μέσων
  • Algolia για αναζήτηση πολυμέσων με όνομα (π.χ. κομμάτι ήχου, βίντεο, ταινία κ.λπ.)

Δημιουργήστε μια εφαρμογή ανταλλαγής μηνυμάτων

Οι εφαρμογές ανταλλαγής μηνυμάτων είναι τεράστιες. Πιθανότατα να έχετε μια δωρεάν υπηρεσία ανταλλαγής μηνυμάτων όπως το WhatsApp ή το Viber στο τηλέφωνό σας ή μια ενσωματωμένη στην πλατφόρμα κοινωνικών μέσων σας όπως το Facebook Messenger. Υπηρεσίες όπως η ενδοεπικοινωνία με ανταλλαγή άμεσων μηνυμάτων είναι επίσης διαθέσιμες ως εφαρμογές ιστού, έτσι ώστε οι εταιρείες να μπορούν να παρέχουν άμεση υποστήριξη πελατών στους χρήστες τους.

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

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

Δημοφιλή παραδείγματα: WhatsApp, Viber, Discord, Messenger, Slack

Τεχνολογίες προς χρήση:

  • React Native ή React Native Web για δημιουργία ως εφαρμογή για κινητά ή υβριδική εφαρμογή (web + mobile)
  • Firebase, AWS Amplify ή Hasura (χρησιμοποιώντας συνδρομές GraphQL) για την αποστολή μηνυμάτων σε πραγματικό χρόνο
  • Cloudinary ή Firebase αποθήκευση για αποστολή μηνυμάτων με περιεχόμενο εικόνας ή βίντεο
  • πακέτο npm emoji-mart για ένα κλασσικό Slack-like emoji picker για να συμπεριλάβουν οι χρήστες στα μηνύματά τους

Δημιουργήστε μια εφαρμογή παραγωγικότητας

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

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

Μπορείτε να ξεκινήσετε με κάτι απλό, όπως ένα πρόγραμμα επεξεργασίας κειμένου για να γράψετε εύκολα μορφοποιημένο κείμενο με markdown και στη συνέχεια να το επεκτείνετε. Στη συνέχεια, προσθέστε τη δυνατότητα αποθήκευσης κειμένου ως μεμονωμένα αρχεία στον υπολογιστή σας. Μετά από αυτό, μια δυνατότητα για εξαγωγή αυτής της σήμανσης ως HTML για την εγγραφή μορφοποιημένων email.

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

Δημοφιλή παραδείγματα: Todoist, Notion, Things κ.λπ.

Τεχνολογίες προς χρήση:

  • Δημιουργήστε την εφαρμογή React για web ή το React Native για κινητά
  • npm package react-markdown για να εμφανιστεί η markdown στο περιβάλλον εργασίας της εφαρμογής σας
  • πακέτο npm react-codemirror2 για τη σύνταξη κώδικα στις σημειώσεις σας
  • πακέτο npm react-draggable για αναδιάταξη περιεχομένου λίστας κάνοντας κλικ και σύροντας

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

Θέλετε να γίνετε Master JS; Εγγραφείτε στο 2020 JS Bootcamp

Εγγραφείτε στο 2020 JS Bootcamp

Ακολουθήστε + Πείτε Γεια! ; Twitter • codeartistry.io