Monday, 9 November 2015

Get Started With PHONEGAP

This is an very interested blog about creating a mobile app with one of the latest and noted technology called PHONEGAP. I was wondering that when i will get a chance to create a mobile application, Everytime probably i was stuck between the discussion of native VS hybrid everytime. As a Web programmer my strength was always server side programming language which is PHP & client side languages like HTML, CSS, JavaScript & jQuery.

Every time i felt that learning android development using java is better than creating mobile app using phonegap's javascript's framework,because i felt the framework of phonegap would be little difficult to learn, then why not try out the android's java framework if you are giving the same effort for learning, also it has many supporting blogs now a days. One day i got a project from one of a client who was looking for an app to be developed using Phonegap and i was very excited to start it, and trust me it took me a little while to learn the initial things of framework, its damn easy and you can create big web based apps with an ease and with the same team which are creating web version.

So Here are the pre-requisite things which is required if you want to kick start with phonegap.
1).A Good Experience in HTML 5 tags.
2).Good Exposure towards CSS 3.
3).A Good Knowledge in Javascript Or jQuery, if you know any good javascript framework like angular or NodeJS then it will be awesome for you.
4).And a little experience about the mobile environment, mobile development life cycles etc.

Now to get Started just follow few steps and you will be ready to start.

1).Install Git.
2).Install Node Js command line tool, visit official site of nodeJs and download their tool.
3).Download & Install JDK.
4).Download Android SDK tools.
5).Download & Install Apache ANT(Download the zip File and extract it somewhere).

Now the next step is new environment variables.

1). Create the environment variable for latest jdk bin folder, in my case it was C:\Program Files\Java\jdk1.8.0_65\bin
2). Create the environment variable for latest Apache ANT bin folder, in my case I have just extracted the zip file in C: Drive and gave the path like this C:\apache-ant-1.9.6\bin
3). Now give the path of the Android SDK folder.
4). Now give the path of build-tools(folder) in the environmental variable.
5). Now give the path of tools (folder) in the environmental variable.
6). Now give the path of platform-tools (folder) in the environmental variable.
7). Now give the path of platforms (folder)

Add all the path one by one separated a semicolon

That's it now you are ready to go.

Now to make sure, everything is set, open your NODE JS command prompt and write a command "java", if it gives any info reagarding java then, the environmental variable has been set correctly.

Now we will install phonegap into our computer, to do that just write the command
npm install -g phonegap


npm install -g cordova

Cordova is the latest version phonegap engine, which is a collaborated open source version of phonegap & Apache, installing the cordova or phonegap would take few minutes or may be little more which depends on your internet connection, if you have installed cordova then always the word cordova in the command lines instead of phonegap.

after this we can create our first project in phone gap as shown below.

phonegap create MyFirstPhoneGapProject

This command will create your first phonegap project in your computer.
Now to run your first phonegap project, you have to add a platform in your phonegap project folder, if you are using android phonegap then add android platform or else IOS or whatever. To add a platform in your phonegap project  you have to write the command like this.

phonegap platform add android

this command will add all pre-requisite dependency files for android app development, so that it would  be ready to go for your android phone once you launch it.

Now finally we have to run the project in a real device, so now just connect your android phone to computer, also make sure the developer options like USB debugging of your android phone is enabled. Now run a test command.

adb devices

This will show the list of mobile devices connected to the computer, if the list is empty then disconnect and connect the phone again.

Now Run your first app by running this code.

cordova run android
phonegap run android

and this will install your phonegap app into your phone.

If you have not connected any phone to your computer then phonegap will run the app in the android default emulator.

No comments:

Post a comment