Create a native app using just HTML, CSS and Javascript with Adobe PhoneGap

It used to be the case that mobile app creation required a hefty programming skill-set in languages such as Objective C or C++. While those skills are still a huge asset in app development, it’s now possible to produce fully functioning cross-platform apps with just a knowledge of HTML, CSS and Javascript (e.g. jQuery Mobile or Sencha), using Adobe PhoneGap for Dreamweaver.

What is PhoneGap?

The PhoneGap Service is the most accessible way of creating apps for us front-end designers, and it’s available in Adobe Creative Suite 6. Acting as the bridge between your coded app and a fully-functioning app ready to use on an iPad or other mobile device, you can code your app at the desired dimensions like you would a website (with Javascript for dynamic elements) and PhoneGap will convert it to an app. The best thing about it though, is it’s free (hooray!). Run by Adobe, PhoneGap is accessible either via the web, or directly in Adobe Dreamweaver CS6 with PhoneGap Build.

Phone Gap _2

The only issue with PhoneGap (and app creation in general) is that Apple requires an Apple developer account – which entails a background check and a fee of around £60 a year. If you try to export the app for iOS without an Apple developer account, it will fail, so make sure you’re signed up before you do all the hard work!

How do I create an app?

PhoneGap uses Javascript languages jQuery Mobile or Sencha to let you use native functions on the device – such as camera and call etc. jQuery is easier to use and has simpler results, whereas Sencha is more advanced but can yield better results. Here’s how:

– Start creating your app in Dreamweaver using HTML (including HTML 5), CSS and Javascript so it is functioning exactly as you want the app to.

– Go to the PhoneGap Build tab under ‘site’ in the Dreamweaver toolbar, and select ‘PhoneGap Build’. The panel opens, and you can choose how to create the project.

Phone Gap _1

– Click ‘create new project’ and then ‘rebuild application’. The server then builds the native apps (Apple won’t work until you add your developer sign in key as said earlier).

– Once the app is built, you can choose to view a simulation, download it to your computer desktop, or generate a QR code to download the app onto your phone.

– When installed, you have a fully functional native app, built using HTML CSS and Javascript (e.g. jQuery Mobile or Sencha). Score!

It’s worth pointing out that PhoneGap is available online for free too, but having it in Dreamweaver where you’ve coded your site makes it much easier to simply click a button and have an app come out of the other end. For more information, take a look at Adobe’s explanation video.

To start creating your own apps using just HTML, CSS and Javascript, you’ll need Dreamweaver’s PhoneGap, available in Adobe Creative Suite 6. Call us on 03332 409 306, email sales@Jigsaw24.com. For all the latest news, follow @WeAreJigsaw24 on Twitter or ‘Like’ us on Facebook.
Liam
Liam
Call us: 03332 409 306

Leave a Reply

Your email address will not be published. Required fields are marked *