独家优惠奖金 100% 高达 1 BTC + 180 免费旋转

Creating Quiz Game App Using IONIC framework.

This is a journey about one of my project in my internship period which is a creating Android quiz game App using Ionic framework. I wanted to share my story of working on this app so it would help other developers who takes on the same journey. So, I hope this post helps and inspires other programmers who want to create android app using ionic.

Using above documentation you will get idea how to setup environment for ionic development. After setup environment completely you can start continue with the article.

Before design and make logics you must create a new ionic project. You can use below command on your terminal/cli to do so.

ionic start myApp tabs

You can use your app name instead “myapp”. Then your terminal shows like this Type Y at the prompt Would you like to integrate your new app with Cordova to target native iOS and Android? (y/N) in here type y and press enter key. After run command below I mentioned. You must use your app name instead “myapp” every command which has “myapp”

cd myApp
ionic serve

After run this commands, If your setup and other installations completed correctly you can show your sample app open in the browser. Some times your browser will not open automatically don’t worry about that copy link address in your terminal and past in your browser. You can see your ionic app in the browser. Now, you have ionic app and you can develop it as you need..

Now you have to make specific folders to separate your code very clean. For that go to src>app and create folder called “models”. In same directory go to tab1 and open integrated terminal to that directory. Use commands in below

ionic generate component start

ionic generate component view-question

ionic generate page user-level

ionic generate page view-quiz

In this game I used images to levels and all of these images in assets folder. following this directory open assets folder src>assets . Now you have to make folders called fonts, icon, images, quizes, levels, in this assets folder. Font folder has all of external fonts that use in app. Icon folder has images such as app icon, logo like that. Images folder has level images, background images etc. Quizes folder has json files and All of these json files have all of information related to each level questions. User folder has userData json file which has information about each level such as level id, level name, level image link.

In models folder I used different models for different tasks. It will be different from person to person within their experience.

Lets move to Service folder which is the most valuable things in this app. In service folder we can use to store our CRUD operations and any other operations which wants to different places in our application. In this application I used firebase Realtime database for store users meta data such as User’s device id, current level, completed levels with marks like that. For using firebase, we must configure app with firebase.

You should connect your ionic application with the firebase database. install Angular Fire and Firebase from npm by running the following command.

npm install @angular/fire firebase - -save

As a next step you have to config your app with firebase.

Click on the “create a project” button then click on continue button.

Next, click on the web icon as shown in the screenshot.

Next, add Firebase to your web app. Enter the app’s nickname and then click on the next button.

It will take you to the screen where you will see Firebase configuration, copy the red marked Firebase configuration keys keep it in the notepad or something else. You will need these keys to register in your Ionic project.

Next, we will click on the “database” from the left side navbar. Then, look for Realtime Database and click on the “create database” button.

It will open the security rules model popover, select “start in test mode” option. Remember we are setting up these rules for testing purpose. In real world app be careful about database rules.

Now, we are all set to use the Firebase Real-time Database.

In this step, we will register the Firebase config rules inside the
environment.prod.ts and environment.ts file, you can find these files in the src > environments folder.

Add the following code inside the environment.prod.ts file. In previous section I mentioned to keep this details in notepad.

Place the following code inside the environment.ts file.

Finally, go to app.module.ts file. Here import and register Firebase services along with that also inject Firebase config keys with the AngularFireModule.initializeApp() method.

Then create database in you Realtime database. Using demo data.

Now, you can connect your Ionic app with Firebase Realtime database.

We want more plugins for our other implementations. There are implementing countdown and get user’s device id (UUID). For that following commands.

ionic cordova plugin add cordova-plugin-device
npm install @ionic-native/device
npm install ngx-countdown — save

At the moment now you have to define your CRUD operations and file read operations in side the service folder. First of all you have to make different service files as you need. In here I used three service file called level, quiz, userdata. You can make services like a my project using below commands in your terminal.

ionic generate service level
ionic generate service quiz
ionic generate service userdata

In level service, I defined get data from json file that store in inside asssets folder. Quiz service is used to get quizzes data from firebase which have all details about each level questions. User data service work with firebase which has lot of implementations such as get all users, update user, update marks, get one user’s data like that.

Let’s talk about UI and flow of this app. As a first UI I used start component which has two buttons for play and get information about app. Then user navigates to user level page while starting play game. In this page has user levels and show stars related to marks of each levels. Next user go to questions view page and has questions related to each level. Each questions has limited time. That shows top of the questions. After User completed answering all questions in that level shows the marks and provided a feature to try again or go to next level.

After install and User open app first time, App will get user’s device id (UUID). It will help to save user data in firebase. Then user click “play now” button and go to game level screen. If user play game first time, he/she has able to play only level one and other levels are locked. Other levels will be unlock as how user win that level. Each level display three stars related to marks percentage obtained by user.

Next User clicks level and goes to the Quiz view screen. It has questions and it’s answers. Each question has time and displays it with each question. I already made admin panel for upload questions to firebase and that admin panel has features for upload all data about each game level question. After user clicks an answer then it will come next question. This process will continue until end of all questions in that level. In final step will calculate user’s total marks and will save it in firebase with it’s level and display whether if user pass or fail. If user pass the level, can go to next level but user fail the level, must try again that level. After click “next level” or “try again” button again user will go to game level screen. Now, user can look three stars in each level which are completed by user. That three stars displayed related to percentage of marks obtained by user for that level. User can complete all game levels in this game like that.

I attached my GitHub repo link below. Anyone who is interested in making an android app using ionic will be helped to refer for their practice. In this article, I explained special topics related to my app. In this journey, I used a lot of documentations which are on their official sites. I linked all of these websites beginning of this article.

Thank You.

Read more

Add a comment

What is your view?

Send

Related posts:

I Think I Thought I Wanted That

Somewhere on Earth a customer thought of something they wanted. An algorithm had calculated within 99.9% certainty that the customer would purchase the product given the choice, but that was…

7 Simple Ways You Can Improve Your Accessibility Testing

One of the benefits of my role within organizations is the ability to observe teams (and their operations) from both a “boots on the ground” and 50,000 foot view. I empathize with the challenges…

Thinking how to live is top priority in the age of AI.

We can meet up with our friends without missing the time or the place by using email on our smartphone. We think that is very natural for our lives but if you are over forty, you might remember at…