В наши дни уеб разработчиците управляват света. JavaScript се използва навсякъде, където човек може да програмира. Сред тези области разработването на мобилни приложения беше един от първите начини за разклоняване: преди около десет години PhoneGap позволи инсталирането на приложения за HTML и JavaScript за iOS и Android.
хакнат номера на кредитни карти с пълни подробности
Оттогава технологията имаше своите възходи и падения: Въпреки лекотата на разработка, тези приложения очевидно бяха доста различни от родните приложения. Vanilla HTML и базиран на браузър JavaScript бяха насочени към браузърите и нямаше начин те да мигрират безупречно към това ново поле.
И до днес основните проблеми все още са:
- Трудности при спазването на родния дизайн и анимация
- Сложни ефекти на прехода на екрана
- Управление на събития при докосване
- Представяне в големи списъци
- Позициониране на неподвижни елементи
- Адаптиране за различни размери на екрана
- Местоположения на естествени контролни елементи (например лентата на състоянието на iOS)
- Адаптиране към различни мобилни браузъри
Защо да използвам рамка за Cordova Apps?
Кордова технологията често се подценява поради приложения, които имат горепосочените проблеми. Рамките имат за цел да ги компенсират и да вземат HTML приложения възможно най-близо до родните приложения, както по дизайн, така и по производителност.
Нека разгледаме няколко примера за хибридни приложения. Те са направени с двете най-успешни в момента рамки - освен Onsen UI - които са настроени да улеснят разширяването на уеб разработчиците в съвременния свят: Framework7 и Ionic.
Относно йонийската рамка
Ionic е разработен от Drifty Co. през 2012 г. и е базиран на Angular. Оттогава тя се развива активно, като получава значителни инвестиции и силна общност на разработчиците. Официалният сайт твърди, че въз основа на него са разработени милиони приложения.
В момента на писане на тази статия, най-новата версия е Ionic 3, базирана на Angular 5. Ionic 4, целяща гъвкавост и независимост от Angular, е в началото на бета версия.
Освен UI двигателя, чудесно библиотека на компоненти , и интерфейс за достъп до функциите на собственото устройство, Ionic предлага множество допълнителни възможности, услуги и помощни програми.
Йонийският CLI
Интерфейсът на командния ред на Ionic се използва за интерактивна инициализация на проекти (т.е. съветник), генериране на страници и компоненти и стартиране на сървър за разработка, който ви позволява да създавате приложения в движение и да ги презареждате на живо. Той също така осигурява интеграция с Ionic облачни услуги.
Лаборатория и DevApp
Lab е изключително полезната мини-услуга, която ви позволява да имитирате работата на приложението на различни платформи в браузъра на разработчика на Ionic. DevApp ви помага бързо да внедрите приложение на реално устройство.
Опаковане, внедряване и наблюдение
Ionic се предлага с пакет от уеб услуги, които опростяват и ускоряват изграждането, отстраняването на грешки, тестването и актуализирането на приложения за тестери и потребители.
Плановете на Ionic обаче се променят често. Някои съществуващи по-рано услуги - като Auth, Push, Analytics и View - бяха затворени, което предизвика протест от страна на абонатите.
Създател
Това е графичният редактор за плъзгане и пускане на Ionic за разработване на функционални интерфейси.
Относно Framework7
Тази рамка е разработена през 2014 г. от руското студио iDangero. В крайна сметка един разработчик работи по проекта, без да включва няколко незначителни сътрудници в хранилището на GitHub.
Първоначално Framework7 се състоеше от набора от UI компоненти в стила на наскоро пуснатата iOS 7, от която получава името си. По-късно беше добавена тема за Android и двете теми бяха актуализирани за най-новите iOS и Material Design.
Наскоро развитието на проекта набра темп и той се разшири от набор от компоненти до пълноценна рамка за мобилни приложения, интегрирайки популярни технологии и инструменти.
Поддръжката на Framework7 и примери, използващи Vue.js, съществуват от v1, а v3 също поддържа React. Това е, което може да позволи на проекта да се конкурира сериозно с по-популярния Ionic, който предлага само Angular и TypeScript.
Инсталиране и първо стартиране
Йонийски
За да започнете да работите с Ionic, инсталирайте го с NPM:
npm install -g ionic След това изберете шаблона за бъдещото приложение. Официалният сайт на Ionic предлага множество шаблони , или можете да изберете празен шаблон, за да изградите приложението от нулата с ionic start myApp blank.
Нека да изберем прост дизайн. Изпълнете следната команда:
ionic start Todo tabs Отговор „Да“ когато инсталаторът попита „Искате ли да интегрирате новото си приложение с Cordova, за да насочвате към родните iOS и Android?“ Това автоматично ще интегрира приложението с Cordova и ще го подготви за внедряване на мобилни платформи.
В следващата стъпка инсталаторът ще предложи да ни свърже с Ionic Pro SDK. Отговор 'Не' засега, за да улесним примера.
Инсталирайте допълнителния @ionic/lab пакет, за да получите удобния потребителски интерфейс за отстраняване на грешки - имитации в браузъра на устройства с iOS, Android и Windows:
cd Todo npm i --save-dev @ionic/lab Сега можете да стартирате приложението в режим за отстраняване на грешки. Това ви позволява да разработвате и отстранявате грешки в приложението на живо в уеб браузъра:
ionic lab В резултат на това ще получите няколко полезни адреса:
Услугата за отстраняване на грешки в Ionic Lab се стартира на порт 8200. Самото приложение работи на порт 8100 и Отваряне на цял екран връзка от Ionic Lab води там. Прозорецът на браузъра с работещата Ionic Lab се отваря автоматично.
Освен това Ionic предоставя адреса на приложението в локална мрежа . Това е изключително полезно, тъй като ви позволява да отворите приложението в браузъра на мобилното устройство, стига устройството да е в локалната мрежа (например чрез Wi-Fi). Освен това можете да използвате Добави към началния екран бутон, за да отворите отново приложението в режим на цял екран. Това е най-бързият начин да тествате приложението си на устройството.
Друг начин е Приложение на Ionic DevApp , който може да се инсталира на мобилно устройство и осигурява достъп до приложението чрез локалната мрежа. Той предлага поддръжка на приставки (Ionic Native) за достъп до родните функции на устройството и показване на регистрационни файлове.
Рамка7
Инструментите за разработка на F7 са по-малко напреднали от тези на Ionic и CLI за автоматична инициализация не е документиран. Официалният уебсайт обаче предоставя няколко хранилища на GitHub с проекти на шаблони това ще ви помогне да започнете да се развивате.
Подобно на Раздели шаблон в йонийски, F7 предлага Изгледи с раздели , но ще използваме по-функционален шаблон, който интегрира Framework7 с React. Поддръжката за React е добавена в v3. За това клонирайте хранилището на шаблони:
git clone https://github.com/framework7io/framework7-template-react.git Todo Превключете към папката на проекта, извлечете зависимости и стартирайте процеса:
cd Todo npm install npm start Резултатите от изпълнението са подобни на Ionic: Получавате локална връзка и връзка във вашата мрежа за незабавен достъп от реално устройство:
Сега можете да отворите http://localhost:3000/ в браузър. Framework7 не включва вградени емулатори на устройства, така че нека използваме Режим на устройство на Chrome DevTools за да получите подобен резултат:
прогнозирането на продажбите е пример за (n) _____ задача.
Както можете да видите, Framework7 е подобен на Ionic, тъй като има iOS и Material Design като двете си стандартни теми. Темата е избрана въз основа на платформата.
За съжаление, за разлика от подобен шаблон с поддръжка на Vue.js в официалните шаблони на React Webpack все още не е внедрен и това ни забранява да използваме Hot Module Replacement за бързо актуализиране на приложенията без презареждане на страницата. И все пак можете да използвате функцията по подразбиране за презареждане на живо, която презарежда страницата при всяка промяна на изходния код.
Настройване на Кордова
За да инсталирате приложения на устройства и емулатори с Cordova, трябва да изтеглите и настроите инструменти за разработка за iOS и Android, както и Cordova CLI. Можете да прочетете повече за това в нашия предишна статия и на официалния уебсайт на Кордова в Ръководство за платформа на iOS и Ръководство за платформа за Android раздели.
Йонийски
Опитът показва, че за успешно решаване на по-голямата част от проблемите на Ionic е достатъчно отстраняването на грешки в браузър с случайни тестове на реални устройства.
Въпреки че сте приели интеграцията за iOS и Android и Ionic подготвяте необходимите настройки в config.xml файл и ресурси в resources папка, все още трябва да свържете двете платформи към приложението с Cordova:
cordova platform add ios cordova platform add android Сега можете да стартирате приложението Cordova в „истински“ емулатори, да го инсталирате на мобилното устройство и дори да го изпратите до App Store и Google Play.
Следващата команда инсталира приложението на вашето iOS устройство, ако е свързано чрез USB. В противен случай приложението ще бъде инсталирано на iOS Simulator.
cordova run ios Най-вероятно инструментите за команден ред на Xcode ще ви информират за необходимостта от настройване на сертификати за разработчици. Ще трябва да отворите проекта в Xcode и да извършите необходимите действия. Това трябва да се направи само веднъж и след това ще можете да стартирате приложението с Cordova CLI.
Понякога iOS Simulator не се стартира автоматично. В този случай го стартирайте ръчно, например чрез Spotlight.
Емулаторът на Android може да се стартира по подобен начин:
cordova run android 
Имайте предвид, че cordova run команда стартира и инсталира вече съставен приложение, което не използва ionic serve / ionic lab сървър, така че Live Reload няма да работи. За да разработите и отстраните грешки в приложението на живо, използвайте браузъра в локалната мрежа или инсталирайте приложението Ionic DevApp.
Опитът показва, че за успешно решаване на по-голямата част от проблемите на Ionic е достатъчно отстраняването на грешки в браузър с случайни тестове на реални устройства.
Рамка7
Избраният по-рано шаблон „React“ Framework7 не осигурява автоматизация на настройката за Cordova, така че ще трябва да добавяте платформи ръчно. Създайте проект в Cordova в cordova подпапка на вашата папка на проекта:
cordova create cordova/ com.example.todo Todo cd cordova/ cordova platform add ios cordova platform add android cd ../ Шаблонът се основава на Създайте React App , така че за да стартирате компилирания проект в среда на Cordova, трябва да добавите 'homepage': '.' настройка на ./package.json файл. Този файл може да бъде намерен на основното ниво на проекта:
Компилирайте проекта Framework7 и копирайте резултата в проекта Cordova:
npm run build rm -rf cordova/www/* cp -r build/* cordova/www/ Сега можете да стартирате приложението на устройство или емулатор:
cd cordova/ cordova run ios 
Ти си готов! Да се надяваме, че Framework7 отговаря на стандарта на Ionic за разработка и удобство за първоначална настройка.
Създаване на списъци със задачи
Йонийски
Нека най-накрая да започнем да създаваме приложението! Тъй като това е приложение за задачи, главната страница (src/pages/home/home.html файл) ще съдържа списък със задачи с възможност за „маркиране на завършено“ и „добавяне на ново“.
Ionic предлага компонентите и за списъци. Първо премахнете padding свойство от елемента, за да направи списъка за цял екран. В списъка поставете текста с помощта на anelement и добавете anelement, за да маркирате завършени задачи.
Hello ApeeScape Blog Върнете се в раздела на браузъра със стартирана услуга Ionic Lab. Приложението се актуализира автоматично:
Страхотен! Сега преместете данните на задачата в JS обекта и настройте неговото HTML представяне с Angular. Отидете на src/pages/home/home.ts файл и създайте свойството задачи на HomePage екземпляр на клас:
най-добри практики за уеб дизайн на API
export class HomePage { tasks = [{ name: 'Hello' }, { name: 'ApeeScape' }, { name: 'Blog' }]; constructor() { } } Сега можете да се обърнете към tasks масив в HTML код. Използвайте *ngFor Ъглова конструкция за итеративно създаване на елементи от списък за всеки елемент от масив. Кодът става по-малък:
{{task.name}} Остава само да добавите бутона за създаване на нови задачи към заглавката на страницата. За целта използвайте ,,, andcomponents:
To Do List Обърнете внимание на (click)='addTask()' Ъглова конструкция. Както се досещате, той добавя манипулатора на крана към бутона и извиква addTask() метод за нашия компонент. Нека приложим този метод, за да отворим диалоговия прозорец с името на задачата, когато бутонът бъде докоснат.
За това имате нужда от AlertController Йонен компонент. За да използвате този компонент, импортирайте неговия тип:
import { AlertController } from 'ionic-angular'; И го посочете в списъка с параметри на конструктора за страницата:
constructor(public alertCtrl: AlertController) { } Сега можете да го извикате в addTask() метод. Настройте го след контролера. Можете да създадете и покажете диалоговия прозорец със следните обаждания:
this.alertCtrl .create(/* options */) .present(); Посочете заглавката на съобщението, описанието на полето и два бутона в options обект. Бутонът „OK“ ще добави нова задача към tasks масив:
handler: (inputs) => { this.tasks.push({ name: inputs.name }); } След като добавите елемента към масива this.tasks, компонентът ще бъде възстановен реактивно и в списъка ще се покаже нова задача.
Пълният код на страницата изглежда така сега:
import { Component } from '@angular/core'; import { AlertController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { tasks = [{ name: 'Hello' }, { name: 'ApeeScape' }, { name: 'Blog' }]; constructor(public alertCtrl: AlertController) { } addTask() { this.alertCtrl .create({ title: 'Add Task', inputs: [ { name: 'name', placeholder: 'Task' } ], buttons: [ { text: 'Cancel', role: 'cancel' }, { text: 'Add', handler: ({ name }) => { this.tasks.push({ name }); } } ] }) .present(); } } 
Преинсталирайте приложението на устройството:
cordova run ios Това е! Не е толкова трудно, нали? Сега нека се опитаме да направим същото с Framework7.
Рамка7
Шаблоните на Framework7 са създадени, за да покажат всички възможности на компонентите, така че трябва да оставите само src/components/pages/HomePage.jsx страница в src/components/App.jsx и src/routes.js файлове, почистете съдържанието му и премахнете допълнителни коментари на кода.
Сега създайте списък със задачи. Framework7 предоставяи компоненти за това. За да поставите превключвател за завършване на задача в него, добавете компонента. Не забравяйте да импортирате всички тези компоненти от framework7-react модул. Сега кодът на страницата изглежда така:
import React from 'react'; import { Page, Navbar, NavTitle, List, ListItem, Toggle } from 'framework7-react'; export default () => ( To Do List ); А самото приложение изглежда така:
Доста добро начало. Нека опитаме отново да преместим статичните данни от HTML кода. За това използвайте интелигентен компонент вместо този без гражданство, който имахме. Импортирайте Component абстрактен клас от React:
import React, { Component } from 'react'; И запишете масива със задачи в state екземпляр на променлива:
export default class HomePage extends Component { state = { tasks: [{ name: 'Hello' }, { name: 'ApeeScape' }, { name: 'Blog' }] }; /* ... */ } Реалното приложение вероятно ще използва по-абстрактен поток от данни - например с Redux или MobX, но за малък пример ще запазим състоянието на вътрешния компонент.
Сега можете да използвате синтаксиса JSX за итеративно създаване на елементи от списъка за всяка задача в масива:
{this.state.tasks.map((task, i) => ( ))} Остава само да добавите заглавката с бутона, за да създадете нова задача отново. Елементът вече съществува, така че добавете към елемента:
как да направя бот за дискорд java
To Do List В React добавяте манипулатори на докосване, като използвате onClick и задаване на указателя за обратно извикване в него. Внедрете манипулатора, за да се покаже диалоговият прозорец с името на задачата.
Всеки елемент в Framework7 има достъп до екземпляра на приложението чрез this.$f7 Имот. Можете да използвате dialog.prompt() метод по този начин. Преди да затворите диалоговия прозорец, извикайте setState() метод на React компонента и му предайте копието на предишния масив с нов елемент. Това ще актуализира реактивно списъка.
addTask = () => { this.$f7.dialog.prompt('Task Name:', 'Add Task', (name) => { this.setState({ tasks: [ ...this.state.tasks, { name } ] }); }); }; Ето пълния код на компонента:
import React, { Component } from 'react'; import { Page, Navbar, NavTitle, NavRight, Link, List, ListItem, Toggle } from 'framework7-react'; export default class HomePage extends Component { state = { tasks: [{ name: 'Hello' }, { name: 'ApeeScape' }, { name: 'Blog' }] }; addTask = () => { this.$f7.dialog.prompt('Task Name:', 'Add Task', (name) => { this.setState({ tasks: [ ...this.state.tasks, { name } ] }); }); }; render = () => ( To Do List {this.state.tasks.map((task, i) => ( ))} ); } Проверете резултата:
Остава само да се възстанови и разположи на устройството:
npm run build rm -rf cordova/www/* cp -r build/* cordova/www/ cd cordova/ cordova run ios Свършен!
Окончателният код за двата проекта е достъпен на GitHub:
Резултати
Сега видяхте пълния урок с всяка рамка на Cordova. Как се подрежда Framework7 срещу Ionic?
Първоначалната настройка
Ionic е много по-лесен за инсталиране благодарение на своя CLI, докато F7 изисква повече време за избор и настройка на шаблон или поетапна инсталация от нулата.
Разнообразие на компонентите
И двете рамки имат пълен набор от чудесно изработени стандартни компоненти в две теми: iOS и Material Design. Ionic допълнително предоставя тези компоненти в Windows тема и гигантски потребителски теми пазар.
В допълнение към напълно имитиращите естествен дизайн и анимации, много внимание се отделя на оптимизацията на производителността, предоставяйки фантастични резултати: Често е почти невъзможно да се различат приложенията на двете рамки от естествените.
Framework7 предоставя допълнителен списък с по-сложни и полезни компоненти, като например Smart Select , Автодовършване , Календар , Списък с контакти , Екран за вход , Съобщения , и Браузър за снимки . От друга страна, Ionic предлага огромен избор от създадени от потребителя компоненти .
Екосистема и общност
Ionic очевидно печели по тези параметри благодарение на по-дългия си живот, силна финансова подкрепа и активна общност. Йонната инфраструктура непрекъснато се развива: Поддържащите услуги и облачните решения отстъпват място на нови и броят на приставките продължава да расте.
Framework7 е по-добър от всякога, но силно липсва подкрепа от общността.
Зависимости на трети страни
Framework7 е по-гъвкав по отношение на решения на трети страни. Най-голямата му сила е може би способността да избирате дали да използвате Vue или React в проекта, както и Webpack или Browserify. Ionic се основава на Angular и изисква познания в него (и следователно TypeScript също.)
Наскоро обаче Разработчиците на Ionic обявиха нова бета версия на Ionic 4 , твърдейки, че е напълно UI-framework-agnostic - няма повече Angular зависимости, ако не ги искате.
Cordova Frameworks: Все още мощен начин за разработване на междуплатформени мобилни приложения
Дали да се използва Кордова зависи от конкретния проект. Всъщност скоростта на разработване на хибридни мобилни приложения и неговата поддръжка на множество платформи са основните му предимства. Но това винаги е компромис и понякога може да се сблъскате с някои недостатъци, които не биха съществували при родния подход. Тези прекрасни рамки и техните общности вършат чудесна работа, за да намалят тези недостатъци и да улеснят живота ни. И така, защо да не ги пробвам?
конвертиране на дата в милисекунди javascriptСвързани: Двубоят: React Native срещу Cordova
Разбиране на основите
Какво е Кордова?
Cordova пакетира уеб приложения в собствени контейнери, за да ги стартира на различни мобилни платформи. Той зарежда приложение в „уеб изглед“, вид мобилен браузър на цял екран. Той също така осигурява интерфейс между JS и родния код за достъп до родния API: функции на устройството като push известия и достъп до камерата.
Какво е PhoneGap?
PhoneGap е оригиналното име на технологията, която по-късно е внесена в общността с отворен код и е наречена Apache Cordova. В наши дни PhoneGap самият е проект, който принадлежи на Adobe, като набор от CLI, GUI и облачни инструменти, предоставящи полезни услуги за разработчиците на мобилни приложения, базирани на Cordova.
Какво е Onsen UI?
Onsen UI е HTML и JavaScript рамка, предоставяща набор от UI компоненти, имитиращи естествения облик на платформите iOS и Android. Той се сдвоява с Monaca, набор от инструменти, подпомагащи цикъла на разработка на хибридни мобилни приложения.
Какво е йонийско?
Ionic е UI рамка, базирана на Angular, предоставяща набор от мобилни UI компоненти в различни теми, включително iOS, Material Design и Windows Platform. Подобно на PhoneGap, той също така предоставя различни допълнителни функции и услуги, подпомагащи цикъла на разработване, тестване и доставка на хибридни мобилни приложения.
Какво е Framework7?
Framework7 се използва за създаване на хибридни мобилни приложения. Това е набор от UI компоненти, представляващи ръководства за стил на iOS и Material Design. Той има няколко имплементации, базирани на популярни фреймворк рамки като React и Vue.
Какво е родно приложение?
Вътрешното приложение е направено за конкретна мобилна платформа, използвайки родния SDK и стека за разработка. Например, собствено приложение за iOS ще бъде разработено с помощта на Swift или Objective-C, докато собственото приложение за Android ще бъде написано с помощта на Kotlin или Java.
Какво е хибридно мобилно приложение?
Хибридното мобилно приложение е създадено с помощта на комбинация от естествен мобилен SDK и някои други технологични стекове, например HTML и JavaScript. Технологии, които произвеждат хибридни приложения, са Cordova, Xamarin, React Native и Native Script, наред с много други.
