:firebase: Integrating Firebase in Appzard - Configuration

Hello everyone!
I’ll be publishing a series of guides explaining the blocks and the usage of appzard different components. And since the firebase components are one of the most used components for authentication, database, etc… and it could be a bit confusing for new users. So I decided to start with.
In the first guide about firebase components, we will learn how to configure firebase in an appzard app so you can get to compile the app and use it without errors or crashes.

#1 Creating A Firebase Project

  • The next screen will be titled " Google Analytics
    for your Firebase project", you don’t have to change anything - just click Continue.

  • In the next screen you will be asked to select the google analytics account, please choose the ‘Default Account For Firebase’ and click continue.

  • After choosing the google accounts, press the ‘Create Project’ button and wait until the project is created. You have now created your firebase project! Now click ‘Continue’ to open the project’s page.

#2 Adding Appzard App To Firebase

  • On the initial page you are redirected to after creating a new firebase project, you will be prompted to add firebase to your app, select the android icon :android: to add your appzard app to firebase.

  • You will be asked in the first step of adding firebase to your app to input the package name, app name, and SHA1 certificate of your app.
    **Package Name: ** Your app’s package name is one of the most unique identifiers of your app. All appzard apps by default have a package name like that: com.appzard.youremail.name. So for example, if your email is test123@gmail.com and your app name is myapp. So the default package name would be com.appzard.test123.myapp. Also if you choose to use a custom package by modifying the Screen1 PackageName property, you should use the package you entered in that property.
    NOTE: The package name must be entered correctly, otherwise, firebase wouldn’t be able to be connected to your app
  • App Name (Nick Name): This could be set to whatever name you want for the app. It will be displayed in the firebase console, and it doesn’t have to be the same name for your appzard project.
  • Debug signing certificate SHA1: This is an optional setting that you don’t have to enter every time you integrate firebase into your app. But if you want to implement Google SignIn or Phone Number Sign In through firebase authentication, you must fill this setting. You could find your app’s SHA1 fingerprint in Appzard’s workspace by clicking on the account icon in the top bar and selecting ‘KeyStore Information’. Its format is as follows: DD:73:02:61:03:DB:80:DD.... You could edit this later even if you didn’t supply it while creating the app. You must have built any app at least once to be able to get the SHA1 fingerprint.
    After inputting all the required settings, click ‘Register App’.

  • The next step is one of the most important steps which is to download the google-services.json file.
    The google-services.json file contains all the configurations for your firebase project. It must be imported to appzard for firebase components to work.

Now, click next, which will let you go to the next step which is related to adding firebase SDK to android studio, you could skip this step. And click ‘Continue to console’.
You’ve finished all of the basic configurations of firebase in the firebase console! You could now go to Appzard Workspace to continue the integration.

#3 Integrating Firebase Into Appzard’s Workspace

  • First, you must import the google-services.json file we downloaded earlier to the app’s assets.
    Very Important: you must download the firebase config file using the same google-services.json. Names such as firebase-services (1).json wouldn’t be accepted and would fail to initialize firebase.
  • Second, you must add the Firebase Core component to your app, which includes all the basic libraries of firebase and is used to initialize firebase. This must be imported when using any of the firebase components.

That’s it! You have now configured firebase for your appzard and you’re ready to start using any of the different firebase components in appzard.
Any questions and answers are welcome and should be asked in this thread or on a new topic. If anything requires further clarification, please let me know.
More guides would be published for the specific details of integrating a firebase component such as firebase authentication or firebase storage.
Thanks,
Mohamed Tamer

5 Likes

Nice guide @MohamedTamer :wink:

3 Likes

Now, you are required to add google-services.json in Assets for FirebaseDB component also.

1 Like

NOTE: Before you export your google-services.json file, you must also enable Realtime Database for your Firebase project. This is to prevent bugs that your app won’t compile, no matter what service you are using.

  • In the navigation bar, click on Realtime Database.

  • Create a database when a new UI appears and a popup will appear for you to configure your database.

    • Enable us-central for the location of your database.

    • Make sure your project is in Locked mode.

After the database is set up, enable read and write for your database.

3 Likes

Google signin app crash

Please show your relevant blocks if you would like to report a potential bug.

i have post here