Firebase Database - Simple CRUD operations in AppGyver

Before proceeding with the following steps, maintain and initialize the Firebase setup in the Appgyver project. Check out the post if you don't have any idea or need to refresh. I am going to use the same application created during the Firebase initialization post.

Creation of a database in Firebase

• Login to your Firebase console and open your project. On the left hand side, under Build, click on Firestore Database.

• As there is no database available for this project yet, the below screen will be displayed, click on create database.

• A popup will be displayed to setup the security rules for the database we are going to create. I am going to choose test mode and click next for now, as we are not focusing on security in this post. In the location option, click the Enable button.

• The Firestore setup will be done in a few seconds and the below page will appear to create our collection(database).

• Click on start collection and a popup will display to get the database name and one entry to be stored in it.

• I am planning to store details of the users. So, providing "Users" as a collection name.

• My user collections include first name, last name, and email address. So I am providing the same as one dummy entry. For document ID, you can click on Auto-Id.

• That's it. We have created a new database named Users and added one entry to it.

Data Resources configuration in AppGyver

• Create a new project in Appgyver and initialize the firebase after maintaining the firebase details in connector

• Go to Data in the toolbar, then in the data resources tab, click on ADD DATA RESOURCE and choose the Google Firebase/Cloud Firebase option.

• Pop will be displayed to mention the firebase project and collection details from where the data needs to be fetched and modified.

Data resource name can be any name for now lets use Firebase Project name

• The Resource Schema is the schema of the collection created in Firebase. Document means an id which will be auto-populated. Now we just need to add the fields of the document. So, adding three new properties named Email, FirstName and LastName as created in Firebase.

• Click on SAVE DATA RESOURCE. If there are any issues with Firebase initialization or spaces in property, then the SAVE DATA RESOURCE button won't be active. So please check the setup again if it's not working.

Data Variable in AppGyver

• Now that the data configuration is complete, we need to create a variable connected to the data resource for performing operations.

• Go to the variable page and then in the DATA VARIABLE tab, click on ADD DATA VARIABLE.

• Configured data resource will be displayed below, Select it to save the data variable without making any changes.

Display Collection data records in the AppGyver

• On the empty page, create a card component with one title to display email and two text fields to display the first and last names of the users from the data resource.

• Choose data variable demo-app1 as the binding to Repeat with the container component's property.

• Set the content property of the Title component to email from the current iteration of the data variable. Click on content binding -> Select binding type as Data item in repeat -> Select current which is default of repeat as property -> data properties of the resource will be displayed -> Select Email and click SAVE.

• In a similar way, set the content property of two text components to first name and last name.

• Save the changes and head over to preview the app. You will be able to see the data we stored in Firebase appear in the AppGyver application.

Create new records

• Create a new page named Add record with three input parameters with the respective keys of documents, such as Email, First name and last name, then add a button named Add record.

• Create a three page variable for storing input details.

• Bind the input components with the page variables created.

• Add logic to create a new record in the Firebase collection when the Add Record button is clicked using flow logic Create record.

• Add a back button to navigate back to the initial page of the application.

• On the initial page of the application, add a new button to navigate to the create record page above the data resource containers.

• We have completed the application to create new records. Check how the app works in preview.

Read single records

• Create a new page named Display Record and add one page parameter named Id.

• Bind page parameter to data variable id as input and add data variable type as a single data record.

• Make changes to the page to display the data variable details using formulas.

 "Email Id is " + data["demo-app1"].Email 
 "First Name is " + data["demo-app1"].FirstName
 "Last Name is " + data["demo-app1"].LastName 

• Add the Back button to navigate back to the root page.

• In root page, on container component tap add logic to open page Display Record passing the page parameter id from current.id

• Let us see how the Read records work in the preview mode.

Update single record

• Create a new page named Update Record with 3 input parameters for Email, First name and last name along with an update and back button similar to the Add Record page.

• For read records, we used page parameters to send details from one page to another. So, Let's see how to use application variables to share data between pages.

• Create an object with four fields such as Id, Email, First Name and Last Name.

• Bind the input components to their respective app variable properties.

• Add flow logic to update records when the button is clicked using the application variables.

• Toast the result of the update record flow function and if the update is successful, return back to the root page using Navigate back.

• Add one icon to the item container for setting the update variables and opening the update page.

• Let us see how the update logic works in preview mode.

Delete single record

• Add another icon below the change icon for deleting the record.

• Add the delete record flow logic which gets triggered when the delete icon is tapped.

• Suppose if you execute the application and delete the document, the record will be deleted from Firebase collections, but on the root page it will not be updated as the Data Variable will not have all the entries. So we need to update the data variable by getting the current collection data.

• Let us see how the deletion logic works in the preview application mode.

I hope you understood the CRUD operations. Suggestions and feedback are much appreciated. It encourages me to improve and share more content based on my experience with no code tools. If you have any doubts or queries, drop them in the comment section.