Забележка: Тъй като това беше първоначално написано, актуализирах тази статия, за да работя с нея [имейл защитен] 0,0, [имейл защитен] , и [имейл защитен]
Мобилните приложения се прокрадват навсякъде, започвайки от смартфони и таблети, до смарт часовници и скоро ще бъдат намерени и в други носими устройства. Разработването на всяка отделна мобилна платформа обаче може да бъде изчерпателна задача, особено ако ресурсите ви са ограничени или ако сте единствен разработчик, а не компания за разработка на мобилни приложения .
Това е мястото, където да станеш добре познат разработчик на Apache Cordova може да ви бъде полезен, като предостави начин за разработване на мобилни приложения, използващи стандартни уеб технологии - HTML5, CSS3 и JavaScript.
През 2009 г. стартираща компания, наречена Nitobi, създаде PhoneGap, API с отворен код за достъп до местни мобилни ресурси, с цел да даде възможност на разработчиците да създават мобилни приложения, използващи стандартни уеб технологии. Във визията на Nitobi повечето мобилни приложения скоро ще бъдат разработени с помощта на PhoneGap, но разработчиците все още ще имат възможността да пишат собствен код, когато е необходимо, било то поради проблеми с производителността или липса на метод за достъп до конкретен хардуер.
Cordova PhoneGap?
Наистина няма такова нещо. Това, което се случи, беше, че Adobe придоби Nitobi през 2011 г. и дари ядрото с отворен код на Apache Software Foundation, която го ребрандира 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
Има два основни пътя, които можете да следвате, когато се развивате с Cordova:
- Когато вашето намерение е да разположите приложение на възможно най-много платформи, с малко или никакво развитие, специфично за платформата, трябва да използвате работния процес на различни платформи. Основният инструмент, поддържащ този работен процес, е интерфейсът на командния ред на Cordova (CLI), който служи като абстракция от по-високо ниво за конфигуриране и изграждане на вашето приложение за различни платформи. Това е по-често използваният път на развитие.
- Ако планирате да разработите приложението си предвид конкретна платформа, трябва да използвате ориентирания към платформата работен процес. По този начин ще можете да промените и модифицирате кода си на по-ниско ниво чрез смесване на естествени компоненти с компоненти на Cordova. Въпреки че бихте могли да използвате този подход за развитие на различни платформи, процесът ще бъде по-дълъг и по-досаден.
Обикновено се препоръчва да започнете с междуплатформен работен процес, тъй като преминаването към платформено-центрирано развитие е доста лесно. Ако обаче първоначално започнете с работния процес, ориентиран към платформата, няма да можете да преминете към разработване на различни платформи, тъй като CLI ще замени вашите персонализации, след като стартирате процеса на изграждане.
Предпоставки и инсталиране на Cordova
Преди да инсталирате и стартирате каквото и да било, свързано с 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 мениджъра и да инсталирате най-новите инструменти и Android API. Вероятно ще имате нужда Android SDK Tools, Android SDK Platform tools, Android SDK Build-tools, SDK Platform, Google APIs Intel x86 Atom System Image, Източници за Android SDK и Intel x86 Emulator Accelerator (инсталатор на HAXM) . След това ще можете да създадете емулатор с android avd.
Cordova CLI зависи от Node.js и Git клиента, така че продължете и изтеглете и инсталирайте Node от nodejs.org и Git от git-scm.com . Ще използвате npm за инсталиране на самия CLI на Cordova, както и за инсталиране на допълнителни плъгини, а Cordova ще използва git зад кулисите, за да изтегли необходимите зависимости. Накрая тичай
npm install -g cordova ... да инсталирате Cordova CLI глобално (npm install cordova не е достатъчно само по себе си.)
За да обобщим, това са пакетите, от които ще се нуждаете:
- Java
- Мравка
- Android SDK
- NodeJS
- Отивам
И тези променливи на средата ще трябва да бъдат актуализирани:
какъв език е c
PATHJAVA_HOMEANT_HOMEANDROID_HOME
Стартиране на приложението
При условие, че сте инсталирали успешно 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 или
llc c corp срещу s corp
cordova run ios --emulator --target='iPhone-8-Plus' Практически урок за Apache Cordova
Нека създадем просто приложение за урок, за да демонстрираме използването на Cordova и нейните приставки. Цялата демонстрация може да бъде намерена в това хранилище на 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; } Досега контролерът има два метода, един за рендиране на изгледа за търсене и един за рендиране на изгледа на Post Project. Нека го инициализираме в нашите 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
- WebSQL
- Индексирано DB
- Сървърно съхранение, достъпно чрез уеб услуга
- Приставки на трети страни, предоставящи други опции
LocalStorage е добре за съхраняване на малки количества данни, но няма да е достатъчно, ако изграждате интензивно приложение, тъй като наличното пространство варира от 3 до 10 MB. IndexedDB може да е по-доброто решение за този случай. WebSQL е остарял и не се поддържа на някои платформи. И накрая, използването на уеб услуги за извличане и модифициране на данни се вписва добре в SPA парадигмата, но се разпада, когато приложението ви излезе офлайн. Техниките на PWA, заедно със сервизните работници, наскоро дойдоха в света на Кордова, за да помогнат в това.
Освен това има много допълнителни приставки на трети страни, които влизат, за да запълнят пропуските в ядрото на Cordova. Приставката File може да е доста полезна, тъй като ви осигурява достъп до файловата система на устройството, като ви позволява да създавате и съхранявате файлове. Засега нека опитаме 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 и да го инициализирате във вашия контролер, като промените функцията за иницииране на контролера:
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 (), за да получавате актуализации, когато позицията на потребителя се промени.
И накрая, нека добавим манипулаторите на събития на контролера за добавяне и извличане на проекти от базата данни:
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), разгънете More Tools и щракнете върху Inspect Devices. Трябва да видите вашето устройство в списъка и да можете да отворите конзолата му за отстраняване на грешки.
Safari предоставя същата функционалност за отстраняване на грешки в приложения на iOS, които се изпълняват на свързано с USB устройство или емулатор. Просто активирайте Инструменти за разработчици в раздела Safari Settings> Advanced.
Приставката cordova.dialogs позволява естествени известия. Честа практика е да се предефинира windows.alert метод, използващ API на cordova.dialogs по следния начин:
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 манипулатор на събития.
Вече трябва да можете да добавяте нови проекти и да преглеждате съществуващите от базата данни. Ако поставите отметка в квадратчето „Включване на местоположението“, устройството ще се обади на API за геолокация и ще добави вашето текущо местоположение към проекта.
Нека добавим финален щрих към приложението, като зададем икона и начален екран. Добавете следното към вашия config.xml файл:
www/imgНакрая поставете изображение на лого в
|_+_|папка.
Вашето собствено приложение Cordova
Преминахме през основните стъпки от разработването на приложението Apache Cordova и използвахме нашата собствена архитектура на JavaScript и CSS таблица със стилове . Този урок за Cordova беше опит да покаже потенциала на Apache Cordova като средство за разработване на мобилни приложения, използващи познати технологии, намалявайки както времето за разработка, така и усилията, необходими за изграждането на множество приложения за различни платформи.
Въпреки това, когато създавате приложения, които ще влязат в производство, препоръчително е да използвате съществуваща рамка. В допълнение към структурирането на вашето приложение в предварително дефинирана архитектура, това може да ви предостави и набор от компоненти, които ще помогнат на вашето приложение да се доближи до родния външен вид и усещане. Някои рамки, които заслужава да се отбележат, са Йонийски , Рамка7 , Weex , Ratchet , Кендо потребителски интерфейс , и Потребителски интерфейс на Onsen . Късмет!
Свързани: Cordova Frameworks: Ionic vs. Framework7Разбиране на основите
Какво е Кордова?
Apache Cordova е рамка за създаване на междуплатформени мобилни приложения, използващи стандартни уеб технологии. По същество това е контейнер за приложения с уеб изглед, който покрива целия екран на устройството.
Какво е PhoneGap?
В наши дни PhoneGap се позовава на продукт, създаден от Adobe върху Apache Cordova. Първоначално това беше рамката, направена от Nitobi, преди Adobe да ги придобие и да я отвори с отворен код като Apache Cordova.
Какво е WebView?
WebView на Android и UIWebView на iOS са класовете, които съответните операционни системи използват за показване на уеб страници на цял екран. Разработчиците могат да създават уеб браузъри с тях или, в случай на Apache Cordova, да ги използват, за да показват уеб приложение, сякаш е родно приложение.
Какво представлява приставката Cordova?
Приставките Apache Cordova позволяват по-нататъшен достъп до функции на различни платформи. Това могат да бъдат базирани на хардуер услуги като геолокация или чисто базирани на софтуер функционалности като предоставен от OS SQLite достъп до база данни.
