Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 телефонией для стран Европы
• Ув...
From Back-end to Front-end
Kiev 2018
Karpenko Lilia
• Количество
смартфонов
увеличилось на 39% в
сравнении с прошлым
годом...
О чем мы будем говорить сегодня?
1. Окружение в cordova и стек технологий проекта
2. Среда браузера vs. WebView телефона
3...
Быть или не быть?
Почему Cordova?
Особенностью и плюсом Cordova есть то что одно и
то же приложение может быть запущено как в среде
браузера...
При разработке так же стоял выбор - между React и Angular
В результате стек технологий вышел такой:
1. React
2. Redux
3. LESS
4. WEBPACK
5. Cordova
Build IOS/Android Mobile App wit...
Особенности работы с 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, { Com...
ВЫХОД ЕСТЬ!)
Build IOS/Android Mobile App with Cordova + React/Redux
class InputCustom extends React.Component {
state = {...
Создание больших
списков и пагинация
Build IOS/Android Mobile App with Cordova + React/Redux
WebWorkers
Мы создавали в приложении поиск,
при чем поиск был такой как
например в Dialer в Android - ты
пишешь цифры, а о...
Build IOS/Android Mobile App with Cordova + React/Redux
export default class WebWorker {
activeWorker = null;
create(searc...
Build IOS/Android Mobile App with Cordova + React/Redux
export default class WebWorker {
activeWorker = null;
create(searc...
Build IOS/Android Mobile App with Cordova + React/Redux
export default class WebWorker {
activeWorker = null;
create(searc...
Build IOS/Android Mobile App with Cordova + React/Redux
default class WebWorker {
activeWorker = null;
reate(searchFileNam...
Build IOS/Android Mobile App with Cordova + React/Redux
import WebWorker from "lib/WebWorker";
export default {
webWorker:...
Build IOS/Android Mobile App with Cordova + React/Redux
import WebWorker from "lib/WebWorker";
export default {
webWorker:...
Build IOS/Android Mobile App with Cordova + React/Redux
import WebWorker from "lib/WebWorker";
export default {
webWorker:...
Build IOS/Android Mobile App with Cordova + React/Redux
import WebWorker from "lib/WebWorker";
export default {
webWorker:...
Что же такое Apache
Cordova?
Build IOS/Android Mobile App with Cordova + React/Redux
Окружения для cordova
Cordova — это платформа, позволяющая разрабатывать мобильные приложения на разные платформы, путем
в...
Создание проекта cordova
$ cordova create _ id_ _имя папки приложения название приложения
Build IOS/Android Mobile App wit...
Добавление платформ для приложения
$ cordova platform add ios
$ cordova platform add android
После чего у вас в папке plat...
Build IOS/Android Mobile App with Cordova + React/Redux
Environme
nts
Environme
nts
Local
Dev
Production PlatformsPlatform...
Environments
"scripts": {
"start": "node tools/server.js",
«local_w": "BUILD_APP=no webpack --watch --watch-poll --config ...
Build IOS/Android Mobile App with Cordova + React/Redux
WebView vs. Браузер
1. onDOMContentLoaded + onDeviceReady
2. IOS = «resume» && «pause» and Android = «active» && «resign»
3. Закрытие приложен...
Определение платформы
Определение платформы происходит через установку
плагина cordova-plugin-device.
После этого у вас по...
Определение платформы через build
Build IOS/Android Mobile App with Cordova + React/Redux
import config from ‘envConfig';
...
Build IOS/Android Mobile App with Cordova + React/Redux
Хранение данных в
памяти телефона
Хранение локальных данных
1. localStorage
2. Secure Storage (cordova plugin)
3. IOS - Apple’s Keychain Services - зашифров...
Плагины Cordova
Плагины это независимые модули которые позволяют вам
получить доступ к API на уровне устройства.
Вы можете...
Добавление плагина
$ cordova plugin add plugin_name
Код плагина устанавливается в папку plugins и там вы можете посмотреть...
Список плагинов необходимых для любого
приложения
1. Cordova diagnostic plugin
2. Cordova status bar
3. Cordova Keyboard p...
Запуск приложения на телефоне
$ cordova run _ _(android/ios) —-deviceплатформа
Для Android вам понадобится установленная j...
Отладка приложения на Android
Для отладки приложения:
1) Ваш телефон должен быть подключен к компьютеру через USB
2) На те...
Отладка приложения на IOS
Для отладки приложения:
1) Ваш телефон должен быть подключен к компьютеру через USB
2) На телефо...
Build IOS/Android Mobile App with Cordova + React/Redux
Итоги
Почему создавать приложение на Cordova это выгодно:
1.Кроссплатформенное
2.Не требует знаний Java и Objective-C и вм...
Предложения
пожелания и
вопросы?
Build IOS/Android Mobile App with Cordova + React/Redux
Upcoming SlideShare
Loading in …5
×

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

199 views

Published on

Во время доклада мы поговорим про особенности создания не совсем стандартного мобильного приложения с помощью Cordova/PhoneGap + React/Redux. Мы пройдемся по основным проблемам с которыми я и команда столкнулась во время разработки приложения, об особенностях окружения и вариантов решений к которым мы пришли. Рассмотрим самые популярные плагины для Cordova которые позволяют вам считывать информацию пользователе, работу с доступами, хранение данных и создание интернет звонков с помощью WebRTC. Будет много интересного и поучительного

Published in: Education
  • Be the first to comment

  • Be the first to like this

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

  1. 1. From Back-end to Front-end Kiev 2018 Build IOS/Android Mobile App with Cordova + React/Redux Karpenko Lilia
  2. 2. Немного обо мне • Senior Frontend (Frontend Team lead) в Kwebbl (DAXX) - мы занимаемся IP телефонией для стран Европы • Увлечена JavaScript, работаю преподавателем и ментором в Веб разработке • Вегетарианка, люблю музыку, спорт, играю на гитаре и фортепиано, люблю читать книги и мечтаю про собственный бизнес =) Build IOS/Android Mobile App with Cordova + React/Redux
  3. 3. From Back-end to Front-end Kiev 2018 Karpenko Lilia • Количество смартфонов увеличилось на 39% в сравнении с прошлым годом • К концу 2016 года 46% населения мира являются владельцами смартфонов • Отрасль мобильных приложений расширяется с каждым днем и останавливаться пока не собирается.
  4. 4. О чем мы будем говорить сегодня? 1. Окружение в cordova и стек технологий проекта 2. Среда браузера vs. WebView телефона 3. Хранение данных в памяти телефона 4. Работа с плагинами в Cordova 5. Запуск приложения на телефонах 6. Отладка приложения Build IOS/Android Mobile App with Cordova + React/Redux
  5. 5. Быть или не быть?
  6. 6. Почему Cordova? Особенностью и плюсом Cordova есть то что одно и то же приложение может быть запущено как в среде браузера так и в среде телефона, то есть с помощью Cordova мы можем создавать как веб приложения так и приложения для IOS, Android, Windows Phone, Amazon и т.д. Build IOS/Android Mobile App with Cordova + React/Redux
  7. 7. При разработке так же стоял выбор - между React и Angular
  8. 8. В результате стек технологий вышел такой: 1. React 2. Redux 3. LESS 4. WEBPACK 5. Cordova Build IOS/Android Mobile App with Cordova + React/Redux
  9. 9. Особенности работы с React и JS в мобильном браузере через Cordova Build IOS/Android Mobile App with Cordova + React/Redux
  10. 10. Работа с Controlled components в React Build IOS/Android Mobile App with Cordova + React/Redux
  11. 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. 12. ВЫХОД ЕСТЬ!) 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. Клавиатура телефона не показывалась, поэтому проблема была решена!
  13. 13. Создание больших списков и пагинация Build IOS/Android Mobile App with Cordova + React/Redux
  14. 14. WebWorkers Мы создавали в приложении поиск, при чем поиск был такой как например в Dialer в Android - ты пишешь цифры, а он ищет по имени и по цифрам одновременно. Для поиска мы использовали библиотеку Fuse.js + чтобы поиск по большим спискам не блочил наше UI мы решили использовать для поиска WebWorkers WebWorkers это один из инструментов запуска JS кода не в основном потоке - так как JS однопоточный это очень ускорило сам процесс
  15. 15. 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(); } } }
  16. 16. 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(); } } }
  17. 17. 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(); } } }
  18. 18. 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(); } }
  19. 19. 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; }; } } };
  20. 20. 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; }; } } };
  21. 21. 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; }; } } };
  22. 22. 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; }; } } };
  23. 23. Что же такое Apache Cordova? Build IOS/Android Mobile App with Cordova + React/Redux
  24. 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. 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. 26. Добавление платформ для приложения $ cordova platform add ios $ cordova platform add android После чего у вас в папке platforms добавляются 2 папки android && ios Build IOS/Android Mobile App with Cordova + React/Redux
  27. 27. Build IOS/Android Mobile App with Cordova + React/Redux Environme nts Environme nts Local Dev Production PlatformsPlatforms Web IOS Android нас были все комбинации наших платформ и окружений - получаеться 9 билдов приложения под разные устрой
  28. 28. 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
  29. 29. Build IOS/Android Mobile App with Cordova + React/Redux WebView vs. Браузер
  30. 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. 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. 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. 33. Build IOS/Android Mobile App with Cordova + React/Redux Хранение данных в памяти телефона
  34. 34. Хранение локальных данных 1. localStorage 2. Secure Storage (cordova plugin) 3. IOS - Apple’s Keychain Services - зашифрованный контейнер, который надежно хранит мелкие куски данных в приложении Build IOS/Android Mobile App with Cordova + React/Redux
  35. 35. Плагины Cordova Плагины это независимые модули которые позволяют вам получить доступ к API на уровне устройства. Вы можете использовать как доступные плагины в репозитории cordova или написать свои если вы знаете еще дополнительно - Java и Objective-C. Большинство плагинов доступны в репозитории npm Build IOS/Android Mobile App with Cordova + React/Redux
  36. 36. Добавление плагина $ cordova plugin add plugin_name Код плагина устанавливается в папку plugins и там вы можете посмотреть исходный код и все что вам интересно После установки плагина у вас будет доступ к его API через глобальную переменную обычно что-то схожее с названием плагина Build IOS/Android Mobile App with Cordova + React/Redux
  37. 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. 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. 39. Отладка приложения на Android Для отладки приложения: 1) Ваш телефон должен быть подключен к компьютеру через USB 2) На телефоне должно быть включено разрешение на отладку через USB 3) Должно быть активно приложение которое вы тестируете 4) Заходим в Google Chrome во вкладку chrome://inspect/#devices находим там ваше приложение и открываем, у вас сразу же будет видно все то же самое что и при отладке любого другого сайта Build IOS/Android Mobile App with Cordova + React/Redux
  40. 40. Отладка приложения на IOS Для отладки приложения: 1) Ваш телефон должен быть подключен к компьютеру через USB 2) На телефоне должно быть включено разрешение на отладку через USB 3) Должно быть активно приложение которое вы тестируете 4) Заходим в Safari вверху ищем = Разработка -> Название вашего телефона -> Название Приложения, дальше открывается console и там вы можете тестировать все как в обычном браузере Build IOS/Android Mobile App with Cordova + React/Redux
  41. 41. Build IOS/Android Mobile App with Cordova + React/Redux
  42. 42. Итоги Почему создавать приложение на Cordova это выгодно: 1.Кроссплатформенное 2.Не требует знаний Java и Objective-C и вместо 2 разработчиков у вас 1 разработчик на все платформы 3.Популярно поэтому постоянно есть новые фишки плагины и большое комьюнити Почему нет: 1.Если выходит новая версия ПО жди проблем в ближайшие месяцы, потому что решений может не быть 2.Нету доступа ко всем API телефона и если нету специального плагина нужно искать решение самому или писать плагин самостоятельно •Не так нативно ощущаешься как настоящее приложение •Медленнее работает чем нативное приложение Build IOS/Android Mobile App with Cordova + React/Redux
  43. 43. Предложения пожелания и вопросы? Build IOS/Android Mobile App with Cordova + React/Redux

×