Время для некоторой обскуры кода. У меня есть часы Samsung Gear S2, которым на данный момент исполняется 3 года. Новые модели по-прежнему используют тот же Tizen SDK, поэтому все, что здесь изложено, должно работать и с этими устройствами.
Я задумал небольшое приложение для часов, но мне не понравились мои возможности. Разработка часов может выполняться либо с использованием собственного языка C, либо в виде веб-приложения, например, ванильного JavaScript. Также недавно были добавлены расширения Visual Studio с поддержкой .NET. C - это, ну, C и JS вызывают у меня язвительную реакцию.
Так что это заставило меня задуматься: Angular, будучи Typescript, в конечном итоге является просто Javascript, он должен работать правильно? И, конечно же, это так. Давайте начнем с простого POC и сделаем все с нуля.
Для просмотра примера вам понадобится Tizen SDK (включая инструменты командной строки) и Angular CLI.
Шаг 1: Создание проекта Angular
Сначала давайте создадим новый проект Angular 6 и опробуем его:
cd ~/git/ ~/git/$ ng new angularTizenSample ~/git/$ cd angularTizenSample ~/git/$ ng serve
Если все прошло гладко, вы должны увидеть образец проекта Angular. Вы можете прекратить это, и давайте перейдем к проекту Tizen.
Шаг 2: Создание веб-проекта Tizen
Tizen Studio немного нестабильна, поэтому мы будем использовать инструменты командной строки для создания Tizen Web Project. Предполагая, что у вас есть эмулятор часов Tizen, давайте создадим новый проект внутри проекта Angular и запустим его:
~/git/angularTizenSample/$ tizen create web-project -p mobile-2.3.1 -t WebBasicApplication -n angularTizenSample ~/git/angularTizenSample/angularTizenSample/$ cd angularTizenSample ~/git/angularTizenSample/angularTizenSample/$ tizen build-web ~/git/angularTizenSample/angularTizenSample/$ tizen package -t wgt -- .buildResult/ ~/git/angularTizenSample/angularTizenSample/$ sdb install .buildResult/angularTizenSample.wgt ~/git/angularTizenSample/angularTizenSample/$ sdb shell "wrt-launcher '-s Bsl3EwnDc9.angularTizenSample'"
Этот Bsl3EwnDc9.angularTizenSample - это идентификатор приложения. Он был создан в файле config.xml.
В этом проекте нам понадобится значок, который мы переместим в файлы src / assets, config.xml и .project. Мы можем удалить все остальное и переименовать этот каталог в просто «tizen».
Преодоление разрыва
Затем давайте изменим проект Angular, чтобы приспособить часы (некоторые на основе WebKit) - давайте включим все полифиллы в polyfills.ts:
import 'core-js/es6/symbol'; import 'core-js/es6/object'; import 'core-js/es6/function'; import 'core-js/es6/parse-int'; import 'core-js/es6/parse-float'; import 'core-js/es6/number'; import 'core-js/es6/math'; import 'core-js/es6/string'; import 'core-js/es6/date'; import 'core-js/es6/array'; import 'core-js/es6/regexp'; import 'core-js/es6/map'; import 'core-js/es6/weak-map'; import 'core-js/es6/set';
Затем, чтобы увидеть, что все работает, давайте изменим проект так, чтобы он просто отображал логотип Angular, и если вы нажмете на него, он изменится на логотип Tizen.
Давайте возьмем логотип Angular, заменим встроенный и поместим его в активы как angular.png, а также возьмем icon.png из проекта tizen и поместим его как tizen .png.
app.component.html:
<div style="text-align:center">
<img width="360" height="360" alt="Angular Logo" (click)="changeImage()" src="{{img}}">
</div>
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angularTizenSample';
angular = 'assets/angular.png';
tizen = 'assets/tizen.png';
img = this.angular;
changeImage() {
if (this.img === this.angular) {
this.img = this.tizen;
} else {
this.img = this.angular;
}
}
}
Обновление файлов сборки
Давайте обновим файлы сборки, чтобы простая npm run tizen команда собрала все и создала для нас пакет Tizen:
Давайте включим все файлы конфигурации для Tizen в angular.json:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angularTizenSample": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"targets": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/angularTizenSample",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
{ "glob": "*", "input": "tizen/", "output": "/" }
],
"styles": [
"src/styles.css"
],
.....
Команды сборки в package.json:
{
"name": "angular-tizen-sample",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"tizen": "npm run build && npm run tizenPackage", "tizenPackage": "cd dist/angularTizenSample && tizen build-web && tizen package -t wgt -- .buildResult/",
"tizenRun": "cd dist/angularTizenSample && sdb install .buildResult/angularTizenSample.wgt && sdb shell \"wrt-launcher '-s Bsl3EwnDc9.angularTizenSample'\""
},
"private": true,
Нет, мы можем npm run tizen упаковать наше приложение и npm run tizenRun запустить его на эмуляторе (или устройстве, в зависимости от того, на что указывает sdb):
При запуске на реальном устройстве вам нужно всего лишь следовать стандартным инструкциям Tizen, а именно создать сертификат, установить его на свое устройство и подписать файл wgt.
Что дальше?
Следующим шагом будет использование Tizen API для взаимодействия с функциями устройства, такими как нажатие кнопок и поворот лицевой панели. Я создал для этого интерфейсы TypeScript, смоделировал эти вызовы и почти полностью запустил приложение в браузере, даже не попробовав эмулятор / устройство.
Angular действительно сияет, когда вы скрываете довольно запутанный API Tizen, связанный с телефонной связью, под услугой, просто предлагая услугу для этой функции.
Примечания
- Отладка? Вы можете использовать Tizen Studio, чтобы запустить проект и даже отладить его оттуда, но, как я уже сказал, это немного нестабильно. Множество зависаний IDE и различных ошибок. Вы также можете подключиться к веб-инспектору версии, запущенной из командной строки.
- Не работает маршрутизация - все должно быть в index.html.
- Производительность на уровне обычных JS-приложений.
Код из этого примера можно найти по адресу https://github.com/ration/angularTizen.
Спасибо за прочтение! Оставляйте вопросы или комментарии ниже или свяжитесь со мной на Github.
