Ionic 4 – How To Make a Simple Card Matching Game (1 of 4)
Howdy! How you doing today?
Welcome to another series of videos!
This time we’re diving into hybrid applications with Ionic 4.
I’m always excited to learn new technologies and of course, share the knowledge with you guys in my path moving forward. But why Ionic?
With the explosion of smartphones and mobile applications of this decade, there had to be new developments for programmers as well. Why?
Well, imagine that programmers would have to learn how to make applications for Android, then for Apple devices, then Microsoft products and the list goes on… something had to be done.
It turns out that hybrid applications would make our lives incredibly easier by allowing programmers to use a single codebase for applications.
Now that you know more about the framework and its capabilities, let’s take a look at the required software for this project.
First of all, you will need npm to follow along.
npm install -g ionic
This command should be executed from a terminal of course. It might take between 5 and 10 minutes to finish, so hang in there. 😉
Besides that you’ll need a nice text editor, which I recommend Sublime Text (I show how to configure the syntax for it on the video by the way).
That’s all the software needed for this project.
What You Will Learn
Even the pieces you don’t understand shouldn’t scare you, because honestly, that’s why we’re using a framework after all: so that it can automatically handle several components without us having to learn every single thing.
The main goal of this project is to slowly walk through several components of the framework without any additional libraries. You’ll learn about:
- Basic structure of Ionic 4 project
- Generating components like pages
- Handling images and other assets in our project
- Deploying project to web and Android smartphone
- Among other concepts we’ll get to along the way… 😀
Besides that, we’ll be making a card matching game, which kind of proves the versatility of Ionic; after all, its made with applications in mind.
While I wouldn’t recommend it specifically for game development, certain games like this one don’t seem to suffer any performance issues.
As there are too many details pertaining to the project structure, assets placement and overall programming – I won’t be doing the usual follow along coding I usually do for my python blogs.
It feels like no matter how hard I try, I would eventually forget some crucial step of the process that would break the application for someone following strictly the text version of this tutorial.
Fear not though, the video for part 1 has everything you need to know.
If you just want to run the project, download the app and images.
After everything is installed, create the project like so:
ionic start fruitMatch blank
The app.zip goes right into the app folder of the project (which is inside of the src/ directory of the main project). While the images goes inside the assets folder (also inside of src/ directory).
If you have any questions, leave a comment below.
Signing off for now, see you guys in the next part.