Това ръководство ще ви научи как да създадете хибридно приложение, използвайки популярната платформа за изграждане на приложения PhoneGap. Това, което ще направим, е да превърнем уебсайта ви в инсталиращ се файл .apk (приложение за Android), който може да бъде инсталиран на всеки телефон с Android. Когато приложението бъде стартирано, то просто ще отвори уебсайта ви в родния браузър WebView на Android, но ще се появи като приложение на цял екран - без лента за навигация по URL или каквато и да е друга улика, че вашият уебсайт просто се представя в браузър.
Изисквания
Вашият собствен уебсайт (за целите на следването на това ръководство можете просто да стартирате безплатен блог на WordPress)
Акаунт в GitHub
Акаунт в PhoneGap
Notepad ++ (или подобен софтуер за редактиране на текст, който може да разпознава код)
Софтуер за редактиране на снимки за създаване на икони на приложения (Photoshop, GIMP и др.)
Шаблони за кодиране
Това са кодови шаблони, които можете да използвате за целите на това ръководство - те са от собственото ми приложение, разработено с PhoneGap, но съм ги лишил от личната си информация. Настройването им от нулата с всички правилни параметри ми отне много дни за отстраняване на неизправности, затова ги предоставям за ваше удобство. Моля!
> Config.XML
> Index.HTML
Приготвяме се да започнем
Създайте папка на вашия работен плот и я наречете „ www: ' без кавичките. Това ще бъде основната директория на проекта, където конструкторът на PhoneGap ще очаква да намери всички файлове за вашия проект. Сега ще създадем икона за вашето приложение.
Отворете софтуера си за редактиране на снимки и създайте ново изображение във формат .PNG. Настройките на изображението ви трябва да изглеждат така:
И сега можете да нарисувате иконата си, например просто ще направя малък бутон:
Размерът на изображението зависи от екрана на вашия личен телефон, но ако възнамерявате да разработите приложение за множество устройства, разбира се, ще направите няколко размера на една и съща икона. Ето таблица на използваните размери на изображението:
36 × 36 (120 dpi / LDPI)
48 × 48 (160 dpi / MDPI)
72 × 72 (240 dpi / HDPI)
96 × 96 (320 dpi / XHDPI)
144 × 144 (480 dpi / XXHDPI)
192 × 192 (640 dpi / XXXHDPI)
Не искам да прекарвам твърде дълго в разговори за размерите на екрана и DPI, просто знайте, че DPI почти корелира с разделителната способност на екрана. Телефон, който използва 1080 × 1920 разделителна способност на екрана, ще използва 480 dpi, но това не е така задължително корелират точно с размера на екрана. Телефонът може да има 5,2 ”или 6” екран и да има разделителна способност 1080 × 1920. Но това ръководство не е за екрани на смартфони, така че нека продължим напред.
След като изготвите иконата си, запазете я като icon.png и го преместете във вашата www: папка. Това ще стане по подразбиране икона за вашето приложение. Ако искате да създадете икони с различни размери, които да съответстват на разделителната способност на екрана на потребителя, бихте запазили иконата в различни размери и имена, например Icon144.png, Icon192.png, Icon96.png и т.н. След това ще редактирате Config.xml файл, за да сочи към всяка отделна икона. Да продължим.
Така че сега, след като имате икона за приложението си, имате нужда от начално изображение. Това е основно екран за зареждане, като тапет, който се показва преди приложението ви да се зареди. Размерите на изпръскващите изображения работят на същия принцип като иконите, но са малко по-големи. Ето таблицата:
- LDPI:
- Портрет: 200x320px
- Пейзаж: 320x200px
- MDPI:
- Портрет: 320x480px
- Пейзаж: 480x320px
- HDPI:
- Портрет: 480x800px
- Пейзаж: 800x480px
- XHDPI:
- Портрет: 720px1280px
- Пейзаж: 1280x720px
- XXHDPI:
- Портрет: 960px1600px
- Пейзаж: 1600x960px
- XXXHDPI:
- Портрет: 1280px1920px
- Пейзаж: 1920x1280px
Така че създайте вашето начално изображение в разделителната способност на вашето устройство, запазете го като Splash.png и след това го преместете в папката на вашия проект. Страхотно, вече имате иконата на приложението и изображението на началния екран, нека преминем към настройването на вашите конфигурационни и индексни файлове.
Обяснено е Index.HTML и Config.XML
Файлът config.xml е това, което задава средата за изграждане (Android, iPhone, Windows Phone), местоположенията на иконите и изпръскванията и приставките Apache Cordova, които искате да използвате във вашето приложение.
Отворете шаблона, който предоставих в Notepad ++, и ще видите тези редове в горната част:
Актуализирайте тези полета с вашата информация, но оставете полетата „предпочитания“ на мира. Останалата част от конфигурационния файл е обяснима, ако просто погледнете стойностите. Име на предпочитание = „цял екран“ например казва на приложението да се стартира като приложение на цял екран. Оставете всичко на мира, с изключение на тази последна стойност в долната част на файла:
Променете го на вашия действителен URL адрес на уебсайта. Това ще позволи на потребителя на приложението да се ориентира изцяло във вашия уебсайт и само във вашия уеб сайт - той не може да напусне уебсайта ви, докато използва приложението ви. Разбира се, приложението няма да има лента за навигация по URL, това дори не е проблем, но също така гарантира, че потребителят има достъп до всички страници на вашия уебсайт. * След URL адреса на уебсайта е a заместващ символ , което в кодиращ жаргон означава, че ще приеме всичко, което е въведено вместо знака *.
Разбира се, ако искате да ограничите потребителя само до определени страници на вашия уебсайт, бихте добавили отделни стойности като тази:
Нека да преминем към Index.html файл, това е хлябът и маслото, за да може приложението действително да работи. Отворете го в Notepad ++ и превключете езика на документа на HTML. Това, което index.html основно прави, е да каже на браузъра Android как да покаже вашия уебсайт - в предоставения от мен шаблон има маркери за премахване на лентата за навигация на URL от браузъра, позволяване на бутона „Назад“ на телефона да излезе от приложението и да стартира приложението след извеждането на началния екран. Линията, която искате да промените, е тук:
var url = ‘http://yourwebsite.com’
Изграждане на приложението в PhoneGap Build
Така че влезте във вашия акаунт в GitHub и отидете до главната страница на вашето хранилище. Под името на хранилището щракнете върху „Качване на файлове“ и плъзнете папката на проекта в екрана на дървото на файла. Сега въведете съобщение за фиксиране отдолу, като „ първият ми опит за приложение “ . Накрая щракнете върху Фиксирай промени
Сега отидете на Изграждане на PhoneGap страница и влезте. Сега кликнете върху бутона „Ново приложение“ на страницата за изграждане. Това ще ви помоли да въведете пътя към вашето хранилище в GitHub, така че направете го и след това щракнете върху „Издърпайте от .git reposity“.
Сега отново на главната страница за компилация щракнете върху „Актуализиране на кода“ и „Издърпайте най-новата“.
Накрая щракнете върху „Изграждане“. Той ще компилира приложението ви в .apk файл и след това ще ви представи опцията за изтегляне на .apk. Вече можете да изтеглите този .apk файл на компютъра си и да го прехвърлите на телефона си, след което да го инсталирате оттам. Като алтернатива можете да използвате телефона си, за да сканирате QR кода на екрана на компютъра си, за да инсталирате автоматично .apk файла на вашето устройство с Android.
Това е! Сега, за да ви обясня няколко важни неща:
- Това беше изключително опростено ръководство, което ви преведе през създаването на най-основните хибридни приложения. Хората обикновено не обикалят своите уеб сайтове в роден браузър и го предават като приложение за Android в магазина на Google Play. Но сега, когато знаете как да го направите, можете да започнете да четете документацията на PhoneGap за това как да персонализирате приложението си и да добавите много вкус към него, така че да се надявате да създадете действително полезно приложение.
- На второ място, Google Play забранява този вид метод за изграждане на приложения, за да създава приложения със схеми на връзки с единствената цел на приходите. Така че не можете да създадете приложение, наречено „Печелете пари днес!“ което отваря уебсайт, пълен с реклами и банка за приходи от реклами. Ще получите забрана от магазина на Google Play.
