Ξεκίνησα ως προγραμματιστής web front-end και μετά έγινα Flutter προγραμματιστής. Νομίζω ότι υπήρχαν κάποιες έννοιες που με βοήθησαν να υιοθετήσω ευκολότερα το Flutter. Υπήρχαν επίσης κάποιες νέες έννοιες που ήταν διαφορετικές.
Σε αυτό το άρθρο, θέλω να μοιραστώ την εμπειρία μου και να εμπνεύσω οποιονδήποτε αισθάνεται παράλυτο με την επιλογή ενός οικοσυστήματος έναντι του άλλου, δείχνοντας πώς οι έννοιες μεταφέρονται και οποιεσδήποτε νέες έννοιες μπορούν να μαθευτούν.
Έννοιες που μεταφέρθηκαν
Αυτή η ενότητα εμφανίζει μέρη όπου η ανάπτυξη web front-end και το Flutter μοιάζουν. Εξηγεί τις δεξιότητες που έχετε ήδη και είναι πλεονέκτημα για εσάς εάν ξεκινήσετε το Flutter.
1. Υλοποίηση διεπαφών χρήστη (UIs)
Για να εφαρμόσετε μια δεδομένη διεπαφή χρήστη στον ιστό διεπαφής, συνθέτετε στοιχεία HTML και το στυλ τους με CSS. Για να εφαρμόσετε UI στο Flutter, συνθέτετε widgets και στυλ τους με ιδιότητες.
Όπως το CSS, το Color Η τάξη στο Dart λειτουργεί με "rgba" και "hex". Επίσης, όπως το CSS, το Flutter χρησιμοποιεί pixel για μονάδες χώρου και μεγέθους.
Στο Flutter, έχουμε κλάσεις Dart και enums για όλες σχεδόν τις ιδιότητες CSS και τις τιμές τους. Για παράδειγμα:
Το Flutter έχει επίσης Column και Row widgets. Αυτά είναι το ισοδύναμο Flutter για display: flex σε CSS. Για διαμόρφωση justify-content και align-items στυλ, που χρησιμοποιείτε MainAxisAlignment και CrossAxisAlignment ιδιότητες. Για να ρυθμίσετε το flex-grow στυλ, τυλίξτε τα επηρεαζόμενα γραφικά στοιχεία του παιδιού(ων) του Column/Row, σε ένα Expanded or Flexible.
Για τις προηγμένες διεπαφές, το Flutter διαθέτει το CustomPaint τάξη – είναι να Flutter αυτό που το Canvas API αφορά την ανάπτυξη Ιστού. CustomPaint σας δίνει έναν ζωγράφο για να σχεδιάσετε οποιοδήποτε περιβάλλον χρήστη όπως θέλετε. Συνήθως θα χρησιμοποιείτε CustomPaint όταν θέλετε κάτι που είναι πραγματικά πολύπλοκο. Επίσης, CustomPaint είναι ο καλύτερος τρόπος όταν ένας συνδυασμός γραφικών στοιχείων δεν λειτουργεί.
2. Ανάπτυξη για πολλαπλούς Αναλύσεις οθόνης
Οι ιστότοποι λειτουργούν σε προγράμματα περιήγησης και οι εφαρμογές για κινητά εκτελούνται σε συσκευές. Ως εκ τούτου, κατά την ανάπτυξη για οποιαδήποτε πλατφόρμα, πρέπει να έχετε κατά νου την πλατφόρμα. Κάθε πλατφόρμα εφαρμόζει τις ίδιες δυνατότητες (κάμερα, τοποθεσία, ειδοποιήσεις κ.λπ.) με διαφορετικούς τρόπους.
Ως προγραμματιστής ιστού, σκέφτεστε την ανταπόκριση του ιστότοπού σας. Χρησιμοποιείτε ερωτήματα πολυμέσων για να χειριστείτε την εμφάνιση του ιστότοπού σας σε μικρότερες και ευρύτερες οθόνες.
Περνώντας από την ανάπτυξη ιστού για κινητά στο Flutter, έχετε το MediaQuery βοηθητική τάξη. ο MediaQuery Η τάξη σας δίνει την τρέχουσα συσκευή orientation (τοπίο ή πορτρέτο). Σας δίνει επίσης την τρέχουσα θύρα προβολής size, τη devicePixelRatio, μεταξύ άλλων πληροφοριών συσκευής. Μαζί, αυτές οι τιμές σάς δίνουν πληροφορίες σχετικά με τη διαμόρφωση της κινητής συσκευής. Μπορείτε να τα χρησιμοποιήσετε για να αλλάξετε την εμφάνιση της εφαρμογής σας για κινητά σε διάφορα μεγέθη οθόνης.
3. Εργασία με Debuggers, Editors και Command Line Tools
Τα προγράμματα περιήγησης για επιτραπέζιους υπολογιστές διαθέτουν εργαλεία προγραμματιστών. Αυτά τα εργαλεία περιλαμβάνουν έναν επιθεωρητή, μια κονσόλα, μια οθόνη δικτύου κ.λπ. Αυτά τα εργαλεία βελτιώνουν τη διαδικασία ανάπτυξης ιστού. Το Flutter έχει επίσης τα δικά του DevTools. Διαθέτει τον επιθεωρητή widget, τον εντοπισμό σφαλμάτων, την οθόνη δικτύου, μεταξύ άλλων χαρακτηριστικών.
Η υποστήριξη IDE είναι επίσης παρόμοια. Το Visual Studio Code είναι ένα από τα πιο δημοφιλή IDE για ανάπτυξη ιστού. Υπάρχουν πολλές επεκτάσεις που σχετίζονται με τον ιστό για τον κώδικα VS. Το Flutter υποστηρίζει επίσης VS Code. Επομένως, κατά τη μετάβαση, δεν χρειάζεται να αλλάξετε το IDE. Υπάρχουν επεκτάσεις Dart και Flutter για VS Code. Το Flutter λειτουργεί επίσης καλά με το Android Studio. Τόσο το Android Studio όσο και το VS Code υποστηρίζουν το Flutter DevTools. Αυτές οι ενσωματώσεις IDE κάνουν το Flutter tooling ολοκληρωμένο.
Τα περισσότερα πλαίσια JavaScript front-end συνοδεύονται από το δικό τους διεπαφή γραμμής εντολών (CLI). Για παράδειγμα: Γωνιακό CLI, Δημιουργία εφαρμογής React, Προβολή CLI, κ.λπ. Το Flutter συνοδεύεται επίσης από αποκλειστικότητα CLI. Το Flutter CLI σάς επιτρέπει να δημιουργείτε, να δημιουργείτε και να αναπτύσσετε έργα Angular. Διαθέτει εντολές για την ανάλυση και τη δοκιμή έργων Flutter.
Έννοιες που ήταν νέες
Αυτή η ενότητα μιλά για έννοιες που σχετίζονται με το Flutter που είναι πιο εύκολες ή ανύπαρκτες στην ανάπτυξη ιστού. Εξηγεί ιδέες που πρέπει να έχετε κατά νου καθώς μπαίνετε στο Flutter.
Πώς να χειριστείτε την κύλιση
Κατά την ανάπτυξη για τον Ιστό, η προεπιλεγμένη συμπεριφορά κύλισης αντιμετωπίζεται από προγράμματα περιήγησης ιστού. Ωστόσο, είστε ελεύθεροι να προσαρμόσετε την κύλιση με CSS (χρησιμοποιώντας overflow).
Αυτό δεν συμβαίνει στο Flutter. Οι ομάδες γραφικών στοιχείων δεν πραγματοποιούν κύλιση από προεπιλογή. Όταν αντιληφθείτε ότι οι ομάδες γραφικών στοιχείων ενδέχεται να υπερχειλίσουν, πρέπει να διαμορφώσετε προληπτικά την κύλιση.
Στο Flutter, διαμορφώνετε την κύλιση χρησιμοποιώντας περίεργα γραφικά στοιχεία που επιτρέπουν την κύλιση. Για παράδειγμα: ListView, SingleChildScrollView, CustomScrollView, κ.λπ. Αυτά τα γραφικά στοιχεία με δυνατότητα κύλισης σάς δίνουν εξαιρετικό έλεγχο στην κύλιση. Με CustomScrollView, μπορείτε να διαμορφώσετε έμπειρους και πολύπλοκους μηχανισμούς κύλισης εντός της εφαρμογής.
Από την πλευρά του Flutter, χρησιμοποιώντας ScrollViews είναι αναπόφευκτη. Android και iOS έχουν ScrollView και UIScrollView για να χειριστείτε την κύλιση. Το Flutter χρειάζεται έναν τρόπο να ενοποιήσει την εμπειρία απόδοσης και προγραμματιστή χρησιμοποιώντας το ScrollViews, πολύ.
Μπορεί να σας βοηθήσει να σταματήσετε να σκεφτόμαστε τη ροή της δομής του εγγράφου και αντ' αυτού να θεωρήσετε την εφαρμογή ως ανοιχτό καμβά για τους εγγενείς μηχανισμούς ζωγραφικής μιας συσκευής.
2. Ρύθμιση του αναπτυξιακού σας περιβάλλοντος
Για να δημιουργήσετε τον απλούστερο ιστότοπο, μπορείτε να δημιουργήσετε ένα αρχείο με α .html επέκταση και ανοίξτε το σε ένα πρόγραμμα περιήγησης. Το Flutter δεν είναι τόσο απλό. Για να χρησιμοποιήσετε το Flutter, πρέπει να έχετε εγκαταστήσει το Flutter SDK και έχουν διαμορφώσει το Flutter για μια δοκιμαστική συσκευή. Επομένως, εάν θέλετε να κωδικοποιήσετε το Flutter για Android, πρέπει να το κάνετε ρυθμίστε το Android SDK. Θα χρειαστεί επίσης να διαμορφώσετε τουλάχιστον μία συσκευή Android (έναν εξομοιωτή Android ή μια φυσική συσκευή).
Αυτή είναι η ίδια περίπτωση για συσκευές Apple (iOS και macOS). Μετά την εγκατάσταση του Flutter σε Mac, πρέπει να ρυθμίσετε το Xcode πριν προχωρήσετε περαιτέρω. Θα χρειαστείτε επίσης τουλάχιστον έναν προσομοιωτή iOS ή ένα iPhone για να δοκιμάσετε το Flutter στο iOS. Το Flutter για επιτραπέζιους υπολογιστές είναι επίσης μια σημαντική ρύθμιση. Στα Windows, πρέπει να ρυθμίσετε το Windows Development SDK με Visual Studio (όχι VS Code). Στο Linux, θα εγκαταστήσετε περισσότερα πακέτα.
Χωρίς επιπλέον ρύθμιση, το Flutter λειτουργεί σε προγράμματα περιήγησης. Ως αποτέλεσμα, θα μπορούσατε να παραβλέψετε την πρόσθετη ρύθμιση για τις συσκευές προορισμού. Στις περισσότερες περιπτώσεις, θα χρησιμοποιούσατε το Flutter για την ανάπτυξη εφαρμογών για κινητά. Ως εκ τούτου, θα θέλατε να ρυθμίσετε τουλάχιστον το Android ή το iOS. Το Flutter συνοδεύεται από το flutter doctor εντολή. Αυτή η εντολή αναφέρει την κατάσταση της εγκατάστασης ανάπτυξης. Με αυτόν τον τρόπο, ξέρετε τι να εργαστείτε, στη ρύθμιση, εάν χρειάζεται.
Αυτό δεν σημαίνει ότι η ανάπτυξη στο Flutter είναι αργή. Το Flutter συνοδεύεται από έναν ισχυρό κινητήρα. ο flutter run Η εντολή επιτρέπει την επαναφόρτωση εν θερμώ στη δοκιμαστική συσκευή κατά την κωδικοποίηση. Αλλά τότε θα χρειαστεί να πατήσετε R για να επαναφορτώσετε πραγματικά. Αυτό δεν είναι θέμα. Επέκταση Flutter's VS Code επιτρέπει την αυτόματη επανάληψη φόρτωσης σε αλλαγές αρχείων.
3. Συσκευασία και ανάπτυξη
Η ανάπτυξη ιστοτόπων είναι φθηνότερη και ευκολότερη σε σύγκριση με την ανάπτυξη εφαρμογών για κινητά. Όταν αναπτύσσετε ιστότοπους, έχετε πρόσβαση σε αυτούς μέσω ονομάτων τομέα. Αυτά τα ονόματα τομέα ανανεώνονται συνήθως ετησίως. Ωστόσο, είναι προαιρετικά.
Σήμερα, πολλές πλατφόρμες προσφέρουν δωρεάν φιλοξενία.
Για παράδειγμα: DigitalOcean σας δίνει έναν δωρεάν υποτομέα .ondigitalocean.com.
Μπορείτε να χρησιμοποιήσετε αυτούς τους τομείς εάν δημιουργείτε έναν ιστότοπο τεκμηρίωσης. Μπορείτε επίσης να τα χρησιμοποιήσετε όταν δεν ανησυχείτε για το branding.
Στον κόσμο του Flutter με τις εφαρμογές για κινητά, συνήθως στις περισσότερες περιπτώσεις αναπτύσσετε την εφαρμογή σας σε δύο μέρη.
Πρέπει να εγγράψετε έναν λογαριασμό προγραμματιστή σε καθεμία από αυτές τις πλατφόρμες. Η εγγραφή ενός λογαριασμού προγραμματιστή απαιτεί χρέωση ή συνδρομή και επαλήθευση ταυτότητας.
Για το App Store, πρέπει να εγγραφείτε στο πρόγραμμα Apple Developer. Πρέπει να διατηρήσετε ετήσια συνδρομή 99 $. Για το Google Play, πρέπει να κάνετε ένα εφάπαξ πληρωμή 25 $ για τον λογαριασμό.
Αυτά τα καταστήματα ελέγχουν κάθε εφαρμογή που ελέγχεται προτού δημοσιευτεί.
Λάβετε επίσης υπόψη ότι οι χρήστες δεν καταναλώνουν εύκολα ενημερώσεις εφαρμογών. Οι χρήστες πρέπει να ενημερώνουν ρητά τις εγκατεστημένες εφαρμογές. Αυτό έρχεται σε αντίθεση με τον ιστό όπου όλοι μπορούν απλώς να δουν την πιο πρόσφατη αναπτυγμένη έκδοση ενός ιστότοπου.
Η διαχείριση αναπτυγμένων εφαρμογών είναι σχετικά πιο απαιτητική από τη διαχείριση αναπτυγμένων ιστότοπων. Ωστόσο, αυτό δεν πρέπει να σας τρομάζει. Εξάλλου, υπάρχουν εκατομμύρια εφαρμογές που έχουν αναπτυχθεί και στα δύο καταστήματα, ώστε να μπορείτε να προσθέσετε και τη δική σας.
Πρόσθετες σκέψεις για το Flutter
Το Flutter είναι ένα εργαλείο πολλαπλών πλατφορμών για τη δημιουργία εφαρμογών για επιτραπέζιους υπολογιστές, κινητά ή web. Οι εφαρμογές Flutter είναι τέλειες για pixel. Το Flutter ζωγραφίζει την ίδια διεπαφή χρήστη σε κάθε εφαρμογή, ανεξάρτητα από την πλατφόρμα-στόχο. Αυτό συμβαίνει επειδή κάθε εφαρμογή Flutter περιέχει τη μηχανή Flutter. Αυτή η μηχανή αποδίδει τον κώδικα διεπαφής χρήστη Flutter. Το Flutter παρέχει έναν καμβά για κάθε συσκευή και σας επιτρέπει να ζωγραφίζετε όπως θέλετε. Ο κινητήρας επικοινωνεί με την πλατφόρμα στόχο για να χειριστεί συμβάντα και αλληλεπιδράσεις.
Το Flutter είναι αποτελεσματικό. Έχει επίπεδα υψηλών επιδόσεων. Αυτό συμβαίνει επειδή είναι κατασκευασμένο με Dart και αξιοποιεί τα χαρακτηριστικά του Dart.
Με αυτά τα πολλά πλεονεκτήματα, το Flutter είναι μια καλή επιλογή για πολλές εφαρμογές. Οι εφαρμογές πολλαπλών πλατφορμών εξοικονομούν χρήματα και χρόνο κατά την παραγωγή και τη συντήρηση. Ωστόσο, το Flutter (και οι λύσεις μεταξύ πλατφορμών) ενδέχεται να μην είναι η βέλτιστη επιλογή σε ορισμένες περιπτώσεις.
Μην χρησιμοποιείτε το Flutter εάν θέλετε οι χρήστες να χρησιμοποιούν εργαλεία προγραμματιστών πλατφόρμας με την εφαρμογή σας. Τα εργαλεία προγραμματιστών πλατφόρμας εδώ σημαίνουν εργαλεία για συγκεκριμένες συσκευές, όπως επιλογές προγραμματιστών Android. Περιλαμβάνει επίσης εργαλεία προγραμματιστών προγράμματος περιήγησης.
Μην χρησιμοποιείτε το Flutter για τον ιστό, εάν περιμένετε οι επεκτάσεις του προγράμματος περιήγησης να αλληλεπιδρούν με τον ιστότοπο.
Επίσης, μην χρησιμοποιείτε το Flutter για ιστότοπους με μεγάλο περιεχόμενο.
Συμπέρασμα
Αυτή ήταν μια ανασκόπηση των δεξιοτήτων που μεταφέρονται από την ανάπτυξη web front-end στην εργασία με το Flutter. Συζητήσαμε επίσης έννοιες ανάπτυξης εφαρμογών που πρέπει να μάθετε ως προγραμματιστής ιστού.
Το Flutter είναι απλούστερο για τους προγραμματιστές ιστού, επειδή και οι δύο περιλαμβάνουν την εφαρμογή διεπαφής χρήστη. Αν ξεκινήσετε το Flutter, θα ανακαλύψετε ότι σας προσφέρει μια καλή εμπειρία προγραμματιστή. Δοκιμάστε το Flutter! Χρησιμοποιήστε το για να δημιουργήσετε εφαρμογές για κινητά και, φυσικά, να προβάλετε αυτό που δημιουργείτε.
Cheers!
