Κατασκευάστε εφαρμογές κινητής τηλεφωνίας cross-platform με την πτερυγισμό της Google

Υπήρξαν πολλά κινητά πλαίσια εγκάρσιας πλατφόρμας κατά τη διάρκεια των ετών, με σταθερές βελτιώσεις στην εμπειρία και την απόδοση του προγραμματιστή καθ 'όλη τη διάρκεια. Το πτερυγισμό της Google Είναι μια νέα προσθήκη στο πακέτο και είναι ιδιαίτερα ενδιαφέρουσα επειδή αντί να χρησιμοποιείτε ένα JavaScript «Bridge» όπως πολλά πλαίσια (όπως η αντιδράσει ντόπιος), καταρτίζει στον αληθινό μητρική κώδικα.

Μπορείτε να μάθετε λίγο για το πώς λειτουργεί στο εισαγωγικό βίντεο παρακάτω, ή να διαβάσετε για έναν οδηγό βήμα προς βήμα για να ξεκινήσετε με το πτερύγιο. Για περισσότερες συμβουλές, ρίξτε μια ματιά στη συλλογή μας για τα μαθήματα που εξηγούν Πώς να οικοδομήσουμε μια εφαρμογή . Ή, αν δημιουργείτε έναν ιστότοπο, επιλέξτε ένα οικοδόμος ιστότοπου και web hosting Υπηρεσία από τους οδηγούς μας. Δεν είναι ευχαριστημένος με την αποθήκευση σας; Εδω είναι μερικά αποθήκευση σύννεφων επιλογές.

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

01. Ρυθμίστε το

Θα χρειαστεί να κατεβάσετε και να εγκαταστήσετε μερικά πράγματα προτού να μπορέσετε να χρησιμοποιήσετε το flutter:

• Xcode για υποστήριξη iOS
• Android Studio για υποστήριξη Android
• Android SDK (κατεβάστε μέσω του Android Studio μόλις δημιουργήσετε ένα νέο έργο)

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

Τώρα είστε έτοιμοι να ξεκινήσετε με πτερυγισμό. Κατεβάστε το Flutter sdk . Να το εξαγάγετε για οπουδήποτε θέλετε να εγκατασταθεί. Πρέπει να ενημερώσουμε το μονοπάτι μας, έτσι ώστε ο Maco να μπορεί να βρει flutter όπου κι αν το επικαλέσετε. Ανοίξτε (ή δημιουργήστε) $ Home / .bash_profile :

sudo atom $HOME/.bash_profile

Προσθέστε τώρα τον κατάλογο flutter / bin στο δικό σας $ Διαδρομή :

export PATH=/Users/simon/dev/flutter/bin:$PATH

Εκτελέστε μια εντολή Shell για να ανανεώσετε το προφίλ Bash:

source $HOME/.bash_profile

Τώρα μπορούμε να αρχίσουμε να χρησιμοποιούμε το flutter cli. Το πρώτο πράγμα που πρέπει να κάνετε είναι να βεβαιωθείτε ότι έχετε την τελευταία έκδοση:

flutter upgrade

02. Κατεβάστε τυχόν προβλήματα

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

flutter doctor

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

Μόλις το εργαλείο είναι ευχαριστημένο με το Flutter, το Android Toolchain, το toolchain hool και το Android Studio, είστε καλό να πάτε. Μην ανησυχείτε για τις συνδεδεμένες συσκευές για τώρα.

Το Xcode μπορεί να απαιτήσει κάποια επιπλέον βήματα στο κέλυφος για να το εγκαταστήσετε πλήρως:

 sudo xcode-select - wwitch /applications/xcode.app/contents/developer
Εγκατάσταση Brew - Sead LibimoBiledEvice
Εγκαταστήστε το iDeviceInstaller
BREW Εγκαταστήστε CocoApods
Ρύθμιση POD 

Και το Android Studio συχνά χρειάζεται την αποδοχή της συμφωνίας άδειας χρήσης:

 Ο γιατρός πτερυγίζει - Οδρενοειδείς άδειες 

03. Βρείτε ένα IDE και ξεκινήστε ένα νέο έργο

Τώρα η πτερυγία έχει ρυθμιστεί, θα θελήσετε να λειτουργήσετε ένα IDE. Υπάρχουν διαθέσιμα plugins για το Android Studio και Intellij. Θα πάμε με τον κώδικα VS, το οποίο έχει επίσης το δικό του plugin flutter.

Ξεκινήστε τον κωδικό VS και κάντε κλικ στην προβολή & GT; Παλέτα εντολών. Πληκτρολογήστε 'Εγκατάσταση' και επιλέξτε τις επεκτάσεις: Εγκατάσταση της δράσης επέκτασης. Αναζήτηση για 'flutter' και εγκαταστήστε το plugin flutter. Μόλις γίνει, επανεκκινήστε τον κωδικό VS.

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

04. Ρυθμίστε τις εικονικές συσκευές

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

Εάν δεν έχετε προσομοιωτές, εκτελέστε τα παρακάτω στο τερματικό για να ανοίξετε τον προσομοιωτή IOS για πρώτη φορά:

 Open -A Simulator 

Στη συνέχεια, θα πρέπει να δείτε έναν προσομοιωτή IOS διαθέσιμο όταν κάνετε επανεκκίνηση έναντι κώδικα.

Το Android είναι πιο περίπλοκο. Τοποθετήστε το Android Studio και μέσα σε ένα έργο Android, κάντε κλικ στην επιλογή Εργαλεία & GT; Android & GT; Διαχειριστής AVD. Επιλέξτε Δημιουργία εικονικής συσκευής.

Επιλέξτε τη συσκευή για να μιμηθεί - για παράδειγμα ένα pixel Google 2. Κάντε κλικ στο κουμπί Επόμενο και μπορείτε επίσης να επιλέξετε μια εικόνα συστήματος (I.E. OS έκδοση) για λήψη. Στην επόμενη σελίδα υπό την εξομοιούμενη απόδοση, επιλέξτε Hardware - Gles 2.0 για να ενεργοποιήσετε την επιτάχυνση γραφικών υλικού στον εξομοιωτή. Ολοκληρώστε τη διαδικασία.

Μόλις δημιουργήσετε την εικονική συσκευή στο Android Studio, επανεκκίνηση του κώδικα VS και θα δείτε τον εξομοιωτή του Android εμφανίζεται παράλληλα με τον προσομοιωτή IOS στη λίστα συσκευών VS κώδικα.

Τώρα, αν κάνετε κλικ σε καμία συσκευή, μπορείτε να επιλέξετε μια συσκευή iOS ή Android και ένα εικονικό τηλέφωνο θα πυροβολήσει στην επιφάνεια εργασίας σας. Δοκιμάστε το με ένα iPhone x προσομοιωτή.

04. Δοκιμάστε την εφαρμογή εκκίνησης

Τώρα ο προσομοιωτής εκτελείται, μπορείτε να δοκιμάσετε την εφαρμογή εκκίνησης. Χτυπήστε το F5 ή κάντε κλικ στο Debug & GT; Ξεκινήστε το σφάλμα. Η εφαρμογή θα φορτωθεί στον προσομοιωτή και μπορείτε να δοκιμάσετε να αλληλεπιδράσετε με αυτό. Να είστε υπομονετικοί αν δεν συμβεί αμέσως, καθώς μπορεί να πάρει κάποιο χρόνο για να χτίσει.

Πριν μπορέσουμε να κάνουμε το ίδιο στο Android, πρέπει να εγκαταστήσουμε εξαρτήσεις του Gradle για το έργο μας (μια μικρή απόχρωση πτερυγίων τώρα). Μεταβείτε στον κατάλογο ρίζας του έργου και εκτελέστε:

 Android / Gradlew 

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

Ένα μεγάλο χαρακτηριστικό της πτερυγίων είναι ότι υποστηρίζει "Hot reloading" - δηλαδή, μπορείτε να τροποποιήσετε την πηγή σας και να δείτε τις αλλαγές που αντανακλώνται στον προσομοιωτή αμέσως. Σε main.dart , ας κάνουμε μερικές αλλαγές στην τάξη myapp ενώ ο προσομοιωτής iPhone x τρέχει:

 Presentswatch: Χρώματα.Green,
Αρχική: Νέα MyShomePage (Τίτλος: "Συνταγή"), = 

Θα πρέπει να δείτε τις αλλαγές να ισχύουν αμέσως μόλις αποθηκεύσετε.

06. Εξερευνήστε το Σύστημα Widget Flutter

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

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

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

Η μέθοδος επιστρέφει ένα Υλικό Widget, η οποία αντιπροσωπεύει μια εφαρμογή που χρησιμοποιεί το σχεδιασμό υλικού της Google. Αυτό με τη σειρά του έχει αρκετές ιδιότητες, οι οποίες είναι οι ίδιες widgets: Θεματίδια ορίζει το οπτικό στυλ που θα χρησιμοποιηθεί και Myhomepage είναι ένα προσαρμοσμένο widget που ορίζεται περαιτέρω το main.dart αρχείο που περιέχει το σώμα της εφαρμογής.

07. Επεξεργαστείτε το περιεχόμενό σας

Σε αντίθεση με το απάτριό Μυαλό , Myhomepage είναι ένα σύγχρονο widget. Αυτό σημαίνει ότι η συμπεριφορά του ορίζεται από το _Myhomepagesate Κατηγορία, επιτρέποντάς του να αποθηκεύει τις πληροφορίες και να αλλάξει ανάλογα, όπως όταν πατάτε το κουμπί στην εφαρμογή.

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

 Η κλάση _myhomepagesate επεκτείνει το State & LT; MyHomepage & GT; {
 @καταπατώ
 Widget Build (BuildContext πλαίσιο) {
   Επιστρέψτε το νέο ικρίωμα (
     Appbar: Νέα appbar (
       Τίτλος: Νέο κείμενο (widget.title),
     ),
     Σώμα: Νέο δοχείο (
       Διακόσμηση: Νέο BoxCoration (Χρώμα: Χρώματα.Brown 
),
       Παιδί: Νέα Συγγραφή ()
     )
   )
 }
} 

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

 Το Class Baswidget επεκτείνει το Statelgeendwidget {
 @καταπατώ
 Widget Build (BuildContext πλαίσιο) {
   Λίστα & LT; Widget & GT; widgets = νέα λίστα & lt; widget & gt; ();
   Επιστρέψτε νέα Listview (παιδιά: widgets);
 }
} 

08. Τοποθετήστε ορισμένα περιουσιακά στοιχεία

Στη συνέχεια, ας φορτώσουμε κάποια περιουσιακά στοιχεία με την εφαρμογή, ώστε να μπορέσουμε να τα προσθέσουμε στο Προβολή λίστας widget μέσα Συνύπαρος . Τα στατικά στοιχεία ενεργητικού για μια εφαρμογή καθορίζονται στο pubspec.yaml Κάτω από την ενότητα «Flutter»:

 Περιουσιακά στοιχεία:
   - img / breakfast.jpg
   - img / curry.jpg
   - img / pasta.jpg 

Θα δημιουργήσουμε επίσης μια απλή δομή δεδομένων στο main.dart, το συνδυασμό εικόνων με χορδές για να λειτουργήσει ως μικρογραφία και περίληψη για συνταγές.

 var συνταγές = {
   'Breakfast.jpg': 'Ξεκινήστε την ημέρα δικαίωμα με αυτό το θρεπτικό πρωινό.',
   'pasta.jpg': «wow τους φίλους σας κάνοντας τα δικά σας φρέσκα ζυμαρικά».
   'curry.jpg': 'Δείξτε τις μαγειρικές δεξιότητές σας με ένα πλούσιο κάρυ.',
} · 

09. Τελειώστε

Τέλος, ας ενημερώσουμε Συνύπαρος Για να δημιουργήσετε μια λίστα με widget που εμφανίζουν τις συνταγές. Χρησιμοποιούμε Image.Asset Για να φορτώσετε τα στατικά περιουσιακά στοιχεία που συμπεριλήφναμε pubspec.yaml .

 Συνταγές.Fooean ((Thumb, Caption) = & GT; Widgets.Add
       Νέο δοχείο (παιδί:
         Νέο padding (padding:
           Νέα EdgeInsets.Όλα (16,0), το παιδί:
             Νέος λίστας (
               Οδηγήστε: image.Asset ('img /' + thumb, πλάτος: 80.0),
               Τίτλος: Κείμενο (λεζάντα)
             )
           ),
           διακόσμηση:
             νέο boxcoration (
                 σύνορα: νέα σύνορα (
                     Κάτω: Νέο Borderside (Χρώμα: Χρώματα.Brown)
                 ),
                 Χρώμα: Χρώματα.Brown 

             )
       )
     )
) · 

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

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

Διαβάστε περισσότερα:

• Πάρτε το κεφάλι σας να αντιδράσει με αυτούς τους πέντε παράγοντες
• 11 δημιουργικές δωρεάν εφαρμογές iPhone για τους σχεδιαστές
• Πώς να σχεδιάσετε εικονίδια εφαρμογών