Create Mobile Apps using Intel XDK and Ionic Framework

Building a Todo App and Contacts App from Scratch using Intel XDK and Ionic.
3.5 (21 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.
214 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 89
  • Length 6 hours
  • Skill Level All Levels
  • 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 10/2015 English

Course Description

Intel XDK and Ionic form the best combination for building cross platform mobile apps.

You may wonder why to build cross platform apps using Intel XDK and Ionic. Well Phonegap is an Intel XDK alternative and jQuery Mobile is an alternative to Ionic.

The main benefit of creating apps using Intel XDK is that you don't need a MAC and also you don't need to install eclipse, XCode and Visual Studio to test apps. Intel provides its own cross platform emulator and also a cloud binary build. XDK let's you test the app on a real device without install any other software. This is just couple of the lots of features provided by Intel XDK.

Ionic framework is the most trending topic among developers at present. It provides the best UI for creating mobile apps.

In this course we will only learn design components of Ionic as we we will using Intel XDK to test, build, debug and build the app.

Creating hybrid mobile applications is a great way to leverage your knowledge of web languages like HTML5, CSS, and JavaScript. Modern frameworks such as AngularJS and Ionic make it easier with pre-built templates and components. In this course we will teach the core Ionic components: pre built, easy-to-use features such as buttons, lists, tabs, and forms. Then Ray shows how to combine these components with AngularJS models, views, and controllers to build a single page app with sliders, pull-to-refresh functionality, and search.

What are the requirements?

  • HTML
  • CSS
  • JavaScript
  • AngularJS
  • Windows, Linux or OS X

What am I going to get from this course?

  • Test, Debug, Profile and Build Cordova apps using Intel XDK
  • Design Hybrid Apps using Ionic
  • Build Mobile APPs

What is the target audience?

  • This course is for students who are new to Cordova or XDK or Ionic
  • This course teaches you the complete workflow of building Hybrid APPs using XDK and Ionic

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
Introduction
Preview
03:05
Cordova architecture
Preview
07:23
What is Intel XDK and how we can use it to build Ionic Apps
03:52
App Designer
09:37
Ripple Emulator
06:01
Testing in Intel XDK
05:55
Debugging in Intel XDK
06:25
Profile in Intel XDK
05:17
Building Intel XDK Applications
10:31
Section 2: Designing the app using Intel XDK's App Designer
Todo App UI
01:41
Adding Pages
02:21
List Todos UI
07:20
Create & Edit Todo UI
06:46
Section 3: Create Todo item Logic
Adding an Angular Controller
03:48
Creating an Add Todo function
01:30
Add Todo Logic
01:53
Back Function
03:05
Save Todo Function
01:48
Using the ngModel
05:04
Storing Todo item in Memory & LocalStorage
03:08
Saving an Edited Todo
06:24
Section 4: Rendering Todo List
Using ngRepeat
08:40
Section 5: ngCordova and Cordova Plugins
What is ngCordova & How to setup
04:52
Adding Plugins
05:13
Debugging & Fixing Errors
06:53
Section 6: Date Picker
Creating a Date Picker Function
05:14
Date Picker API
05:48
Getting Data from Date Picker
05:38
Updating Date Picker's Default Data
06:30
Using the Ionic Toggle Component in Intel XDK
03:35
Section 7: Local Notifications
Creating a Set Alarm Function
01:55
Implementing Set Alarm Logic
08:58
Final Create Todo Touches
09:13
Section 8: Edit Todo
Creating an Edit Todo Function
02:22
Rendering the Todo Data in the Edit View (Edit Page)
02:40
Saving an Edited Todo
05:55
Updating the Todo Alarm
02:27
Smarter Todo Alarm
06:47
Section 9: Delete Todo
Creating a Delete Todo Function
01:37
Show a Warning Message
03:43
Delete Todo Logic
04:38
Section 10: Finishing the Todo Application
Display Alarm
01:51
Fixing Alarm Bugs
07:41
FInal Build
02:23
Section 11: Using Ionic Template in Intel XDK
Creating a Project
02:02
Updating Libraries
03:00
Creating Templates
01:48
Configuring Router & Navigation
04:07
Adding Controllers
02:34
Adding Navigation Header & Views
06:26
Using Ionic Tabs
04:38
Section 12: Cordova Plugins & Angular Services
Adding Plugins
01:39
Injecting ng Cordova
01:26
Hiding Splashscreen
03:07
Creating an Angular Service
02:23
Using the Contacts API in an Angular Service
03:10
Section 13: List Contacts
Getting Contacts from Device
03:11
List Contacts UI
03:09
Rendering Contacts
03:32
Section 14: Search Contacts
Adding a Search Button
03:07
Adding Search Input inside a Header Bar
02:44
Creating a Toggle Search Function
02:24
Fixing Quirks
04:01
Toggle Search Logic
03:55
Creating a Search Contacts Function
01:35
Search Contacts Logic
03:29
Section 15: Create Contact
Adding a Create Contact Button
03:04
Adding Create Contact Inputs
02:58
Add Contact Button Function
02:37
Contact Form & ngModel
08:40
Add a Save Contact Button
01:52
Save Contact Function
03:45
Optional Fields Interface
02:29
Adding Delete List Item Buttons
03:36
Toggle Delete Buttons Function
04:39
Implementing Ionic Modal
05:01
Tracking the Optional Fields
04:42
Add Field Logic
05:04
Remove Field Logic
03:33
Hidding Display Name
02:15
Section 16: View Contact
View Contact Logic
03:44
View Contact UI
03:55
Rendering Contact Data
10:35
Deleting a Contact
03:47

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

QScutter Tutorials, a place to learn technology

QScutter is a Indian based company that offers an ever growing range of high quality eLearning solutions that teach using studio quality narrated videos backed-up with practical hands-on examples. The emphasis is on teaching real life skills that are essential in today's commercial environment. We provide tutorials for almost all IT topics.

Ready to start learning?
Take This Course