• Precious Agbontan
    21
    I earlier promised to start lecturing some Newsprex Fans who want to learn the new way on how to build a hybrid native Android app using their smartphone and PC. Wonderfully, many people turned out.

    Some people thinks is necessary you learn Java, C++, Python, Ruby On Rails and other hard programming languages before you can develop an app. Adobe PhoneGap has come to prove them wrong by providing a new way to build an app with the codes you love most, which are: HTML, CSS, and JavaScript.

    What are the steps to build an app using PhoneGap?

    1. You have to use your existing development skills to build an app for iOS and Android, which are HTML, CSS and JavaScript.
    2. No need to maintain SDKs, PhoneGap will help you compile it in the cloud.
    3. You can then deploy and build your Android app and publish to Playstore or Appstore.

    Is simple and easy right? Let's now go into the main tutorial, since I have already introduced PhoneGap features to you and it's functionality.

    Requirements

    • A Windows laptop or MacOS.
    • A good smartphone,
    • And your knowledge of HTML, CSS and JavaScript.

    How To Build Hybrid Native App Using PhoneGap

    Tutorial 1: Getting the requirements

    STEP 1: Firstly, download "PhoneGap Desktop app" for your Windows laptop via HERE, or you can download the latest release from github via HERE. Once you have downloaded it, accept their privacy and policy and pass though the installation wizard. You will arrive at this screen below after all the installation process:

    win-desktop-app.png

    STEP 2: You also need to get the PhoneGap Android app that will help you preview your works from your PC. Download it on playstore via HERE.

    Tutorial 2: Creating A PhoneGap Project

    STEP 3: On your PC, click the (plus+) sign and select "Create new PhoneGap project" as shown below:

    desktop-app-plus.png

    STEP 4: You will be prompted with the template list dialog as shown below, where you can choose to create an app based on a sample project.

    Each template has a brief description below the name indicating what type of project will be created. To select a template, click on the radio button next to it. In the image below, the Hello World template is selected.

    templates-list.png

    And click on "NEXT"...

    STEP 5: Now, this step is to enter the information about your PhoneGap project. Enter the location where you want to store your codes, then enter the name of the project, and then enter the ID which can be the domain name of your website or anyone. Is optional but for example, you can put "com.prexblog.sample". It is used to identify your app whenever you want to publish it to playstore. As shown below:

    desktop-app-create-info.png

    Then, click on "CREATE PROJECT".

    STEP 6: Now, after successfully creating your project, you should see a view like below, with your new project shown and marked with a left green border, a green play button next to it and a green bar at the bottom. You should also see a server address indicating it's running and the active project. Only one project will be active and running at any time.

    desktop-app-create.png

    That's all. You have successfully created a project.

    Tutorial 3: How To Preview Your App From Your PC To Your Smartphone

    STEP 7: In the previous step we created a project and ensured it was running by looking for the green play button to be highlighted and a green bar showing the server address it's running on at the bottom of the PhoneGap Desktop.

    The screenshot is shown again below for reference. Locate the specific server address for your project before moving to the next step.

    desktop-app-create.png

    Go to your mobile device where the PhoneGap Developer App is running, enter the server address on the main screen and tap Connect.

    pg-dev-screenshot.png

    Note: Make sure the Server address on your PC matches with the one on your phone. If it doesn't, kindly write the on your PC correctly on your phone's own to match.

    Then, after it matches, you will see successful message like this:

    dev-app-success.jpg

    And after it's connected to your PC, your app will preview like this below:

    dev-app-preview.jpg

    Voila! You're done!

    Tutorial 8: How To Start Building Your App And Making Updates On PhoneGap

    STEP 8: Firstly, go to your laptop file manager and locate the "folder" you stored the project. Open it and also open the www folder, you will see index.html folder. Kindly open the folder with your favourite text editor.

    Note: You can download Sublime Text editor from HERE, if you don't have.

    STEP 9: Now, Choose an update to make. Let's start by changing the PHONEGAP text that's displayed in the app from <h1>PhoneGap</h1> to <h1>Hello PhoneGap</h1>. (This text has a CSS uppercase transform applied to it in the default project). Save it when you're finished and move on to the next step.

    editor-1.jpg

    STEP 10: Now check your mobile device where the PhoneGap Developer app is running and you will see your application reload and automatically display the new text:

    dev-app-code-update.jpg

    STEP 11: Continue making updates to your project to get familiar with this workflow.

    Having any issue? Watch my video below:



    I hope you enjoyed my tutorial for today? In my next tutorial, I will teach you how to add third party plugins to extend the functionality of the app.

    If you are still facing any issue, kindly drop comment below for my assistance.
  • Algorithm
    0
    Great 1 would see to it soon
  • Precious Agbontan
    21
    See to it and drop your result bro.
  • Precious Agbontan
    21
    See to it and drop your result bro.
  • Affangideh
    0
    Can I still using guide to develop using smartphone
  • Precious Agbontan
    21
    Is smartphone you are using. But the code has to be written from your PC. You cannot write the codes from smartphone because is too small to handle that.

    So, you will be using your smartphone to preview the result.
  • Bright
    0
    Nice one. Lemme study the article well. Expect my questions soon
  • Johnexzy
    0
    After installing phoneGap. On startup it keeps showing me a loading screen as if its trying to download some requirements...
  • andyke
    0
    it keeps showing load screen. What can i do?
  • Precious Agbontan
    21
    Yes...on your data connection. It will load.
  • Precious Agbontan
    21
    Yea, on your data connection. It will load within some minutes.
  • Emmanuel Mpa
    3
    Lolzz..everybody don run.. Agbontan shebi I tell u for ur WhatsApp group say dey go run..

    All of them were saying ..dey wanna create app..

    But tutorial don come now, dey pick race...

    Well, me don create the app...

    Just that I wan add plugins to it.
  • andyke
    0
    I've built one app with it
  • andyke
    0
    I've built one app with it
  • Precious Agbontan
    21
    Can you send me the link to the app. Let me view it properly. Upload it on datafilehost.
  • andyke
    0
    okay. let me upload it... although na dummy app. no functionality... just html
  • Precious Agbontan
    21
    OK upload it and link me through, let me review it.
bold
italic
underline
strike
code
quote
ulist
image
url
mention
reveal
youtube
tweet
Add a Comment

Welcome to Newsprex Forum!

Newsprex is an online Global Community Forum where you can start your discussion on latest happenings around the world, but mainly focus in Nigeria. Entertainment, Business, Education, Fashion, Technology, Religion, Politics, Relationship, and Sports. Moreover, you are "FREE" to start discussions for others to contribute and share their experiences.