Build mobile app with javascript

How to Create Android & iOS Mobile App using HTML, CSS & JavaScript

Apache Cordova is an open-source mobile development framework. It allows you to use standard web technologies such as HTML5, CSS3, and JavaScript for cross-platform development, avoiding each mobile platform native development language. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device’s sensors, data, and network status.” If you want to learn how to develop Android & iOS Mobile apps using HTML, CSS, JS & Apache Cordova then enroll in my course here with 90% discount. Apache Cordova — Build Hybrid Mobile Apps with HTML CSS & JS In this blog post, I’ll show you how to Create your first Cordova Project for Android, iOS, Browser, and Desktop using HTML, CSS, and JavaScript. By Cross-Platform, we mean that the application codebase can be written once using HTML5, CSS3 & JavaScript and it can be run across multiple target mobile platforms such as Android, iOS, Windows, Firefox, Ubuntu mobile. The web development community has been continually innovating and with the recent development of frameworks such as Angular, IONIC, jQuery and React, the traditional web applications have now almost become indistinguishable from their native platform-specific peers in terms of functionality. Apache Cordova can be extended with native plug-ins, allowing developers to add more functionalities that can be called from JavaScript, making it communicate directly between the native layer and the HTML5 page. These plugins allow access to the device’s accelerometer, camera, compass, file system, microphone, and more. However, the use of Web-based technologies leads some Apache Cordova applications to run slower than native applications with similar functionality. And the most important thing is: Cordova is free and open source. Here’s how to get started with Apache Cordova.

Use Apache Cordova if you are:

• a mobile developer and want to extend an application across more than one platform, without having to re-implement it with each platform’s language and toolset.
• a web developer and want to deploy a web app that’s packaged for distribution in various app store portals.
• a mobile developer interested in mixing native application components with a WebView (special browser window) that can access device-level APIs, or if you want to develop a plugin interface between native and WebView components.

If you would like to watch and learn from video then you must watch on YouTube and also subscribe to the “Instill Learning” YouTube channel for a future tutorial.

Prerequisite

Before creating a new Cordova App, there are few prerequisites and you have to install this software:

*Node.js (npm comes with Node.js) [ https://nodejs.org/en/ ]
*Cordova [after installing node.js, you can install cordova through command line or terminal by using following command “npm install -g cordova“] [ https://cordova.apache.org/#getstarted ]

Step 1: Create a new Cordova App

cordova create DeviceInfo info.androidabcd.deviceinfo DeviceInfoSample

After creating the new app, move to Cordova project folder

Step 2: Add the Android platform

cordova platform add android@latest

Step 3: Add plugin to get device information

cordova plugin add cordova-plugin-device

By using this plugin you get the following device information:

• device.cordova
• device.model
• device.platform
• device.uuid
• device.version
• device.manufacturer
• device.isVirtual
• device.serial

Step 4: Open code in Visual Studio Code Editor

If you haven’t install visual studio code then download and install from here: https://code.visualstudio.com/

You can open the Cordova project from the command line or terminal by typing ” code . ” [code space dot], or you can directly drag & drop the project into visual studio code.

Step 5: Edit index.html in www folder

Step 6: Edit index.js in www folder

Step 7: Edit index.css in www folder

Step 8: Prepare the Cordova project

After editing the source code in www folder, you must prepare the code, so that it can distribute to all platforms you have added. to prepare the source code type following command in the command line or terminal:

Step 9: Build Cordova Project

Once you build your Cordova project, you will notice that it will generate APK File and that you can install it manually in any Android device. Or if you want to install the app using the command line then see the next step.

Step 10: Run Cordova App in Android Emulator

You have to run Android Emulator before running this command.

Источник

Build mobile app with javascript

Да-да, JavaScript везде, и на мобильных в том числе. На данный момент есть несколько известных и проверенных фреймворков для создания кроссплатформенных мобильных приложений на этом языке, например, React Native и Apache Cordova, а также основанные на ней проекты.

Для разработки на React Native требуется знание библиотеки React и основных паттернов работы с ней. Cordova же может взять обычное веб-приложение и обернуть его нужным кодом так, чтобы оно работало на мобильных ОС. Такие «гибридные» приложения не могут похвастаться высокой нативной производительностью, однако очень просты в разработке.

Cordova отлично подходит для создания простых проектов без сложной графики. Сейчас мы как раз разработаем один из них – классическое Todo App для Android на JavaScript.

Шаг #0. Настройка среды разработки

Так как мы пишем приложение для Android, нам понадобится JDK (Java Development Kit) и Android SDK – среда разработки для приложений Android. А также собственно Cordova.

JDK

Установочник для нужной платформы можно найти на сайте Oracle. Выбирайте версию не выше JDK 8, с более новыми Cordova не будет работать.

Запомните, куда установился пакет, и сохраните этот путь в переменной окружения JAVA_HOME .

А также добавьте его в переменную PATH .

Android Studio

Для разработки под Android также потребуется установить Android Studio.

После установки зайдите в программу и откройте меню SDK Manager (при открытом проекте Tools -> SDK Manager).

Здесь вы найдете путь к Android SDK (Android SDK Location), сохраните его в переменную окружения ANDROID_SDK_ROOT .

Добавьте в переменную PATH каталоги tools и platform-tools :

Затем убедитесь, что установлен пакет Android SDK Build-Tools (во вкладке SDK Tools).

Создание эмулятора

Наконец, создадим эмулятор, на котором можно будет запускать приложение в процессе разработки.

Для этого зайдите в меню AVD Manager:

И создайте эмулятор с нужными параметрами.

Cordova

Осталось глобально установить npm-пакет Cordova:

Заглянем в файл js/index.js . Здесь очень простой код: установлен слушатель события deviceready , его обработчик просто добавляет класс .ready к одному из html-элементов.

Загрузите его на смартфон, запустите – и вы увидите ту самую дефолтную веб-страницу. Все работает!

Как видно, надпись connecting to device сменилась на device is ready. Это значит, что кордова вызвала событие deviceready , а приложение отреагировало на нее.

Запуск на эмуляторе или устройстве

Нет необходимости вручную копировать apk на устройство при каждом изменение приложения.

Чтобы запустить проект на смартфоне, подключите его к компьютеру, разрешите отладку и запустите команду:

Можно обойтись и без реального устройства.

Запустите созданный ранее эмулятор в Android Studio:

и снова выполните команду:

Теперь мы умеем запускать обычную веб-страницу как приложение на Android-устройстве.

#Шаг 2. TODO-приложение

Теперь заменим дефолтную страницу Cordova на собственное крутое Todo-приложение.

Это очень простое веб-приложение, написанное с использованием фреймворка Vue. Его исходный код находится в корне проекта в новой папке src . Сборка осуществляется с помощью webpack, собранные файлы помещаются непосредственно в папку www .

Есть возможность добавлять, редактировать, удалять дела, а также отмечать их сделанными. Чтобы при перезагрузке список дел не пропадал, все сохраняется в localStorage .

Откройте приложение в эмуляторе или на подключенном устройстве и убедитесь, что все работает:

Напоминания о делах

Еще одна очень полезная функциональность – напоминание о делах в установленное время.

Для начала добавим возможность выбрать дату и время – нам понадобится плагин skwas-cordova-plugin-datetimepicker.

А для планирования оповещений понадобится плагин cordova-plugin-local-notification.

Публикация проекта в Google Play

Приложение готово, осталось только собрать его для продакшена.

cordova build android --release 

В директории platforms/android/app/build/outputs/apk должна появиться новая папка release, внутри которой вы найдете неподписанный apk-файл.

Чтобы выложить проект в Google Play, его нужно подписать.

Для этого нужно сгенерировать ключ:

keytool -genkey -v -keystore todoapp.keystore -alias todoapp -keyalg RSA -keysize 2048 -validity 10000 

Имя ключа – todoapp.keystore , алиас – todoapp . При создании вам нужно будет ввести пароль и ответить на ряд вопросов (или пропустить их). В результате в текущей директории появится новый файл todoapp.keystore – не потеряйте его.

Теперь скомпилируем проект с ключом:

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore todoapp.keystore platforms/android/build/outputs/apk/release/app-release-unsigned.apk todoapp 

Важно указать правильное имя ключа и алиас.

Осталось запаковать проект в новый apk. Для этого понадобится утилита zipalign (она находится в папке build-tools в Android SDK):

$ zipalign -v 4 platforms/android/build/outputs/apk/release/app-release-unsigned.apk platforms/android/build/outputs/apk/release/app-release-signed.apk 

Этот apk-файл можно добавлять в Google Play через ваш аккаунт разработчика.

Источник