App development for the front-end web developer

February 20th, 2018

If you’re a front-end web developer that has an idea or two for a mobile app, but you’re not quite sure how to build out an app? Take a look into Adobe Phonegap. Adobe Phonegap allows you to build mobile apps using languages you already know. Namely HTML/CSS/JS. With the cool thing being, you are able to release your app across all mobile platforms, not just for iPhone or Android.

Getting started is pretty simple. You’ll need a subscription to Adobe CC (about $54 a month), a git repo (I use bitbucket since it allows private repos for free) and, if you want to develop for iOS, an Apple Developer license ($99 per year). Next, download Adobe Phonegap’s desktop app, which will allow you to use/setup Adobe’s framework. Then place all your assets within the “www/” folder and you’re off to the races. At that point it’s just like developing a website. Outside of your assets in the “www/”, the files you’ll need to edit are the “config.xml” and the icons and splash screen artwork, located within the”www/res/…” folders.

The config.xml file includes all the app settings and is what you’ll use to request access to specific phone functions/features (i.e. access to the users camera, data, contacts, etc.), if needed. For my first app, I didn’t need any of these things so I just stripped out all the requests and just updated the app name, description and version #. And you’ll probably get annoyed with the slow fade of the splash screen. If you do, you’ll need to add a line to turn that off, “<preference name=”FadeSplashScreen” value=”false”/>”.

To update the default icons and splash screens you simply need to update the images with your own artwork, otherwise your app will include the default icons provided by Phonegap. To make things easy for your app icon, create one icon, that is 260px x 260px, and upload to a site like this one. This will, in turn, generate all the icon sizes you need for both iPhone and Android. As for the splash pages I copied the sizes of each and created each one individually and replaced the corresponding one as they were created.

Once you’ve completed development and you’re ready to test/upload packages for submission to app stores. Commit your code to your git repo, grab the url of said repo and head on over to build.phonegap.com. Here you will set up you’re app and the repo url is needed to pull in your code. And in order to develop for iOS you will need to have .p12 and provisioning profile to proceed, which you can find how to do that here. After that you can test on any mobile device, no UDID required, or download the necessaries to upload to the respective app stores.

Stay tuned for more in-depth posts on how to use PhoneGap and if you’re curious what apps I’ve created using Phonegap, see below.

Euchre Point Counter – https://itunes.apple.com/us/app/euchre-point-counter/id1348875425?ls=1&mt=8

Board Game Point Counter – https://itunes.apple.com/us/app/whole-points-game-counter/id1348400814?ls=1&mt=8

Categories

< Back