• View

How to Create Dialogs from an Admin Application/panel to the User app using Firebase Database

Firebase cloud messaging in Sketchware, Notifications in Sketchware

Hello everyone, today I am going to teach you all how to create dialog from an Admin App to the User app through Firebase Database using Sketchware.
This is a time saving and easy method to pass information to your users instantly.



Linking your Sketchware Project to Firebase

 This is the first thing to do before any other thing else cause the Project needs to be linked to firebase before you can use any Firebase service.
 So I'll just summarize the whole process of linking your Sketchware app to firebase.

  1. Create a new Sketchware project and and take note of the package name, login to your Firebase Console and create a new project and then a new app. While creating a new app, make sure the package name matches your newly created Sketchware project's package name.
  2. After creating the app in Firebase, while the verification is going on, minimize and move to Sketchware and open that newly created project then click on the Drawer or the three dots in the left, then click on Library > Firebase > Link project to Firebase > Open Firebase Console.
  3. Now back in the Firebase Console, Go to app settings and copy your project ID, App ID and web API key, then minimize back to Sketchware and paste them in the required areas and save. Then your app is successfully linked to Firebase.
After successfully linking your project to Firebase, create another project which will be the Admin Panel and  change the package name to be the same with user's app. Open the project's Library and enable Firebase by just putting the exact same details of the user's app.
NOTE: Creating dialogs from an Admin App to the User app will only work if :
  • The package name of both Apps are the same.
  • The app is combined to be one app in Firebase by adding the same project ID, app ID and web API key to both projects.
READ ALSO: How to Remove Navigation Bar in your Site for to Make you Webview apps look more unique

Programming the User/Receiver application in Sketchware

   Now in the User/Receiver application, what do we do first ?  Remember this is just a tutorial project we are not going to do any thing except from what are currently teaching, this is to avoid mixing things that'll get confused.
 First we add a dialog and Firebase Database component to the project, make the Firebase Database , then we create a dialog in the 'onChildAdded' event that comes with Firebase Database component.
 Now, this is very easy all we have to do is create dialog with specific keys which their values will be displayed when the Child is added. First create a map variable and put these blocks you see in the picture below. 

Firebase cloud messaging in Sketchware
OneSignal in Sketchware, How to use OneSignal in Sketchware
We still added Shared Preferences to prevent
the Dialogs from showing more than once a to a user.

Programming the Admin Application

 Now we are going to program the Admin Panel/Broadcaster, you should know you are the only one to use this app so you don't necessarily need to design it.

 READ ALSO: How to make a simple Quiz App within minutes ( Beginners Guide )

  In the Admin App, we will drop two "EditText" and then a button, the two EditText widget is for the key and value and then the Button will be used to send them to the Database. Then add a Firebase Database component to the app and 
 After you have dropped the EditText and button, move the Logic area > View > select the button ID ( ex. button1 ) and create a clickListener for it. Put these blocks in the screenshot below.


Then for the "delete" button add this
       

How to use the Admin and User applications to produce great results

  Now the app is up and running,  using the app is very easy but all you have to do is always change the value of the key: "code" anytime you are making a dialog.

 sample admin panel

   And then anytime you want to create a dialog, here is how you do it.

  1. Open your Admin app
  2. If you have sent a dialog before, you'll delete the "start" value.
  3. Set your unique code,:key: code, value: //your unique code ( it should always be different)
  4. Set your Dialog title: key: title, value: //your dialog title
  5. Set your Dialog message: key: message: value: //your message
  6. Send your dialog: key: start , value: yes
 And thats all, you finally have a panel for broadcasting message easily. 
If you still face any issues while doing this, just comment below or contact us and you'll get help in less that 3 hours. Thanks for reading, I hope it helps, if it did, comment below, Have a nice day :-).

Comments

Archive

Contact Form

Send