Integrating Firebase & Linux Commands (API) in Flutter

This blog explains how to integrating Linux API with Firebase 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.

Pre-Requisites:

1. Knowledge of Flutter
2. Knowledge of Authentication and Firestore in Firebase
3. Knowledge of cgi and web-server in Linux
4. How to query through url….

Here we go:

Step 1: Create a flutter project and link it with your Firebase account. I have already discussed on how to connect your app to Firebase console.LINK →https://firebase.google.com/

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

Step 3: After that enter your project name as shown below, and follow the further steps to set up the project.

After the project creation, you will be landed on a page as shown below.

Step 4: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. For completion of this step, create one sample flutter app and follow the complete process till here.

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, Apache webserver(httpd) has to be installed in your machine. To do the same, either follow the standard procedure or use my Ansible role to configure it if you have some knowledge of Ansible & using RedHat Linux.

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>”.

Creating the Flutter App!

import ‘package:firebase_core/firebase_core.dart’;
import ‘package:cloud_firestore/cloud_firestore.dart’;
import ‘package:flutter/material.dart’;
import ‘package:http/http.dart’ as http;

void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();

runApp(MyApp());
}

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
var com;
var data;
var out;
@override
Widget build(BuildContext context) {
var fsconnect = FirebaseFirestore.instance;

myfbget() async {
var c = await fsconnect.collection(“mayukh”).get();
for (var i in c.docs) {
print(i.data());
}
}

myapiget(q) async {
var url = “http://192.168.43.206/cgi-bin/web.py?x=$q";
var r = await http.get(url);
// var data = r.body;
setState(() {
data = r.body;
});
}

//var wid = MediaQuery.of(this.context).size.width;
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text(“😍YA YA LINUX APP😍”),
leading: Icon(Icons.apps),
),
body: Center(
child: Container(
margin: EdgeInsets.all(50),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
topRight: Radius.circular(50),
bottomLeft: Radius.circular(50),
bottomRight: Radius.circular(50)),
boxShadow: [
BoxShadow(
color: Colors.blueGrey.withOpacity(1),
spreadRadius: 30,
blurRadius: 20,
offset: Offset(0, 3),
),
],
),
child: Column(
children: <Widget>[
SizedBox(
height: 30,
),
TextField(
onChanged: (x) {
com = x;
},
autocorrect: false,
decoration: InputDecoration(
fillColor: Colors.white,
border: OutlineInputBorder(),
hintText: “write your LINUX command 🤤🤤 “,
prefixIcon: Icon(Icons.arrow_forward)),
),
SizedBox(
height: 10,
),
RaisedButton(
child: Text(“Submit”),
color: Colors.orangeAccent,
onPressed: () async {
await myapiget(com);
fsconnect.collection(“mayukh”).add({
‘$com’: ‘$data’,
});
print(‘submitting’);
}),
SizedBox(
height: 10,
),
RaisedButton(
child: Text(“Get”),
color: Colors.orangeAccent,
onPressed: () {
print(“getting”);
try {
out = myfbget();
print(data);
} catch (e) {
print(“error”);
}
}),
SizedBox(
height: 20,
),
Container(
child: Text(
data ?? “fetching data..”,
style: TextStyle(fontSize: 20, color: Colors.redAccent),
),
color: Colors.grey[700],
padding: EdgeInsets.all(4),
alignment: Alignment.center,
width: 250,
),
],
),
),
),
),
);
}
}

Note: For the above code to work, add the following dependencies to your pubspec.yaml file.

cupertino_icons: ^0.1.3
http: ^0.12.2
cloud_firestore:
firebase_core:
firebase_auth:

CODE -> https://github.com/Mayukhborana/flutterfirebaselinux