Съдържание
В комбинация с рамка на потребителски интерфейс, като jQuery Mobile или Dojo Mobile, това позволява приложение в естествена форма, но разработено в HTML, CSS и Javascript. Това означава, че ако имаме уеб приложение, можем да го преобразуваме в родно приложение за Android, тъй като Apache Cordova ще функционира като вграден уеб сървър на нашето мобилно устройство.Този Api ни дава възможност за изграждане на мобилни приложения, които ще се изпълняват локално на мобилното устройство и ще се основават на уеб дизайн и разработка, така че с Apache Cordova можем да получим достъп чрез Javascript до функционалностите на мобилното устройство, като например камерата, данните, връзки wifi или мрежи, клавиатура или звук, геолокация, собствена вградена база данни и всяка друга налична функционалност.
Необходимо е да има Android sdk, Мениджър на устройства с Android Y Java jre инсталиран, като също така насочва изпълнимите файлове към системните променливи.
За да започнем, трябва да инсталираме node.js, че е рамка, която ви позволява да създадете сървър, който използва javascript като клиентски език и Cordova се инсталира с помощта на мениджъра на пакети, наречен NPM, който е част от Node.js.
Инсталацията ще се извърши първо на Linux, ще влезем в терминала в root режим и ще изтеглим файла node.js със следната команда:
wget http://nodejs.org/dist/v0.10.34/node-v0.10.34-linux-x86.tar.gz
Разархивирайте и копирайте в друга директория
sudo tar -C / usr / local --strip-components 1 -xzf node-v0.10.34-linux-x86.tar.gz
Инсталираме съответните пакети
ls -l / usr / local / bin / node ls -l / usr / local / bin / npm
След това пристъпваме към инсталатора на Apache Cordova
sudo npm install -g cordova
За да проверим дали е инсталиран правилно, можем да напишем в терминала кордова -v и ще върне инсталираната версия на Apache Cordova.
След инсталацията можем да създаваме приложения с Cordova, за да създадем приложение, отиваме в директорията на проекта, която имаме и след това от терминала пишем предложените команди:
Структурата на командите ще бъде:
cordova създава проект-директория компонент.package.class
така например нашето приложение ще бъде:
cordova създаде misapp com.tutoriales.misapp MiApp01
Това ще създаде структурата на проекта и ще изтегли всички необходими и актуализирани пакети, които ще използваме в нашето приложение.
Cordova подражава на AndroidМожем да видим как е създадена директорията неправилно приложение, в структурата на приложението и там можем да намерим следното съдържание.
В папката платформи Той съдържа необходимите файлове, за да може Cordova да взаимодейства с различните устройства, тук ще добавим платформите, които искаме да тестваме нашето приложение.
Пример от терминала ще изпълним следната команда, за да използваме платформата Android
платформа кордова добавяне на android
Резултатът ще бъде:
# / projects / misapp / www $ cordova платформа добавяне на android Създаване на android проект … Създаване на проект Cordova за платформата Android: Път: платформи / android Пакет: com.tutoriales.misapp Име: MiApp01 Android цел: android-19 Копиране на файлове с шаблони … Проект успешно създаден.
Това ще конфигурира валиден емулатор за Androd версия 19 Какво е той API версия 19 или също Android 4.4 (KITKAT), което означава, че можем да подражаваме на всяко устройство, което работи с тази версия или по -ниска. Някои поддържани платформи са Amazon Fire OS, Android, BlackBerry, Firefox OS, iOS, Windows Phone, В този урок ще се съсредоточим върху Android.
В адресната книга www Тук ще бъде разработено самото приложение, ще бъдат хоствани HTML, CSS, изображения и Javascript файлове, както и всички необходими ресурси за нашето приложение, не забравяйте, че това е уеб страница, която ще работи първоначално в сървър, а също вграден уеб браузър, който ще работи като родно приложение за Android.
Когато създаваме нашия проект в директорията www, ще бъде създадена обща структура на проекта дефиниран с кода, необходим за стартиране на просто приложение от тип "Здравей свят„Така че имаме пример или шаблон на изпълнимо приложение, за да проверим дали работи преди програмиране, но за да го стартираме, първо трябва да добавим платформата или платформите, например, ако искаме да го тестваме на устройства с Android и iOS, които използвайте следната команда:
За android
Cordova изграждане на AndroidЗа ios
Cordova изгражда iOS
Всеки път, когато изпълним командата в директорията на приложението, тя ще знае, че това е приложението за компилиране. Веднъж компилиран в директорията платформи / платформи / android / ant-build / той ще генерира файлове за нас.
CordovaApp-debug.apk
Който ще бъде инсталиращият и изпълним apk файл на всяко устройство с Android. За да го стартирате, директорията на приложението трябва да има разрешения за пълен достъп. Сега ще го изпълним за първи път с емулатора за това пишем в терминала.
Cordova подражава на Android
Сега можем да започнем да създаваме нашето приложение, като редактираме файла index.html, намерен в директорията www. Кодът е прост, мета открива типа на устройството, изгледите ще адаптират съдържанието към разделителната способност и размера на екрана на устройството.
Останалата част от кода е HTML5, файлът cordoba.js ще има конфигурацията на сървъра, а файлът index.js ще бъде мястото, където ще програмираме нашите скриптове, за да дадем интерактивност на приложението.
Miapp01Свързване към устройството
Устройството е готово
Нека направим някои промени с Html5 и CSS3 за тестване и ще тестваме и друго устройство. Нека създадем формуляр с две полета вътре в слоя на приложениетоИме:
Електронна поща:
Търсим папката css във файла index.css и ще добавим следния код, за да оформяме бутона .btn {background: # 3498db; background-image: -webkit-linear-gradient (отгоре, # 3498db, # 2980b9); background-image: -moz-linear-gradient (отгоре, # 3498db, # 2980b9); background-image: -ms-linear-gradient (отгоре, # 3498db, # 2980b9); background-image: -o-linear-gradient (отгоре, # 3498db, # 2980b9); фон-изображение: линеен градиент (до долу, # 3498db, # 2980b9); -webkit-border-радиус: 28; -моз-граница-радиус: 28; рамка-радиус: 28px; семейство шрифтове: Arial; цвят: #ffffff; размер на шрифта: 20px; подложка: 10px 20px 10px 20px; декорация на текст: няма; } .btn: hover {background: # 3cb0fd; background-image: -webkit-linear-gradient (отгоре, # 3cb0fd, # 3498db); background-image: -moz-linear-gradient (отгоре, # 3cb0fd, # 3498db); фоново изображение: -ms-линеен градиент (отгоре, # 3cb0fd, # 3498db); фоново изображение: -o-линеен градиент (отгоре, # 3cb0fd, # 3498db); фоново изображение: линеен градиент (до долу, # 3cb0fd, # 3498db); декорация на текст: няма; }
След като направите промените, ние запазваме файловете и стартираме отново с командата cordova emulate android, преди това сме конфигурирали друго устройство в Android Device Manager.
Увеличете
Досега виждаме как да създадем приложение с HTML5, CSS3 и Javascript или Jquery mobile за различни мобилни устройства, независимо дали става въпрос за мобилен телефон или телевизор, който поддържа Android. Много важен аспект, който трябва да имате предвид, е, че целият дизайн трябва да се мисли като адаптивен или отзивчив.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка
