Samouczek Apache Cordova: tworzenie aplikacji mobilnych za pomocą Cordova

Aplikacje mobilne wkradają się wszędzie, począwszy od smartfonów i tabletów, po inteligentne zegarki, a wkrótce można je znaleźć również w innych urządzeniach do noszenia. Jednak programowanie dla każdej oddzielnej platformy mobilnej może być wyczerpującym zadaniem, zwłaszcza jeśli masz ograniczone zasoby lub jesteś pojedynczym programistą, a nie firmą zajmującą się tworzeniem aplikacji mobilnych.

W tym miejscu może się przydać zostanie dobrze zorientowanym programistą Apache Cordova, zapewniając sposób na tworzenie aplikacji mobilnych przy użyciu standardowych technologii internetowych — HTML5, CSS3 i JavaScript.

W 2009 roku startup o nazwie Nitobi stworzył PhoneGap, interfejs API typu open source do uzyskiwania dostępu do natywnych zasobów mobilnych, w celu umożliwienia programistom tworzenia aplikacji mobilnych przy użyciu standardowych technologii internetowych. W wizji Nitobi większość aplikacji mobilnych miałaby wkrótce powstać przy użyciu PhoneGap, ale programiści nadal mieliby możliwość pisania kodu natywnego w razie potrzeby, czy to z powodu problemów z wydajnością, czy też braku metody dostępu do określonego sprzętu.

Cordova PhoneGap?

Naprawdę nie ma czegoś takiego. Stało się tak, że firma Adobe nabyła Nitobi w 2011 roku i przekazała rdzeń o otwartym kodzie źródłowym do Apache Software Foundation, która zmieniła nazwę na Apache Cordova. Powszechną analogią, na którą często się natkniesz, jest to, że Cordova jest dla PhoneGap tym, czym WebKit dla Chrome lub Safari.

Oczywiście różnice między Cordovą a PhoneGap były na początku minimalne. Z czasem firma Adobe PhoneGap opracowała własny zestaw zastrzeżonych funkcji, podczas gdy Cordova była – i nadal jest – wspierana przez społeczność open source. Ta recenzja i samouczek Apache Cordova bardziej szczegółowo przeanalizuje rozwój aplikacji Cordova i chociaż niektóre z nich mogą dotyczyć PhoneGap, nie należy tego traktować jako samouczka PhoneGap.

Możliwości Apache Cordova

W istocie Cordova nie ma ograniczeń w stosunku do aplikacji tworzonych natywnie. To, co otrzymujesz z Cordova, to po prostu interfejs API JavaScript, który służy jako opakowanie dla kodu natywnego i jest spójny na wszystkich urządzeniach. Można uznać Cordovę za kontener aplikacji z widokiem WWW, który obejmuje cały ekran urządzenia. Widok internetowy używany przez Cordova to ten sam widok internetowy, który jest używany przez natywny system operacyjny. W systemie iOS jest to domyślna klasa Objective-C UIWebView lub niestandardowa klasa WKWebView ; w systemie Android jest to android.webkit.WebView .

Apache Cordova jest dostarczany z zestawem gotowych wtyczek, które zapewniają dostęp do aparatu urządzenia, GPS, systemu plików itp. Wraz z rozwojem urządzeń mobilnych dodanie obsługi dodatkowego sprzętu jest po prostu kwestią opracowania nowych wtyczek.

Wreszcie, aplikacje Cordova instalują się tak, jak aplikacje natywne. Oznacza to, że budowanie kodu dla systemu iOS wygeneruje plik IPA, dla systemu Android plik APK, a kompilacja dla systemu Windows Phone wygeneruje plik XAP. Jeśli włożysz wystarczająco dużo wysiłku w proces rozwoju, Twoi użytkownicy mogą nawet nie zorientować się, że nie korzystają z natywnej aplikacji.

Przepływy pracy programistyczne Apache Cordova

Istnieją dwie podstawowe ścieżki, którymi możesz podążać podczas programowania w Cordovie:

• Jeśli Twoim zamiarem jest wdrożenie aplikacji na jak największej liczbie platform, przy niewielkim lub żadnym rozwoju specyficznym dla platformy, powinieneś użyć wieloplatformowego przepływu pracy. Głównym narzędziem obsługującym ten przepływ pracy jest Cordova Command-Line Interface (CLI), który służy jako abstrakcja wyższego poziomu do konfigurowania i budowania aplikacji dla różnych platform. Jest to najczęściej stosowana ścieżka rozwoju.
• Jeśli planujesz rozwijać swoją aplikację z myślą o konkretnej platformie, powinieneś skorzystać z przepływu pracy skoncentrowanego na platformie. W ten sposób będziesz mógł poprawiać i modyfikować swój kod na niższym poziomie, mieszając komponenty natywne z komponentami Cordova. Nawet jeśli możesz użyć tego podejścia do rozwoju międzyplatformowego, proces ten będzie dłuższy i bardziej żmudny.

Zazwyczaj zaleca się rozpoczęcie od wieloplatformowego przepływu pracy programistycznej, ponieważ przejście na programowanie skoncentrowane na platformie jest dość proste. Jeśli jednak początkowo zaczniesz od przepływu pracy skoncentrowanego na platformie, nie będziesz w stanie przełączyć się na programowanie międzyplatformowe, ponieważ interfejs wiersza polecenia zastąpi Twoje dostosowania po uruchomieniu procesu kompilacji.

Warunki wstępne i instalacja Cordova

Przed zainstalowaniem i uruchomieniem czegokolwiek związanego z Cordova, będziesz musiał zainstalować SDK dla każdej platformy, dla której zamierzasz zbudować swoją aplikację. W tym artykule skupimy się na platformie Android; jednak proces obejmujący inne platformy jest podobny.

Powinieneś pobrać Android SDK, który znajdziesz tutaj. W przypadku systemu Windows SDK jest dostępny jako instalator, podczas gdy w przypadku systemu Linux i OSX jest dostępny jako archiwum, które można po prostu rozpakować. Po wypakowaniu/zainstalowaniu pakietu, będziesz musiał dodać katalogi sdk/tools i sdk/platform-tools do swojej zmiennej PATH . Zmienna PATH jest używana przez Cordova do wyszukiwania plików binarnych potrzebnych do procesu kompilacji. Jeśli nie masz zainstalowanej Javy, powinieneś zainstalować JDK razem z Antem. ANT_HOME i JAVA_HOME należy ustawić na foldery bin JDK i Ant, a po zainstalowaniu Android SDK ustawić zmienną ANDROID_HOME na Android/Sdk . Wszystkie lokalizacje w trzech zmiennych *_HOME powinny również znajdować się w zmiennej PATH .

Po zainstalowaniu SDK android polecenie stanie się dostępne w twoim wierszu poleceń. Uruchom go, aby otworzyć menedżera SDK i zainstalować najnowsze narzędzia oraz interfejs Android API. Prawdopodobnie będziesz potrzebować narzędzi Android SDK, narzędzi platformy Android SDK, narzędzi do budowania Android SDK, platformy SDK, interfejsów API Google Intel x86 Atom System Image, źródeł dla Android SDK i Intel x86 Emulator Accelerator (instalator HAXM) . Po tym będziesz mógł stworzyć emulator z android avd .

Cordova CLI zależy od Node.js i klienta Git, więc pobierz i zainstaluj Node z nodejs.org i Git z git-scm.com. Będziesz używać npm do instalacji samego Cordova CLI, a także do instalowania dodatkowych wtyczek, a Cordova użyje git za kulisami, aby pobrać wymagane zależności. Wreszcie biegnij

 npm install -g cordova

…aby zainstalować Cordova CLI globalnie ( npm install cordova sam w sobie nie wystarcza.)

Podsumowując, są to pakiety, których będziesz potrzebować:

• Jawa
• Mrówka
• Android SDK
• NodeJS
• Gita

A te zmienne środowiskowe będą musiały zostać zaktualizowane:

• PATH
• JAVA_HOME
• ANT_HOME
• ANDROID_HOME

Uruchamianie aplikacji

Jeśli pomyślnie zainstalowałeś Cordova, powinieneś mieć teraz dostęp do narzędzia wiersza poleceń Cordova. Otwórz terminal lub wiersz poleceń i przejdź do katalogu, w którym chcesz utworzyć swój pierwszy projekt Cordova. Aby załadować aplikację, wpisz następujące polecenie:

 cordova create toptal toptal.hello HelloToptal

Wiersz poleceń składa się z nazwy polecenia cordova , po której następuje podpolecenie create . Podkomenda jest wywoływana z trzema dodatkowymi parametrami: folder, w którym zostanie umieszczona aplikacja, przestrzeń nazw aplikacji i jej wyświetlana nazwa. Spowoduje to załadowanie aplikacji do folderu o następującej strukturze:

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

Folder www zawiera rdzeń Twojej aplikacji. Tutaj umieścisz kod aplikacji, który jest wspólny dla wszystkich platform.

Chociaż Cordova umożliwia łatwe tworzenie aplikacji dla różnych platform, czasami trzeba dodać dostosowania. Podczas programowania dla wielu platform nie chcesz modyfikować plików źródłowych w różnych katalogach platforms/[platform-name][assets]/www , ponieważ są one regularnie zastępowane plikami www najwyższego poziomu.

W tym momencie możesz również otworzyć plik config.xml i zmienić metadane aplikacji, takie jak autor i opis.

Dodaj swoją pierwszą platformę, używając:

 cordova platform add android

Jeśli później zmienisz zdanie, możesz łatwo usunąć platformę z procesu budowania:

 cordova platform rm android

Po sprawdzeniu katalogu platform zauważysz w nim folder android . Dla każdej dodanej platformy Cordova utworzy nowy katalog na platformach i zduplikuje w nim folder www . Jeśli na przykład chcesz dostosować swoją aplikację do Androida, możesz zmodyfikować pliki w platforms/android/assets/www i przełączyć się na narzędzia powłoki specyficzne dla platformy.

Pamiętaj jednak, że jeśli przebudujesz swoją aplikację za pomocą CLI (używanego do rozwoju międzyplatformowego), Cordova nadpisze zmiany, które wprowadziłeś dla każdej platformy, więc upewnij się, że masz je pod kontrolą wersji, albo robisz dla konkretnej platformy zmiany po zakończeniu rozwoju międzyplatformowego. Jak wspomnieliśmy wcześniej, przejście od rozwoju wieloplatformowego do rozwoju specyficznego dla platformy jest łatwe. Ruch w innym kierunku nie jest.

Jeśli chcesz nadal korzystać z wieloplatformowego przepływu pracy i nadal wprowadzać dostosowania specyficzne dla platformy, powinieneś użyć folderu scalania najwyższego poziomu. Od wersji 3.5 Cordova ten folder został usunięty z domyślnego szablonu aplikacji, ale jeśli go potrzebujesz, możesz go po prostu utworzyć razem z innymi katalogami najwyższego poziomu ( hooks , platforms , plugins i www ).

Dostosowania specyficzne dla platformy są umieszczane w merges/[platform-name] i są stosowane po plikach źródłowych w folderze www najwyższego poziomu. W ten sposób możesz dodać nowe pliki źródłowe dla niektórych platform lub zastąpić całe pliki źródłowe najwyższego poziomu plikami specyficznymi dla platformy. Weźmy na przykład następującą strukturę:

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

W takim przypadku plik wyjściowy dla systemu Android będzie zawierał zarówno pliki app.js , jak i android.js , ale plik wyjściowy dla systemu Windows Phone 8 będzie zawierał tylko plik app.js , który znajduje się w folderze merges/wp8 , ponieważ pliki w merges/[platform] zastępują pliki w www .

Katalog wtyczek zawiera informacje o wtyczkach każdej platformy. W tym momencie powinieneś mieć tylko plik android.json , który powinien mieć następującą strukturę:

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

Zbudujmy aplikację i wdrożmy ją na urządzeniu z systemem Android. Możesz też użyć emulatora, jeśli chcesz.

Cordova zapewnia kilka kroków CLI do budowania i uruchamiania aplikacji: cordova prepare , cordova compile , cordova build (który jest skrótem do poprzednich dwóch), cordova emulate emulator i cordova run (który zawiera build i może również uruchamiać emulator). Nie powinno Cię to mylić, ponieważ w większości przypadków chciałbyś zbudować i uruchomić swoją aplikację w emulatorze:

 cordova run --emulator

Jeśli chcesz, możesz podłączyć urządzenie przez port USB, włączyć tryb debugowania USB i wdrożyć swoją pierwszą aplikację Apache Cordova bezpośrednio na swoim urządzeniu, po prostu uruchamiając:

 cordova run

To skopiuje wszystkie twoje pliki do platforms/* i wykona wszystkie wymagane zadania.

Możesz ograniczyć zakres procesu budowania podając nazwę platformy, na którą chcesz zbudować aplikację i/lub nawet konkretny emulator, np.:

 cordova run android --emulator

lub

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

Praktyczny samouczek Apache Cordova

Stwórzmy prostą aplikację samouczka, aby zademonstrować użycie Cordova i jej wtyczek. Całe demo można znaleźć w tym repozytorium GitHub, dzięki czemu można je pobrać i przejść przez jego części wraz z tym krótkim samouczkiem Cordova.

Użyjemy utworzonej przez Ciebie początkowej konfiguracji i dodamy dodatkowy kod. Załóżmy, że chcemy dodać nowe projekty do wyimaginowanej bazy danych Toptal, a także przeglądać już istniejące. Otwórz index.html i skonfiguruj dwie zakładki w następujący sposób:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" /> <link rel="stylesheet" type="text/css" href="css/toptal.css" /> <title>Hello Toptal</title> </head> <body> <div> <div> </div> </div> <footer> <ul> <li class="tab-button active" data-tab="#search-tab">Search Projects</li> <li class="tab-button" data-tab="#add-tab">Post a Project</li> </ul> </footer> <div></div> <script src="js/lib/jquery-1.11.1.min.js"></script> <script src="js/lib/jquery.mobile-1.4.5.min.js"></script> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/SQLiteStorageService.js"></script> <script type="text/javascript" src="js/Controller.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html>

Zauważ, że dodałem Bootstrap i jQuery Mobile jako zależności. Należy pamiętać, że opracowano znacznie lepsze rozwiązania i frameworki do tworzenia nowoczesnych aplikacji hybrydowych, ale ponieważ większość (jeśli nie wszyscy) programistów internetowych zna te dwie biblioteki, sensowne jest użycie ich w samouczku dla początkujących. Możesz pobrać arkusze stylów z GitHub lub użyć własnego, jeśli wolisz.

Przejdźmy do index.js i zmniejszmy go do następującego:

 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();

Pamiętaj, że zalecaną architekturą dla aplikacji Cordova jest skonfigurowanie aplikacji jednostronicowej (SPA). W ten sposób wszystkie zasoby są ładowane tylko raz podczas uruchamiania aplikacji i mogą pozostać w widoku internetowym tak długo, jak aplikacja jest uruchomiona. Ponadto, dzięki SPA, użytkownik nie będzie miał przeładowań stron, które nie są typowe dla aplikacji natywnych. Mając to na uwadze, skonfigurujmy prosty kontroler, aby przełączać się między dwiema zakładkami:

 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; }

Kontroler ma jak dotąd dwie metody, jedną do renderowania widoku wyszukiwania, a drugą do renderowania widoku projektu post. Zainicjujmy go w naszym index.js , najpierw deklarując go na górze i konstruując w metodzie onDeviceReady:

 // top of index.js var controller = null

 // inside onDeviceReady method controller = new Controller();

Na koniec dodaj odwołanie do skryptu w index.html powyżej odwołania do index.js . Widoki wyszukiwania i publikowania można pobrać bezpośrednio z serwisu GitHub. Ponieważ częściowe widoki są odczytywane z pliku, niektóre przeglądarki, takie jak Chrome, próbując renderować Twoją stronę, będą narzekać na żądania międzydomenowe.

Możliwym rozwiązaniem byłoby tutaj uruchomienie lokalnego serwera statycznego, na przykład przy użyciu modułu node-static npm. Również tutaj możesz zacząć myśleć o użyciu niektórych frameworków, takich jak PhoneGap i/lub Ionic. Wszystkie zapewniają szereg narzędzi programistycznych, w tym emulację w przeglądarce, ponowne ładowanie na gorąco i generowanie kodu (rusztowanie).

Na razie po prostu wdrożmy na urządzeniu z Androidem, uruchamiając następujące polecenie:

 cordova run android

W tym momencie Twoja aplikacja powinna mieć dwie zakładki. Pierwsza zakładka umożliwia wyszukiwanie projektów:

Druga zakładka umożliwia publikowanie nowych projektów:

Wszystko, co mamy teraz, to klasyczna aplikacja internetowa działająca w widoku sieciowym. Tak naprawdę nie używaliśmy żadnej z natywnych funkcji, więc spróbujmy to zrobić teraz. Częstym pytaniem jest, jak przechowywać dane lokalnie na urządzeniu, a dokładniej, jakiego typu pamięci użyć. Można przejść na kilka sposobów:

• Lokalny magazyn
• WebSQL
• Indeksowana baza danych
• Dostęp do pamięci masowej po stronie serwera za pośrednictwem usługi internetowej
• Wtyczki innych firm zapewniające inne opcje

LocalStorage nadaje się do przechowywania niewielkich ilości danych, ale nie wystarczy, jeśli tworzysz aplikację intensywnie korzystającą z danych, ponieważ dostępna przestrzeń waha się od 3 do 10 MB. IndexedDB może być lepszym rozwiązaniem w tym przypadku. WebSQL jest przestarzały i nie jest obsługiwany na niektórych platformach. Wreszcie, korzystanie z usług internetowych do pobierania i modyfikowania danych dobrze pasuje do paradygmatu SPA, ale załamuje się, gdy aplikacja przechodzi w tryb offline. Techniki PWA wraz z Service Workers pojawiły się ostatnio w świecie Cordova, aby w tym pomóc.

Ponadto istnieje wiele dodatkowych wtyczek innych firm, które mają wypełnić luki w rdzeniu Cordova. Wtyczka File może być bardzo przydatna, ponieważ zapewnia dostęp do systemu plików urządzenia, umożliwiając tworzenie i przechowywanie plików. Na razie wypróbujmy SQLitePlugin, który zapewnia lokalną bazę danych SQLite. Możesz dodać go do swojego projektu, uruchamiając:

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

SQLitePlugin zapewnia API do bazy danych SQLite urządzenia i służy jako prawdziwy mechanizm trwałości. Prostą Usługę Magazynowania możemy stworzyć w następujący sposób:

 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(); }

Możesz pobrać kod do pobierania i dodawania projektów z GitHub i wkleić go w odpowiednich symbolach zastępczych. Nie zapomnij dodać SQLiteStorageService.js do pliku index.html powyżej Controller.js i zainicjować go w kontrolerze, modyfikując funkcję init kontrolera:

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

Jeśli rzucisz okiem na service.addProject(), zauważysz, że wywołuje ona metodę navigator.geolocation.getCurrentPosition(). Cordova ma wtyczkę geolokalizacji, której można użyć, aby uzyskać aktualną lokalizację telefonu, a nawet można użyć metody navigator.geolocation.watchPosition(), aby otrzymywać aktualizacje, gdy zmieni się pozycja użytkownika.

Na koniec dodajmy uchwyty zdarzeń kontrolera do dodawania i pobierania projektów z bazy danych:

 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 = '<a target="_blank" href="https://www.google.com.au/maps/preview/@' + project.location.latitude + ',' + project.location.longitude + ',10z">Click to open map</a>'; $div.find('.project-location').html(url); } else { $div.find('.project-location').text("Not specified"); } $tab.append($div); } }).fail(function(error) { alert(error); }); }); }

Aby dodać konsolę i wtyczki dialogowe, wykonaj następujące czynności:

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

Wtyczka cordova.console pomoże ci w debugowaniu, włączając funkcję console.log() w emulatorach.

Możesz łatwo debugować aplikacje na Androida za pomocą zdalnego debugera Chrome. Po podłączeniu urządzenia kliknij menu rozwijane w prawym górnym rogu (pod przyciskiem X), rozwiń Więcej narzędzi i kliknij Sprawdź urządzenia. Powinieneś zobaczyć swoje urządzenie na liście i powinno być możliwe otwarcie konsoli debugowania.

Safari udostępnia te same funkcje do debugowania aplikacji iOS, które działają na urządzeniu lub emulatorze podłączonym do portu USB. Po prostu włącz Narzędzia dla programistów w zakładce Ustawienia Safari> Zaawansowane.

Wtyczka cordova.dialogs umożliwia natywne powiadomienia. Powszechną praktyką jest przedefiniowanie metody windows.alert przy użyciu interfejsu API cordova.dialogs w następujący sposób:

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

Funkcja overrideBrowserAlert powinna zostać wywołana w ramach obsługi zdarzeń deviceready .

Powinieneś teraz móc dodawać nowe projekty i przeglądać istniejące z bazy danych. Jeśli zaznaczysz pole wyboru „Dołącz lokalizację”, urządzenie wykona wywołanie API geolokalizacji i doda Twoją aktualną lokalizację do projektu.

Dodajmy do aplikacji wykończenie, ustawiając ikonę i ekran powitalny. Dodaj następujące elementy do pliku config.xml :

 <platform name="android"> <icon src="www/img/logo.png" /> <splash src="www/img/logo.png" density="mdpi"/> <splash src="www/img/logo.png" density="hdpi"/> <splash src="www/img/logo.png" density="xhdpi"/> </platform>

Na koniec umieść obraz logo w folderze www/img .

Twoja własna aplikacja Cordova

Przeszliśmy przez podstawowe etapy tworzenia aplikacji Apache Cordova i wykorzystaliśmy własną architekturę JavaScript i arkusz stylów CSS. Ten samouczek Cordova był próbą pokazania potencjału Apache Cordova jako sposobu tworzenia aplikacji mobilnych przy użyciu znanych technologii, skracając zarówno czas programowania, jak i wysiłek wymagany do zbudowania wielu aplikacji dla różnych platform.

Jednak podczas tworzenia aplikacji, które trafią do produkcji, zaleca się korzystanie z istniejącej platformy. Oprócz strukturyzowania aplikacji w predefiniowanej architekturze, może to również zapewnić zestaw komponentów, które pomogą Twojej aplikacji zbliżyć się do natywnego wyglądu i działania. Niektóre frameworki warte uwagi to Ionic, Framework7, Weex, Ratchet, Kendo UI i Onsen UI. Powodzenia!