Добавление серверной части в ионное приложение - от начинающих до среднего
Это продолжение нашей Части 1.
Добавление JS-бэкэнда
Любое логическое приложение в конечном итоге получит и сохранит данные на сервере. Это может быть облегченная база данных, встроенная в приложение, или в REST Api. В нашем случае мы получаем данные только от сервиса через REST API. Для нашего приложения мы используем apis данных о качестве воздуха в реальном времени из http://aqicn.org/json-api/doc/#api-Geolocalized_Feed-GetHereFeed.
Чтобы взаимодействовать с HTTP API, нам нужно добавить HTTP-модуль в наше приложение Ionic / Angular.
Добавьте приведенный ниже оператор импорта в app.module.ts и добавьте HttpModule в свойство imports, чтобы загрузить его.
импортировать {HttpModule} из ‘ @ angular / http ’;
Добавьте следующие два импорта в home.ts. Импорт обещания используется для преобразования наших вызовов api в обещания, которые пригодятся позже.
импортировать {Http} из ‘ @ angular / http ’;
импортировать ‘rxjs / add / operator / toPromise’;
Окончательный код для home.ts теперь должен выглядеть следующим образом. Подводя итог, вот что мы сделали:
- Сохраните ссылку на объекты Http и LoadingController в нашем классе HomePage с помощью функции конструктора.
- Создан новый метод перезагрузки, в котором мы используем объект http для выполнения вызова REST к нашему API индекса качества воздуха. В настоящее время используется демонстрационный токен, который не возвращает динамические данные. Поэтому, пожалуйста, создайте свой собственный токен, следуя документации api, и замените демонстрационный токен своим.
- Вызовы http возвращают обещание, и при успешном выполнении этого обещания мы сохранили данные индекса качества воздуха (aqi) в переменной имен наших классов aqi.
Связывание данных в HTML
Связывание данных с HTML происходит с помощью привязки данных Angular. Я не буду здесь рассказывать об этом, но еще раз резюмирую, это способ, с помощью которого представления автоматически меняются, когда происходит изменение данных в JS.
Angular имеет особое соглашение о привязке данных, и наиболее распространенным является использование фигурных скобок. В нашем случае у нас есть переменная aqi, определенная в нашем JS-имени home.ts. В этом файле приведенный ниже код означает, что любые данные, которые есть в этом классе, могут использоваться в home.html.
ПРИМЕЧАНИЕ. Любая новая переменная, которую вы определяете в своем JS, должна иметь связанный с ней тип в соответствии с соглашениями машинописного текста. На данный момент, поскольку мы объявляем переменную aqi, машинописный текст выдает ошибку компиляции с просьбой указать тип. В качестве общей меры просто добавьте к этой переменной тип any.
@Component ({
selector: 'page-home',
templateUrl: 'home.html'
})
экспорт класса HomePage {
аки: любой; // соглашение машинописного текста
конструктор (общедоступный загрузчик: LoadingController, общедоступный navCtrl: NavController, общедоступный http: Http) {
this.http = http;
this.loader = loader;
this.aqi = {данные: {}};
this.reload ();
}
Поэтому, если мы хотим использовать наши данные aqi выше в HTML, просто сделайте это в нашем html
{{aqi.data}}
и так далее, вы можете расширить этот стиль, чтобы ссылаться на любое свойство в графе объектов json.
Это подводит нас к окончательному HTML, который теперь выглядит вот так.
Теперь, если все идет хорошо и тоже выполняется ionic serve, ваше приложение должно появиться в браузере.
Шаг 4 - Мобильное приложение для Android
Добавление платформы Android
Пришло время преобразовать наше веб-приложение в мобильное приложение. Для этого урока мы создадим приложение для Android. Убедитесь, что в вашей системе установлен Android. Будет много руководств, которые помогут вам пройти этот шаг, поэтому я пропущу этот шаг.
Чтобы добавить платформу Android, выполните следующую команду:
платформа ionic cordova добавить андроид
Вышеупомянутый шаг добавит в ваш каталог android, заставки и значки.
Сборка Android APK
Теперь пора создать apk из нашего веб-приложения. Запустите команду ниже, и она должна сгенерировать apk в папку ‹project_dir› /platforms/android/build/outputs/apk/android-debug.apk
ионная кордова сборка Android
Некоторые телефоны не позволяют передавать apk с такими именами, поэтому вы можете просто переименовать его, перенести на свой телефон Android и установить. Если все пойдет хорошо, теперь у вас есть первое полнофункциональное гибридное приложение! : D
Настройки имени и версии приложения
Имя и версию вашего приложения можно изменить из файла config.xml, находящегося в корневом каталоге вашего проекта.
‹Widget id =” io.ionic.starter ”version =” 0.0.1 ' xmlns = » http://www.w3.org/ns/widgets ' xmlns: cdv =» http://cordova.apache.org/ns/1.0 '›
‹name› MyApp ‹/name›
Настройки значков и заставок
Чтобы настроить значок приложения и экран-заставку, перейдите в папку ресурсов в корневом каталоге проекта. Просто замените icon.png и splash.png своими собственными файлами. Для меня минимальные размеры изображений, которые работали, были: 512x512 для значка и 1920x1920 для экрана-заставки. После этого выполните следующую команду, чтобы сгенерировать все значки и заставки для разных типов устройств.
ионная кордова ресурсы
Отладка APK и изменения кода HOT
Для заключительных шагов вам может потребоваться внести некоторые изменения в свой код и создать apk и переносить его на свой телефон каждый раз, когда это вас раздражает. Чтобы решить эту проблему, просто подключите телефон к компьютеру и разрешите удаленную отладку и режим передачи файлов.
Нет, вместо ionic serve выполните следующую команду
ionic cordova запустить android - livereload
PS: двойной дефис перед загрузкой
Это должно вызвать приложение на вашем телефоне, и когда вы измените код на своем компьютере, изменения отразятся в реальном времени на вашем apk.
В дополнение к этому, еще один продвинутый способ отладки вашего JS-кода - это просмотреть приведенную ниже ссылку в вашем Chrome:
chrome: // inspect / # устройств
Это покажет вам подключенный телефон и запущенный apk. Убедитесь, что ваш apk запущен, когда вы это сделаете.
Шаг 5 - Окончательный запуск в производственный магазин PlayStore
Производительность APK и время начальной загрузки
К настоящему времени вы, должно быть, поняли, что нашему приложению требуется немного времени для первоначального запуска. Чтобы исправить это, мы создадим наш apk с производственным флагом, который сообщает ionic о необходимости оптимизации, такой как компиляция AOT и других интересных вещей (мне еще предстоит углубиться в эту черную магию!). Выполните приведенную ниже команду, чтобы создать приложение для производства и задать ему скорость запуска.
ionic cordova build android - прод
PS: после prod стоит двойной дефис
Сверните его в Playstore / Appstore
Android требует, чтобы вы подписали apk своим сертификатом безопасности перед развертыванием любого приложения. Чтобы сделать этот шаг, сначала нам нужно создать файл хранилища ключей. Итак, в системе, где установлена java, выполните следующую команду
keytool -genkey -v -keystore release.keystore -alias пример -keyalg RSA -keysize 2048 -validity 10000
Он задаст вам несколько вопросов и пароль для установки. Убедитесь, что вы помните пароль. Результатом этого шага будет файл хранилища ключей с тем же именем, которое вы указали в команде. Скопируйте этот файл release.keystore и поместите его в папку ‹project› / platform / android.
В той же папке создайте еще один файл с именем release-signing.properties и поместите в него указанные ниже значения.
storeFile = ‹имя файла хранилища ключей с расширением›
storeType = jks
keyAlias = ‹псевдоним, который вы указали на шаге выше›
keyPassword = ‹пароль, который вы указали на шаге выше›
storePassword = ‹Пароль, который вы указали на шаге выше›
Теперь, наконец, запустите следующие две команды, чтобы получить ваш производственный apk
ionic cordova build android - прод
Cordova build android -выпуск
Если все пойдет хорошо, вы получите файл с именем android-release.apk в папке ‹project_dir› / platform / android / build / output / apk /.
Этот выпуск apk можно напрямую загрузить в свою учетную запись игрового магазина !.
Полный код этого руководства доступен в моем репозитории на github:
