Name: Create a Full Ionic App with Material Design - Full Stack
Rating: 4.2 (86 reviews)

Udemy Business

Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Created byGary Simon

Last updated 6/2017

English

What you'll learn

Create a relevant and effective logo
Building App Mockups in Adobe Experience Design (XD)
App Prototyping with Adobe XD
Connect to an API
Understand Ionic Templating, Storage & Material Design
Integrate Search in an Ionic App
Integrate Cordova Plugins
Integrate Angular Animations
Build an awesome Ionic 3+ App

Course content

6 sections • 25 lectures • 3h 41m total length

Designing the Logo & Project Resources10:43
In this video, we will use Adobe Illustrator to design the logo for our UpcomingGames app. You can use any other vector-based graphics application.
App Icon Design5:51
In this video, we will use Adobe Illustrator to design and export our app's icon launcher. This will feature the lettermark with a long-shadow.
Splash Screen UI8:13
In this video, we're going to use Adobe XD (Experience Design) to design the splash screen that will first display when the app is first loaded.
Main UI Header12:17
In this video, we will design our app's main UI header and navigation, consistent with Ionic 3's material design implementation.
Main Game Listing UI8:54
In this video, we will use Adobe XD's repeat grid to create a series of material design cards that will feature a large thumbnail, title, and a release date of each game.
Favorites UI3:18
In this video, we will duplicate our main UI artboard and create a representation of the Favorites page for our Ionic 3 app.
Game Genres & Search UI10:30
In this video, we are going to tackle 2 different screens which will list out the upcoming game's genre from IGDB, and also what the search UI will look like on our Ionic 3 app.
Game Details UI13:52
Each game has a variety of information we can add to a game details page. In this video, we are going to design the UI for this screen.

Installing Prerequisites & Starting the Project4:51
In this video, we are going to cover installing the necessary prerequisites (Node, NPM and the Ionic CLI) and use the Ionic CLI to start our project.
Connecting to the API13:26
In this video, first, we're going to setup a free IGDB.com account and copy an API key. Then, we're going to create a provider with the Ionic CLI and use it to connect to the IGDB API.

Generating the Page & Attaching the API6:06
Integrating Storage and a LoadingController11:40
We're going to use Ionic Storage to store a few properties that will allow the app to remember a user's favorites and their preferred game genre. We will also integrate an Ionic LoadingController to help display a loading message while the API is being accessed.
Defining the Navigation Template8:55
In this video, we will hop into the HTML template file for our home page, and structure an Ionic material design header & navigation based on our Adobe XD mockup.
Defining the Games Listing Template9:09
In this video, we will continue to work within the home template HTML file and define the game listings. We will use Ionic's material design ion-card components.
Styling the Games List7:55
In this video, we will use our home's sass (scss) file to define rulesets that will help style our game listings to match our Adobe XD mockup.

Favorites9:43
In this video, we will create the necessary methods to make our Favorite button work. They will use Ionic Storage to remember a user's favorite games.
Filters Modal6:19
In this video, we will create a Filters page and accompanying modal, which will display the game genre's from the API.
Filters Template & API8:39
In this video, we will work within the genres template and component file to structure the template and connect to the API game genre's endpoint.
Search10:45
In this video, we will ensure that our Search function works by defining a series of methods to show the search, and communicate with the IGDB game search API.

Details Page API10:55
In this video, we will generate a Details page with the Ionic CLI. Then, we will work within our Data provider to define methods for accessing individual games.
Details Template11:14
In this video, we will work within the Details HTML template to define all of the necessary templating for each game.
Details Styling6:05
In this video, we will use the Details Sass (scss) file to provide style to our details UI; all based on the Adobe XD details mockup we created earlier.
Making the Videos and Website Link Work5:14
In this video, we will integrate 2 Cordova plugins. The first is for playing our game videos via Youtube, and the second is for launching an InAppBrowser for visiting the website link.
Adding Animation8:33
In this video, we will integrate Angular animation and apply it to various elements of our Ionic 3 UI.

Requirements

Understanding of HTML
Understanding of CSS
Basic understanding of Javascript
Software: Adobe Illustrator or Vector Equivalent (If you're following design)
Software: Adobe Experience Design (If you're following design)

Description

It's time to level up and take your design and development skills to the next level: hybrid app development.

Ionic 3 allows you to build powerful hybrid apps that work on a variety of mobile platforms including Android, IOS and Windows.

This is a full stack development course, which means you're going to witness the entire process from design to code, start to finish. To begin, we will design the logo and create a series of interactive prototype mockups.

To begin, we will design the logo and create a series of interactive prototype mockups. Then, we will spend the rest of the course developing the app using Ionic 3 and Angular 4.

We will use the free IGDB (Internet Games Database) API to power our app, which will allow users to sort through and discover the latest upcoming games in every genre.

If you're only interested in design or coding, that's perfectly fine! This course is structured in such a way that allows you to jump in on any lesson; as each lesson contains the project files up to that point.

As you can see, this course is absolutely jam-packed with real-world information that you can apply to every project going forward.

So, if you're ready to learn by doing, let's get started!

Who this course is for:

Front-end Developer
Web Developer
App Developer

What you'll learn

Explore related topics

Course content

App Design8 lectures • 1hr 14min

API Setup2 lectures • 18min

Home Page5 lectures • 44min

Secondary Pages4 lectures • 35min

Details Page5 lectures • 42min

Wrapping it up1 lecture • 8min

Requirements

Description

Who this course is for: