HTML5 приложения за Android, урок 1

HTML5 приложения за Android
Урок 01
Леон Анави
@leonanavi
leon@anavi.org
С подкрепата на:

@leonanavi
HTML5
приложения за
Android
Какво ще правим на курса?

@leonanavi
Open Source
Какви инструменти ще ползваме?

@leonanavi
Съдържание
 Android
 HTML5 & JavaScript
 Cordova
 PhoneGap
 Crosswalk
 Ripple

@leonanavi
Android
 Стотици милиони устройства
 Над 83% пазарен дял 2014Q3
 Разработва се от Google
 Open source
 Linux kernel
 Java VM (Dalvik/ART)

@leonanavi
Android архитектура

@leonanavi
Android development kits
Android
Software
Development
Kit
(SDK)
Android
Native
Development
Kit
(NDK)

@leonanavi
Android app sandboxes
Приложение 1
Java VM
Процес
(UID 10000)
Java VM
Процес
(UID 10001)
Java VM
Процес
(UID 10002)
/data/.../app1 /data/.../app2 /data/.../app3
Linux kernel

@leonanavi
Разрешения
 Приложенията се нуждаят от разрешения,
за да достъпят периферията, сензорите или
файлове на устройството
 По подразбиране всяко приложение няма никакви
разрешения
 При инсталация потребителя дава разрешения
за достъп на приложенията

@leonanavi
Разрешения

@leonanavi
App Manifest
Всяко Android приложение има AndroidManifest.xml
в главната си директория, който съдържа:
 Идентификатор на приложението
 Име, версия, икони, splashscreen
 Необходими разрешения
 Минимално необходимо Android API
 Допълнителни библиотеки (ако се налага)

@leonanavi
Примерен AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.android.basiccontactables"
android:versionCode="1"
android:versionName="1.0" >

<uses-permission android:name="android.permission.READ_CONTACTS"/>

<permission android:name="android"></permission>

<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/Theme.Sample" >
<activity
android:name="com.example.android.basiccontactables.MainActivity"
android:label="@string/app_name"
android:launchMode="singleTop">
<meta-data
android:name="android.app.searchable"
android:resource="@xml/searchable" />
<intent-filter>
<action android:name="android.intent.action.SEARCH" />
</intent-filter>
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>

@leonanavi
Android версии и API нива

@leonanavi
Android Dashboard
https://developer.android.com/about/dashboards/index.html

@leonanavi
Различните екрани на Android
http://developer.android.com/guide/practices/screens_support.html

@leonanavi
Средства за тестване
 Android устройства
 Android Virtual Device (AVD)
 Ripple (за уеб сайтове и HTML5 приложения)
 Samsung Remote Test Lab
http://developer.samsung.com/remotetestlab/rtlAboutRTL.action

@leonanavi
Android Virtual Device (AVD)
 Android виртуални машини, която върви на
персонален компютър
 Емулация на ARM и Intel архитектури
 Конфигурация на параметрите на всяка машина
 Управление на виртуалните машини с AVD Manager

@leonanavi
Android Debug Bridge (ADB)
 Конзолен инструмент за управление и комуникация
на Android устройство или емулатор от компютър
 Android устройството трябва да е в Developer mode
 Синтаксис:
adb [-d|-e|-s <serialNumber>] <command>
 Команди:
http://developer.android.com/tools/help/adb.html

@leonanavi
ADB примери за употреба
 Показване на всички свързани Android устройства:
adb devices
 Инсталиране на APK:
adb install my.apk
 Качване на файл на устройството:
adb push foo.txt /sdcard/foo.txt
 Сваляне на файл от устройството:
adb pull /sdcard/demo.mp4
 Дистанционен достъп през конзола до устройството:
adb shell

@leonanavi
HTML5 & JavaScript
 HTML5 е най-новата версия на HTML стандарта
 HTML5 стандарта описва и API-та, които могат да се
ползват чрез JavaScript
 JavaScript е скриптов език, създаден пред 1995г,
за обработка на данни и събития в уеб браузъри
 JavaScript всъщност е имплементация на ECMAScript
 JavaScript вече може да живее и извън уеб браузърите:
Node.js, Cordova, PhoneGap, Crosswalk ...

@leonanavi
За и против HTML5 в мобилни
устройства
Предимства:
 Един код за много устройства и платформи
 Лесно създаване на приложения с инструменти,
познати на милиони уеб програмисти
 Бъдещето е в уеб
Недостатъци:
 По-слаба производителност
 Различен външен вид на графичните компоненти
спрямо стандартните за платформата

@leonanavi
Apache Cordova
 Open source инструмент за създаване на HTML5
приложения за мобилни устройства
 Достъп до сензори, периферия и файлове на
мобилни платформи през JavaScript API-та
 Съвместимост с най-популярните платформи:
Android, iOS, Tizen, Firefox OS, BlackBerry 10,
Amazon Fire OS, Windows, Windows Phone

@leonanavi
Adobe PhoneGap
 Open source инструмент на базата на Cordova, който
се разработва от Adobe
 Adobe предоставя допълнителни услуги като
създаване на приложения в облака и
други услуги за предприятия

@leonanavi
Как работи Cordova в Android?
 Създава APK файл чрез Android SDK
 Вгражда HTML5, CSS и JavaScript файлове в APK
 Зарежда HTML през Android WebView
 Свързва JavaScript с Java, за да достъпи до устройството
 Генерира AndroidManifest.xml от config.xml
HTML,
CSS,
JavaScript
WebView
APK

@leonanavi
Cordova документация
 Инсталация:
npm install -g cordova
 Документация:
http://cordova.apache.org/docs/en/4.0.0/

@leonanavi
Crosswalk project
 Инструмент за създаване на HTML5 приложения за
Android и Tizen
 Заменя webview-то на платформата с нова стабилна
версия на Blink
 Съвместимост с Cordova и плъгините за нея

@leonanavi
Ripple
 Симулатор на телефон, който работи в Google Chrome
 Интеграция със събития от Cordova
 Инсталация през NPM:
npm install -g ripple-emulator
 Примерна употреба за Cordova приложение:
ripple emulate --path to/my/app

@leonanavi
Задачи
 Инсталация на Android Studio
 Инсталация на Android SDK
 Създаване на AVD
 Инсталация на Node.js
 Инсталация на Git
 Инсталация на Atom
 Инсталация на Cordova
 Инсталация на Ripple
 Разучаване на ADB

@leonanavi
KEEP CALM
AND
SUPPORT
FOSS

HTML5 приложения за Android, урок 1

More Related Content

Similar to HTML5 приложения за Android, урок 1 (20)

More from Leon Anavi (20)

HTML5 приложения за Android, урок 1