So, today I am going to show you two tutorials in one tutorial, one, how can you create a scratch card app using Kodular and second, how can you restrict an user from multiple tasks, that user have to wait for an hour (or a several minute that is set by you) to attempt again for a task.
First of all I have created an app with Login and Signup screens, using Firebase Authentication. If you don’t know how to do so, then click here. Now let’s start main parts.

Home Screen

Design

Here I have create a very simple design, I have dragged some Labels to show user name, user balance etc. After this I have dragged a button for Scratch Card. If clicked on this button it will go to another screen which is Scratch screen. Now, if your user recently scratched (within an hour) then your user will see a notice like this : You can Scratch again after an hour
I have dragged a Firebase Database here to get the Points, Name and Time (for task restriction) values. In the Signup screen the values were inserted, and saved UserID in TinyDB as id, just follow the Signup steps to know more. Now in Home screen, drag a Clock, clock will help you to get the current time and also help to know that is the Time value done or not (i.e. is 1 hour done for an user or not). So in the Clock, just untick Timer Always Fires and untick Timer Enabled.

Blocks

calling all Firebase Values(already stored in Signup screen) on screen initialize
getting values from Firebase

 

you can see it is now calling Time from Firebase to check if the user already did the task on this hour or not, also you can see the Clock Format. This function will work like this : suppose an user scratched a card at 8:20 a.m. then Firebase will store 8 (as we set the pattern as hh) and in the Home screen it will check current time, suppose now it is 10 a.m., so now it will do 10-8 which is not equal to 0 (zero) so, that means the user scratched a scratch card before an hour, so the user can scratch again.

 

Scratch Card Screen

Design

Here just drag a Card View from Layout and set Height and Width as 40 percent and 60 percent, fill background with Deep Orange colour, set Align Horizontal and Align Vertical as Center. Now drag a Canvas from Drawing and Animation into the Card View and set Height and Width as fill parent. Now drag a Label after that, it will show the main Points of the user, it will be a hidden label so untick the Visible. Now drag a Notifier, Firebase Database, Tiny DB and Clock. Here Clock will work for two process, one for Scratch Card, after the users touched the scratch card or the user scratches a little and then leave it then the clock will enabled and after 3 seconds it automatically scratched fully, and another work for Clock is to store the Scratch Time to the Firebase Database to check the user scratch time. So set Clock Timer Interval to 3000 and also untick Timer Always Fires and untick Timer Enabled.

 

Blocks

here Firebase called Points to get the Points of the user, also you can see you have to create intitialize global image to get a Scratch background image which will be Points image, I already uploaded some images to Assets, you will get that files with AIA file

 

also with the Screen Initialize
after the user scratched or touched, it will happen
create a new initialize global variable points, where the point will appear after the user scratch
now it will store the Points to Firebase DB also appears a Notifier
after Notifier’s Ok clicked, it will go back to Home and the user have to wait for an hour to scratch again

 

 

Download

Video Tutorial

 

By Abir

Leave a Reply

Your email address will not be published. Required fields are marked *