Flutter IntegrationWith Firebase’s Firestore, StreamBuilder, And Running Any Linux Command Using API
This blog explains how to integrating Linux API with Firebase’s firestore using Flutter. In this integration, any Linux command will be executed using Flutter App which will fetch the command output from Linux Webserver & store the output at the Firestore. The flutter app developed will also have the functionality to retrieve the data from the Firestore and usage of StreamBuilder to retrieve and save data.
Steps to be followed :
Step 1: For this task, we have first created an app with the project and organization name using the command prompt.
Go to your flutter folder using the command line and use the command
flutter create yourappname
2. For integrating flutter with the firebase.
- Go to https://firebase.google.com/
- Click on the “Go to console” & then you will be landed on the Firebase homepage. Click on the button given below to add one project.
- After that enter your project name as and follow the further steps to set up the project.
- After the project creation, you will be landed on a page as shown below.
- Now click on the Android Icon shown on the above page and follow the complete process, it will guide you to set up or connect your Flutter App to Firestore.
3. Creating API
The API creation code is shown below. (This code will create one API which will help to run the Linux Commands using a webserver).
Note: For this API code to work, the Apache webserver(httpd) has to be installed on your machine.
Write this code in a file, save it with “.py” extension in the folder “/var/www/cgi-bin”.
Make this file executable by running the command “chmod +x <filename>”.
4. Creating the database in firebase using cloud firestore.
Click on create database icon.
Select the test mode option.
Enable the data-center region and give the project name.
5. For creating the Linux command app.
The packages that have been installed for this app are
cupertino_icons: ^0.1.3
HTTP: ^0.12.2
cloud_firestore: ^0.16.0
firebase_core: ^0.7.0
firebase_auth: ^0.20.0+1
- After saving these files restart the ide.
- Now to connect our app with the firebase we need to go to the WebUI first and then click on the android icon there.
- Give the organization name which you used to connect to the firebase. You can go to the your_appfolder->android folder->app-> build.gradle.
- Download the JSON file and put it in the folder as instructed.
- Make changes in both the Gradle files as instructed.
- After completing the above-mentioned steps we can now run our app.
- You can refer to my GitHub repository for code.
- Following the code the app will be looking like this:
6: Fetch the commands history from firestore and display it in real-time.
To fetch and show the command history I will create a new screen. For that, I will add the history button in the AppBar. When the user presses this button, this app will show the history of the commands and their output.
To create a new screen, I will create a new file named terminal_history.dart and start writing the code to display the history.
To fetch and display the command output, I will use the StreamBuilder widget and with the use of screenshots, I will display the commands history in real-time without refreshing the page. It will first fetch all of the data uploaded to the firestore and for the widget for each data. After that, these widgets will be stored in the list. Finally, StreamBuilder will go through each Widget in the list and build the screen that will display the command and the command output fetched from the firestore in real-time.
The outputs of the commands which have been run on the app will get stored in Firestore as shown below.
I hope this blog helps everyone in making the desired app. Thank you for reading.
