Phonegap & Ludei - Build HTML5 CSS & JS Apps

Debugging is an important aspect of any development, it's the only real way to understand what's happening with the data in your app. This lecture will be covering exporting various data types to the console such as a string, number, object and array; giving us many possibilities for advanced debugging.

The device API attaches itself to the window object making it globally accessible. This lecture will cover installing a plugin for the first time and then discovering all the properties and values of the object to gain information about the device your application is running on.

We have already been exposed to one event called device ready, however there are other events that Cordova introduces to allow further control of our app depending on certain behaviour.

What's the best way to get your users attention? Well it turns out it's either playing a sound or spinning a magnet. The vibrate API allows Cordova app's to spin the magnet in the phone causing vibration to alert the user to an action call, or anything else you would like to bring to their attention.

Sometimes your app may request the power status to save the users' data before time runs out! Usually the device would notify the user but this plugin will allow for additional functionality for your app to deal with potential disasters.

With this plugin we're no longer limited to one main web view in our app, we can now open another browser window within the app; instead of exiting our app and opening the user's default browser. Making for a much smoother experience. Part one will be covering opening a normal system browser, opening an in app browser window and also passing in all options to create a custom configured in app browser window.

For this second part we'll take a look at attaching events, the close method and passing CSS and Javascript to the in app browser window. We are still using the same source files from the last lecture.

The status bar can be customised in several different ways including through the config.xml file. However we do have this additional plugin to have even further control over the status bar look and feel within the app.

This API is imperative to include in your app if you request data from a source that require's a network connection. The reason being is because failure to notify the user to connect when they need to will result in your app being rejected from the app store, so this is vital.

Another way for requesting the users' attention and action if necessary is dialogs. You can have simple alerts or a multiple choice dialog providing the user with options to take.

When creating even more engaging experience's we can use the accelerometer. This allows you to understand the tilt direction including the force of the tilt and respond accordingly.

What happens when your app want's to know where's north? Well it can, by simply using the compass API; this API will allow your app to understand the direction the device is facing and present that data to the user. This lecture will first focus on installing the compass plugin and the HTML, CSS and image files that make up the compass dialog.

After looking at the HTML and CSS that makes up the compass dialog it's now time to review the Javascript code that'll make that all important compass needle move. This lecture will also go into further detail about how a compass works and the hardware (magnetometer) that we're requesting data from.

This is an exciting ability for your app to be able to locate where the users device is located. Potentially you could link it to Google maps to present information to the user and many other cool aspects engaging the user further.

This globalisation plugin obtains information and performs operations specific to the user's locale, language, and timezone among others. This gives your app the ability to adapt to your user's around the globe.

Learn how to create, clone, update, remove and find contacts in the devices contact's database. Access properties of a contact, like name, phone number, email, address, IMS, organisation, birthday, note, photo, category, and URL's associated with that contact.

This lecture will continue to show you the rest of the contacts API. Including finding contacts, creating a new contact, saving contacts to the devices contacts' database, removing a contact and finally cloning a contact.

Taking pictures is such an engaging activity that your app can be apart of that experience. You are allowed to open the default camera app, take a photo or video and have that file returned to your app in various different ways. Also you can select a photo from the users' gallery and have that returned to your app to do as you wish.

Next we look at the rest of the code to do with the camera API. This API only consist's of one method and the rest is down to the combination of options you pass into this method.

The media API allows you to instruct the device to playback audio content. This is useful as the standard web view is mostly incapable of playing these file format's, so the solution is to use the default player behind the scenes that comes with the OS.

The media capture API is very useful and adds much functionality to your hybrid app. This API is simple but very powerful; you'll learn how to capture audio, video and images.

The file system allows for persistent or temporary storage giving your app the ability to save important data and reuse it later (persistent storage), or store temporary files for a short period of time (temporary storage). This could be a score board system for games, configuration options for your app and many other possibilities as well. This lecture will start you off with the bread and butter understanding of the file system API.

The File API is extensive however I'll slowly but surely break this API down. With this next part we'll look at the file system object, directoryEntry and fileEntry objects. This means by the end of the lecture we'll create a new directory and a new file.

Finally to this three part series we'll conclude with first writing to our newly created logFile.txt file and then reading the string we've just written to the file. This will be the piece to the puzzle of the file API. Which hopefully will get you up and running with one of the most important API's Phonegap has to offer.

This documentation will cover all the methods associated with the directoryEntry object. This object has many methods that we didn't cover, so here are all the methods fully documented for you to reference later.

The file transfer API will allow you to receive content from files uploaded through your app to your server. This can be even more engaging for the user and for you by being able to communicate data to multiple users.

Moving forward we're going to look extensively at the download method of the fileTransfer object. This lecture will give valuable knowledge that unfortunately the Cordova NPM documentation doesn't currently provide.

Special links allow you to open the dialler app, configure SMS messages, open the mail app and more. This is extremely useful and gives you a nice way for your user to easily dial a number or send a predefined message.

Lets now review how to install a third party plugin, Crosswalk. The average system web view is getting much more performant on the latest iOS and Android platform's. iOS is not a huge deal with iPhone 4s and above device's being able to download the latest iOS 8 with a more performant web view. However if you want to target older Android OS's then CrossWalk will allow you to keep that same performance and rendering constancy across older Android 4 device's which has a huge market share currently 2015.

Security is very important to any user, after all if you had a house would you leave the door open? This lecture will give you insight into how to modal your app, why Cordova changed to the plugin modal and many other important aspects to consider when developing your app.

Cordova HTTP: https://github.com/wymsee/cordova-HTTP
Web Cryptography API: https://developer.mozilla.org/en-US/docs/Web/API/Window/crypto

This lecture will cover installing Ludei, paying extra attention to the differences between a web view and an accelerated canvas based environment. Then we look at installing the canvas plus environment on iOS and Android including all other Cordova plugin's.

Now we'll look at some pre-existing WebGL projects that we can run within the CocoonJS Canvas+ view. We'll also take a look at testing our app's via the CocoonJS launcher.

Learn how to compile your Cordova app's through the Phonegap build service and what this service has on offer for you.

Learn how to locally compile a release version of your app for Android. This lecture will include documentation and other source's for helping you create the necessary credentials to sign your app in order for it to be submitted to the Google Play Store.

App Signing:

https://developer.android.com/tools/publishing/app-signing.html

This lecture will cover the necessary steps to upload your app to the Apple App Store. The process is normally quite complex when compared with the Google Play Store, however by following these simple instructions you can upload your app quickly and efficently to the App Store.

Cocoon.io gives you access to compile your app's through a free cloud based service. Which will allow you to upload and customise your project's to produce a canvas+ environment.

Android Key Signing:

http://developer.android.com/tools/publishing/app-signing.html#signing-manually

iOS Developer Program:
https://developer.apple.com/programs/how-it-works/

iOS Submit to App Store:
https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/SubmittingYourApp/SubmittingYourApp.html

Well it's taken a lot to get here, I'll recap and explain where you should be looking as your career progresses for the future. Thank you for taking part in my course and I hope you've enjoyed it.