How To Install Ionic Cordova With First Application

Ionic framework is one of the popular development environment for mobile applications. Ionic is popular because of its open source mobile UI toolkit for developing rich cross-platform mobile applications. Cross platform meaning, apps developed using Ionic with single codebase can be executed from iOS(iPhones, iPad), Android and webserver(desktop Applications). It uses technologies like HTML, CSS, Javascript, NodeJS, To start with your first Ionic Application, you need to install Ionic framework. This post describes about installation of Ionic and its required components, running first Ionic application and how to run android application in ionic framework.

Installation

Follow below steps for Ionic framework installation. Assuming you are using fresh Ubuntu system and ‘npm’ is not installed on system, first install ‘npm’ – node package manager for javascript.

$sudo apt-get install npm 

This will install ‘npm’ package. Now download and install Ionic framework on your Ubuntu machine.

$sudo npm install -g ionic
$ionic -v 
5.2.5

We will need node.js, installation step for nodejs is as follows

$sudo apt-get install nodejs

Now install cordova- Apache Cordova is a mobile application development framework and runs on node.js

$sudo npm install -g cordova

Hello Ionic

For creating your first Ionic application follow below steps.

ionic start myapp tabs      #for creating tabs application
ionic start myapp blank     #for creating blank application
ionic start myapp slidemenu #for creating slidemenu application

Now navigate to ‘myapp’ directory and publish your first ionic application. It is as simple as that but for the first time you might encounter following errors – ‘ng run app:serve –host=localhost –port=8100 [ng] An unhandled exception occurred: Could not find module “@angular-devkit/build-angular” from “/home/hello/hello”. [ng] See “/tmp/ng-SmeTji/angular-errors.log” for further details.’

If you get so just un-install and re-install Ionic framework with above mentioned steps.

Now publish application on web-browser

$ionic serve

Run Android Application in Ionic Framework

While there advantages of using Ionic framework over android SDK, but lets not go there and stick to Ionic framework for the simplicity of this post :-).

First step is we need to add platform to the application ie in ‘myapp’ folder execute following command to add android platform

$ionic cordova  platform add android

ionic cordova run android
[ERROR] Sorry! ionic cordova run can only be run in an Ionic project directory.

If this is a project you'd like to integrate with Ionic, run ionic init.
$ionic init
Then build application and execute it 
$ionic cordova build android
$ionic cordova run android
or 
$ionic cordova emulate android

ng run app:ionic-cordova-build –platform=android An unhandled exception occurred: EACCES: permission denied, unlink ‘/home/myapp/www/0-es2015.js’ See “/tmp/ng-QTKII3/angular-errors.log” for further details. [ERROR] An error occurred while running subprocess ng. ng run app:ionic-cordova-build –platform=android exited with exit code 127. Re-running this command with the –verbose flag may provide more information.

These are first time errors and occurred because we have not sent $PATH.

Adding SDK,JDK and Gradle path in ionic project

1. export ANDROID_HOME=/home/Android/Sdk

2. export JAVA_HOME=/home/android-studio-ide-182.5264788-linux/android-studio/jre export

3. export GRADLE_HOME=”/home/gradle/gradle-5.5.1/bin”

4. export PATH=”$PATH:$ANDROID_HOME:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$GRADLE_HOME”

5. echo $ANDROID_HOME

6. echo $JAVA_HOME

7. echo $PATH

With this now you can execute android application in Ionic Framework.

USB Host API’s in the android.hardware.usb

When Android-powered device is in USB host mode, it acts as the USB host, powers the bus, and enumerates connected USB devices.

Manifest Requirements

Following things need to be add in Manifest file:

  • <uses-feature> element that declares that your application uses the android.hardware.usb.host feature.
  • Set the minimum SDK of the application to API Level 12 or higher.
  • add <intent-filter>(USB_DEVICE_ATTACHED) and <meta-data> .<meta-data> points to an xml file which contains vendor-id,produt-id,class,subclass,protocol.
  • to give information <usb-device> tag can be used.
<manifest ...>
<uses-feature android:name="android.hardware.usb.host" />
<uses-sdk android:minSdkVersion="12" />
...
<application>
<activity ...>
...
<intent-filter>
<action android:name="android.hardware.usb.action.USB_DEVICE_ATTACHED" />
</intent-filter>
<meta-data android:name="android.hardware.usb.action.USB_DEVICE_ATTACHED"
android:resource="@xml/xml_file_name" />
</activity>
</application>
</manifest>

android.hardware.usb package

USB host API’s in the android.hardware.usb