Build Ionic Apps for Android
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.
- Install NodeJs and npm
- Install ionic and cordova
- Install JDK and Android SDK
- Setup the build environment
- Add the platforms
- Build and Run the project
- Adding the cordova plugins
- Debug the application
- Learn about the ionic and cordova commands
- 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 StudioOld 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
How to make a container center both horizontally and vertically?
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
}
Switching Edit and View mode for user data
We can edit and save user data and save the input from the user to the view.
Main container for the view.
Then we need to create a view and events for the view.
var ContactForm = Backbone.View.extend({
el: '#contact-form-container', // Wrapper of the view
events: {
'click .edit-button': 'editForm', // Event for edit form
'click .save-button': 'saveForm', // Event for save form
},
});
View Template
Edit Template
Then we need templates for two different view and here we are using handlebars template as follows
We need an initialize method which will create the general view while the page is loading. For that we need a model also. So we can do that as follows.
var ContactForm = Backbone.View.extend({
el: '#contact-form-container', // Wrapper of the view
events: {
'click .edit-button': 'editForm', // Event for edit form
'click .save-button': 'saveForm', // Event for save form
},
initialize: function () {
var self = this;
// Initial model for the view .
this.contactData = {
name: 'Debasis Panda',
email: 'imdebasispanda@live.com',
message: 'Debasis Panda: This is my message. This is my message.
This is my message. This is my message.
This is my message. This is my message.'
}
});
Then we need a method which will dynamically compile templates and create view.
var ContactForm = Backbone.View.extend({
el: '#contact-form-container', // Wrapper of the view
events: {
...
},
initialize: function () {
var self = this;
// Initial model for the view .
this.contactData = {
name: 'Debasis Panda',
email: 'imdebasispanda@live.com',
message: 'Debasis Panda: This is my message. This is my message.
This is my message. This is my message.
This is my message. This is my message.'
}
this.getTemplate(this.saveTemlate);
$(document).on('click', '.save-button', function (e) {
e.preventDefault();
self.saveForm();
});
},
getTemplate: function (templateId) {
var html;
var self = this;
var template = Handlebars.compile($('#' + templateId).html());
html = template(self.contactData);
$(this.el).html(html);
},
});
Once the default view is loaded then we will have an edit button. When we click the edit button it should generate a edit mode for the view. We can show the edit template in a modal as follows.
var ContactForm = Backbone.View.extend({
el: '#contact-form-container', // Wrapper of the view
events: {
...
},
initialize: function () {
...
},
getTemplate: function (templateId) {
...
},
// Load the edit template in the modal.
editForm: function () {
this.el = '#edit-form-container';
this.getTemplate(this.editTemplate);
$('#contactModal').modal('show');
},
});
Once the edit template is loaded we need to bind the click event for the save button and we need to save the data in the model.
var ContactForm = Backbone.View.extend({
el: '#contact-form-container', // Wrapper of the view
events: {
...
},
initialize: function () {
...
},
getTemplate: function (templateId) {
...
},
// Load the edit template in the modal.
editForm: function () {
this.el = '#edit-form-container';
this.getTemplate(this.editTemplate);
$('#contactModal').modal('show');
},
saveData: function (callback) {
self = this;
$.each($('#contact-form').serializeArray(), function (_, form) {
self.contactData[form.name] = form.value;
});
}
});
Once the data is saved then we need to render the default view with the new data.
var ContactForm = Backbone.View.extend({
el: '#contact-form-container', // Wrapper of the view
events: {
...
},
initialize: function () {
...
},
getTemplate: function (templateId) {
...
},
// Load the edit template in the modal.
editForm: function () {
...
},
// Load the save template in the page container when the data is saved
saveForm: function () {
self = this;
self.el = '#contact-form-container';
self.saveData(function () {
self.getTemplate(self.saveTemlate);
$('#contactModal').modal('hide');
});
},
saveData: function (callback) {
self = this;
$.each($('#contact-form').serializeArray(), function (_, form) {
self.contactData[form.name] = form.value;
});
if (callback) {
callback();
};
}
});
var contactForm = new ContactForm();
Here is the example below.
Thank you for visiting.
Custom upload button using CSS
Sometimes the default file input element looks odd or sometimes the requirement will be different. Here are some techniques how we can customize the file input.
CSS RESET
What is css reset ?
CSS Reset is nothing but a set of user defined css rules which over-rides the default rules of the web browsers.Why we need?
There are number of web browsers and they render the elements differently. Default view of the document is different. You might have seen some elements like select buttons, input elements, tables behave differently in IE, Chrome and Mozilla. So our design will be different in these browsers. In addition to this we have different new HTML5 element which still not supported to all browsers and they may not give desired result while using them.
In order to make standard and unique view of the document we define a set of new rules for all browsers.
How to reset css ?
We need to define new css rules for all the elements. Such as margin values, padding values, border, font properties, colors, list properties, etc.
- Body has a default margin so it make some gapping between the window and the document. For that we need to reset that.
body{ margin: 0; }
- We have some HTML5 block elements like header, footer, section, article, aside etc. They need to be behave like block elements in all browsers.
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
display: block;
}
- <template></template> Template tag is meant to keep the content which should not be rendered in the page. While IE does not support this feature. So we have to make it hidden by custom css. Any element with hidden attribute should be hidden also.
[hidden], template{ display: none;}
- Bold and Strong tag should be bold by default.
b, strong{ font-weight: bold; }
- Table cells have default spacing. That will not look good in all situations. So this need to be standardized.
table {
border-collapse: collapse;
border-spacing: 0;
}
td, th { padding: 0; }
And many more ……..
Here is an example how CSS reset is useful.
With and Without CSS
Problems
CSS Reset may not be useful always. Sometimes the requirement may be different. Suppose you have applied the css reset for your application but for some part you need the default styles. Then you have to re-write the default properties on your own and this will be a rework. Let consider the example below.
Here the default properties are overridden by the css reset but actually we need them. In this situation it will be a headache for the developer. So its always a good idea to be cleared about the requirement before applying the reset.
Reference
Margin Collapse
Margin Collapse is not any CSS property but its a behaviour of block level elements. Top and bottom
margins of blocks are sometimes combined (collapsed) into a single
margin whose size is the largest of the margins combined into it, a
behavior known as margin collapsing.
In the
above example the first paragraph is having the margin bottom 20px and
second paragraph is having margin top 30px. So here the two margins will
collapse into one.
So the gap between two paragraphs will be 30px.
Previous PostOlder Posts
Home
