Phonegap & Ludei - Build HTML5 CSS & JS Apps
- 9.5 hours on-demand video
- 29 downloadable resources
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- 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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
Config preference's documentation:
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.
(Please download the source file's provided, nonetheless here's the links for the Ratchet UI...)
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
iOS Developer Program:
iOS Submit to App Store:
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.
- You must understand HTML and CSS