Οι εφαρμογές για κινητά σέρνονται παντού, ξεκινώντας από smartphone και tablet, έως έξυπνα ρολόγια, και σύντομα θα βρεθούν και σε άλλα φορητά. Ωστόσο, η ανάπτυξη για κάθε ξεχωριστή πλατφόρμα για κινητά μπορεί να είναι μια εξαντλητική εργασία, ειδικά εάν οι πόροι σας είναι περιορισμένοι ή εάν είστε μεμονωμένος προγραμματιστής και όχι εταιρεία ανάπτυξης εφαρμογών για κινητά .
Αυτό είναι όπου γίνετε πεπειραμένος προγραμματιστής Apache Cordova μπορεί να είναι βολικό παρέχοντας έναν τρόπο ανάπτυξης εφαρμογών για κινητά χρησιμοποιώντας τυπικές τεχνολογίες ιστού - HTML5, CSS3 και JavaScript.
Το 2009, μια εκκίνηση με την ονομασία Nitobi δημιούργησε το PhoneGap, ένα API ανοιχτού κώδικα για πρόσβαση σε εγγενείς πόρους για κινητά, με στόχο να επιτρέψει στους προγραμματιστές να δημιουργήσουν εφαρμογές για κινητά χρησιμοποιώντας τυπικές τεχνολογίες ιστού. Σύμφωνα με το όραμα του Nitobi, οι περισσότερες εφαρμογές για φορητές συσκευές θα αναπτυχθούν σύντομα χρησιμοποιώντας το PhoneGap, αλλά οι προγραμματιστές θα εξακολουθούν να έχουν την επιλογή να γράφουν εγγενή κώδικα όταν είναι απαραίτητο, είτε λόγω προβλημάτων απόδοσης, είτε λόγω έλλειψης μεθόδου πρόσβασης σε συγκεκριμένο υλικό.
Δεν υπάρχει κάτι τέτοιο, πραγματικά. Αυτό που συνέβη ήταν ότι η Adobe απέκτησε το Nitobi το 2011 και δωρίζει τον πυρήνα ανοιχτού κώδικα στο Ίδρυμα Λογισμικού Apache, το οποίο μετονομάζει ως Apache Cordova. Μια κοινή αναλογία που θα συναντήσετε συχνά είναι ότι η Cordova είναι στο PhoneGap τι είναι το WebKit στο Chrome ή στο Safari.
Προφανώς, οι διαφορές μεταξύ Cordova και PhoneGap ήταν ελάχιστες στην αρχή. Με τον καιρό, Adobe PhoneGap ανέπτυξε το δικό της σύνολο ιδιοκτησιακών χαρακτηριστικών, ενώ η Κόρδοβα υποστηρίχθηκε –και εξακολουθεί να υποστηρίζεται– από την κοινότητα ανοιχτού κώδικα. Αυτή η κριτική και φροντιστήριο Apache Cordova θα εξετάσει την ανάπτυξη εφαρμογών Cordova με περισσότερες λεπτομέρειες και ενώ μερικά από αυτά ενδέχεται να ισχύουν για το PhoneGap, αυτό δεν πρέπει να θεωρείται εκπαιδευτικό πρόγραμμα PhoneGap, καθαυτή .
Στην ουσία, η 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. Εάν καταβάλλετε αρκετή προσπάθεια στη διαδικασία ανάπτυξης, οι χρήστες σας ενδέχεται να μην συνειδητοποιούν καν ότι δεν χρησιμοποιούν εγγενή εφαρμογή.
Υπάρχουν δύο βασικές διαδρομές που μπορείτε να ακολουθήσετε κατά την ανάπτυξη με το Cordova:
Συνιστάται συνήθως να ξεκινήσετε με τη ροή εργασιών ανάπτυξης μεταξύ πλατφορμών, καθώς η μετάβαση σε ανάπτυξη με επίκεντρο την πλατφόρμα είναι αρκετά απλή. Ωστόσο, εάν ξεκινήσετε αρχικά με τη ροή εργασίας με επίκεντρο την πλατφόρμα, δεν θα μπορείτε να μεταβείτε σε ανάπτυξη μεταξύ πλατφορμών, καθώς το CLI θα αντικαταστήσει τις προσαρμογές σας μόλις εκτελέσετε τη διαδικασία κατασκευής.
Πριν εγκαταστήσετε και εκτελέσετε οτιδήποτε σχετίζεται με την Κόρδοβα, θα πρέπει να εγκαταστήσετε το 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
δεν αρκεί από μόνο του.)
Συνοψίζοντας, αυτά είναι τα πακέτα που θα χρειαστείτε:
Και αυτές οι μεταβλητές περιβάλλοντος θα πρέπει να ενημερωθούν:
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'
Ας δημιουργήσουμε μια απλή εφαρμογή εκμάθησης για να δείξουμε τη χρήση του Cordova και των προσθηκών του. Μπορείτε να βρείτε ολόκληρο το demo στο αυτό το αποθετήριο GitHub έτσι ώστε να μπορείτε να το κατεβάσετε και να διαβάσετε κάποια μέρη μαζί με αυτό το σύντομο σεμινάριο Cordova.
Θα χρησιμοποιήσουμε την αρχική ρύθμιση που δημιουργήσατε και θα προσθέσουμε επιπλέον κώδικα. Ας υποθέσουμε ότι θέλουμε να προσθέσουμε νέα έργα σε μια φανταστική βάση δεδομένων ApeeScape, καθώς και να δούμε τα υπάρχοντα. Ανοίξτε το index.html και δημιουργήστε δύο καρτέλες με τον ακόλουθο τρόπο:
Hello ApeeScape
Παρατηρήστε ότι έχω προσθέσει 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
Σε αυτό το σημείο, η εφαρμογή σας πρέπει να έχει δύο καρτέλες. Η πρώτη καρτέλα επιτρέπει την αναζήτηση έργων:
Η δεύτερη καρτέλα επιτρέπει την ανάρτηση νέων έργων:
Το μόνο που έχουμε τώρα είναι μια κλασική εφαρμογή ιστού που εκτελείται μέσα σε μια προβολή ιστού. Δεν έχουμε χρησιμοποιήσει καμία από τις εγγενείς λειτουργίες, οπότε ας το κάνουμε τώρα. Μια συνηθισμένη ερώτηση είναι πώς να αποθηκεύσετε δεδομένα τοπικά στη συσκευή, ή πιο συγκεκριμένα, τι είδους αποθηκευτικό χώρο θα χρησιμοποιήσετε. Υπάρχουν πολλοί τρόποι να ακολουθήσετε:
Το 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
Τέλος, τοποθετήστε μια εικόνα λογότυπου στο
|_+_|ντοσιέ.
Περάσαμε τα βασικά βήματα της ανάπτυξης εφαρμογών Apache Cordova και χρησιμοποιήσαμε τη δική μας αρχιτεκτονική JavaScript και Φύλλο στυλ CSS . Αυτό το σεμινάριο Cordova ήταν μια προσπάθεια να δείξουμε τις δυνατότητες του Apache Cordova ως μέσου ανάπτυξης εφαρμογών για κινητά χρησιμοποιώντας γνωστές τεχνολογίες, μειώνοντας τόσο τον χρόνο ανάπτυξης όσο και την προσπάθεια που απαιτείται για τη δημιουργία πολλαπλών εφαρμογών για διαφορετικές πλατφόρμες.
Ωστόσο, όταν δημιουργείτε εφαρμογές που θα τεθούν σε παραγωγή, συνιστάται να χρησιμοποιήσετε ένα υπάρχον πλαίσιο. Εκτός από τη δόμηση της εφαρμογής σας σε μια προκαθορισμένη αρχιτεκτονική, αυτό μπορεί επίσης να σας προσφέρει ένα σύνολο στοιχείων που θα βοηθήσουν την εφαρμογή σας να πλησιάσει την εγγενή εμφάνιση και αίσθηση. Μερικά πλαίσια αξίζει να σημειωθούν ιωνικός , Πλαίσιο7 , Weex , Αναστολεύς , Kendo UI , και Διεπαφή χρήστη Onsen . Καλή τύχη!
Σχετίζεται με: Cordova Frameworks: Ionic εναντίον Framework7Το Apache Cordova είναι ένα πλαίσιο για τη δημιουργία εφαρμογών για κινητά πολλαπλών πλατφορμών χρησιμοποιώντας τυπικές τεχνολογίες ιστού. Ουσιαστικά, είναι ένα κοντέινερ εφαρμογών με προβολή ιστού που καλύπτει ολόκληρη την οθόνη της συσκευής.
Σήμερα, το PhoneGap αναφέρεται σε ένα προϊόν που κατασκευάστηκε από την Adobe πάνω από το Apache Cordova. Αρχικά, ήταν το πλαίσιο που έφτιαξε ο Nitobi προτού τα αποκτήσει η Adobe και το άνοιξε ως Apache Cordova.
Το WebView του Android και το UIWebView του iOS είναι οι τάξεις που χρησιμοποιούν τα αντίστοιχα λειτουργικά συστήματα για την προβολή ιστοσελίδων σε πλήρη οθόνη. Οι προγραμματιστές μπορούν να δημιουργήσουν προγράμματα περιήγησης ιστού μαζί τους ή, στην περίπτωση του Apache Cordova, να τους χρησιμοποιήσουν για να εμφανίσουν μια εφαρμογή ιστού σαν να ήταν εγγενής εφαρμογή.
Τα πρόσθετα Apache Cordova επιτρέπουν την περαιτέρω πρόσβαση σε λειτουργίες πολλαπλών πλατφορμών. Αυτές μπορεί να είναι υπηρεσίες που βασίζονται σε υλικό όπως γεωγραφική τοποθεσία ή καθαρά λειτουργικότητα που βασίζεται σε λογισμικό, όπως πρόσβαση σε βάση δεδομένων SQLite που παρέχεται από λειτουργικό σύστημα.