Πώς δημιούργησα την πρώτη μου εφαρμογή πολλαπλών πλατφορμών για κινητά χρησιμοποιώντας JavaScript και XDK

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

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

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

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

Άρχισα λοιπόν να ξανακαλύπτω. Επέλεξα το Free Code Camp, ή τελικά με επέλεξε. Ειλικρινά δεν είμαι σίγουρος ποιο. Το «πώς» πήδηξα στα νερά του Free Code Camp δεν είναι σημαντικό για αυτήν την ιστορία. Ωστόσο, είναι σημαντικές βασικές πληροφορίες.

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

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

Αλλά, εδώ είναι το τρίψιμο: Βιάζομαι πολύ. Δεν έχω χρόνο να μάθω. Χρειάζομαι πραγματικά ένα εργαλείο ανάπτυξης που πραγματικά λειτουργεί έξω από το κουτί με ελάχιστη προσπάθεια. Υποθέτω ότι έχω συνηθίσει εμπορικά προϊόντα από αυτή την άποψη.

Επιστροφή στο Free Code Camp. Το μόνο που θα πω είναι, έφτασα στο Ziplines. Και τα τελείωσα. Είμαι επίσης λίγο έλλειμμα προσοχής. Μόλις ολοκλήρωσα το Ziplines, συνειδητοποίησα ότι: «Μακριά, μπορώ να δημιουργήσω εφαρμογές μέσω Ιστού τώρα». Τώρα ήμουν ικανός σε γλώσσες ανοιχτού κώδικα: σήματα και γλώσσες scripting όπως HTML, CSS και JavaScript. Και χρειαζόμουν ένα διάλειμμα από το σχολείο σε αυτό το στάδιο.

Έτσι, κοίταξα ξανά για εργαλεία που μπορεί να ανταποκρίνονται στην υπόσχεση ανάπτυξης εφαρμογών πολλαπλών πλατφορμών. Και, μετά από λίγη προσπάθεια, γνώρισα ξανά το Intel XDK (ναι, το είχα εγκαταστήσει στο μηχάνημά μου για περίπου 6 μήνες περίπου, καθισμένος αδρανής). Για να είμαι δίκαιος, οι δεξιότητές μου στο σενάριο έλειπαν κάπως όταν το εγκατέστησα για πρώτη φορά (παρά την πλήρη κατανόησή μου για το VBA, την αντικειμενοστραφή κωδικοποίηση και τη σχεσιακή ολοκλήρωση βάσεων δεδομένων).

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

Λοιπόν, γιατί επέλεξα το Intel XDK έναντι των ανταγωνιστών του. Με τα χρόνια έχω δοκιμάσει και πετάξω περίπου δέκα διαφορετικά εργαλεία. Ακολουθεί μια σύνοψη των εμπειριών μου:

  • Ένα ανταγωνιστικό προϊόν δεν επέτρεψε στον τελικό χρήστη (εμένα) να επεξεργαστεί τη δική μου εφαρμογή. Θα μπορούσα να αρχίσω να δημιουργώ ένα, αλλά τότε δεν υπήρχε γνωστός τρόπος να το επεξεργαστώ. Αυτό δεν είναι πρόβλημα που αναμένει κανείς - ποτέ. Ξέρετε, μετά από ένα διάλειμμα, όπως, δεν ξέρω, να κλείσω τον υπολογιστή μου ώστε να μπορώ να κοιμηθώ και μετά να επιστρέψω την επόμενη μέρα για να συνεχίσω να χτίζω την εφαρμογή μου - αλλά δεν υπάρχει τρόπος πρόσβασης στην εργασία μου στο μηχάνημά μου; Μαντέψτε πόσο διαρκεί αυτό το εργαλείο ανάπτυξης στο μηχάνημά μου… Ναι, αναζήτησα υποστήριξη Οι απαντήσεις που βρήκα με απογοήτευσαν ακόμη περισσότερο από το να μην μπορώ να επεξεργαστώ τον δικό μου κωδικό. Γκραρ…
  • Τεκμηρίωση: Δοκίμασα ένα άλλο εργαλείο όπου η τεκμηρίωση ήταν περίπου 12 μηνών (σύμφωνα με τη δημοσιευμένη ημερομηνία). Εκείνη την εποχή, η Κόρδοβα είχε μετακομίσει χρόνια μετά το παρελθόν όπου έμεινε αυτό το παλιό έγγραφο. Και, όπως τόσα πολλά πράγματα που καλύπτονται από τη σκόνη, οι οδηγίες για το πώς να χρησιμοποιήσω αυτό το συγκεκριμένο εργαλείο που πραγματικά σκέφτομαι δεν ήταν τόσο σχετικές ή χρήσιμες. Στον κάδο πήγε.
  • Άλλα εργαλεία που βασίζονται σε διακομιστή με κάνουν να είμαι νευρικός. Τι συμβαίνει εάν ο διακομιστής πέσει ή ο υπεύθυνος οργανισμός χρεοκοπήσει; Πώς μπορώ να επαναφέρω τον καταραμένο κωδικό μου; Δεν μου αρέσει ο κίνδυνος. Ο κόσμος γυρίζει πολύ γρήγορα. Τα πράγματα πέφτουν συνεχώς. Δεν χρειάζομαι το IP μου να απομακρύνεται από τον κόσμο εξαιτίας της κακής επιλογής φιλοξενίας εφαρμογών εκ μέρους μου. Και οι λύσεις που βασίζονται μόνο σε διακομιστές τείνουν να κοστίζουν πολύ περισσότερο από ό, τι μπορώ να αντέξω. Και ποιος κατέχει πραγματικά το IP όταν ο κωδικός που γράφω φιλοξενείται σε υπολογιστή κάποιου άλλου;

Περισσότερα για το Intel XDK

Όταν έπαιζα με αυτήν την έκδοση του Intel XDK, ανακάλυψα, ευχάριστα, ότι θα μπορούσα να τρέξω την εφαρμογή μου. Πρώτα πάει. Και δεν είναι μια απλή εφαρμογή - χρησιμοποιεί γεωγραφική τοποθεσία για να αναζητήσει κάποια πράγματα. Και άλλα τριαξικά πράγματα. Ήξερα εκ των προτέρων ότι θα χρειαζόμουν κάποια πρόσθετα. Το να παίζω με το PhoneGap νωρίτερα στο κομμάτι με έφερε στην Cordova (το PhoneGap ήταν δωρεάν, τώρα ανήκει στην Adobe, όχι τόσο δωρεάν). Αυτό ήταν πριν από μήνες. Κοιτάζοντας την Intel, το XDK πρότεινε ότι ορισμένα πράγματα θα μπορούσαν να γίνουν από τον ιδιόκτητο κώδικα της Intel, και ίσως κάποια θα χρειαζόταν να τα χειριστούν με πρόσθετα τρίτων (από την Cordova για παράδειγμα).

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

Λατρεύω το Intel XDK - επειδή λειτουργεί - αλλά, όπως και πολλά εργαλεία σήμερα, η τεκμηρίωση δεν συμβαδίζει με τη λειτουργικότητα. Και δεν είναι ότι η τεκμηρίωση είναι απαραίτητα πολύ πίσω. Στην περίπτωση της Intel XDK, η τεκμηρίωση είναι περιεκτική - και ακριβής (ναι), αλλά, λίγο δύσκολο να βρεθεί (aww).

Λοιπόν, ναι, προσπαθώ να χρησιμοποιήσω αυτήν την κλήση και η εφαρμογή μου λειτουργεί-ish. Και δεν θυμάμαι - έκανα αναβάθμιση στην επόμενη κυκλοφορία και η εφαρμογή μου έσπασε, ή ο κώδικάς μου απλώς δεν λειτούργησε τέλεια και επίσης αναβάθμισα στην επόμενη έκδοση (ναι, η Intel προχώρησε σε αναβάθμιση σε Intel XDK περίπου ένα έως δύο φορές το μήνα - προσπαθήστε να ακολουθείτε αυτό το πρόγραμμα ως μοναδικός έμπορος).

Στην πραγματικότητα, σχεδόν εγκατέλειψα το Intel XDK. Αλλά, σκέφτηκα: "Bugger αυτό" (είμαι Αυστραλός). Και: «Έχω σχεδόν ολοκληρώσει αυτήν την εφαρμογή. Θα το κάνω σκληρό. " Και έτσι, βρήκα κάποιες πληροφορίες που δείχνουν ότι η κλήση «on.device.ready» δεν ήταν ακόμη νεκρή, αλλά, η οικογένεια φίλων ήταν νεκρή και θάφτηκε (καταργήθηκε, με κεφαλαία γράμματα). Δεν έχει νόημα να κλαίνε για τους αγαπημένους τους. Ήρθε η ώρα να αλλάξετε ταχύτητα και να προχωρήσετε επιθετικά.

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

Και ναι, τα καλά νέα είναι ότι μόλις είχα καταλάβει πώς να προσθέσω πρόσθετα Cordova, δεν έχω ξανακοιτάξει.

Λοιπόν, ακολουθούν μερικές συντομεύσεις για τη δημιουργία μιας εφαρμογής με το Intel XDK. Τα μαργαριτάρια της σοφίας μου για να σας βοηθήσω, τον αναγνώστη, να αποφύγετε τα πιο σκοτεινά μονοπάτια που πήρα και να μείνω καλά στο φως:

  • Δεν με νοιάζει ποια εφαρμογή προσπαθείτε να αναπτύξετε, πείτε στην Intel XDK να δημιουργήσει μια έκδοση Cordova. Σε περίπτωση που πρέπει να χρησιμοποιήσετε ένα πρόσθετο. Και, ναι, πιθανότατα θα χρειαστείτε το StatusBar. Επειδή το iOS.
  • Θα χρειαστείτε, τουλάχιστον, δεξιότητες HTML και CSS. Συν κάποια JavaScript για να χρησιμοποιηθούν σωστά τα πρόσθετα. Ναι, μπορείτε να χρησιμοποιήσετε το JQuery αντί εάν αυτό είναι δικό σας. Πόσο JavaScript ή JQuery εξαρτάται από την εφαρμογή που δημιουργείτε. Θα πρέπει να είστε σε θέση να δημιουργήσετε ιστότοπους για να χρησιμοποιήσετε κάτι όπως το Intel XDK. Δεν ξέρετε πώς να δημιουργήσετε έναν ιστότοπο ακόμα; Εδώ είναι η λύση: εγγραφείτε στο Free Code Camp και μάθετε μέχρι και συμπεριλαμβανομένων των Ziplines. Μόλις το κάνετε αυτό, είστε έτοιμοι να παίξετε με το Intel XDK. Ναι είσαι.
  • Για την πρώτη σας εφαρμογή, πείτε στο Intel XDK να δημιουργήσει χρησιμοποιώντας ένα από τα πρότυπά τους. Αυτό θα σας δώσει έναν έτοιμο κώδικα, ο οποίος θα σας βοηθήσει να συντομεύσετε το «περιμένετε, τώρα τι;» μέρος.
  • index.html: αυτή είναι η πρώτη διεπαφή χρήστη με την οποία παρουσιάζεται ο τελικός τελικός χρήστης (πελάτης) της εφαρμογής σας. Οι γνώσεις σας σχετικά με την ανάπτυξη ιστοτόπων που αποκτήσατε έως και συμπεριλαμβανομένου του Free Code Camp Ziplines θα σας βοηθήσουν να καταλάβετε τι να κάνετε με αυτό το αρχείο.
  • GitHub: Θα θελήσετε να ακολουθήσετε τις οδηγίες για κάθε προσθήκη που χρησιμοποιείτε. Για να βρείτε την τεκμηρίωση του plugin σας, το Google "github cordova [plugin]", όπου το "[plugin]" είναι το όνομα της προσθήκης που αναζητάτε. Για παράδειγμα, η αναζήτηση "github cordova statusbar" θα σας οδηγήσει στην προσθήκη της γραμμής κατάστασης αρκετά εύκολα. Η τεκμηρίωση του plugin cordova στο github είναι εξαιρετική.
  • StackOverflow: κάντε τις «χαζές» ερωτήσεις σας εδώ. Μην ξεχάσετε να αναζητήσετε πρώτα απαντήσεις στην ερώτησή σας. Η τεράστια κοινότητα μεντόρων στο StackOverflow καταβάλλει ιδιαίτερη προσπάθεια να επισημάνει ότι η ερώτησή σας έχει ήδη τεθεί (και απαντηθεί).
  • Φόρουμ προϊόντων Intel XDK: κάντε εδώ τις "χαζές" ειδικές ερωτήσεις της Intel XDK. Τα παιδιά στην Intel είναι φίλοι σας (ευτυχώς). Και οι άλλοι προγραμματιστές που χρησιμοποιούν Intel XDK είναι επίσης πρόθυμοι να σας βοηθήσουν εάν μπορούν.
  • Το Intel XDK δημιουργεί τρία πακέτα κατά τη δημιουργία για συσκευές Windows. Εξακολουθώ να προσπαθώ να καταλάβω γιατί δημιουργεί τρία, αλλά πρέπει να ανεβάσω μόνο ένα στο κατάστημα των Windows. Ελέγξτε τα φόρουμ Intel XDK για την απάντηση. Ρώτησα. Είναι τεκμηριωμένο τώρα. Όχι η πλήρης απάντηση. Απλώς η απάντηση που θα χρειαστείτε για να συνεχίσετε. Είναι αρκετά.

Κρατήστε το απλό ηλίθιο

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

  • δημιουργήστε τον ελάχιστο δυνατό αριθμό κώδικα.
  • Αυτό περιλαμβάνει αρχεία στοιχείων. Η πρώτη μου εφαρμογή είχε πάρα πολλά αρχεία CSS και πάρα πολλά αρχεία JS. Σοβαρά. Το "aww, snap" που είχα με το "on.device.ready" μου έδωσε την ευκαιρία να ενοποιήσω την IP μου σε λιγότερα αρχεία και να πετάξω bits που δεν χρησιμοποιήθηκαν πραγματικά πουθενά. Είναι ένα καλύτερο πράγμα πρακτικής.
  • Χρησιμοποιήστε τον κωδικό άλλων ατόμων (όχι με την λογική λογοκλοπή) - χρησιμοποιήστε τα έτοιμα πρότυπα που παρέχει το Intel XDK για να συντομεύσετε την καμπύλη εκμάθησης. Τουλάχιστον για την πρώτη σας εφαρμογή.
  • Κολλημένος σε "πώς να"; Ρωτήστε την Google και θα βρείτε την απάντηση στο StackOverflow. Τροποποιήστε τη μάθηση για τους σκοπούς σας και, στη συνέχεια, προχωρήστε στο επόμενο πρόβλημα. Θα ξέρετε για την επόμενη φορά.
  • Διαβάζω βιβλία. Χαχαχα. Όπως έχω τον χρόνο. Σοβαρά όμως. Βρείτε την ώρα.
  • Διαβάζω ακόμα για τη γλώσσα προγραμματισμού Swift… Δεν σχετίζεται καν. Αλλά πρόκειται για κώδικα τουλάχιστον.
  • Χρησιμοποιήστε τα περιουσιακά στοιχεία άλλων ατόμων. Για την πρώτη μου εφαρμογή, βρήκα μια βιβλιοθήκη κινουμένων σχεδίων CSS και μια τακτοποιημένη βιβλιοθήκη γραμματοσειρών. Διαβεβαίωσα ότι η εφαρμογή μου απέδωσε αυτές τις βιβλιοθήκες στη σελίδα πληροφοριών "Σχετικά με" της εφαρμογής μου. Σύμφωνα με τους όρους άδειας. Και επειδή είναι το σωστό.

Χρησιμοποιώντας το Intel XDK για να δημιουργήσετε την πρώτη σας εφαρμογή

Λήψη και εγκατάσταση του Intel XDK.

Στο Intel XDK:

  1. Κάντε κλικ στο "Έναρξη νέου έργου".
  2. Επιλέξτε "Πρότυπα" και στη συνέχεια "Διατάξεις και διεπαφές χρήστη".
  3. Επιλέξτε Εφαρμογή προβολής καρτελών (ή μπορείτε να επιλέξετε έναν άλλο τύπο προτύπου εάν θέλετε). Επιλέξτε "Use App Designer" (αυτό θα εγκαταστήσει κάποιο έτοιμο κώδικα για να δημιουργήσετε και να ξεκινήσετε με - yay).
  4. Πατήστε Συνέχεια.
  5. Στο παράθυρο έργου, κάντε κλικ στο κουμπί Αναβάθμιση σε Κόρδοβα.
  6. Όταν δημιουργηθεί το έργο, προσθέστε την ακόλουθη προσθήκη Cordova (πίσω στο μενού έργου):

    Γραμμή κατάστασης

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

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

Εκτός από τα στελέχη απαιτήσεων της Apple (ποια βεβαίωση χρειάζομαι ξανά;) και την "επιλογή τριών πακέτων των Windows", η διαδικασία κατασκευής από μόνη της είναι απλή. Μεταβείτε στην καρτέλα Build. Ανεβάστε τον κωδικό σας, δημιουργήστε το πακέτο σας, κατεβάστε το πακέτο σας

Δεν ξέρω για σένα. Είμαι φτωχός. Μπορώ να δοκιμάσω το πακέτο iOS μου. Δεν μπορώ να δοκιμάσω τα πακέτα Android ή τα Windows μου. Μια μέρα ελπίζω να μπορώ να δοκιμάσω σε περισσότερες από μία πλατφόρμες. Δυστυχώς, δοκιμάστε τα ινδικά χοιρίδια (δηλαδή όλους τους πελάτες μου σε συσκευές Google και Windows).

Για εσάς, ο προγραμματιστής: ο εξομοιωτής στο Intel XDK θα πρέπει να θεωρείται μόνο ως οδηγός. Θα το καταλάβετε. Μαρτίου. Μην πάρετε φυλακισμένους. Δεν είναι ώρα να φοβηθείτε από το φόβο: «τι γίνεται αν δεν λειτουργεί». Έχετε κάποια πίστη. Να είστε καταδικασμένοι για την προσπάθεια. Μην καταδικάζεστε για αποτυχία.

Για Android, θα θελήσετε να δημιουργήσετε χρησιμοποιώντας την επιλογή "Crosswalk for Android". Δύο λέξεις για το γιατί: "flex box". Εάν πρέπει να μάθετε περισσότερα, ελέγξτε την τεκμηρίωση. Το Flex box έχει έναν τρόπο να γλιστρήσει σε κάθε έργο (στην περιορισμένη εμπειρία μου).

Τι δεν μπορώ να σας βοηθήσω;

  • Ο τρόπος της Apple να κάνει τα πράγματα είναι υπερβολικά σχεδιασμένος. Πρέπει να δημιουργήσετε το δικό σας πιστοποιητικό χρησιμοποιώντας μια περίπλοκη μέθοδο. Όλοι το κάνουν λάθος. Τουλάχιστον μία φορά. Επιμένω.
  • Η περίοδος αναθεώρησης της Apple είναι μεγάλη. Περίπου 7 ημέρες (αυτό δεν είναι λάθος αποτύπωμα, χρειάζονται μέρες!). Είναι μια πρώτη εμπειρία που δαγκώνει τα νύχια. Τι γίνεται αν η εφαρμογή απορριφθεί; Θα ξέρω τι να κάνω εάν απορριφθεί; Γιατί διαρκεί τόσο πολύ; Μήπως αυτή η κατάσταση αναθεώρησης σημαίνει ότι η Apple πρόκειται να την αναθεωρήσει ή ότι πρέπει; Ααααρχ! Είναι έτοιμο ακόμα; Τι συμβαίνει? Ω, και τις αϋπνίες νύχτες. Και τον λεπτό προς λεπτό έλεγχο του email. Αυτό δεν έρχεται ποτέ.
  • Η Google διαρκεί μερικές ώρες. Η ίδια εφαρμογή θα ελεγχθεί και θα αναπτυχθεί εντός 24 ωρών. Ίσως λίγο περισσότερο. Λιγότερο από 48. Τούτου λεχθέντος, αν γράψετε μια περίπλοκη εφαρμογή τέρας, ίσως περισσότερο.
  • Τα Windows χρειάζονται μερικές ώρες. Και μετά περίπου μια μέρα για να είναι διαθέσιμο για λήψη στο κατάστημα των Windows. Όμως, δεν θα έχετε πελάτες. Είναι λοιπόν ένα διαφωνητικό σημείο. Δημιουργήστε έτσι για τηλέφωνα Windows. Θα ολοκληρώσει το βιογραφικό σας.

Τι κάνω τώρα;

Δημιουργώ μια άλλη εφαρμογή.

Αυτή η ιστορία αρχικά εμφανίστηκε στο creatureoftech.com.