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!
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.
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.
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.
In this video, we will design our app's main UI header and navigation, consistent with Ionic 3's material design implementation.
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.
In this video, we will duplicate our main UI artboard and create a representation of the Favorites page for our Ionic 3 app.
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.
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.
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.
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.
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.
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.
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.
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.
In this video, we will create a Filters page and accompanying modal, which will display the game genre's from the API.
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.
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.
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.
In this video, we will work within the Details HTML template to define all of the necessary templating for each game.
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.
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.
In this video, we will integrate Angular animation and apply it to various elements of our Ionic 3 UI.
In this video, we're going to first generate the necessary resources with the Ionic CLI for our app Icon and splash screen. Then, we will use the Ionic CLI to run the app on our phone. I hope you enjoyed this course!
Gary Simon is a professional freelance graphics and web designer with well over a decade of experience. Having served over a thousand clients, Gary understands many facets of the design industry.
He has also been a course instructor for several of the top online education websites, teaching a wide range of topics including:
Gary began designing websites in 2000, and just a few years later started focusing on identity design. From that point on, Gary grew a large clientele that allowed him to fully develop skills that extend beyond design alone.
The following is a list of web technologies in which Gary is proficient:
He is also an expert with the following software:
Gary began teaching his skills to others after releasing a single logo design tutorial, which has since garnered over a million views. In 7 years, Gary has released over 200 video tutorials and 20+ video courses. On his Youtube channel alone, his videos receive a half million views monthly. He enjoys connecting with students and helping them develop their skills on an on-going and frequent basis.