Beginning with Angular 2

Leave a Comment

Coming Soon

Read More

Build Ionic Apps for Android

2 comments

Introduction

Welcome to Ionic Framework. This is cross mobile app development framework built with HTML5, CSS3 and JavaScript. Here we are going to learn about how to setup the project and build the application for the android devices. Ionic framework uses angular which provides excellent support the the application development.

Here is a list of tasks need to be performed for successfully building the app.

  1. Install NodeJs and npm
  2. Install ionic and cordova
  3. Install JDK and Android SDK
  4. Setup the build environment
  5. Add the platforms
  6. Build and Run the project
  7. Adding the cordova plugins
  8. Debug the application
  9. Learn about the ionic and cordova commands
  10. References

1. Install node and npm

Node will be used to install all the packages and plugins. Click here to install the nodejs. If node is already installed please update it and update the npm.

2. Install ionic and cordova

Install ionic and cordova using npm and it should be installed as global packages as we are going to use them as commands.

 $ npm install -g ionic          // to install the ionic
 $ npm install -g cordova        // to install cordova
 

3. Install JDK and Android SDK

Download and install the latest JDK.

Download the android sdk. Unzip the android sdk to your desired directory. Run the sdk and install the android apis.

New Android SDK with Android Studio

Old Android SDK

4. Setup the build environment.

After installing the JDK and Android SDK we need to configure the system variables and paths.

Set the JAVA_HOME, ANDROID_HOME environment variables.

Add the paths for tools and platform-tools for android sdk.

5. Add the platforms

Create the application Run the following command

 $ ionic start myproject     // This creates a basic app 

You can also clone from the seed project. Like create a ionic app with tab structure.

 $ npm start myproject tabs

Add the platforms which you are going to build the application. We are making for android device. So add the android platform to the application.

 $ ionic platform add android      // Adds the android platfrom
 $ ionic platform add ios          // Adds the ios platform
 

6. Build and Run the application.

After adding the platform and configuring the android environment you can either build the app or run the app directly to the device.

 $ ionic build android           // Builds the application for the android platform
 

To run the application directly to the device connect the device to the system though the USB and check whether the device is connected to the system as debugging mode or not. Activate the debugging mode from the setting in android device.

You can check the available devices in the using the following command

 $ adb devices                   // Gives the list of devices
 $ ionic run android             // Builds and installs the application to the device
 

7. Adding cordova plugins

Cordova gives the apis to access the native features. Either you can use Apache Cordova or NgCordova . NgCordova written in angular way and easy to implement in the application.

 $ cordova add plugin < plugin url/name >         // adds the cordova plugins
 

8. How to debug the application?

You can debug the application using chrome browser. Connect your mobile using USB and select debug mode.

chrome://inspect/#devices

The above url finds the available devices to debug. Select your device to debug.

9. Learn about the ionic and cordova commands.

 $ ionic start <appName>                  // Setup the basic structure for the application
 $ ionic platform add <platform name>     // Adds the required platform
 $ ionic build <platform>                 // Builds and generates the app file
 $ ionic run <platform>                   // Builds , installs in the connected device and starts the app
 $ ionic serve                            // Runs the app in system web browser
 $ ionic serve --lab                      // Runs the app in web browser with ios and android view
 $ ionic emulate <platform>               // Runs the app in emulator
 

10. References

http://ionicframework.com/docs/guide/installation.html

Read More

How to make a container center both horizontally and vertically?

Leave a Comment
There are multiple ways of doing this.

1. Using Positions : We can use position relative and absolute. 

How? 

Make the window or the wrapper container as relative and set width and height as 100%.
Make the inner div(which we need to place in the center) position absolute and all values as 0. Suppose the inner div is having id as 'centered-div'. Then our css would be.

#centered-div {
   position: absolute;
   top: 0;
   right : 0;
   bottom: 0;
   left: 0;
   margin: auto;
}


2. Using Table Structure : We can set the wrapper as table and the inner div as table-cell

How? 

We can set the window or the wrapper as a table and the inner container('#centered-div ') should be set as table-cell. And make the vertical alignment for the table as middle. See the details below.

#wrapper{
   display: table;
   vertical-align: middle;
}
#centered-div {
   display: table-cell;
}

3. Using Margin and Position : 

How ? 

We can make the inner div position relative or absolute, top 50% and margin-top should be negative value of the half height of the inner div. Margin left and right should be auto.

#wrapper{
   position: relative;
   width: 100%;
   height: 100%;
}

#centered-div {
   height : 400px;
   position: absolute;
   top: 50%;
   margin-top: -200px;  // half of the height and negative
}
Read More
Next PostNewer Posts Previous PostOlder Posts Home