phonegap development how to make an app using phonegap build ? presentation by mobilepundits
TRANSCRIPT
![Page 1: PhoneGap Development How to make an app using PhoneGap Build ? Presentation By MobilePundits](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e205503460f94b0b61f/html5/thumbnails/1.jpg)
PhoneGap Development How to make an app using PhoneGap Build ?
Presentation By MobilePundits
![Page 2: PhoneGap Development How to make an app using PhoneGap Build ? Presentation By MobilePundits](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e205503460f94b0b61f/html5/thumbnails/2.jpg)
Developing native apps for individual platforms is
not so easy.
You invest a lot of time in writing code for the same
piece of software in different programming languages.
Every individual cannot be technically sound, but
he/she can develop the app without any hassle or
pressure.
![Page 3: PhoneGap Development How to make an app using PhoneGap Build ? Presentation By MobilePundits](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e205503460f94b0b61f/html5/thumbnails/3.jpg)
With PhoneGap you can smartly develop apps using
HTML5, CSS & JavaScript.
PhoneGap Build is an advanced version of PhoneGap
offering cloud based services to the developers.
In simple words PhoneGap is a service where
developers can develop native apps using web
technologies like HTML, CSS and JavaScript.
![Page 4: PhoneGap Development How to make an app using PhoneGap Build ? Presentation By MobilePundits](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e205503460f94b0b61f/html5/thumbnails/4.jpg)
A Quick Guide to PhoneGap App Development
![Page 5: PhoneGap Development How to make an app using PhoneGap Build ? Presentation By MobilePundits](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e205503460f94b0b61f/html5/thumbnails/5.jpg)
Using the PhoneGap Build
In your web browser, open the URL build.phonegap.com. You will see the homepage of the Adobe’s PhoneGap website
Till here we are assuming that you have the code of your sample app because in this tutorial we will be learning to create cross platform apps with a single code base & not writing the code from the scratch
![Page 6: PhoneGap Development How to make an app using PhoneGap Build ? Presentation By MobilePundits](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e205503460f94b0b61f/html5/thumbnails/6.jpg)
![Page 7: PhoneGap Development How to make an app using PhoneGap Build ? Presentation By MobilePundits](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e205503460f94b0b61f/html5/thumbnails/7.jpg)
Sign In With Your Account
Register and create your own Adobe ID
Sign in with your Adobe ID
In the next slide you will see how the login page
of PhoneGap Build looks like
![Page 8: PhoneGap Development How to make an app using PhoneGap Build ? Presentation By MobilePundits](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e205503460f94b0b61f/html5/thumbnails/8.jpg)
![Page 9: PhoneGap Development How to make an app using PhoneGap Build ? Presentation By MobilePundits](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e205503460f94b0b61f/html5/thumbnails/9.jpg)
Create New App
Click on the +NEW APP button for creating a
new app
![Page 10: PhoneGap Development How to make an app using PhoneGap Build ? Presentation By MobilePundits](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e205503460f94b0b61f/html5/thumbnails/10.jpg)
From here you will upload the .zip file of your
project
Remember to compress your project in prior
![Page 11: PhoneGap Development How to make an app using PhoneGap Build ? Presentation By MobilePundits](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e205503460f94b0b61f/html5/thumbnails/11.jpg)
Browse & Upload the .zip file
![Page 12: PhoneGap Development How to make an app using PhoneGap Build ? Presentation By MobilePundits](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e205503460f94b0b61f/html5/thumbnails/12.jpg)
![Page 13: PhoneGap Development How to make an app using PhoneGap Build ? Presentation By MobilePundits](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e205503460f94b0b61f/html5/thumbnails/13.jpg)
The original folder will comprise of all HTML +
CSS + JavaScript + JPG files in it
The name of the project and all the assets will
appear after uploading the project
There you will see a build button
Click on the button
![Page 14: PhoneGap Development How to make an app using PhoneGap Build ? Presentation By MobilePundits](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e205503460f94b0b61f/html5/thumbnails/14.jpg)
Animations will appear showing the progress of the
builds taking place simultaneously
Once this process is completed, a QR code will be
generated as shown above in the picture
![Page 15: PhoneGap Development How to make an app using PhoneGap Build ? Presentation By MobilePundits](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e205503460f94b0b61f/html5/thumbnails/15.jpg)
Scan your QR code through bar code reader
![Page 16: PhoneGap Development How to make an app using PhoneGap Build ? Presentation By MobilePundits](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e205503460f94b0b61f/html5/thumbnails/16.jpg)
Install the app on your device!
![Page 17: PhoneGap Development How to make an app using PhoneGap Build ? Presentation By MobilePundits](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e205503460f94b0b61f/html5/thumbnails/17.jpg)
This is how the app looks on the device
![Page 18: PhoneGap Development How to make an app using PhoneGap Build ? Presentation By MobilePundits](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e205503460f94b0b61f/html5/thumbnails/18.jpg)
Open the uncompressed folder of your apps’ code
Open the file INDEX.HTML in your editor
Place a <BR> tag for line break just after the
Body’s content.
Place this h1 tag after BR, <h1 align = center>My
First App<h1>
Save the file.
See the next slide as an example
Update Your App
![Page 19: PhoneGap Development How to make an app using PhoneGap Build ? Presentation By MobilePundits](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e205503460f94b0b61f/html5/thumbnails/19.jpg)
![Page 20: PhoneGap Development How to make an app using PhoneGap Build ? Presentation By MobilePundits](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e205503460f94b0b61f/html5/thumbnails/20.jpg)
Update Again
After all the changes you’ve made, recompress
the folder & repeat the previous processes with the
newly created .zip file
Proceed to the next slide for more information
![Page 21: PhoneGap Development How to make an app using PhoneGap Build ? Presentation By MobilePundits](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e205503460f94b0b61f/html5/thumbnails/21.jpg)
![Page 22: PhoneGap Development How to make an app using PhoneGap Build ? Presentation By MobilePundits](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e205503460f94b0b61f/html5/thumbnails/22.jpg)
All the build will start again
Scan the newly generated QR code as shown
in the image and re - install the app on your
device
Run the application
You will see “My First App” has written just
below the MobilePundits Image.
![Page 23: PhoneGap Development How to make an app using PhoneGap Build ? Presentation By MobilePundits](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e205503460f94b0b61f/html5/thumbnails/23.jpg)
See the changes in the next slide
![Page 24: PhoneGap Development How to make an app using PhoneGap Build ? Presentation By MobilePundits](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e205503460f94b0b61f/html5/thumbnails/24.jpg)