Android Mobile App Development with Onsen UI and Phonegap
4.3 (80 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
18,260 students enrolled

Android Mobile App Development with Onsen UI and Phonegap

Keep it simple, use what you already know: HTML, CSS and Javascript - to develop native looking mobile apps
4.3 (80 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
18,260 students enrolled
Created by Paul Chin
Last updated 6/2020
English
Current price: $27.99 Original price: $39.99 Discount: 30% off
23 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 4.5 hours on-demand video
  • 45 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Create Android apps using HTML, CSS and Javascript
  • Convert html and javascript code to apk files using Phonegap build
  • Generate keystore and sign apk files for release builds
Course content
Expand all 64 lectures 04:22:20
+ Introduction, overview and setup
3 lectures 07:08

Welcome to the course. Introduction to the course contents.  Setting up development environment.

Preview 01:07

Overview of the steps involved in developing an Android mobile app.

Preview 02:53

An introduction to Onsen UI and why it is the best UI framework out there.

Preview 03:08
+ Getting started
4 lectures 17:13

How to download node.js, install it and test it.

Download and install Node.js
02:26

Downloading Visual Studio Code, customizing plugins and editor environment.

Download and install Visual Studio Code
05:21

How to download Phonegap desktop app, install and test it.

Download and install Phonegap Desktop App
03:50

Using Phonegap Desktop App to generate your first project. Then, editing it to display a Hello World message using Visual Studio Code. And finally, using Chrome developer tools to simulate a mobile android device.

Preview 05:36
+ Creating a single page app
9 lectures 52:17

How to create a single page app, download the onsen and jquery libraries and refer to them in your html pages

Downloading the Onsen and JQuery libraries and referencing them in index.html
09:21

How to create a basic Onsen page that containing a simple toolbar.

Creating an onsen page
04:49

How to start and stop Visual Studio Code's Live Server

Starting and stopping development servers
04:45

How to use Visual Studio Code's Live Server to select which project to open

Using Visual Studio Code's Live Server to select project to open
02:52

How to add an input text field and a button

Adding page components
05:48

Adding event handlers to our buttons

Adding button handlers
08:26

How to make improvements to the input box by adding a underline and an animated place holder

Preview 02:01

A project for you to try. It is called Adder. The solution will be discussed in the next lecture.

Project: Adder
02:19

Project adder solution step-by-step walk through.

Project Adder Solution
11:56
+ Editing your config.xml file and app icon
2 lectures 07:55

The importance of the config.xml file and how to correctly configure it.

How to configure your config.xml file
05:09

Icon dimensions and where to put them.

Icons
02:46
+ Creating github repository and uploading projects
8 lectures 39:13

Learning outcomes:

  1. Understanding the need for github

  2. Create github account

  3. Install and use git-scm

  4. Creating repositories

  5. Uploading files to github

Introduction to github
00:36

An explanation on why we need to use github when developing with phonegap

Why do we need to use github?
03:17

How to sign up for a free github account.

Signing up for a github account
04:37

How to download git-scm, install and test it.

Installing git-scm
06:10

How to create a new repository and prepare files for uploading.

Creating a new repository on github
06:53

Learn how to make changes to your project and push the changes to github

Pushing updates to github
02:25

How to clone a github repository

Cloning github repositories
08:28

How to synchronize your local project with github.

Synchronizing with a github repository
06:47
+ Building an apk file
3 lectures 09:50

Learning outcomes:

  1. Create new phonegap build accounts

  2. Link github repositories to phonegap build

  3. Download and install apk files on android devices

Introduction to building apk files
00:34

How to create a new phonegap build account.

Signing up for a phonegap build account
03:03

How to link your github repo to phonegap, then build the apk, download and test on an android device.

Building an apk file
06:13
+ Directly uploading a project to phonegap build without using github
1 lecture 03:24

For those who do no want to learn github, or, use github, there is a simpler way.  Direct upload to phonegap build. This lecture will teach you how to directly upload your project to phonegap build.

Directly uploading a project to phonegap build without using github
03:24
+ Signing an apk file for release
8 lectures 28:46

An explanation of the differences between a debug build vs release build, how to do a release build and what a keystore is.

Introduction to signing an apk for release
01:49

Creating an oracle account and downloading Java Runtime Enviroment (JRE) installer.

Downloading java jre
05:30

Installing Java Runtime Environment (JRE) and configuring the Path environment variable

Downloading java jre
05:11

Installing Java Runtime Environment (JRE) and configuring the Path environment variable

Installing java jre
05:11

How to generate a keystore using the java keytool

Generating a keystore file
03:00

How to name the keystore and upload to phonegap build.

Uploading the keystore to phonegap build
01:32

How to unlock a keystore and sign an apk file

Signing an apk file
02:31

How to download  the release apk to your mobile phone and also how to download the release apk to your PC for submission to google play.

Testing the release build
04:02
+ Creating multi-tab apps
13 lectures 44:08

Introduction to what a tab bar looks like and what students will be learning in this section

Introduction to multi-page apps using tab bars
00:34

Create a new project for tab bar app, using Phonegap Desktop App

Creating a new tab bar project
02:41

How to edit the config.xml file for this new project

Editing the config.xml file
01:42

How to add the CSS and Javascript libraries to your tab bar project

Adding the css and js libraries
01:05

How to edit the index.html file to refer to the css libraries and javascript scripts for the tab bar project

Editing the index.html file to refer to libraries and javascript
01:51

How to add a page, toolbar and tab bar to your project.

Adding tab bars
03:26

How to add multiple tab pages to your project that can be accessed from the tab bar

Adding tab pages
04:13

How to add icons to the tab bar and where to search for icons

Adding icons to tab bars
03:07

Learn how to center the title in the toolbar, center the content of the page and also how to make the tab pages swipeable

Centering content and making tab pages swipeable
04:45

How to put your tab bars on top, and optimize the design to look good by using a common toolbar.

Variation: Top Tab Bars
02:16

A project for you to try on your own, using what you have learnt so far. The solution will be discussed in the next lecture.

Project Add and Multiply
01:16

A step-by-step tutorial on the solution to the Project Add and Multiply.

Solution to Project Add and Multiply
10:55

How to upload your project directly to phonegap, build an apk and download to your Android phone.

Building an apk for project Add and Multiply
06:17
+ Creating side panel menu apps
12 lectures 50:38

A look at what are side panel menus and what we will be building in this section

Introduction to side panel menus
00:58

Using phonegap desktop app to create a new side panel menu project

Creating a new side panel menu project
02:11

How to configure the config.xml file for the side panel menu project

Editing the config.xml file
02:56

How to add the CSS and Javascript libraries to your side panel menu project

Adding the css and js libraries
01:12

How to edit the index.html file to refer to the css libraries and javascript scripts for the side panel menu project

Editing the index.html file to refer to libraries and javascript
02:42

Adding the necessary project files: navicontainer.html, home.html, add.html and multiply.html. The menu.html will be added in the next lecture.

Adding project files
01:47

How to create a splitter in index.html

Creating the splitter in index.html
04:12

Creating the contents of navicontainer.html and home.html

Creating navicontainer.html and home.html
08:17

Writing javascript code to open side panel menu

Adding code to open side panel menu
05:20

Adding javascript code to load the add.html and menu.html pages when their respective menu items are clicked

Adding code to open menu items
10:40

Writing the add and multiply code

Adding functionality to add and multiply pages
03:58

Adding cards to home page to act as front page menu

Adding cards to home page
06:25
Requirements
  • Be able to create web pages using html, css and javascript
Description

If you already know how to create web pages using HTML, CSS and Javascript and want to create mobile apps, then this is the course for you. Using your existing knowledge,  you can make beautiful native looking apps. You will learn how to use Onsen UI style frameworks to create stunning looking modern UI's that users have become accustomed to.  No need to learn any new programming languages.  This is the  simple and easy way to make apps, ie. using pure HTML, CSS and Javascript.

You will learn how to easily use phonegap build, to convert your code to apk files.  No need to download a huge set of tools. No need to waste time generating tons and tons of packages and libraries to make your apps bloated. No need to suffer the headache of trying to fix missing dependencies, or, incompatible libraries. Everything is done for you by phonegap build. Your codebase is simply pure html, css and javascript - easily portable and shareable. The project files are also very small and the apk that is generated is a fraction of the size of apps built with ionic or react native.

I have been developing apps since Android first came out and have tried almost all the major frameworks out there. But at the end of the day, I still prefer the simplicity and ease of pure HTML, CSS and Javascript and I am pretty sure you will too.

Whether you want to build apps professionally or simply want to enjoy making apps as a fun hobby, this course will make it easy for you to achieve your goals.

If you are unsure about this course, just go ahead and enroll anyway, you have a 30-day money back guarantee. See you inside!

Who this course is for:
  • Web developers who want to develop apps using just html, css and javascript
  • Developers who do not wish to learn any new programming languages
  • Developers who like things simple and easy