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.4 (146 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.
2,641 students enrolled
Free
Start Learning Now
  • Lectures 59
  • Length 5.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 8/2015 English

Course 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.

What are the 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.

What am I going to get from this course?

  • 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

What 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.

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: Course Introduction and Overview
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
Section 2: What We're Building!
stockMarketApp Overview
02:38
Section 3: Getting Started with Ionic
Section Overview
02:00
03:41

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

03:30

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

18:15

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.

Create CodePen, Plunker, and JSFiddle Accounts
Article
Section 4: Start Building!
16:21

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.

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
Article
Section 5: Use an API to Get Stock Market Data
10:54

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

08:42

Queries:

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

Add a URI Encoding Service and Implement a Date Time Service
04:54
Section Summary
Article
Section 6: Interactive Data-Driven Charting with NVD3 (d3.js) Data Visualization JS Library
09:00

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.

11:17

Queries:

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

Section Summary
Article
Section 7: Create a Custom Filter to Shrink Large Numbers
Section Overview
02:06
Implement a Numbers Filter
04:15
Section Summary
Article
Section 8: Style the Stock View
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
Article
Section 9: Add and Configure Caching with Angular-cache
Section Overview
02:01
Implement Caching of Stocks' Chart and Market Data
06:30
Section Summary
Article
Section 10: Add Notes Functionality
Configure an Ionic Popup
04:06
Implement Notes Functionality
08:44
Style the Notes Card and Note Popup
02:01
Section Summary
Article
Section 11: Add News Feed
Section Overview
02:01
05:21

Queries:

Yahoo News Feed Query — "https://feeds.finance.yahoo.com/rss/2.0/headline?s=YHOO&region=US&lang=en-US"

Style the News Card
03:33
Section Summary
Article
Section 12: Add Following and Unfollowing Stocks Functionality
Configure My Stocks Array Caching and Services
05:01
Implement Following and Unfollowing Stocks Functionality
06:30
Section Summary
Article
Section 13: Add Stock Searching Functionality
Section Overview
02:10
Create a Modal Service and Build Out a Modal View
06:28
06:38

*(October 3, 2015) Yahoo recently changed this API and the query is slightly different now: I've updated the end point below.

The new query works in a similar fashion as the old, so if you want to challenge yourself, try to make the search service function using the new end point by following the same steps detailed in the lecture. If you're not up for a challenge, I've attached the updated searchService to this lecture. Please leave a comment if you have any questions. Happy learning!

Queries:

Yahoo Finance Autocomplete Search Query (updated)https://s.yimg.com/aq/autoc?query=aapl&region=CA&lang=en-CA&callback=YAHOO.util.ScriptNodeDataSource.callbacks

Old Query — http://d.yimg.com/autoc.finance.yahoo.com/autoc?query=YHOO&callback=YAHOO.Finance.SymbolSuggest.ssCallback

Style the Search Modal
06:46
Section Summary
Article
Section 14: Build Out the My Stocks State
Build Out the My Stocks View and Controller
07:41
Style the My Stocks View
05:16
Section Summary
Article
Section 15: Firebase Integration — User Authentication
Configure the Log In and Sign Up Modals
02:53
Implement User Log In and Sign Up with Firebase User Authentication
08:11
Section Summary
Article
Section 16: Firebase Integration — Read and Write Data to a Firebase Database
Writing Data to a Firebase Database
08:39
Reading Data from a Firebase Database
05:29
Section Summary
Article
Section 17: Finishing Touches — ngCordova, inAppBrowser and Build, Emulate, and Run the App
Install ngCordova and inAppBrowser, and Build, Emulate, and Run the App
06:50

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Hunter Leaman, 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.

Ready to start learning?
Start Learning Now