Mobile App Journey - Part VI

To recap:

• I assume you are able to code some rudimentary HTML, CSS, and javascript (which was my skill level when I started; and to make matters worse, I dislike javascript very much).
• And that you can figure out how to make some jQuery AJAX calls.  I never used jQuery before this and had to spend a number of hours searching posts and experimenting.

The PhoneGap Build dashboard will let you set some basic parameters, but you really should become comfortable with the config.xml file and use that.  Once you do, the dashboard (for the most part) becomes read-only for that data.  There ARE a lot of settings available to you -- but you do not need to use them all (at least to get started).

Put the config.xml in your root directory, zip your application, and upload it into PGB.  You will get various output files compiled for you in a minute or so.

My config.xml is pretty simple (some would say incomplete).  If/when I ready my app for the iPhone I'll have more details I'm sure:

I installed QR Droid on my Android phone and so I use that to download the APK file directly to my phone from the PG dashboard.  Or you can just download to your PC and transfer to your phone.

Again, I recommend you study the PhoneGap classes on PluralSight, particularly if you plan on putting your app on the Android or Apple stores.

The conclusion is that in a couple of months, working perhaps 10-12 hours per week, I was able to:

1. code a mobile app with 3 screens, (learning and) using jQuery and Twitter Bootstrap
2. incorporate PhoneGap Build, calling the native API when possible
3. write a .NET Web API service (my first) for my app to call and perform calcs
4. figure out how to make AJAX calls, and pass JSON packets around
5. navigate through the morass of details getting the app on Google Play; I'm pondering the $99 cost to become an Apple Dev so that I can run that gauntlet...
6. successfully launch my app (what a way to impress friends and family!)
7. I figure the same app would take me about 3 days now...

 Hopefully this brief series, if nothing else, will encourage some to write an app!

Mobile App Journey - Part V

In the prior post we briefly discussed calling the PG API in order to interact with the device's (such as  a cell phone) API.  Just because I glossed over it do not ignore reading the PG docs and exploring what is available.

You will have more flexibility and power if you are building your app with say, PhoneGap + Eclipse + the Android SDK than you will if using PhoneGap Build.  But you can still do a lot with PGB.

One need for me was the ability to browse the web from within my app.  Remember, a PG app is a native app, that is, it is a native "wrapper" around your HTML5/javascript/css.  So when you are running your PG app that started out as HTML5/javascript/css, you are not running a web app -- you are running a native app.  So, navigating to a web page from within your native app is different than simply navigating to a new page from a web app.

I think there are primarily two choices:  the PG API InAppBrowser, and the PGB Plugin ChildBrowser ( you can read more about what a PGB Plugin is here).

I used the ChildBrowser Plugin, so I have no experience with InAppBrowser.

I had previously asked you to ignore the reference to childbrowser.js in my Index.html page.  To get childbrowser to work you will need to first have a childbrowser folder (off of your app's root folder) with the assets, which are some .png files -- see the link above.

[Edit on July 6, 2013 - assets folder for CB no longer needed]

Next, you must reference childbrowser.js in your page even though you do not have/need this file.

So, in my Index.html:

          <script src="phonegap.js"></script>
         <script src="childbrowser.js"></script>
         <script src="js/jquery-1.9.1.min.js"></script>
         <script src="js/bootstrap.min.js"></script>
         <script src="js/main.js"></script>
     </body>

And finally, in your config.xml (more on this later) you need this line (for PGB):

    <gap:plugin name="ChildBrowser"/>

So to browse, I could have something like this:

        <a class="link1" href="#" onclick="Navigate('http://www.oppositecoast.com');">Opposite Coast</a>.

"Navigate" is a user function in my main.js:

function Navigate(thisUrl) {
     var cb = window.plugins.childBrowser;
     if (cb != null) {
         cb.showWebPage(thisUrl);
     }
    else {
         showAlert("Childbrowser does not exist", "Can't Browse");
    }   
}

 
First I try to initialize the cb variable.  If successful I can then call showWebPage, else I let the user know things went wrong.

I think the moral of this story is that when using PGB you will need to see (if the PG API doesn't have what you want) if a PGB Plugin exists that can be used, then learn how to use that plugin.  PG people occasionally add new plugins so the list changes.

to be continued...