Community
cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Beginner
272 Views

Hybrid Mobile App Development Tutorials

Jump to solution

How To Develop Hybrid Mobile Application(Part – 1)

 

 Hi Friends, in this tutorial I am going to show you step by step procedure for how to create a Hybrid Mobile App.

Targeted Learners: This tutorial is for those peoples who are beginner towards developing Mobile Apps and also for those Web App developers who wants to develop their mobile apps utilizing the existing knowledge they have.

Prerequisites:  Learner must know basic

  • Html5
  • JavaScript
  • Jquery

Let’s Start The Cooking

Introduction: What is a Hybrid Mobile App? In simple language I can explain that these are the one kind of mobile application for which one does not need to code in C, C++, and Java if you are a web app developer and you are comfortable with some kind of basic web technologies then great you can develop very good Hybrid Mobile Apps.

While developing these applications developer no need to worry about the mobile platform(Android, Windows, IOS) in which the app is going to be used at the time of packaging the developer have the option to choose which mobile platforms does he wants his Mobile App should support .And accordingly developer has to generate the platform specific Mobile App Files.

 

Step -1 (Installing Basic Software’s)

1.1-- Install a Browser: Install a web browser, if it’s not there in your system.

1.2– Install  any Mobile SDK :

  • >> Note: Without installing a Mobile SDK it’s possible to develop Hybrid App and also we can run the App using our Web Browser.
  • >> But if you want to see the real life demo and want to install the App into the  specific device then you must need to install device specific Mobile SDK’s .
  • >> For Example let us consider about developing Android Application, for which we need to install Android SDK. Which you can find from Android Official Website .
  • >> If you want to go for other platforms then you can refer to Cordova Platform Guides  for installing the Mobile SDK’s.
  •  
  • 1.3– Install Node.js :
  •  
  • Installing Node.js. If you're using OS X or Windows, the best way to install Node.js is to use one of the installers from nodejs.org. If you're using Linux, you can use the installer, or you can check Node Source’s binary distributions to see whether or not there's a more recent version that works with your system.
  • You can get Node.js from its official website Download Node.js.
  • After installing Node.js you can confirm whether it’s installed successfully or not by opening your Command Prompt and enter the following syntax, which will show you the current version of the Node.js installed in your system.

       Syntax: node –v

1.4– Install Cordova :

  • >> Before going to install Cordova first make sure that you have installed Node.js successfully, if not then follow the previous step.
  • >> Now open your command prompt and enter the following syntax
  • Syntax:  npm install -g cordova
  •  
  • After installing Cordova you can confirm whether it’s installed successfully or not by opening your Command Prompt and enter the following syntax, which will show you the current version of the Cordova installed in your system.

      Syntax:  cordova –v

Step -2 (Project Initialization)

     2.1 – Create a Folder For Your Application

     2.2 - Create  a Fresh Cordova Project

  •  >> Open Command prompt and Navigate to the directory (i: e- G:/ Hybrid Mobile App) that you have created recently for your      Mobile Application.
  •  >> And enter the following syntax
  •  Syntax :  cordova create HelloApp com.brs.helloapp HelloApp
  •  >> And a new cordova project named “HelloApp” will be created under that location.

    2.3 - Add Platforms to your project

  •  >> Now again from command prompt navigate to the cordova project that you have created in above step, which is “HelloApp”.
  •   And now add the mobile platforms you want for your application, I am showing for Android.
  •  Syntax :  cordova platforms add android

    2.4 - Add basic plugin's to your project

  •  syntax :  cordova plugin add org.apache.cordova.device

     syntax :  cordova plugin add org.apache.cordova.console

  •  

    2.5 - Examine the directory structure under your project

  • >> The www folder is where you will code your HTML / JavaScript application.
  • >> The platforms folder is where Cordova will build your application for different platforms (iOS, Android, etc). The contents of this folder will be automatically generated by the Cordova CLI, and you should never edit code in that directory.
  • >>  Plug-in are installed in the plugin’s directory.
  • >> Application parameters (name, author, etc) are stored in config.xml .

 

Step -  3 (Running Your App)

    3.1 – Run Your Application in Browser

  • >> Go to the “WWW” folder of your application , Open the index.html file in a browser to see the default application created by the Cordova CLI.

** In  my next blog I will show you a simple application demo and how to install it in your device and run it over there**

Tags (1)
0 Kudos

Accepted Solutions
Highlighted
New Contributor I
272 Views

Great effort , keep it up

View solution in original post

0 Kudos
10 Replies
Highlighted
Beginner
272 Views

Hi This is very good beginners tutorial for the developers who wants to start Mobile App Development ..

0 Kudos
Highlighted
New Contributor I
273 Views

Great effort , keep it up

View solution in original post

0 Kudos
Highlighted
Beginner
272 Views

Thanks Derp for your encouragement ...

0 Kudos
Highlighted
Beginner
272 Views

Hello !

Thanks for the Blog post its amazing but where to find WWW Folder ?

Thanks for the help !

 

0 Kudos
Highlighted
Beginner
272 Views

Hi Haroon,

You can find the www folder inside your application that you have created using corodova , i:e in my example it is available inside  "G:/ Hybrid Mobile App/HelloApp" .

0 Kudos
Highlighted
Beginner
272 Views

Hi Derp,

Thanks for your support, it will encourage me .

0 Kudos
Highlighted
Beginner
272 Views

Hello Biswa Ranjan !

Thanks for the reply but did you mean to find the folder inside the "Application Folder" or the "Application" ?

Thanks alot ! 

Regards ,

Haroon

0 Kudos
Highlighted
Beginner
272 Views

Absolutely Amazing postt !

Thanks 

0 Kudos
Highlighted
Beginner
272 Views

Great effort ! keep up the good work

0 Kudos
Highlighted
Beginner
272 Views

Hi John,

Thank's for your support .

Regards

Biswa

0 Kudos