Phonegap & Ludei - Build HTML5 CSS & JS Apps

Learn the basic Phonegap/Cordova API's and get an insight into Ludei's CocoonJS canvas+ view for accelerated graphics!
4.5 (27 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
197 students enrolled
$19
$50
62% off
Take This Course
  • Lectures 52
  • Length 10.5 hours
  • Skill Level Intermediate Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 12/2015 English

Course Description

This course will cover all standard Cordova API’s in a clear, well structured way. Each lecture will guide you through how the hybrid app model works so you really get to understand what’s going off under the hood. You’ll be learning the most advanced API’s, also I tell you what an API is, such as the file system API that can be complex. However I’ll break every single API down and go into detail about how each API works. On top of that I’ll give you some general understanding of the hardware sensors such as the accelerometer, compass and geolocation sensor’s.

All in all this course is here to take you from a web developer and give you the skills to develop hybrid app’s. Also this course is not only giving you understanding of the API’s we go further than that! As an app developer I know what it’s like coming from a web developer background. Most people have to gain certain experience whilst they become an app developer. This course gives you real world knowledge of what you should and shouldn’t do; it gives you the correct perspective of UI and UX principles and finally gives you general understanding of security and privacy. The revolution of Edward Snowden and many scare stories makes understanding privacy and security and how to deal with your user’s is most important for any app developer today.

On top of all this you’ll learn how to use the CocoonJS platform which allows acceleration of HTML5’s 2D canvas element and WebGL for 3D graphics. This is impressive and really goes to show how developing in the hybrid app market is going to change rapidly. The future truly is bright for us hybrid app developers.

In short this course is an all rounder and will give you a massive leg up. Not just showing code and giving a general overview, but teaching you how your code is executed and how Cordova and the hybrid app model works under the hood. On top of all that you’ll get some real life experience! Not just coding but principles, guidelines and best practices for security or otherwise.

What are the requirements?

  • Have a good understanding of HTML, CSS and especially Javascript

What am I going to get from this course?

  • Understand the hybrid app architecture
  • Have a better perspective and outlook of app development
  • Setup Phonegap / Cordova on Mac, GNU and Windows
  • Setup wifi testing
  • Setup iOS simulation (Mac only!)
  • Setup Android emulation on Mac, GNU and Windows
  • Understand all the basic Cordova API's; Battery Status, Camera, Contacts, Device Info, Network Info, Status Bar, Accelerometer, Compass, Vibration, InAppBrowser, Dialogs (notification), Geolocation, Globalization, Media Capture, File System, File Transfer, Whitelist
  • Understand how to debug and review returned content from Cordova
  • Installing third party plugins
  • General app store guidelines and principles
  • Understand basic security and privacy guidelines
  • Learn the different aspects of the Android and iOS platform's
  • Understand the CocoonJS canvas+ view for accelerated graphics
  • Compile Cordova app's locally and on the cloud
  • Compile CocoonJS app's
  • Have a general understanding of iOS and Android app store submission process

What is the target audience?

  • You must have good knowledge of Javascript before taking this course
  • You must understand HTML and CSS
  • You should take this course if you want to transfer your existing HTML, CSS and Javascript skill's to the hybrid app development world

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction & Setup
06:06

This first lecture will involve the fundamental understanding required to get the necessary knowledge of how hybrid apps work. We'll also discuss the pros and cons of hybrid verses native apps.

30 pages

This document will give a simplified overview of how to install Phonegap and Cordova CLI on Mac OS, GNU and Windows. All of these instructions will be covered in more detail and demonstrated in next three video lectures.

03:36

This lecture will demonstrate how Phonegap Wifi testing works over a network, no matter the operating system. Allowing us to display our app's on any iOS, Windows Phone or Android 4.1 and above device's.

05:21

Phonegap on OSX is the most popular setup as it allows for iOS development without using any third party service's. Firstly I'll show you how to test your app's through your local network on a physical device that will auto refresh upon any source code change. However if you're unable to obtain a physical device compatible with the Phonegap developer app then the next best thing is iOS simulation and Android emulation. This involves more setup, is less intuitive and by far more complex than wifi testing. It is however beneficial to learn both types of setups for any eventuality and there are other pro's to emulation as well.

08:34

Next for the OSX installation I'll show you how to setup the iOS simulator. The iOS simulator is a free tool that comes with Xcode and gives you the ability to test your app on a plethora of iOS devices.

14:39

Android is the most popular device platform to date, so testing to make sure your app works properly on this device is important. To do this I'll show you how to install the Android SDK, Android emulator and setting it up for the best performance on OSX.

06:35

The GNU installation of Phonegap will involve testing your Phonegap app's on actual devices through your network connection. Then we swiftly move on to installing Cordova and the Android SDK to test your app's locally on the Android emulator.

14:49

This lecture will cover installing the Java JRE and JDK, Android SDK Manager, setting up Android virtual device's or AVD's for short and Cordova. We'll then add a new Android project to our Cordova app, next compile the APK file and run it on the newly created AVD.

05:52

Wifi testing will allow you to test Phonegap app's on iOS, Windows Phone or an Android 4.1 and above device's. This process of wifi testing gives you more flexibility without lethargic build process; so you can concentrate on your app's development.

12:58

Wifi testing is recommended, however you will need to install the Android SDK to compile your app's for Android. Also you will be able to emulate a plethora of Android device's with differing screen and hardware configurations.

02:12

It's time to get rid of any confusion or misconceptions between what Phonegap is and what Cordova is, before I begin instructing you on how to code.

07:07

Best practices are crucial in app development; especially since most students will be coming from a very liberal web background where there is no guidelines for UI or UX. However becoming an app developer is far more restrained where your app's must meet high expectation's; which the average web developer is not typically exposed to. This lecture will bring some perspective on developing app's from a web developers point of view.

09:05

Phonegap has a simple and flexible project base; but unless you've really delved into how a Phonegap project compile's then your automatically at a disadvantage! So let's review the entire project and get a general overview.

Basic config XML documentation:
http://docs.phonegap.com/en/edge/config_ref_index.md.html#The%20config.xml%20File

Config preference's documentation:
http://docs.build.phonegap.com/en_US/2.9.0/configuring_preferences.md.html#Preferences

10:10

Building an app interface is not as easy as one would think. It does take time and effort; this course is centred around app development so we'll be using a prebuilt mobile UI called Ratchet. I've also provided the source file's to get you setup quickly so we can start learning the Phonegap API's ASAP. I'll also show you how to use the Chrome and Safari developer tool's giving us access to the console for debugging, inspecting, editing and styling the DOM in real time.

Ratchet UI:
(Please download the source file's provided, nonetheless here's the links for the Ratchet UI...)
http://goratchet.com/

Section 2: Cordova API
06:59

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.

06:23

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.

06:46

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.

06:48

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.

06:01

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.

15:00

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.

09:19

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.

12:10

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.

10:47

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.

11:20

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.

17:16

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.

06:35

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.

16:57

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.

19:07

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.

14:35

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.

16:12

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.

14:56

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.

18:30

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.

10:20

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.

16:22

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.

17:37

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.

18:29

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.

17:51

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.

16:21

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.

11 pages

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.

10 pages
This documentation will cover all the methods associated with the fileEntry object. This object has many method's that we didn't cover, so here are all the methods fully documented for you to reference later.
16:33

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.

07:02

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.

16:02

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.

09:34

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.

13:48

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

Section 3: Ludei, CocoonJS & Cordova
04:14

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.

12:24

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.

Section 4: Building your app
11:39

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

18:00

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

18:29

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.

20:23

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

04:16

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.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Lawrence Turton, Technical Instructor

Lawrence Turton works as a web developer & graphic designer specialising in HTML, CSS, jQuery, UI & UX design. He has previously worked with Fifteendesign producing websites, iPhone and Android apps and started his own agency in 2010 called Elite Web Design. During that time Lawrence has established a wide range of clients from blue chip companies to large corporations. From a young age he was an online instructor and started to work with two of the leading online training specialists Cartoonsmart and Envato. Lawrence always created projects involving designs in Photoshop and bringing his creations to life by coding them with web technologies. This gives him a unique perspective into real world projects from start to finish and a wealth of information for new comers to the web industry.

Ready to start learning?
Take This Course