Ionic 4 – How To Make a Simple Card Matching Game (1 of 4)

[ Part 1 (Introduction) – Part 2 – Part 3 – Part 4 ]

Howdy! How you doing today?

Welcome to another series of videos!

This time we’re diving into hybrid applications with Ionic 4.

We’ll be developing a simple card matching game that you can run in many different platforms like: Android, Apple devices (iPhone, iPad, etc.) and basically anything that runs HTML, CSS and JavaScript.

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?

Ionic Framework

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.

All thanks to frameworks like Ionic, among others, usually JavaScript-based.

Now that you know more about the framework and its capabilities, let’s take a look at the required software for this project.

Required Software

First of all, you will need npm to follow along.

I’ve successfully installed it on my Windows, Linux and macOS systems – which is another unspoken benefit of JavaScript-based frameworks.

After installing npm, run the following command to install Ionic:

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

If you have messed around with HTML, CSS or JavaScript before, a lot of this stuff won’t be too complicated to grasp.

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
• Basic HTML, CSS and JavaScript coding
• 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.

Application Development

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.

Download App / Download Images

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.