portaldacalheta.pt
  • Κύριος
  • Επενδυτές & Χρηματοδότηση
  • Σχεδιασμός Διεπαφής Χρήστη
  • Τεχνολογία
  • Διαχείριση Έργου
Κινητό

Tutorial Apache Cordova: Ανάπτυξη εφαρμογών για κινητές συσκευές με την Cordova



Σημείωση: Εφόσον γράφτηκε αρχικά, έχω ενημερώσει αυτό το άρθρο για να δουλέψω [προστασία μέσω email] 0,0, [προστασία μέσω email] , και [προστασία μέσω email]

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

Αυτό είναι όπου γίνετε πεπειραμένος προγραμματιστής Apache Cordova μπορεί να είναι βολικό παρέχοντας έναν τρόπο ανάπτυξης εφαρμογών για κινητά χρησιμοποιώντας τυπικές τεχνολογίες ιστού - HTML5, CSS3 και JavaScript.



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



Cordova PhoneGap;

Δεν υπάρχει κάτι τέτοιο, πραγματικά. Αυτό που συνέβη ήταν ότι η Adobe απέκτησε το Nitobi το 2011 και δωρίζει τον πυρήνα ανοιχτού κώδικα στο Ίδρυμα Λογισμικού Apache, το οποίο μετονομάζει ως Apache Cordova. Μια κοινή αναλογία που θα συναντήσετε συχνά είναι ότι η Cordova είναι στο PhoneGap τι είναι το WebKit στο Chrome ή στο Safari.



Προφανώς, οι διαφορές μεταξύ Cordova και PhoneGap ήταν ελάχιστες στην αρχή. Με τον καιρό, Adobe PhoneGap ανέπτυξε το δικό της σύνολο ιδιοκτησιακών χαρακτηριστικών, ενώ η Κόρδοβα υποστηρίχθηκε –και εξακολουθεί να υποστηρίζεται– από την κοινότητα ανοιχτού κώδικα. Αυτή η κριτική και φροντιστήριο Apache Cordova θα εξετάσει την ανάπτυξη εφαρμογών Cordova με περισσότερες λεπτομέρειες και ενώ μερικά από αυτά ενδέχεται να ισχύουν για το PhoneGap, αυτό δεν πρέπει να θεωρείται εκπαιδευτικό πρόγραμμα PhoneGap, καθαυτή .

Ικανότητες Apache Cordova

Στην ουσία, η Cordova δεν έχει περιορισμούς σε σχέση με τις εγγενώς αναπτυγμένες εφαρμογές. Αυτό που παίρνετε με το Cordova είναι απλώς ένα API JavaScript, το οποίο χρησιμεύει ως περιτύλιγμα για τον εγγενή κώδικα και είναι συνεπές σε όλες τις συσκευές. Μπορείτε να θεωρήσετε το Cordova ως κοντέινερ εφαρμογών με προβολή ιστού, το οποίο καλύπτει ολόκληρη την οθόνη της συσκευής. Η προβολή ιστού που χρησιμοποιείται από την Cordova είναι η ίδια προβολή ιστού που χρησιμοποιείται από το εγγενές λειτουργικό σύστημα. Σε iOS, αυτός είναι ο προεπιλεγμένος Objective-C UIWebView ή ένα έθιμο WKWebView τάξη; σε Android, αυτό είναι android.webkit.WebView.



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

Τέλος, εγκαθίστανται εφαρμογές Cordova ακριβώς όπως οι εγγενείς εφαρμογές . Αυτό σημαίνει ότι η δημιουργία του κωδικού σας για iOS θα παράγει ένα αρχείο IPA, για Android ένα αρχείο APK και το κτίριο για Windows Phone παράγει ένα αρχείο XAP. Εάν καταβάλλετε αρκετή προσπάθεια στη διαδικασία ανάπτυξης, οι χρήστες σας ενδέχεται να μην συνειδητοποιούν καν ότι δεν χρησιμοποιούν εγγενή εφαρμογή.



Ικανότητες Apache Cordova

Ροές εργασιών ανάπτυξης Apache Cordova

Υπάρχουν δύο βασικές διαδρομές που μπορείτε να ακολουθήσετε κατά την ανάπτυξη με το Cordova:



  • Όταν η πρόθεσή σας είναι να αναπτύξετε μια εφαρμογή σε όσο το δυνατόν περισσότερες πλατφόρμες, με μικρή ή καθόλου ανάπτυξη για συγκεκριμένη πλατφόρμα, θα πρέπει να χρησιμοποιήσετε τη ροή εργασίας μεταξύ πλατφορμών. Το κύριο εργαλείο που υποστηρίζει αυτήν τη ροή εργασίας είναι το Cordova Command-Line Interface (CLI), το οποίο χρησιμεύει ως αφαίρεση υψηλότερου επιπέδου για τη διαμόρφωση και τη δημιουργία της εφαρμογής σας για διαφορετικές πλατφόρμες. Αυτή είναι η πιο συχνά χρησιμοποιούμενη διαδρομή ανάπτυξης.
  • Εάν σκοπεύετε να αναπτύξετε την εφαρμογή σας έχοντας κατά νου μια συγκεκριμένη πλατφόρμα, θα πρέπει να χρησιμοποιήσετε τη ροή εργασίας με επίκεντρο την πλατφόρμα. Με αυτόν τον τρόπο, θα μπορείτε να τροποποιήσετε και να τροποποιήσετε τον κώδικά σας σε χαμηλότερο επίπεδο αναμειγνύοντας εγγενή στοιχεία με στοιχεία Cordova. Ακόμα κι αν μπορούσατε να χρησιμοποιήσετε αυτήν την προσέγγιση για ανάπτυξη μεταξύ πλατφορμών, η διαδικασία θα είναι μεγαλύτερη και πιο κουραστική.

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

Προαπαιτούμενα και εγκατάσταση Cordova

Πριν εγκαταστήσετε και εκτελέσετε οτιδήποτε σχετίζεται με την Κόρδοβα, θα πρέπει να εγκαταστήσετε το SDK για κάθε πλατφόρμα για την οποία σκοπεύετε να δημιουργήσετε την εφαρμογή σας. Θα επικεντρωθούμε στην πλατφόρμα Android σε αυτό το άρθρο. Ωστόσο, η διαδικασία που περιλαμβάνει άλλες πλατφόρμες είναι παρόμοια.



Πρέπει να κατεβάσετε το Android SDK που βρέθηκε εδώ . Για Windows, το SDK έρχεται ως πρόγραμμα εγκατάστασης, ενώ για Linux και OSX έρχεται ως αρχείο που μπορεί απλά να εξαχθεί. Μετά την εξαγωγή / εγκατάσταση του πακέτου, θα πρέπει να προσθέσετε το sdk/tools και sdk/platform-tools καταλόγους στο PATH μεταβλητός. Το PATH Η μεταβλητή χρησιμοποιείται από την Cordova για να αναζητήσει τα δυαδικά αρχεία που χρειάζεται για τη διαδικασία κατασκευής. Εάν δεν έχετε εγκαταστήσει Java, θα πρέπει να προχωρήσετε και να εγκαταστήσετε το JDK μαζί με το Ant. ANT_HOME και JAVA_HOME θα πρέπει να οριστεί στους φακέλους κάδου JDK και Ant και μετά την εγκατάσταση του Android SDK, ορίστε το ANDROID_HOME μεταβλητή σε Android/Sdk. Όλες οι τοποθεσίες στα τρία *_HOME Οι μεταβλητές θα πρέπει επίσης να βρίσκονται στο PATH μεταβλητός.

Μετά την εγκατάσταση του SDK android Η εντολή θα είναι διαθέσιμη στη γραμμή εντολών σας. Εκτελέστε το για να ανοίξετε τον διαχειριστή SDK και να εγκαταστήσετε τα πιο πρόσφατα εργαλεία και το API Android. Πιθανότατα θα χρειαστείτε Εργαλεία SDK Android, Εργαλεία πλατφόρμας SDK Android, Εργαλεία κατασκευής SDK Android, Πλατφόρμα SDK, API Google Intel x86 Atom System Image, Πηγές για SDK Android και Intel x86 Emulator Accelerator (πρόγραμμα εγκατάστασης HAXM) . Μετά από αυτό θα μπορείτε να δημιουργήσετε έναν εξομοιωτή με android avd.



Το Cordova CLI εξαρτάται από το Node.js και τον πελάτη Git, οπότε προχωρήστε και κατεβάστε και εγκαταστήστε το Node από nodejs.org , και Git από git-scm.com . Θα χρησιμοποιείτε το npm για να εγκαταστήσετε το ίδιο το Cordova CLI καθώς και για την εγκατάσταση πρόσθετων προσθηκών και το Cordova θα χρησιμοποιήσει το git πίσω από τα παρασκήνια για να κατεβάσει τις απαιτούμενες εξαρτήσεις. Τέλος, τρέξτε

npm install -g cordova

… Για να εγκαταστήσετε το Cordova CLI παγκοσμίως (npm install cordova δεν αρκεί από μόνο του.)

Συνοψίζοντας, αυτά είναι τα πακέτα που θα χρειαστείτε:

  • Ιάβα
  • Μυρμήγκι
  • Android SDK
  • NodeJS
  • Πηγαίνω

Και αυτές οι μεταβλητές περιβάλλοντος θα πρέπει να ενημερωθούν:

  • PATH
  • JAVA_HOME
  • ANT_HOME
  • ANDROID_HOME

Εκκίνηση μιας εφαρμογής

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

cordova create toptal toptal.hello HelloApeeScape

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

toptal/ |-- hooks/ |-- platforms/ |-- plugins/ |-- www/ `-- config.xml

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

πώς να προσλάβετε μηχανικούς λογισμικού

Ενώ το Cordova σάς επιτρέπει να αναπτύξετε εύκολα μια εφαρμογή για διαφορετικές πλατφόρμες, μερικές φορές πρέπει να προσθέσετε προσαρμογές. Κατά την ανάπτυξη για πολλές πλατφόρμες, δεν θέλετε να τροποποιήσετε τα αρχεία προέλευσης στα διάφορα platforms/[platform-name][assets]/www καταλόγους, επειδή αντικαθίστανται τακτικά με το ανώτατο επίπεδο www αρχεία.

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

Προσθέστε την πρώτη σας πλατφόρμα χρησιμοποιώντας:

cordova platform add android

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

cordova platform rm android

Κατά την επιθεώρηση του καταλόγου πλατφορμών, θα παρατηρήσετε το android φάκελο μέσα σε αυτό. Για κάθε πλατφόρμα που προσθέτετε, η Cordova θα δημιουργήσει έναν νέο κατάλογο σε πλατφόρμες και θα αντιγράψει το www φάκελο μέσα σε αυτό. Εάν, για παράδειγμα, θέλετε να προσαρμόσετε την εφαρμογή σας για Android, μπορείτε να τροποποιήσετε τα αρχεία στο platforms/android/assets/www και μετάβαση σε εργαλεία κελύφους ειδικά για πλατφόρμα.

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

Εάν θέλετε να συνεχίσετε να χρησιμοποιείτε τη ροή εργασίας μεταξύ πλατφορμών και να κάνετε προσαρμογές για συγκεκριμένες πλατφόρμες, θα πρέπει να χρησιμοποιήσετε το φάκελο συγχωνεύσεων ανώτερου επιπέδου. Από την έκδοση Cordova 3.5 και μετά, αυτός ο φάκελος έχει αφαιρεθεί από το προεπιλεγμένο πρότυπο εφαρμογής, αλλά αν τον χρειάζεστε, μπορείτε απλά να τον δημιουργήσετε παράλληλα με τους άλλους καταλόγους ανώτερου επιπέδου (hooks, platforms, plugins, και www).

τι είναι οπτικός σχεδιαστής

Οι προσαρμογές για πλατφόρμα τοποθετούνται στο merges/[platform-name] και εφαρμόζονται μετά τα αρχεία προέλευσης στο ανώτερο επίπεδο www ντοσιέ. Με αυτόν τον τρόπο, μπορείτε είτε να προσθέσετε νέα αρχεία προέλευσης για συγκεκριμένες πλατφόρμες είτε να παρακάμψετε ολόκληρα αρχεία πηγής ανώτερου επιπέδου με συγκεκριμένα πλατφόρμα. Πάρτε για παράδειγμα την ακόλουθη δομή:

merges/ |-- wp8/ | `-- app.js |-- android/ | `-- android.js |-- www/ `-- app.js

Σε αυτήν την περίπτωση, το αρχείο εξόδου για Android θα περιέχει και το app.js και android.js αρχεία, αλλά το αρχείο εξόδου για το Windows Phone 8 θα περιέχει μόνο το app.js αρχείο που βρίσκεται στο merges/wp8 φάκελο, αφού τα αρχεία στο merges/[platform] παράκαμψη των αρχείων στο www.

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

{ 'prepare_queue': { 'installed': [], 'uninstalled': [] }, 'config_munge': { 'files': {} }, 'installed_plugins': {}, 'dependent_plugins': {} }

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

Η Cordova παρέχει διάφορα βήματα CLI για τη δημιουργία και τη λειτουργία των εφαρμογών σας: cordova prepare, cordova compile, cordova build (που είναι μια συντόμευση για τα δύο προηγούμενα), cordova emulate και cordova run (που ενσωματώνει build και μπορεί επίσης να τρέξει εξομοιωτή). Αυτό δεν πρέπει να σας μπερδέψει, γιατί στις περισσότερες περιπτώσεις θέλετε να δημιουργήσετε και να εκτελέσετε την εφαρμογή σας στον εξομοιωτή:

cordova run --emulator

Εάν θέλετε, μπορείτε να συνδέσετε τη συσκευή σας μέσω της θύρας USB, να ενεργοποιήσετε τη λειτουργία εντοπισμού σφαλμάτων USB και να αναπτύξετε την πρώτη σας εφαρμογή Apache Cordova απευθείας στη συσκευή σας με απλή εκτέλεση:

cordova run

Αυτό θα αντιγράψει όλα τα αρχεία σας σε platforms/* και εκτελέστε όλες τις απαιτούμενες εργασίες.

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

cordova run android --emulator

ή

cordova run ios --emulator --target='iPhone-8-Plus'

Εγχειρίδιο Apache Cordova

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

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

Hello ApeeScape
  • Search Projects
  • Post a Project

Παρατηρήστε ότι έχω προσθέσει Bootstrap και jQuery Κινητό ως εξαρτήσεις. Λάβετε υπόψη ότι έχουν αναπτυχθεί πολύ καλύτερες λύσεις και πλαίσια για τη δημιουργία σύγχρονων υβριδικών εφαρμογών, αλλά δεδομένου ότι οι περισσότεροι (αν όχι όλοι) προγραμματιστές ιστού είναι εξοικειωμένοι με αυτές τις δύο βιβλιοθήκες, είναι λογικό να τα χρησιμοποιήσετε για ένα σεμινάριο για αρχάριους. Μπορείτε να κατεβάσετε τα φύλλα στυλ από το GitHub ή να χρησιμοποιήσετε το δικό σας, αν προτιμάτε.

Ας προχωρήσουμε στο index.js αρχείο και αφαιρέστε το από τα ακόλουθα:

var app = { // Application Constructor initialize: function() { if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) { document.addEventListener('deviceready', this.onDeviceReady, false); } else { this.onDeviceReady(); } }, onDeviceReady: function() { // We will init / bootstrap our application here }, }; app.initialize();

Θυμηθείτε ότι η υποστηριζόμενη αρχιτεκτονική για εφαρμογές Cordova δημιουργεί μια εφαρμογή ενιαίας σελίδας (SPA). Με αυτόν τον τρόπο, όλοι οι πόροι φορτώνονται μόνο μία φορά κατά την εκκίνηση της εφαρμογής και μπορούν να παραμείνουν στην προβολή ιστού για όσο εκτελείται η εφαρμογή. Επιπλέον, με τα SPA, ο χρήστης δεν θα έχει επαναφορτώσεις σελίδων που δεν είναι απλώς τυπικές για εγγενείς εφαρμογές. Έχοντας αυτό υπόψη, ας δημιουργήσουμε έναν απλό ελεγκτή για εναλλαγή μεταξύ των δύο καρτελών:

var Controller = function() { var controller = { self: null, initialize: function() { self = this; this.bindEvents(); self.renderSearchView(); }, bindEvents: function() { $('.tab-button').on('click', this.onTabClick); }, onTabClick: function(e) { e.preventDefault(); if ($(this).hasClass('active')) { return; } var tab = $(this).data('tab'); if (tab === '#add-tab') { self.renderPostView(); } else { self.renderSearchView(); } }, renderPostView: function() { $('.tab-button').removeClass('active'); $('#post-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); $('#tab-content').load('./views/post-project-view.html', function(data) { $('#tab-content').find('#post-project-form').on('submit', self.postProject); }); }, renderSearchView: function() { $('.tab-button').removeClass('active'); $('#search-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); var $projectTemplate = null; $('#tab-content').load('./views/search-project-view.html', function(data) { $projectTemplate = $('.project').remove(); // Load projects here }); } } controller.initialize(); return controller; }

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

// top of index.js var controller = null // inside onDeviceReady method controller = new Controller();

Τέλος, προσθέστε μια αναφορά σεναρίου στο index.html πάνω από την αναφορά στο index.js. Μπορείτε να πραγματοποιήσετε λήψη των προβολών αναζήτησης και δημοσίευσης απευθείας από το GitHub. Δεδομένου ότι οι μερικές προβολές διαβάζονται από ένα αρχείο, ορισμένα προγράμματα περιήγησης όπως το Chrome, ενώ προσπαθούν να αποδώσουν τη σελίδα σας, θα παραπονεθούν για αιτήματα μεταξύ τομέων.

Η πιθανή λύση εδώ θα ήταν να εκτελέσετε έναν τοπικό στατικό διακομιστή, για παράδειγμα χρησιμοποιώντας το node-static ενότητα npm. Επίσης, εδώ μπορείτε να αρχίσετε να σκέφτεστε να χρησιμοποιήσετε κάποιο πλαίσιο όπως το PhoneGap ή / και το Ionic. Όλα παρέχουν μια σειρά εργαλείων ανάπτυξης, όπως εξομοίωση στο πρόγραμμα περιήγησης, καυτή επαναφόρτωση και δημιουργία κώδικα (ικριώματα).

Προς το παρόν, ας απλώς αναπτύξουμε σε μια συσκευή Android εκτελώντας τα εξής:

cordova run android

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

Εφαρμογή Apache Cordova

Η δεύτερη καρτέλα επιτρέπει την ανάρτηση νέων έργων:

Δημοσιεύτηκε το έργο Apache Cordova

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

  • Τοπική αποθήκευση
  • WebSQL
  • Ευρετήριο DB
  • Αποθηκευτικός χώρος από διακομιστή μέσω μιας υπηρεσίας Ιστού
  • Πρόσθετα τρίτων που παρέχουν άλλες επιλογές

Το LocalStorage είναι εντάξει για την αποθήκευση μικρών ποσοτήτων δεδομένων, αλλά δεν θα αρκεί εάν δημιουργείτε μια εφαρμογή υψηλής έντασης δεδομένων, καθώς ο διαθέσιμος χώρος κυμαίνεται από 3 έως 10 MB. Το IndexedDB μπορεί να είναι μια καλύτερη λύση για αυτήν την περίπτωση. Το WebSQL έχει καταργηθεί και δεν υποστηρίζεται σε ορισμένες πλατφόρμες. Τέλος, η χρήση διαδικτυακών υπηρεσιών για τη λήψη και τροποποίηση δεδομένων ταιριάζει στο πρότυπο SPA, αλλά καταρρέει όταν η εφαρμογή σας είναι εκτός σύνδεσης. Οι τεχνικές PWA μαζί με το Service Workers ήρθε πρόσφατα στον κόσμο της Κόρδοβα για να βοηθήσουν σε αυτό.

Επίσης, υπάρχουν πολλές πρόσθετες προσθήκες τρίτων που έρχονται για να καλύψουν τα κενά στον πυρήνα της Cordova. Η προσθήκη αρχείου μπορεί να είναι αρκετά χρήσιμη καθώς σας παρέχει πρόσβαση στο σύστημα αρχείων της συσκευής, επιτρέποντάς σας να δημιουργείτε και να αποθηκεύετε αρχεία. Προς το παρόν, ας δοκιμάσουμε το SQLitePlugin που σας παρέχει μια τοπική βάση δεδομένων SQLite. Μπορείτε να το προσθέσετε στο έργο σας εκτελώντας:

cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin

Το SQLitePlugin παρέχει ένα API στη βάση δεδομένων SQLite της συσκευής και χρησιμεύει ως ένας πραγματικός μηχανισμός επιμονής. Μπορούμε να δημιουργήσουμε μια απλή υπηρεσία αποθήκευσης με τον ακόλουθο τρόπο:

SQLiteStorageService = function () { var service = {}; var db = window.sqlitePlugin ? window.sqlitePlugin.openDatabase({name: 'demo.toptal', location: 'default'}) : window.openDatabase('demo.toptal', '1.0', 'DB para FactAV', 5000000); service.initialize = function() { // Initialize the database var deferred = $.Deferred(); db.transaction(function(tx) { tx.executeSql( 'CREATE TABLE IF NOT EXISTS projects ' + '(id integer primary key, name text, company text, description text, latitude real, longitude real)' ,[], function(tx, res) { tx.executeSql('DELETE FROM projects', [], function(tx, res) { deferred.resolve(service); }, function(tx, res) { deferred.reject('Error initializing database'); }); }, function(tx, res) { deferred.reject('Error initializing database'); }); }); return deferred.promise(); } service.getProjects = function() { // fetch projects } service.addProject = function(name, company, description, addLocation) { // add a new project } return service.initialize(); }

Μπορείτε να κατεβάσετε τον κωδικό για ανάκτηση και προσθήκη έργων από το GitHub και να τον επικολλήσετε στα αντίστοιχα σύμβολα κράτησης θέσης. Μην ξεχάσετε να προσθέσετε το SQLiteStorageService.js στο αρχείο index.html πάνω από το Controller.js και να το αρχικοποιήσετε στον ελεγκτή σας τροποποιώντας τη λειτουργία init του Ελεγκτή:

initialize: function() { self = this; new SQLiteStorageService().done(function(service) { self.storageService = service; self.bindEvents(); self.renderSearchView(); }).fail(function(error) { alert(error); }); }

Εάν ρίξετε μια ματιά στο service.addProject (), θα παρατηρήσετε ότι πραγματοποιεί μια κλήση στη μέθοδο navigator.geolocation.getCurrentPosition (). Το Cordova διαθέτει μια προσθήκη γεωγραφικής τοποθεσίας την οποία μπορείτε να χρησιμοποιήσετε για να λάβετε την τρέχουσα τοποθεσία του τηλεφώνου και μπορείτε ακόμη και να χρησιμοποιήσετε τη μέθοδο navigator.geolocation.watchPosition () για να λαμβάνετε ενημερώσεις όταν αλλάζει η θέση του χρήστη.

Τέλος, ας προσθέσουμε τις λαβές συμβάντων ελεγκτή για προσθήκη και ανάκτηση έργων από τη βάση δεδομένων:

c++ για ρομποτική
renderPostView: function() { $('.tab-button').removeClass('active'); $('#post-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); $('#tab-content').load('./views/post-project-view.html', function(data) { $('#tab-content').find('#post-project-form').on('submit', self.postProject); }); }, postProject: function(e) { e.preventDefault(); var name = $('#project-name').val(); var description = $('#project-description').val(); var company = $('#company').val(); var addLocation = $('#include-location').is(':checked'); if (!name || !description || !company) { alert('Please fill in all fields'); return; } else { var result = self.storageService.addProject( name, company, description, addLocation); result.done(function() { alert('Project successfully added'); self.renderSearchView(); }).fail(function(error) { alert(error); }); } }, renderSearchView: function() { $('.tab-button').removeClass('active'); $('#search-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); var $projectTemplate = null; $('#tab-content').load('./views/search-project-view.html', function(data) { $('#addressSearch').on('click', function() { alert('Not implemented'); }); $projectTemplate = $('.project').remove(); var projects = self.storageService.getProjects().done(function(projects) { for(var idx in projects) { var $div = $projectTemplate.clone(); var project = projects[idx]; $div.find('.project-name').text(project.name); $div.find('.project-company').text(project.company); $div.find('.project-description').text(project.description); if (project.location) { var url = ' Click to open map '; $div.find('.project-location').html(url); } else { $div.find('.project-location').text('Not specified'); } $tab.append($div); } }).fail(function(error) { alert(error); }); }); }

Για να προσθέσετε την κονσόλα και τις προσθήκες διαλόγου, εκτελέστε τα εξής:

cordova plugin add org.apache.cordova.dialogs cordova plugin add org.apache.cordova.console

Η προσθήκη cordova.console θα σας βοηθήσει να κάνετε εντοπισμό σφαλμάτων ενεργοποιώντας το console.log() λειτουργούν μέσα σε εξομοιωτές.

Μπορείτε να εντοπίσετε εύκολα εφαρμογές Android μέσω του απομακρυσμένου εντοπισμού σφαλμάτων Chrome. Μόλις συνδέσετε τη συσκευή σας, κάντε κλικ στο αναπτυσσόμενο μενού στην επάνω δεξιά γωνία (κάτω από το κουμπί X), αναπτύξτε περισσότερα εργαλεία και κάντε κλικ στην επιλογή Επιθεώρηση συσκευών. Θα πρέπει να δείτε τη συσκευή σας στη λίστα και θα πρέπει να μπορείτε να ανοίξετε την κονσόλα εντοπισμού σφαλμάτων.

Το Safari παρέχει την ίδια λειτουργικότητα για τον εντοπισμό σφαλμάτων εφαρμογών iOS που εκτελούνται σε συσκευή συνδεδεμένη με USB ή εξομοιωτή. Απλώς ενεργοποιήστε τα Εργαλεία προγραμματιστών στην καρτέλα Ρυθμίσεις Safari> Για προχωρημένους.

Η προσθήκη cordova.dialogs επιτρέπει εγγενείς ειδοποιήσεις. Μια κοινή πρακτική είναι να επαναπροσδιορίσετε το windows.alert μέθοδος χρησιμοποιώντας το cordova.dialogs API με τον ακόλουθο τρόπο:

overrideBrowserAlert: function() { if (navigator.notification) { // Override default HTML alert with native dialog window.alert = function (message) { navigator.notification.alert( message, // message null, // callback 'ApeeScape', // title 'OK' // buttonName ); }; } }

Το overrideBrowserAlert η συνάρτηση πρέπει να κληθεί μέσα στο deviceready χειριστής εκδηλώσεων.

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

Ας προσθέσουμε μια τελική πινελιά στην εφαρμογή, ορίζοντας ένα εικονίδιο και μια οθόνη splash. Προσθέστε τα ακόλουθα στο config.xml αρχείο:

www/img

Τέλος, τοποθετήστε μια εικόνα λογότυπου στο

|_+_|
ντοσιέ.

Εφαρμογή εκμάθησης κινητής τηλεφωνίας Cordova

Η δική σας εφαρμογή Cordova

Περάσαμε τα βασικά βήματα της ανάπτυξης εφαρμογών Apache Cordova και χρησιμοποιήσαμε τη δική μας αρχιτεκτονική JavaScript και Φύλλο στυλ CSS . Αυτό το σεμινάριο Cordova ήταν μια προσπάθεια να δείξουμε τις δυνατότητες του Apache Cordova ως μέσου ανάπτυξης εφαρμογών για κινητά χρησιμοποιώντας γνωστές τεχνολογίες, μειώνοντας τόσο τον χρόνο ανάπτυξης όσο και την προσπάθεια που απαιτείται για τη δημιουργία πολλαπλών εφαρμογών για διαφορετικές πλατφόρμες.

Ωστόσο, όταν δημιουργείτε εφαρμογές που θα τεθούν σε παραγωγή, συνιστάται να χρησιμοποιήσετε ένα υπάρχον πλαίσιο. Εκτός από τη δόμηση της εφαρμογής σας σε μια προκαθορισμένη αρχιτεκτονική, αυτό μπορεί επίσης να σας προσφέρει ένα σύνολο στοιχείων που θα βοηθήσουν την εφαρμογή σας να πλησιάσει την εγγενή εμφάνιση και αίσθηση. Μερικά πλαίσια αξίζει να σημειωθούν ιωνικός , Πλαίσιο7 , Weex , Αναστολεύς , Kendo UI , και Διεπαφή χρήστη Onsen . Καλή τύχη!

Σχετίζεται με: Cordova Frameworks: Ionic εναντίον Framework7

Κατανόηση των βασικών

Τι είναι η Κόρδοβα;

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

Τι είναι το PhoneGap;

Σήμερα, το PhoneGap αναφέρεται σε ένα προϊόν που κατασκευάστηκε από την Adobe πάνω από το Apache Cordova. Αρχικά, ήταν το πλαίσιο που έφτιαξε ο Nitobi προτού τα αποκτήσει η Adobe και το άνοιξε ως Apache Cordova.

Τι είναι το WebView;

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

Τι είναι το πρόσθετο Cordova;

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

Εκμάθηση φυσικής βιντεοπαιχνιδιού - Μέρος ΙΙΙ: Περιορισμένη άκαμπτη προσομοίωση σώματος

Τεχνολογία

Εκμάθηση φυσικής βιντεοπαιχνιδιού - Μέρος ΙΙΙ: Περιορισμένη άκαμπτη προσομοίωση σώματος
5 πράγματα που δεν έχετε κάνει ποτέ με μια προδιαγραφή REST

5 πράγματα που δεν έχετε κάνει ποτέ με μια προδιαγραφή REST

Πίσω Μέρος

Δημοφιλείς Αναρτήσεις
Scaling Scala: Τρόπος Dockerize χρησιμοποιώντας Kubernetes
Scaling Scala: Τρόπος Dockerize χρησιμοποιώντας Kubernetes
Μείωση του κόστους σε ένα ψηφιακό μέλλον πετρελαίου και φυσικού αερίου
Μείωση του κόστους σε ένα ψηφιακό μέλλον πετρελαίου και φυσικού αερίου
Το GWT Toolkit: Δημιουργήστε ισχυρές διεπαφές JavaScript χρησιμοποιώντας Java
Το GWT Toolkit: Δημιουργήστε ισχυρές διεπαφές JavaScript χρησιμοποιώντας Java
Επισκόπηση των δημοφιλών δημιουργών στατικών ιστότοπων
Επισκόπηση των δημοφιλών δημιουργών στατικών ιστότοπων
Γνωρίστε το Volt, ένα πολλά υποσχόμενο Ruby Framework για δυναμικές εφαρμογές
Γνωρίστε το Volt, ένα πολλά υποσχόμενο Ruby Framework για δυναμικές εφαρμογές
 
Οι μεγάλες ερωτήσεις οδηγούν σε εξαιρετικό σχεδιασμό - Ένας οδηγός για τη διαδικασία σκέψης σχεδιασμού
Οι μεγάλες ερωτήσεις οδηγούν σε εξαιρετικό σχεδιασμό - Ένας οδηγός για τη διαδικασία σκέψης σχεδιασμού
Η Ψυχολογία του Σχεδιασμού και η Νευροεπιστήμη του Amazing UX
Η Ψυχολογία του Σχεδιασμού και η Νευροεπιστήμη του Amazing UX
APIs στα κοινωνικά δίκτυα: Η διαδικτυακή πύλη στον πραγματικό κόσμο
APIs στα κοινωνικά δίκτυα: Η διαδικτυακή πύλη στον πραγματικό κόσμο
Οδηγός επένδυσης Family Office: Μια εναλλακτική λύση στο επιχειρηματικό κεφάλαιο
Οδηγός επένδυσης Family Office: Μια εναλλακτική λύση στο επιχειρηματικό κεφάλαιο
Αρχές Σχεδιασμού - Εισαγωγή στην Οπτική Ιεραρχία
Αρχές Σχεδιασμού - Εισαγωγή στην Οπτική Ιεραρχία
Δημοφιλείς Αναρτήσεις
  • αγοράστε πιστωτική κάρτα από χάκερ
  • javascript λαμβάνει την τρέχουσα ημερομηνία και ώρα
  • πώς να παρακάμψετε την επαλήθευση πιστωτικής κάρτας
  • πώς να εξορύξω δεδομένα twitter
  • πώς να μάθετε τι τύπο llc έχω
  • πώς να ξεκινήσετε το έργο angularjs
Κατηγορίες
  • Επενδυτές & Χρηματοδότηση
  • Σχεδιασμός Διεπαφής Χρήστη
  • Τεχνολογία
  • Διαχείριση Έργου
  • © 2022 | Ολα Τα Δικαιώματα Διατηρούνται

    portaldacalheta.pt