From Back-end to Front-end
Kiev 2018
Build IOS/Android Mobile
App with Cordova +
React/Redux
Karpenko Lilia
Немного обо мне
• Senior Frontend (Frontend Team lead)
в Kwebbl (DAXX) - мы занимаемся
IP телефонией для стран Европы
• Увлечена JavaScript, работаю
преподавателем и ментором в Веб
разработке
• Вегетарианка, люблю музыку,
спорт, играю на гитаре и
фортепиано, люблю читать книги и
мечтаю про собственный бизнес =)
Build IOS/Android Mobile App with Cordova + React/Redux
From Back-end to Front-end
Kiev 2018
Karpenko Lilia
• Количество
смартфонов
увеличилось на 39% в
сравнении с прошлым
годом
• К концу 2016 года 46%
населения мира
являются владельцами
смартфонов
• Отрасль мобильных
приложений
расширяется с каждым
днем и останавливаться
пока не собирается.
О чем мы будем говорить сегодня?
1. Окружение в cordova и стек технологий проекта
2. Среда браузера vs. WebView телефона
3. Хранение данных в памяти телефона
4. Работа с плагинами в Cordova
5. Запуск приложения на телефонах
6. Отладка приложения
Build IOS/Android Mobile App with Cordova + React/Redux
Быть или не быть?
Почему Cordova?
Особенностью и плюсом Cordova есть то что одно и
то же приложение может быть запущено как в среде
браузера так и в среде телефона, то есть с помощью
Cordova мы можем создавать как веб приложения
так и приложения для IOS, Android, Windows Phone,
Amazon и т.д.
Build IOS/Android Mobile App with Cordova + React/Redux
При разработке так же стоял выбор - между React и Angular
В результате стек технологий вышел такой:
1. React
2. Redux
3. LESS
4. WEBPACK
5. Cordova
Build IOS/Android Mobile App with Cordova + React/Redux
Особенности работы с React и JS в
мобильном браузере через
Cordova
Build IOS/Android Mobile App with Cordova + React/Redux
Работа с Controlled components в React
Build IOS/Android Mobile App with Cordova + React/Redux
Работа с Controlled
components
в React
в React
Build IOS/Android Mobile App with Cordova + React/Redux
import React, { Component } from 'react';
export default class InputState extends Component {
state = {
value: this.props.value
};
onChange = e => this.setState({ value: e.target.value });
render() {
return (
<input
key={this.props.key}
ref={‘inputRef'}
autoFocus={true}
type={'text'}
value={this.state.value}
onChange={this.onChange}
/>
);
}
}
Каждый раз, после любого
изменения в input у нас
вызывается setState, а значит -
идет полная перерисовка
компонента. Это не очень
приятно. Мало того, нам нужно
чтобы при перерисовке фокус
оставался на элементе.
В телефоне это вызывает
странное поведение - прячется и
показывается клавиатура!
ВЫХОД ЕСТЬ!)
Build IOS/Android Mobile App with Cordova + React/Redux
class InputCustom extends React.Component {
state = {
value: this.props.value || ''
};
onChange = e => {
this.setState({ value: this.state.value + e.target.value });
};
onReset = e => {
let l = this.state.value.length;
this.setState({ value: this.state.value.substring(0, l - 1) });
};
render() {
return <div>
<input
autoFocus={true}
readOnly={true}
ref={'inputRef'}
type={'text'}
value={this.state.value}
/>
<button value='4' onClick={this.onChange}>Click for 4</button>
<button onClick={this.onReset}>Click for reset</button>
</div>
}
}
У нас в приложении была своя
клавиатура поэтому я создала
input который был readOnly и
потом при нажатии на кнопки
менялось его значение, фокус на
нем оставался с помощью css -
просто обычное подчеркивание
через border.
Клавиатура телефона не
показывалась, поэтому проблема
была решена!
Создание больших
списков и пагинация
Build IOS/Android Mobile App with Cordova + React/Redux
WebWorkers
Мы создавали в приложении поиск,
при чем поиск был такой как
например в Dialer в Android - ты
пишешь цифры, а он ищет по имени
и по цифрам одновременно.
Для поиска мы использовали
библиотеку Fuse.js + чтобы поиск по
большим спискам не блочил наше UI
мы решили использовать для поиска
WebWorkers
WebWorkers это один из
инструментов запуска JS кода не в
основном потоке - так как JS
однопоточный это очень ускорило
сам процесс
Build IOS/Android Mobile App with Cordova + React/Redux
export default class WebWorker {
activeWorker = null;
create(searchFileName) {
let MyWorker;
switch(searchFileName) {
case "dialer":
MyWorker = require("worker-loader?name=dialer.js!webWorkers/search/dialer.js");
break;
case "plain":
MyWorker = require("worker-loader?name=plain.js!webWorkers/search/plain.js");
}
this.activeWorker = new MyWorker();
this.activeWorker.addEventListener('error', err => {
console.warn(err, " err in web worker");
}, false);
return this.activeWorker;
}
start(options) {
this.activeWorker.postMessage(JSON.stringify(options));
return this.activeWorker;
}
update(callback) {
this.stop();
this.create(callback);
}
stop() {
if (this.activeWorker) {
this.activeWorker.removeEventListener('error', err => console.warn(err, " err in web worker"), false);
this.activeWorker.terminate();
}
}
}
Build IOS/Android Mobile App with Cordova + React/Redux
export default class WebWorker {
activeWorker = null;
create(searchFileName) {
let MyWorker;
switch(searchFileName) {
case "dialer":
MyWorker = require("worker-loader?name=dialer.js!webWorkers/search/dialer.js");
break;
case "plain":
MyWorker = require("worker-loader?name=plain.js!webWorkers/search/plain.js");
}
this.activeWorker = new MyWorker();
this.activeWorker.addEventListener('error', err => {
console.warn(err, " err in web worker");
}, false);
return this.activeWorker;
}
start(options) {
return this.activeWorker.postMessage(JSON.stringify(options));
}
update(callback) {
this.stop();
this.create(callback);
}
stop() {
if (this.activeWorker) {
this.activeWorker.removeEventListener('error', err => console.warn(err, " err in web worker"), false);
this.activeWorker.terminate();
}
}
}
Build IOS/Android Mobile App with Cordova + React/Redux
export default class WebWorker {
activeWorker = null;
create(searchFileName) {
let MyWorker;
switch(searchFileName) {
case "dialer":
MyWorker = require("worker-loader?name=dialer.js!webWorkers/search/dialer.js");
break;
case "plain":
MyWorker = require("worker-loader?name=plain.js!webWorkers/search/plain.js");
}
this.activeWorker = new MyWorker();
this.activeWorker.addEventListener('error', err => {
console.warn(err, " err in web worker");
}, false);
return this.activeWorker;
}
start(options) {
this.activeWorker.postMessage(JSON.stringify(options));
return this.activeWorker;
}
update(callback) {
this.stop();
this.create(callback);
}
stop() {
if (this.activeWorker) {
this.activeWorker.removeEventListener('error', err => console.warn(err, " err in web worker"), false);
this.activeWorker.terminate();
}
}
}
Build IOS/Android Mobile App with Cordova + React/Redux
default class WebWorker {
activeWorker = null;
reate(searchFileName) {
let MyWorker;
switch(searchFileName) {
case "dialer":
MyWorker = require("worker-loader?name=dialer.js!webWorkers/search/dialer.js");
break;
case "plain":
MyWorker = require("worker-loader?name=plain.js!webWorkers/search/plain.js");
}
this.activeWorker = new MyWorker();
this.activeWorker.addEventListener('error', err => {
console.warn(err, " err in web worker");
}, false);
return this.activeWorker;
tart(options) {
this.activeWorker.postMessage(JSON.stringify(options));
return this.activeWorker;
update(callback) {
this.stop();
this.create(callback);
stop() {
if (this.activeWorker) {
this.activeWorker.removeEventListener('error', err => console.warn(err, " err in web worker
this.activeWorker.terminate();
}
}
Build IOS/Android Mobile App with Cordova + React/Redux
import WebWorker from "lib/WebWorker";
export default {
webWorker: new WebWorker(),
stopWebWorker() {
this.webWorker.stop();
},
createWebWorker() {
this.webWorker.create("plain");
},
search(search) {
this.stopWebWorker();
return (dispatch, getState) => {
let list = getState().contacts.list;
let searchParams = getState().contacts.searchParams;
this.createWebWorker();
return this.webWorker.start(some_params).onmessage = event => {
do_come_action;
};
}
}
};
Build IOS/Android Mobile App with Cordova + React/Redux
import WebWorker from "lib/WebWorker";
export default {
webWorker: new WebWorker(),
stopWebWorker() {
this.webWorker.stop();
},
createWebWorker() {
this.webWorker.create("plain");
},
search(search) {
this.stopWebWorker();
return (dispatch, getState) => {
let list = getState().contacts.list;
let searchParams = getState().contacts.searchParams;
this.createWebWorker();
return this.webWorker.start(some_params).onmessage = event => {
do_come_action;
};
}
}
};
Build IOS/Android Mobile App with Cordova + React/Redux
import WebWorker from "lib/WebWorker";
export default {
webWorker: new WebWorker(),
stopWebWorker() {
this.webWorker.stop();
},
createWebWorker() {
this.webWorker.create("plain");
},
search(search) {
this.stopWebWorker();
return (dispatch, getState) => {
let list = getState().contacts.list;
let searchParams = getState().contacts.searchParams;
this.createWebWorker();
return this.webWorker.start(some_params).onmessage = event => {
do_come_action;
};
}
}
};
Build IOS/Android Mobile App with Cordova + React/Redux
import WebWorker from "lib/WebWorker";
export default {
webWorker: new WebWorker(),
stopWebWorker() {
this.webWorker.stop();
},
createWebWorker() {
this.webWorker.create("plain");
},
search(search) {
this.stopWebWorker();
return (dispatch, getState) => {
let list = getState().contacts.list;
let searchParams = getState().contacts.searchParams;
this.createWebWorker();
return this.webWorker.start(some_params).onmessage = event => {
do_come_action;
};
}
}
};
Что же такое Apache
Cordova?
Build IOS/Android Mobile App with Cordova + React/Redux
Окружения для cordova
Cordova — это платформа, позволяющая разрабатывать мобильные приложения на разные платформы, путем
встраивания браузера в мобильное приложение. Таким образом, ваше приложение является, по сути, мини-
браузером, который показывает один единственный сайт — ваше приложение.
Установка:
$ sudo npm install -g cordova
Особенности платформ:
Android => нужно установить java, java-sdk и скачать себе все версии Android для которых вы будете билдить
ваше приложение
IOS => Xcode + в Xcode все версии IOS для создания и тестирования приложения
Build IOS/Android Mobile App with Cordova + React/Redux
Создание проекта cordova
$ cordova create _ id_ _имя папки приложения название приложения
Build IOS/Android Mobile App with Cordova + React/Redux
Файл/Папка Предназначение
package.json
config.xml настройки для разных платформ
plugins папка для плагинов которые вы будете использовать в
приложении
platforms платформы у приложения (android/ios/windows)
www папка для ваших HTML/CSS/JS файлов - cordova
автоматически берет файлы из это папки при выгрузке
приложения в телефон
hooks хуки для запуска приложения
Добавление платформ для приложения
$ cordova platform add ios
$ cordova platform add android
После чего у вас в папке platforms добавляются 2 папки
android && ios
Build IOS/Android Mobile App with Cordova + React/Redux
Build IOS/Android Mobile App with Cordova + React/Redux
Environme
nts
Environme
nts
Local
Dev
Production PlatformsPlatforms
Web
IOS
Android
нас были все комбинации наших платформ и окружений - получаеться 9 билдов приложения под разные устрой
Environments
"scripts": {
"start": "node tools/server.js",
«local_w": "BUILD_APP=no webpack --watch --watch-poll --config tools/webpack/config.js",
"dev_w": "NODE_ENV=development BUILD_APP=no webpack --watch --watch-poll --config
tools/webpack/config.js",
"prod_w": "NODE_ENV=production BUILD_APP=no webpack --watch --watch-poll --config
tools/webpack/config.js",
"an_dev_w": "NODE_ENV=development BUILD_APP=yes PLATFORM=android webpack --watch --watch-poll
--config tools/webpack/config.js",
"an_stage_w": "NODE_ENV=stage BUILD_APP=yes PLATFORM=android webpack --watch --watch-poll --config
tools/webpack/config.js",
"an_prod_w": "NODE_ENV=production BUILD_APP=yes PLATFORM=android webpack --watch --watch-poll
--config tools/webpack/config.js",
"ios_dev_w": "NODE_ENV=development BUILD_APP=yes PLATFORM=ios webpack --watch --watch-poll --config
tools/webpack/config.js",
"ios_stage_w": "NODE_ENV=stage BUILD_APP=yes PLATFORM=ios webpack --watch --watch-poll --config
tools/webpack/config.js",
"ios_prod_w": "NODE_ENV=production BUILD_APP=yes PLATFORM=ios webpack --watch --watch-poll --config
tools/webpack/config.js"
}
Build IOS/Android Mobile App with Cordova + React/Redux
Build IOS/Android Mobile App with Cordova + React/Redux
WebView vs. Браузер
1. onDOMContentLoaded + onDeviceReady
2. IOS = «resume» && «pause» and Android = «active» && «resign»
3. Закрытие приложение = закрыть вкладку в браузере
4. IOS открывает приложение в WebView в Safari, а Android открывает в
WebView в Chrome
5. Запросы на сторонний сервер только после установки плагина Cordova
Whitelists и добавление заголовков в meta tag в html файле для The W3C
Content Security Policy:
<meta http-equiv="Content-Security-Policy" content="default-src *
gap://ready file: 'self' data: gap: polyblob: blob: ws: wss:
https://ssl.gstatic.com 'unsafe-eval'; style-src * 'self' 'unsafe-inline'; media-src
*; connect-src * ws: wss:;»>
Build IOS/Android Mobile App with Cordova + React/Redux
Определение платформы
Определение платформы происходит через установку
плагина cordova-plugin-device.
После этого у вас появиться глобальная переменная device где
будет лежать значение платформы модели и т.д.:
Build IOS/Android Mobile App with Cordova + React/Redux
document.addEventListener("deviceready", () => {
console.log(device.model);
console.log(device.platform);
}, false);
Определение платформы через build
Build IOS/Android Mobile App with Cordova + React/Redux
import config from ‘envConfig';
const isIOS = deviceInfo.isIOS();
if (!config.process.isIOS()) {
not_for_ios;
} else {
for_ios;
}
Build IOS/Android Mobile App with Cordova + React/Redux
Хранение данных в
памяти телефона
Хранение локальных данных
1. localStorage
2. Secure Storage (cordova plugin)
3. IOS - Apple’s Keychain Services - зашифрованный
контейнер, который надежно хранит мелкие куски
данных в приложении
Build IOS/Android Mobile App with Cordova + React/Redux
Плагины Cordova
Плагины это независимые модули которые позволяют вам
получить доступ к API на уровне устройства.
Вы можете использовать как доступные плагины в
репозитории cordova или написать свои если вы знаете еще
дополнительно - Java и Objective-C.
Большинство плагинов доступны в репозитории npm
Build IOS/Android Mobile App with Cordova + React/Redux
Добавление плагина
$ cordova plugin add plugin_name
Код плагина устанавливается в папку plugins и там вы можете посмотреть
исходный код и все что вам интересно
После установки плагина у вас будет доступ к его API через глобальную
переменную обычно что-то схожее с названием плагина
Build IOS/Android Mobile App with Cordova + React/Redux
Список плагинов необходимых для любого
приложения
1. Cordova diagnostic plugin
2. Cordova status bar
3. Cordova Keyboard plugin
4. Cordova plugin dialogs
5. Cordova Secure Storage
6. Cordova plugin network information
7. Cordova plugin whitelist
Build IOS/Android Mobile App with Cordova + React/Redux
Запуск приложения на телефоне
$ cordova run _ _(android/ios) —-deviceплатформа
Для Android вам понадобится установленная java && java-sdk и вы
легко сможете запустить приложение в тестовом режиме на телефоне,
также для этого вам понадобиться включить на телефоне разрешения
для отладки по USB
Для IOS вам нужен Xcode + аккаунт в Apple Developers
Build IOS/Android Mobile App with Cordova + React/Redux
Отладка приложения на Android
Для отладки приложения:
1) Ваш телефон должен быть подключен к компьютеру через USB
2) На телефоне должно быть включено разрешение на отладку через
USB
3) Должно быть активно приложение которое вы тестируете
4) Заходим в Google Chrome во вкладку chrome://inspect/#devices
находим там ваше приложение и открываем, у вас сразу же будет видно
все то же самое что и при отладке любого другого сайта
Build IOS/Android Mobile App with Cordova + React/Redux
Отладка приложения на IOS
Для отладки приложения:
1) Ваш телефон должен быть подключен к компьютеру через USB
2) На телефоне должно быть включено разрешение на отладку через
USB
3) Должно быть активно приложение которое вы тестируете
4) Заходим в Safari вверху ищем = Разработка -> Название вашего
телефона -> Название Приложения, дальше открывается console и там
вы можете тестировать все как в обычном браузере
Build IOS/Android Mobile App with Cordova + React/Redux
Build IOS/Android Mobile App with Cordova + React/Redux
Итоги
Почему создавать приложение на Cordova это выгодно:
1.Кроссплатформенное
2.Не требует знаний Java и Objective-C и вместо 2 разработчиков у вас 1 разработчик
на все платформы
3.Популярно поэтому постоянно есть новые фишки плагины и большое комьюнити
Почему нет:
1.Если выходит новая версия ПО жди проблем в ближайшие месяцы, потому что
решений может не быть
2.Нету доступа ко всем API телефона и если нету специального плагина нужно
искать решение самому или писать плагин самостоятельно
•Не так нативно ощущаешься как настоящее приложение
•Медленнее работает чем нативное приложение
Build IOS/Android Mobile App with Cordova + React/Redux
Предложения
пожелания и
вопросы?
Build IOS/Android Mobile App with Cordova + React/Redux

JS Fest 2018. Лилия Карпенко. Особенности создания IOS / Android Mobile Apps с помощью React / Redux Cordova

  • 1.
    From Back-end toFront-end Kiev 2018 Build IOS/Android Mobile App with Cordova + React/Redux Karpenko Lilia
  • 2.
    Немного обо мне •Senior Frontend (Frontend Team lead) в Kwebbl (DAXX) - мы занимаемся IP телефонией для стран Европы • Увлечена JavaScript, работаю преподавателем и ментором в Веб разработке • Вегетарианка, люблю музыку, спорт, играю на гитаре и фортепиано, люблю читать книги и мечтаю про собственный бизнес =) Build IOS/Android Mobile App with Cordova + React/Redux
  • 3.
    From Back-end toFront-end Kiev 2018 Karpenko Lilia • Количество смартфонов увеличилось на 39% в сравнении с прошлым годом • К концу 2016 года 46% населения мира являются владельцами смартфонов • Отрасль мобильных приложений расширяется с каждым днем и останавливаться пока не собирается.
  • 4.
    О чем мыбудем говорить сегодня? 1. Окружение в cordova и стек технологий проекта 2. Среда браузера vs. WebView телефона 3. Хранение данных в памяти телефона 4. Работа с плагинами в Cordova 5. Запуск приложения на телефонах 6. Отладка приложения Build IOS/Android Mobile App with Cordova + React/Redux
  • 5.
  • 6.
    Почему Cordova? Особенностью иплюсом Cordova есть то что одно и то же приложение может быть запущено как в среде браузера так и в среде телефона, то есть с помощью Cordova мы можем создавать как веб приложения так и приложения для IOS, Android, Windows Phone, Amazon и т.д. Build IOS/Android Mobile App with Cordova + React/Redux
  • 7.
    При разработке также стоял выбор - между React и Angular
  • 8.
    В результате стектехнологий вышел такой: 1. React 2. Redux 3. LESS 4. WEBPACK 5. Cordova Build IOS/Android Mobile App with Cordova + React/Redux
  • 9.
    Особенности работы сReact и JS в мобильном браузере через Cordova Build IOS/Android Mobile App with Cordova + React/Redux
  • 10.
    Работа с Controlledcomponents в React Build IOS/Android Mobile App with Cordova + React/Redux
  • 11.
    Работа с Controlled components вReact в React Build IOS/Android Mobile App with Cordova + React/Redux import React, { Component } from 'react'; export default class InputState extends Component { state = { value: this.props.value }; onChange = e => this.setState({ value: e.target.value }); render() { return ( <input key={this.props.key} ref={‘inputRef'} autoFocus={true} type={'text'} value={this.state.value} onChange={this.onChange} /> ); } } Каждый раз, после любого изменения в input у нас вызывается setState, а значит - идет полная перерисовка компонента. Это не очень приятно. Мало того, нам нужно чтобы при перерисовке фокус оставался на элементе. В телефоне это вызывает странное поведение - прячется и показывается клавиатура!
  • 12.
    ВЫХОД ЕСТЬ!) Build IOS/AndroidMobile App with Cordova + React/Redux class InputCustom extends React.Component { state = { value: this.props.value || '' }; onChange = e => { this.setState({ value: this.state.value + e.target.value }); }; onReset = e => { let l = this.state.value.length; this.setState({ value: this.state.value.substring(0, l - 1) }); }; render() { return <div> <input autoFocus={true} readOnly={true} ref={'inputRef'} type={'text'} value={this.state.value} /> <button value='4' onClick={this.onChange}>Click for 4</button> <button onClick={this.onReset}>Click for reset</button> </div> } } У нас в приложении была своя клавиатура поэтому я создала input который был readOnly и потом при нажатии на кнопки менялось его значение, фокус на нем оставался с помощью css - просто обычное подчеркивание через border. Клавиатура телефона не показывалась, поэтому проблема была решена!
  • 13.
    Создание больших списков ипагинация Build IOS/Android Mobile App with Cordova + React/Redux
  • 14.
    WebWorkers Мы создавали вприложении поиск, при чем поиск был такой как например в Dialer в Android - ты пишешь цифры, а он ищет по имени и по цифрам одновременно. Для поиска мы использовали библиотеку Fuse.js + чтобы поиск по большим спискам не блочил наше UI мы решили использовать для поиска WebWorkers WebWorkers это один из инструментов запуска JS кода не в основном потоке - так как JS однопоточный это очень ускорило сам процесс
  • 15.
    Build IOS/Android MobileApp with Cordova + React/Redux export default class WebWorker { activeWorker = null; create(searchFileName) { let MyWorker; switch(searchFileName) { case "dialer": MyWorker = require("worker-loader?name=dialer.js!webWorkers/search/dialer.js"); break; case "plain": MyWorker = require("worker-loader?name=plain.js!webWorkers/search/plain.js"); } this.activeWorker = new MyWorker(); this.activeWorker.addEventListener('error', err => { console.warn(err, " err in web worker"); }, false); return this.activeWorker; } start(options) { this.activeWorker.postMessage(JSON.stringify(options)); return this.activeWorker; } update(callback) { this.stop(); this.create(callback); } stop() { if (this.activeWorker) { this.activeWorker.removeEventListener('error', err => console.warn(err, " err in web worker"), false); this.activeWorker.terminate(); } } }
  • 16.
    Build IOS/Android MobileApp with Cordova + React/Redux export default class WebWorker { activeWorker = null; create(searchFileName) { let MyWorker; switch(searchFileName) { case "dialer": MyWorker = require("worker-loader?name=dialer.js!webWorkers/search/dialer.js"); break; case "plain": MyWorker = require("worker-loader?name=plain.js!webWorkers/search/plain.js"); } this.activeWorker = new MyWorker(); this.activeWorker.addEventListener('error', err => { console.warn(err, " err in web worker"); }, false); return this.activeWorker; } start(options) { return this.activeWorker.postMessage(JSON.stringify(options)); } update(callback) { this.stop(); this.create(callback); } stop() { if (this.activeWorker) { this.activeWorker.removeEventListener('error', err => console.warn(err, " err in web worker"), false); this.activeWorker.terminate(); } } }
  • 17.
    Build IOS/Android MobileApp with Cordova + React/Redux export default class WebWorker { activeWorker = null; create(searchFileName) { let MyWorker; switch(searchFileName) { case "dialer": MyWorker = require("worker-loader?name=dialer.js!webWorkers/search/dialer.js"); break; case "plain": MyWorker = require("worker-loader?name=plain.js!webWorkers/search/plain.js"); } this.activeWorker = new MyWorker(); this.activeWorker.addEventListener('error', err => { console.warn(err, " err in web worker"); }, false); return this.activeWorker; } start(options) { this.activeWorker.postMessage(JSON.stringify(options)); return this.activeWorker; } update(callback) { this.stop(); this.create(callback); } stop() { if (this.activeWorker) { this.activeWorker.removeEventListener('error', err => console.warn(err, " err in web worker"), false); this.activeWorker.terminate(); } } }
  • 18.
    Build IOS/Android MobileApp with Cordova + React/Redux default class WebWorker { activeWorker = null; reate(searchFileName) { let MyWorker; switch(searchFileName) { case "dialer": MyWorker = require("worker-loader?name=dialer.js!webWorkers/search/dialer.js"); break; case "plain": MyWorker = require("worker-loader?name=plain.js!webWorkers/search/plain.js"); } this.activeWorker = new MyWorker(); this.activeWorker.addEventListener('error', err => { console.warn(err, " err in web worker"); }, false); return this.activeWorker; tart(options) { this.activeWorker.postMessage(JSON.stringify(options)); return this.activeWorker; update(callback) { this.stop(); this.create(callback); stop() { if (this.activeWorker) { this.activeWorker.removeEventListener('error', err => console.warn(err, " err in web worker this.activeWorker.terminate(); } }
  • 19.
    Build IOS/Android MobileApp with Cordova + React/Redux import WebWorker from "lib/WebWorker"; export default { webWorker: new WebWorker(), stopWebWorker() { this.webWorker.stop(); }, createWebWorker() { this.webWorker.create("plain"); }, search(search) { this.stopWebWorker(); return (dispatch, getState) => { let list = getState().contacts.list; let searchParams = getState().contacts.searchParams; this.createWebWorker(); return this.webWorker.start(some_params).onmessage = event => { do_come_action; }; } } };
  • 20.
    Build IOS/Android MobileApp with Cordova + React/Redux import WebWorker from "lib/WebWorker"; export default { webWorker: new WebWorker(), stopWebWorker() { this.webWorker.stop(); }, createWebWorker() { this.webWorker.create("plain"); }, search(search) { this.stopWebWorker(); return (dispatch, getState) => { let list = getState().contacts.list; let searchParams = getState().contacts.searchParams; this.createWebWorker(); return this.webWorker.start(some_params).onmessage = event => { do_come_action; }; } } };
  • 21.
    Build IOS/Android MobileApp with Cordova + React/Redux import WebWorker from "lib/WebWorker"; export default { webWorker: new WebWorker(), stopWebWorker() { this.webWorker.stop(); }, createWebWorker() { this.webWorker.create("plain"); }, search(search) { this.stopWebWorker(); return (dispatch, getState) => { let list = getState().contacts.list; let searchParams = getState().contacts.searchParams; this.createWebWorker(); return this.webWorker.start(some_params).onmessage = event => { do_come_action; }; } } };
  • 22.
    Build IOS/Android MobileApp with Cordova + React/Redux import WebWorker from "lib/WebWorker"; export default { webWorker: new WebWorker(), stopWebWorker() { this.webWorker.stop(); }, createWebWorker() { this.webWorker.create("plain"); }, search(search) { this.stopWebWorker(); return (dispatch, getState) => { let list = getState().contacts.list; let searchParams = getState().contacts.searchParams; this.createWebWorker(); return this.webWorker.start(some_params).onmessage = event => { do_come_action; }; } } };
  • 23.
    Что же такоеApache Cordova? Build IOS/Android Mobile App with Cordova + React/Redux
  • 24.
    Окружения для cordova Cordova— это платформа, позволяющая разрабатывать мобильные приложения на разные платформы, путем встраивания браузера в мобильное приложение. Таким образом, ваше приложение является, по сути, мини- браузером, который показывает один единственный сайт — ваше приложение. Установка: $ sudo npm install -g cordova Особенности платформ: Android => нужно установить java, java-sdk и скачать себе все версии Android для которых вы будете билдить ваше приложение IOS => Xcode + в Xcode все версии IOS для создания и тестирования приложения Build IOS/Android Mobile App with Cordova + React/Redux
  • 25.
    Создание проекта cordova $cordova create _ id_ _имя папки приложения название приложения Build IOS/Android Mobile App with Cordova + React/Redux Файл/Папка Предназначение package.json config.xml настройки для разных платформ plugins папка для плагинов которые вы будете использовать в приложении platforms платформы у приложения (android/ios/windows) www папка для ваших HTML/CSS/JS файлов - cordova автоматически берет файлы из это папки при выгрузке приложения в телефон hooks хуки для запуска приложения
  • 26.
    Добавление платформ дляприложения $ cordova platform add ios $ cordova platform add android После чего у вас в папке platforms добавляются 2 папки android && ios Build IOS/Android Mobile App with Cordova + React/Redux
  • 27.
    Build IOS/Android MobileApp with Cordova + React/Redux Environme nts Environme nts Local Dev Production PlatformsPlatforms Web IOS Android нас были все комбинации наших платформ и окружений - получаеться 9 билдов приложения под разные устрой
  • 28.
    Environments "scripts": { "start": "nodetools/server.js", «local_w": "BUILD_APP=no webpack --watch --watch-poll --config tools/webpack/config.js", "dev_w": "NODE_ENV=development BUILD_APP=no webpack --watch --watch-poll --config tools/webpack/config.js", "prod_w": "NODE_ENV=production BUILD_APP=no webpack --watch --watch-poll --config tools/webpack/config.js", "an_dev_w": "NODE_ENV=development BUILD_APP=yes PLATFORM=android webpack --watch --watch-poll --config tools/webpack/config.js", "an_stage_w": "NODE_ENV=stage BUILD_APP=yes PLATFORM=android webpack --watch --watch-poll --config tools/webpack/config.js", "an_prod_w": "NODE_ENV=production BUILD_APP=yes PLATFORM=android webpack --watch --watch-poll --config tools/webpack/config.js", "ios_dev_w": "NODE_ENV=development BUILD_APP=yes PLATFORM=ios webpack --watch --watch-poll --config tools/webpack/config.js", "ios_stage_w": "NODE_ENV=stage BUILD_APP=yes PLATFORM=ios webpack --watch --watch-poll --config tools/webpack/config.js", "ios_prod_w": "NODE_ENV=production BUILD_APP=yes PLATFORM=ios webpack --watch --watch-poll --config tools/webpack/config.js" } Build IOS/Android Mobile App with Cordova + React/Redux
  • 29.
    Build IOS/Android MobileApp with Cordova + React/Redux WebView vs. Браузер
  • 30.
    1. onDOMContentLoaded +onDeviceReady 2. IOS = «resume» && «pause» and Android = «active» && «resign» 3. Закрытие приложение = закрыть вкладку в браузере 4. IOS открывает приложение в WebView в Safari, а Android открывает в WebView в Chrome 5. Запросы на сторонний сервер только после установки плагина Cordova Whitelists и добавление заголовков в meta tag в html файле для The W3C Content Security Policy: <meta http-equiv="Content-Security-Policy" content="default-src * gap://ready file: 'self' data: gap: polyblob: blob: ws: wss: https://ssl.gstatic.com 'unsafe-eval'; style-src * 'self' 'unsafe-inline'; media-src *; connect-src * ws: wss:;»> Build IOS/Android Mobile App with Cordova + React/Redux
  • 31.
    Определение платформы Определение платформыпроисходит через установку плагина cordova-plugin-device. После этого у вас появиться глобальная переменная device где будет лежать значение платформы модели и т.д.: Build IOS/Android Mobile App with Cordova + React/Redux document.addEventListener("deviceready", () => { console.log(device.model); console.log(device.platform); }, false);
  • 32.
    Определение платформы черезbuild Build IOS/Android Mobile App with Cordova + React/Redux import config from ‘envConfig'; const isIOS = deviceInfo.isIOS(); if (!config.process.isIOS()) { not_for_ios; } else { for_ios; }
  • 33.
    Build IOS/Android MobileApp with Cordova + React/Redux Хранение данных в памяти телефона
  • 34.
    Хранение локальных данных 1.localStorage 2. Secure Storage (cordova plugin) 3. IOS - Apple’s Keychain Services - зашифрованный контейнер, который надежно хранит мелкие куски данных в приложении Build IOS/Android Mobile App with Cordova + React/Redux
  • 35.
    Плагины Cordova Плагины этонезависимые модули которые позволяют вам получить доступ к API на уровне устройства. Вы можете использовать как доступные плагины в репозитории cordova или написать свои если вы знаете еще дополнительно - Java и Objective-C. Большинство плагинов доступны в репозитории npm Build IOS/Android Mobile App with Cordova + React/Redux
  • 36.
    Добавление плагина $ cordovaplugin add plugin_name Код плагина устанавливается в папку plugins и там вы можете посмотреть исходный код и все что вам интересно После установки плагина у вас будет доступ к его API через глобальную переменную обычно что-то схожее с названием плагина Build IOS/Android Mobile App with Cordova + React/Redux
  • 37.
    Список плагинов необходимыхдля любого приложения 1. Cordova diagnostic plugin 2. Cordova status bar 3. Cordova Keyboard plugin 4. Cordova plugin dialogs 5. Cordova Secure Storage 6. Cordova plugin network information 7. Cordova plugin whitelist Build IOS/Android Mobile App with Cordova + React/Redux
  • 38.
    Запуск приложения нателефоне $ cordova run _ _(android/ios) —-deviceплатформа Для Android вам понадобится установленная java && java-sdk и вы легко сможете запустить приложение в тестовом режиме на телефоне, также для этого вам понадобиться включить на телефоне разрешения для отладки по USB Для IOS вам нужен Xcode + аккаунт в Apple Developers Build IOS/Android Mobile App with Cordova + React/Redux
  • 39.
    Отладка приложения наAndroid Для отладки приложения: 1) Ваш телефон должен быть подключен к компьютеру через USB 2) На телефоне должно быть включено разрешение на отладку через USB 3) Должно быть активно приложение которое вы тестируете 4) Заходим в Google Chrome во вкладку chrome://inspect/#devices находим там ваше приложение и открываем, у вас сразу же будет видно все то же самое что и при отладке любого другого сайта Build IOS/Android Mobile App with Cordova + React/Redux
  • 40.
    Отладка приложения наIOS Для отладки приложения: 1) Ваш телефон должен быть подключен к компьютеру через USB 2) На телефоне должно быть включено разрешение на отладку через USB 3) Должно быть активно приложение которое вы тестируете 4) Заходим в Safari вверху ищем = Разработка -> Название вашего телефона -> Название Приложения, дальше открывается console и там вы можете тестировать все как в обычном браузере Build IOS/Android Mobile App with Cordova + React/Redux
  • 41.
    Build IOS/Android MobileApp with Cordova + React/Redux
  • 42.
    Итоги Почему создавать приложениена Cordova это выгодно: 1.Кроссплатформенное 2.Не требует знаний Java и Objective-C и вместо 2 разработчиков у вас 1 разработчик на все платформы 3.Популярно поэтому постоянно есть новые фишки плагины и большое комьюнити Почему нет: 1.Если выходит новая версия ПО жди проблем в ближайшие месяцы, потому что решений может не быть 2.Нету доступа ко всем API телефона и если нету специального плагина нужно искать решение самому или писать плагин самостоятельно •Не так нативно ощущаешься как настоящее приложение •Медленнее работает чем нативное приложение Build IOS/Android Mobile App with Cordova + React/Redux
  • 43.

Editor's Notes

  • #2 Всем привет! Меня зовут Лилия, компания в которой я работаю занимаемся IP телефонией и совсем недавно мы создавали новый продукт о котором мы сегодня с вами и поговорим. Но сначала немного обо мне
  • #3 Я с 18 лет работаю в ИТ сфере, больше всего увлечена JS и верю что за ним будущее веб разработки. Люблю спорт, фильмы музыку увлекаюсь вокалом - вегетарианка люблю путешествовать Также мне очень нравится JavaScript - и я уже неоднократно вела курсы по обучение разработке Веба с нуля) Мне очень нравиться делиться своим опытом и обучать людей тому что я знаю. Это одна из причин почему я здесь сегодня
  • #4 Почему сегодня мы будем говорить про мобильное приложения? По статистике количество просмотров сайтов со смартфонов увеличилось по сравнению с прошлыми годами на 39% и составило 31% от общего количества просмотров в интернете. К концу 2016 года 46% населения мира были владельцами смартфонов. Это свидетельствует о том, что мобильная революция только начинается. Это означает что отрасль мобильных приложений расширяется с каждым днем и останавливаться пока не собирается. Видно так и было решено нашим бизнесом и поэтому к нам поступила задача создать мобильное приложение для нашего продукта Поскольку в нашей команде не было и нету ни IOS ни Android разработчиков было решено создавать гибридное мобильное приложение - поскольку это было полтора-2 года назад React Native еще не набрал такой популярности как сейчас + у него нету всех плагинов для поддержки интернет звонков которые нужны бы были нам на 2 стадии разработки нашим CTO было выбрано использовать Cordova. Хорошо или плохо - как есть)
  • #5 Сегодня мы с вами будем говорить о: Настройка окружения и стек технологий Чем среда браузера отличается от WebView телефона в котором запускается наше приложение Как и где хранить данные пользователя, включая аутентификацию Как работать с плагинами в Cordova Использование WEBRTC для создание интернет звонков Как запустить приложения на телефоне Как отлаживать приложения через Chrome and Safari
  • #6 Когда бизнес поставил задачу сделать приложение для мобильного то мы начали усиленно думать как же это сделать Поскольку в нашей команде не было и нету ни IOS ни Android разработчиков было решено создавать гибридное мобильное приложение Первоначально для проекта был выбран React Native, но тогда он еще не набрал такой популярности как сейчас + у него небыло поддержки WebRTC для интернет звонков которые нужны бы были нам так что нашим CTO было выбрано использовать Cordova. Хорошо или плохо - не знаю - но как есть) Сегодня я поделюсь своими знаниями и наработками связанными с разработкой приложения именно на Cordova
  • #7 Чем существенно отличается Cordova и React Native это то что приложение может запускаться как и в браузере так и на любой платформе одновременно:
  • #8 Конечно же при разработке так же стоял выбор - между React и Angular. Здесь выбор был гораздо проще - Angular я уже пробовала и особо больше пробовать мне не хотелось поэтому я решила что хочу выучить и использовать для проекта React
  • #9 Для создания данного приложения было выбрано использовать React + Redux как основные фреймворки на Frontend Для сборки я выбрала webpack так как много про него слышала и решила что лучший способ что то узнать глубже это создать на жатом проект - тем более он очень быстро и качественно работает в реальном режиме сборки JS файлов Сейчас я понимаю что выбор REACT было хорошей идей. Я лично отношусь к тем кто не любит Angular не важно какой версии - хотя я обожаю Google и другие фреймворки особо не рассматривались
  • #10 Давайте для начала рассмотрим особенности работы с
  • #11 В общем меня полностью удовлетворяет React на этом проекте, есть только пару нюансов с которыми пришлось столкнуться именно на телефоне работа с формами в Реакт доставляет немного боли =) Работа с формами - в особенности с Input - каждый раз когда меняется значение поля React перерендыривает компоненту и в вебе это не заметно - но вот на телефоне это привело к таким трудностям как каждый раз при вводе значения фокус на элементе пропадает - для этого в Реакте тоже есть пару хуков но в телефоне есть свои особенности: Если ставить постоянно фокус на input после каждого onInput event бывает показывается клавиатура телефона по умолчанию и зависит это от погоды - мне это было не нужно потому что у нас была своя клавиатура для ввода потому с этим тоже отдельно боролись - пришлось сделать Input readonly и на keyPress записывать значение в state и просто отображать его в Input Поэтому я сделала свою отдельную компоненту для работы с Инпут полями выглядит она вот так вот =&amp;gt; показываю код в редакторе Пришлось сделать Input Readonly true и на keyPress записывать значение в state и просто отображать его в Input Такое решение помогло чтобы клавиатура не показывалась и фокус оставался на инпуте во время ввода
  • #14 Если телефон не супер сильный то очень часто тупят большие списки - решения как всегда было либо сделать пагинацию либо подгрузку по скроллу. Я искала и смотрела уже готовые компоненты - но ничего из них мне не подошло поэтому я написала свою компоненту она более легковесная и больше нам подходила. Зависит от ваших потребностей но важно большие списки нужно обрабатывать
  • #15 Так же в нашем приложении присутствует поиск - при чем поиск нам был нужен такой смарт - что по типу того как в Андроиде - ты пишешь цифры а он ищет по имени и по цифрам Для поиска мы использовали библиотеку Fuse.js а также для того чтобы когда поиск идет в большом списке телефон не тупил мы решили использовать WebWorker Кто еще не слышал про них - то это один из инструментов запуска программного кода еще в одном потоке - так как JS однопоточный это очень ускорило сам процесс ПОКАЗЫВАЮ
  • #24 Поскольку сегодня мы будем говорить про создание приложения на Cordova нужно вкратце рассказать о том что это и как это работает Cordova — это платформа, позволяющая разрабатывать мобильные приложения на разные платформы, путем встраивания браузера в мобильное приложение. Таким образом, ваше приложение является, по сути, мини-браузером, который показывает один единственный сайт — ваше приложение. По умолчанию Cordova предоставляет только базовые возможности браузера, которые есть на данном мобильном устройстве, но позволяет расширять набор функций, доступных в браузере путем использования плагинов.
  • #25 Поскольку сегодня мы будем говорить про создание приложения на Cordova нужно вкратце рассказать о том что это и как это работает Cordova — это платформа, позволяющая разрабатывать мобильные приложения на разные платформы, путем встраивания браузера в мобильное приложение. Таким образом, ваше приложение является, по сути, мини-браузером, который показывает один единственный сайт — ваше приложение. По умолчанию Cordova предоставляет только базовые возможности браузера, которые есть на данном мобильном устройстве, но позволяет расширять набор функций, доступных в браузере путем использования плагинов.
  • #26 После этого у нас есть возможность создать проект через команду cordova: cordova create имя_папки id_приложения название_приложения После этого у вас создастся папка где вы увидите такую структуру:
  • #27 Теперь нам нужно добавить для нашего проекта платформы для которых мы будем разрабатывать наше приложение, это делается с помощью команды: $ cordova platform add ios $ cordova platform add android Теперь у вас в папке platforms есть 2 папки = ios и android и теперь вы можете запустить ваше приложения под этими платформами Запуск приложения рассмотрим чуть ближе к концу доклада, теперь давайте поговорим про технологии которые мы используем на проекте
  • #28 У нас в проекте было 6 типа билдов: dev для браузера dev для телефона prod для телефона prod для браузера local - с самописным сервером на Node.js который просто отдавал и принимал запросы И так со всеми этими настройками билдили приложение через webpack и запускали на телефоне через cordova run - об этом позже Хотела бы добавить что в последнее время очень популярным у нас на проекте есть Стаббинг данных или локальный сервер отдельно для Frontend чтобы наша разработка могла идти паралельно разработке на Бээке и в зависимости от того била был для телефона или для веба в приложении были свои особенности
  • #29 У нас в проекте было 6 типа билдов: dev для браузера dev для телефона prod для телефона prod для браузера local - с самописным сервером на Node.js который просто отдавал и принимал запросы И так со всеми этими настройками билдили приложение через webpack и запускали на телефоне через cordova run - об этом позже Хотела бы добавить что в последнее время очень популярным у нас на проекте есть Стаббинг данных или локальный сервер отдельно для Frontend чтобы наша разработка могла идти паралельно разработке на Бээке и в зависимости от того била был для телефона или для веба в приложении были свои особенности
  • #30 Среда разработки в WebView немнго отличаеться от разработки в обычном браузере мы сейчас рассмотрим какие именно есть особенности
  • #31 В отличии от браузера где есть onDOMContentLoaded у телефона в cordova есть свой ивент - onDeviceReady который говорит о том что API device загружено и готово к использованию Если приложение уходит в бэкграунд - то есть специальный ивент - pause - IOS and resign Android - и если опять активно срабатывает ивент IOS - resume and Android - active. Интересная особенность о которой я узнала через пол года разработки - когда телефон находить ся в спящем режиме то есть приложение в бэке у него нету доступа к KeyChain, localStorage or SecureStorage в котором я хранила данные о пользователе и если в бэкграунде обновлять данные то не получиться взять данные из хранилища - конечно есть вариант держать приложение в рабочем состоянии но - 1 это будет работать только на Android, 2 - очень садит батарею у телефона Закрытие приложение то же самое если закрыть браузер IOS открывает приложение в так называемом WebView в Safari а в Android открывает в Chrome - нудно понимать что тестировать все нужно в обоих браузерах - и в каждом естественно есть свои особенности =) Для того чтобы вы могли делать запросы на свой сервер вам нужно настроить Content Security Policy - для этого нужно добавить заголовки в HTML файле =&amp;gt; &amp;lt;meta http-equiv=&amp;quot;Content-Security-Policy&amp;quot; content=&amp;quot;default-src * gap://ready file: &amp;apos;self&amp;apos; data: gap: polyblob: blob: ws: wss: https://ssl.gstatic.com &amp;apos;unsafe-eval&amp;apos;; style-src * &amp;apos;self&amp;apos; &amp;apos;unsafe-inline&amp;apos;; media-src *; connect-src * ws: wss:;»&amp;gt; - часть gap: polyblob: blob: для вебворкеров нужна без них работать не будет
  • #34 Среда разработки в WebView немнго отличаеться от разработки в обычном браузере мы сейчас рассмотрим какие именно есть особенности
  • #35 С хранением данных на стороне клиента в обосенности с хранением логина и пароля пришлось повозиться Первоначально хранили данные в localStorage - оказалось что если в телефоне остаться мало места оно может очистить хранилище и все ваши данные пользователя - поэтому это была плохая идея - но она уже была в продет и бывает не все можно узнать пока не задеплоить Вторая попытка была хранить данные с помощью специального плагина в Сordova - Secure Storage - и в принципе в общем эти идея уже осталась в проде только в какой-то момент для IOS оно начало выдавать ошибки, поскольку для Android все был нормально так и решили оставить для Android а вот для IOS была сделана 3 попытка я использую специальный плагин для работы с нативным KeyChain - очень приятно также тот факт что если удаляешь приложение а потом снова его ставишь - там храниться данные и пользователь получает те же данные что и были до удаления - в Android ничего подобного я не нашла
  • #36 ЧТо такое плагины Cordova и немного о тех что использовали: Плагины это куски кода которые позволяют вам получить доступ к API на уровне устройства. Вы можете использовать как доступные плагины в репозитории cordova или написать свои если вы знаете еще дополнительно - Java и Objective-C
  • #37 Добавление плагинов на проект осуществляется через команду cordova plugin add cordova-plugin-statusbar И потом у вас есть доступ к спи плагина через глобальную переменную Вообще как по мне ве сделано довольно грязно - потому что каждый плагин предоставляет глобальную переменянную для работы со своими методами через JS и засоряется пространство имен но как есть уже
  • #38 Список контактов - есть несколько плагинов для работы со списков контактов чтобы их прочитать создать и помоем на Андроид еще можно удалять - но принципе только 1 из них рабочий и не вызывает ошибок на обоих платформах - https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-contacts/ Плагин diagnostic - он позволяет считать информацию про телефон про платформу - какая система версия стоит и тд - особенно важно то что вы с помощью этого плагина можете запросить доступ к любой информации пользователя и потом если он даст вам доступ пользоваться ими - https://github.com/dpa99c/cordova-diagnostic-plugin Status bar чтобы либо окрасить другим цветом верхнюю плашку либо ее прятать - все это есть в этом плагине - https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-statusbar/ KeyBoard plugin - для работы с нативной клавиатурой - https://github.com/cjpearson/cordova-plugin-keyboard Dialogs plugin чтобы показывать попапы нативные в телефоне когда спрашиваете разрешение для доступа и вообще для общения с пользователем - https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-dialogs/ Secure Storage хранить данные - https://github.com/Crypho/cordova-plugin-secure-storage/issues Network plugin - для работы с сетью понимать вайвай сейчас или мобильный интернет - https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-network-information/ Cordova plugin whitelist для запросов на сторонний сервер В принципе это основные плагины которые понадобятся вам для самого обычного приложения, там дальше уже по потребностям и по специфике
  • #39 И так допустим вы создали свое приложение - теперь нам нужно бы запустить его на телефоне ) И протестировать конечно же: Сейчас подробней разберем как это можно было бы сделать =) Для того чтобы запустить приложение на телефоне в cordova есть специальная команда $ cordova run платформа (android/ios) —-device Если мы хотим запустить приложение на Android то мы запускаем команду више и подключаем наш телефон к компьютеру - в телефоне спрашивается разрешение - Перед выполнением этой команды, необходимо настроить устройство для тестирования, следуя процедурам, которые различаются для каждой платформы. В устройствах Android вам придется включить функцию Отладка USB на устройстве и возможно добавить драйвер,  - и после этого приложение запускается на вашем телефоне. Что касается IOS то для того чтобы запустить ваше приложение в тестовом режиме на телефоне вам нужно: Xcode Зарегистрироваться в программе Apple Developers - там идет ежегодная оплата за это - просто даже в тестовом режиме без этого вы не сможете запустить свое приложение на реальном телефоне - только на тестовых устройства х на компьютере что неплохо но все же это тоже отличается от реального Команда run содержит в себе 2 команды: cordova build cordova run То есть run выполняет build всех скриптов и также выполняет запуск приложения на телефоне
  • #40 Отладка приложения Для отладки приложения мы пользуемся Chrome для Android и Safari для IOS Для этого нужно в настройках телефонов дать доступ для отладки по USB и при подключении телефона тестовую версию приложения вы сможете оттестировать в вашем браузере Для Chrome Открываете chrome://inspect/#devices В Safari Разработка -&amp;gt; Название вашего мака -&amp;gt; Название Приложения при нажатии открывается debugger и там вы можете тестировать все как в обычном браузере
  • #41 В Safari Разработка -&amp;gt; Название вашего мака -&amp;gt; Название Приложения при нажатии открывается debugger и там вы можете тестировать все как в обычном браузере
  • #42 В Safari Разработка -&amp;gt; Название вашего -&amp;gt; Название Приложения при нажатии открывается debugger и там вы можете тестировать все как в обычном браузере
  • #43 И так подсуммируем, почему создавать приложение на Cordova это выгодно: Кроссплатформенное Не требует знаний Java и Objective-C и вместо 2 разработчиков у вас 1 разработчик на все платформы Популярно поэтому постоянно есть новые фишки плагины и большое комьюнити Почему нет: Если выходит новая версия ПО жди проблем в ближайшие месяцы Нету доступа ко всем API телефона и если нету специального плагина нужно искать решение самому или писать плагин самостоятельно Не так нативно ощущаешься как настоящее приложение Медленнее работает и все так как по мне то это хак - а не настоящее приложение
  • #44 В Safari Разработка -&amp;gt; Название вашего мака -&amp;gt; Название Приложения при нажатии открывается debugger и там вы можете тестировать все как в обычном браузере