Mobile Terminal using Flutter, Firestore and StreamBuilder

Terminal is an interface into which we can type the command and that command will execute the program behind the scene and displays the text output of the command. When we are dealing with the Linux operating systems like RHEL, CentOS, Arch Linux, Ubuntu, etc we often use a terminal that is the CLI(Command Line Interface) program. There are two types of terminals, viz, one is the GUI which is Graphical User Interface and another one is a CLI which is Command Line Interface. In this project, I will implement the Command Line Interface for the mobile phone which you might not yet hear of.

This project is mainly focused on creating the CLI for mobile and it will store the output of every command on the cloud storage which is the firestore.

So, let’s begin…

Step 1: Make the Terminal Background Color Black

As we know the terminal is consists of the minimum UI, this mobile terminal will mostly consist of the back screen except for the text that we type the command and the command output.

First of all, I will make the background color black for the entire canvas.

Step 2: Create a prompt

A command prompt also referred to simply as a prompt, is a short text message at the start of the command line on a command-line interface. This message gives the general information about the device name, the username of the logged-in user, and the current directory in which the command will execute.

The prompt of this terminal has the format [hostname]:[current_directory] [user]$

Here the hostname is mac, the current directory is ~ and the user name is ankush. At the end of this prompt, there is one cursor that will show where we can enter the command. The thing that allows us to input the text is known as STDIN(standard input).

When we input the command and press the enter the command will be sent to the remote server. After that this command will execute on the remote server and send the output back.

Step 3: Create the remote server to execute the commands

I will create the EC2 instance on the AWS and install the httpd program in that instance. The httpd is the webserver that provides a way to run the programs in other programming languages using the concept of the CGI(Command Gateway Interface).

Run the following command in the EC2 instance to install and start the httpd webserver.

$ yum install httpd$ systemctl start httpd$ systemctl enable httpd

After the successful installation of the httpd program, we can see the directory /var/www/cgi-bin. This is the directory in which we will place the code that will run the command that is coming from the mobile terminal application and return the output of the command to the mobile terminal app.

For writing this code, I’m using Python3 language. Make sure python3 is installed or you can install python3 with the following command:

$ yum install python3

Create the file named bash.py and add the following code to it:

This code will get the command to execute from the HTTP request and executes that command. Finally, it will print the output of the command.

Step 4: Create TextField to input the command

I will create the TextFormField that will accept the text command. This text form field provides one function which is the onFieldSubmit. This will automatically capture the enter button pressed event and execute the code inside the onFieldSubmit function.

As I’m using the http method, I have to add the http package dependency on the pubspec.yaml file.

Run the pub get command to get the package. After that import the http library in the mobile terminal app.

I will write the code below in this onFieldSubmit function.

This function will take the text input(command) and stores it in the commandName. This commandName will be sent to the remote server where it will get the value of the commandName through CGI(Common Gateway Interface). After that, it will get the output of the command from the remote server and stores this output in the result variable. Actual output is the body of the received http response. So, the output of the command is stored in the data variable.

Step 5: Display the Command Output

When the command executes on the remote server, it will send the command output back to the mobile device. Using the http get method we can get this output and will display this output on the screen after the CLI prompt.

To display the output in a well-formatted manner, I’m using a ListView widget as follows.

Step 6: Store the command output in the firestore

First of all, we need to create the firebase project and add the firebase to our mobile terminal app. For creating the flutter app refer to this guide.

Add the following dependencies in the pubpsec.yaml file.

And run the pub get command to download these packages.

After that import the required packages in the mobile terminal app.

To store the output in the firestore we will create one collection named terminal_outputs. And store the command name, command output, and the timestamp of the command execution in the firestore. For this, we just have to add the following code in the onFieldSubmit function of the TextFormField.

The firestore collection will look like this.

Step 7: Test the app

Finally, our app is ready and it can now execute the command on the remote server and store the output of the commands to the firestore.

The mobile terminal app is created which is fully functional and capable to run any command on the remote server. Also, this app stores the command output in the firestore and this will maintain the history of the executed commands.

Step 8: 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.

The code above will create the history button and when the user presses this button, he will be redirected to the new screen that will display the commands history in real-time.

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.

Step 9: Run the app

Finally, I will run the app and verify if it will store the command output in the firestore and fetch and display the command output correctly to the Command History screen.

Finally, this app is working as I had expected.

For any help or suggestions connect with me on Twitter at @TheNameIsAnkush or find me on LinkedIn.