Rapid Prototyping with Ionic: Build a Data-Driven Mobile App
4.3 (506 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.
13,606 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Rapid Prototyping with Ionic: Build a Data-Driven Mobile App to your Wishlist.

Add to Wishlist

Rapid Prototyping with Ionic: Build a Data-Driven Mobile App

Retrieve data from multiple API's; d3js charting, caching, databasing, RSS feeds, notes, (un)follow functionalities.
4.3 (506 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.
13,606 students enrolled
Created by Hunter Leaman
Last updated 9/2016
English
English [Auto-generated]
Price: Free
Includes:
  • 4.5 hours on-demand video
  • 14 Articles
  • 6 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build a powerful data-driven mobile app with the Ionic Framework
  • Retrieve and cache data dynamically from multiple API's
  • Build interactive data-driven charts using d3.js and Angular-NVD3
  • Implement note taking functionality
  • Sign up and authenticate users with Firebase
  • Read and write user data to and from a Firebase realtime database
  • Configure dynamic content-rich news feeds from RSS feeds
View Curriculum
Requirements
  • You should already be familiar with HTML and CSS, as well as very basic JavaScript.
  • Highly recommended to commit fully to completing 100% of the course — this is an information-dense course and you may need to pause and rewind often in order to catch everything as you code simultaneously.
  • Highly recommended to commit to putting in extra effort to research and find explanations of programming concepts, which you don't fully understand throughout the course.
  • Highly, highly recommended to use a Mac throughout the course. Using Windows or any other OS will be fine, but there are no instructions specific to those operating systems. All of the course material is designed for Mac.
Description

Learn how to build an app that's featured on Ionic's Showcase!

Rapid Prototyping with Ionic: Build a Data-Driven Mobile App —

This course contains step-by-step lectures and implementations of HTML5, CSS3, and JavaScript web technologies on AngularJS and the Ionic framework to create a complete stock market mobile application.

Content and Overview:

Take advantage of the advancement of web technologies and build a mobile application that's rich with functionality yet simple to understand.

You will be provided with how-to videos and text material, guiding you through the process of creating a hybrid native mobile application for iOS (easily adjusted for Android too!) with coding techniques that anyone with any experience making websites can master.

What you'll get from this course:

• Valuable lectures and hours of coding tutorials

• A full mobile application with source code to use at your discretion

• Cutting edge and highly marketable programming skills

• Increased confidence in your ability to make applications on your own

• Gateway into the billion dollar mobile apps industry

The value of this course:

Mobile app development skills link you to a billion dollar market. This course leaves you ready to create high quality applications whether you are a programming veteran or just getting into web development.

Course structure and teaching style:

You will be taken through every step of setting up your development tools, being introduced to the coding languages to be used, and taken through the development phases of a functional mobile application, as I explain every aspect in a conversational and contextual manner without skipping a single line of code, resulting in a complete, full featured stock market app.

Like all Udemy courses, the course itself is broken up into sections and lectures. The sections represent broad, headline subjects. Under each section, you'll find multiple lectures: this is the meat of the course. You'll see that lectures can come in various formats — screen recordings, presentations and talking head style videos, and text.

Who is the target audience?
  • This course is meant for: (1A) web developers, front- and back-end, and/or designers with an interest in or any basic experiences with JavaScript, who want to try building hybrid mobile apps;
  • (1B) Developers of other technologies who want to try building hybrid mobile apps using HTML5, CSS3, Sass, JavaScript, and more with AngularJS and the Ionic Framework;
  • (1C) Beginner web developers and designers who learn at a fast pace and wish to expand their knowledge base by building and styling a simple, yet powerful and performant hybrid mobile app from the ground up;
  • (1D) Hobby coders who want to try out AngularJS and the Ionic Framework by using HTML5, CSS3, and JavaScript to build a data-driven hybrid mobile app;
  • Especially (1E) Tech-savvy or fast-learning entrepreneurs who need to build their own MVP mobile app at a fast pace, but don't have native programming skills, as well as (1F) anyone, with any programming background, just getting started with AngularJS and/or Ionic development who hasn't totally grasped either framework — you will build a full Ionic app from start to finish, resulting in a foundational code base, which you have written yourself, that you will be able to study, use, and improve upon in the future.
  • This course is probably not for beginner coders who just started working with HTML and CSS, and have not yet had hands on experience with JavaScript.
  • This course is not for anyone who has never worked hands on with HTML, CSS or any other functional coding languages.
Compare to Other Ionic Courses
Curriculum For This Course
59 Lectures
05:10:23
+
Course Introduction and Overview
6 Lectures 25:24
Why This Course? Why Now?
05:51

What is Ionic?
05:12

What is AngularJS?
03:57

What are Cordova, Node.js, Gulp, Sass, and Bower?
03:31

Firebase Realtime Databases
02:02

Goals, Structure, and Prerequisites Deep Dive
04:51
+
What We're Building!
1 Lecture 02:38
stockMarketApp Overview
02:38
+
Getting Started with Ionic
5 Lectures 27:52
Section Overview
02:00

Download and install Node.js and then use the Terminal application to install Ionic's and Cordova's command line tools.

Install Node.js, Ionic CLI, and Cordova
03:41

Learn about the main Ionic CLI commands we'll be using throughout the course.

Ionic CLI Overview
03:30

Run the start command to create your app, then download, install, open, and configure all of the apps we'll be using to develop. Lastly, we'll be setting up a local and remote git repository and installing gulp and setting up sass.

Start a New Ionic Project and Set Up Your Development Environment
18:15

Create CodePen, Plunker, and JSFiddle Accounts
00:26
+
Start Building!
4 Lectures 32:50

We'll be taking a more detailed look at the starter app's source code. We'll talk about the app's javascript files and their contents, and the $scope service and ng-repeat directive, as well as add some logs to the code that we'll evaluate in our browser's dev tools console.

Deeper Dive into the Starter App's Code
16:21

Change App's Name and Metadata, Configure States, and Add Extra Dependencies
06:43

Configure the My Stocks and Stock View Templates
09:20

Section Summary
00:26
+
Use an API to Get Stock Market Data
4 Lectures 25:39

Implement a factory services, in which we request data from API's using the $http service and resolve that data to a controller using promises.


Queries:

Yahoo Web Services Query — http://finance.yahoo.com/webservice/v1/symbols/YHOO/quote?format=json&view=detail


Yahoo YQL Query — http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20IN%20(%22YHOO%22)&format=json&env=http://datatables.org/alltables.env

Configure a Yahoo Finance API Request to Get a Stock's Price and Market Data
10:54

Queries:

Yahoo Static Charts Query — http://chart.finance.yahoo.com/z?s=YHOO&t=1d&q=l&l=on&z=m&a=vm

Bind Stock’s Data to the View and Add Static Charts
08:42

Add a URI Encoding Service and Implement a Date Time Service
04:54

Section Summary
01:09
+
Interactive Data-Driven Charting with NVD3 (d3.js) Data Visualization JS Library
3 Lectures 21:11

This lecture picks up the pace as we begin building interactive data-driven charts using Angular-NVD3 and nv-chart, featuring 52 week price and volume data we retrieve from a Yahoo YQL API.

Install Angular-NVD3 and Configure an Interactive Chart
09:00

Queries:

Yahoo YQL Historical Data Query — select * from yahoo.finance.historicaldata where symbol = "YHOO" and startDate = "2009-09-11" and endDate = "2010-03-10"

Implement a Chart Data Service
11:17

Section Summary
00:54
+
Create a Custom Filter to Shrink Large Numbers
3 Lectures 06:37
Section Overview
02:06

Implement a Numbers Filter
04:15

Section Summary
00:16
+
Style the Stock View
4 Lectures 29:46
Section Overview
02:01

Style the Interactive Chart
16:13

Style the Button Bar, Subheader Bar, Header Bar, and Market Data Card
10:44

Section Summary
00:48
+
Add and Configure Caching with Angular-cache
3 Lectures 08:46
Section Overview
02:01

Implement Caching of Stocks' Chart and Market Data
06:30

Section Summary
00:15
+
Add Notes Functionality
4 Lectures 15:27
Configure an Ionic Popup
04:06

Implement Notes Functionality
08:44

Style the Notes Card and Note Popup
02:01

Section Summary
00:36
7 More Sections
About the Instructor
Hunter Leaman
4.3 Average rating
503 Reviews
13,606 Students
1 Course
Web Developer/Designer, Project Manager, Passionate Learner

Innovation defines my thought process. I am a creative thinker with the habits of a true businessman and entrepreneur. Everything is art — whether I am creating beautiful user interfaces, structuring projects and spreadsheets, or making the best PB&J possible. I believe that personal artistic expression breathes life into everything we do, but that it must also serve a purpose.

As an entrepreneur, my motto is “Always think big, and then start small." My goal as a professional is to help others achieve their dreams by doing exactly that. With this in mind, I have merged my love of developing mobile apps and websites with teaching others how to develop their dreams step by step.

Most recently, I founded LX Labs — an idea development and project management company focused on helping aspiring entrepreneurs turn their dreams into reality. In an industry where everything is constantly evolving, the Ionic framework is the perfect tool for rapid prototyping mobile apps — a necessity in idea development. Our goal at LX Labs is to help those who don't know where to get started by showing them how to start small and work their way towards their goal.

As a businessman and project manager, I strive to combine my personal interests and hobbies with my career path. I believe that doing so is what makes you a successful entrepreneur. In addition to teaching and working with entrepreneurs, I develop and publish apps and websites, allowing me to explore my passion for web and tech development.

Some of my recent projects include:

stockMarketApp — Built from the ground up using Ionic and AngularJS, this app allows you to search and follow stocks, get key market data, and more.

Such link. wow. — A doge themed URL shortener that has served over 400,000 clicks and shortened over 20,000 URLs since its launch in May.

partycircles | Music Visualizer App — This app was developed as a personal project to deliver on an idea that I had in college. As you play music, colorful shapes appear and react to the audio data. You can choose from a selection of scenes and adjust the trigger threshold to customize how each scene reacts to the audio.

Deriving from the code base of partycircles, I developed iOS Music Library Access, a program which allows Unity3d developers to give users access to and play music from their device's music library.

Learning, developing, and communication are my true passions. I am a DIY master, always eager to create innovative and useful products while adding to my skillset. I may dream big but I always start small, working to make my visions a reality.