Πώς να χρησιμοποιήσετε το Systems Engineering για να δημιουργήσετε μια επιτυχημένη εφαρμογή ιστού

Εάν καταλαβαίνετε πώς λειτουργεί, είναι πιο εύκολο να το φτιάξετε

Έτσι ολοκληρώσατε τελικά το σχέδιό σας σε Adobe XD, Figma, Sketch ή InVision, αλλά εξακολουθείτε να αγωνίζεστε με την ιδέα του τρόπου υλοποίησης της λειτουργικότητας. Μην ανησυχείτε, έχουμε σκεφτεί για λίγο ότι ο μόνος τρόπος δημιουργίας εφαρμογών ιστού είναι να ξεκινήσετε με το σχεδιασμό UI / UX μαζί με πρωτότυπα σχέδια.

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

Επιτρέψτε μου να σας παρουσιάσω κάτι που έχει χρησιμοποιηθεί από εταιρείες στον τομέα της αεροδιαστημικής, της ναυτιλίας, της άμυνας, της αυτοκινητοβιομηχανίας και των τηλεπικοινωνιών για να κατανοήσει καλύτερα πώς συμπεριφέρονται και αλληλεπιδρούν τα συστήματα. Δεν αναφέρομαι στον αριθμό X συμβουλών και κόλπων για το πώς να βελτιώσετε το UI / UX, αλλά ποιες τεχνικές μπορείτε να εφαρμόσετε από το οπλοστάσιο της Μηχανικής Συστημάτων (SE) για τη δημιουργία επιτυχημένων εφαρμογών ιστού.

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

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

Ακολουθούν τέσσερις πρακτικές και σχετικές τεχνικές SE που μπορείτε να εφαρμόσετε.

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

Ένα πρακτικό παράδειγμα - διαδικτυακή πλατφόρμα μάθησης

Προκειμένου να κάνουμε τα παραδείγματα διαισθητικά και εφαρμόσιμα, θα δημιουργήσουμε μια πλαστή διαδικτυακή πλατφόρμα μάθησης. Μια πλατφόρμα που επιτρέπει στους χρήστες να δημοσιεύουν περιεχόμενο, την ίδια ιδέα με το Medium, το YouTube, το Unsplash κ.λπ.

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

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

1. Μην ξεκινήσετε με λεπτομερή σχεδιασμό

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

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

2. Ξεκινήστε με το πρόβλημα

Προσδιορίστε πρώτα το πρόβλημα: το περιβάλλον, ποιοι είναι οι ενδιαφερόμενοι, η συμπεριφορά και το πλαίσιο της εφαρμογής (το εύρος).

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

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

Λάβετε υπόψη ότι το πρόβλημα μας λέει ότι υπάρχει ανάγκη, αλλά δεν παρέχει λύσεις. Το πρόβλημα είναι αυτό που ενεργοποιεί τη διαδικασία ανάπτυξης. Ξεκινήστε λοιπόν με το πρόβλημα πρώτα προτού ξεκινήσετε με τις λύσεις.

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

1. Διάγραμμα περιβάλλοντος

Ορίστε τα όρια

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

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

Αποσαφήνιση σύνθετων εφαρμογών

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

2. Χρησιμοποιήστε το διάγραμμα περίπτωσης

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

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

Περιγράψτε τις αλληλεπιδράσεις

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

Επεξεργασία μιας υπόθεσης χρήσης (δράση)

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

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

Για παράδειγμα, μπορούμε να δημιουργήσουμε ένα διάγραμμα δραστηριότητας για να περιγράψουμε τα βήματα που απαιτούνται για την εκτέλεση της ενέργειας "μεταφόρτωση περιεχομένου". Υπάρχει ένα παράδειγμα αυτού στις ενότητες 3 και 4.

Εστίαση σε διαφορετικά σενάρια χρήσης

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

3. Διάγραμμα δραστηριότητας

Περιγράψτε τη συμπεριφορά

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

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

Περιγράψτε τα βήματα για την επίτευξη του στόχου

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

Εκφράστε ιδέες μέσω του σχεδιασμού

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

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

4. Διάγραμμα κατάστασης μηχανής

Ορίστε τις πολιτείες

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

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

Τελικές σκέψεις

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

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

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

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

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

  • Ένας πρακτικός οδηγός για τις ενότητες ES6
  • Τρόπος εκτέλεσης αιτημάτων HTTP χρησιμοποιώντας το Fetch API
  • Μια σύγκριση μεταξύ του Angular και του React
  • Ενισχύστε τις δεξιότητές σας με αυτές τις σημαντικές μεθόδους JavaScript
  • Ένα χαοτικό μυαλό οδηγεί σε χαοτικό κώδικα
  • Προγραμματιστές που θέλουν συνεχώς να μαθαίνουν νέα πράγματα
  • Μάθετε αυτές τις βασικές έννοιες Ιστού
  • Προγραμματίστε γρηγορότερα δημιουργώντας προσαρμοσμένες εντολές bash

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