Integrating Mobile App with Docker!

So, to begin with, go to the CLI of your OS. In this case, I’m using RHEL version 8. Launch Apache web server using :

systemctl start httpd

For the back-end, I’m using Python-CGI as a back-end server. Here’s the code:

Now for the front-end, as the name suggests itself, we’re going to use Flutter for making an app. So, you need to have some basics of dart and for making it executable I’ve used ‘material.dart’. For this, enter the following code to your code:

import 'package:flutter/material.dart

Now, not to make you fall into a maze, let’s see the things I’ve used to build the app instead of showing some messy lines of code.

To start with, make a stateless widget and use the MaterialApp() as a child widget. Inside of that use Scaffold widget and then use container widget in the same pattern.

Inside the container widget, you can use whatever you feel is right according to your requirement. After this, the ‘Home Page’ of your app will be ready. Now, nobody likes an app that only has a home page and nothing else.

So, to make different pages, use the concept of Page Navigation. For that, you can use MaterialPageRoute(). To make this run, use Navigator.push() which will help to reach the next page of the app. You can save the widget tree in a variable to make navigation smoother.

Now, make a button or something of your choice and do the navigation on it. For creating the second page, use:

import 'package:http/http.dart';

This will help to use the Python-CGI code written in the backend server. And for making this package executable add “ http: ^0.13.3 “ to my app dependencies. Here, we’ve created a stateful widget so that anything that comes from the backend and needs to be changed on the fly, can be displayed on the app screen.

On the second page, for the tutorial, keep two TextField() of enter the name and image, button to send the input to the backend, FloatingActionButton() to move back to the home page, and one info icon floating button to give information about Docker. On pressing the “OUTPUT” button the name and image of the container were sent to the backend using the command given below.

Uri.http("192.168.1.7", "/cgi-bin/app1.py", {"x": cmd, "y": name});

Then after the creation of the container with the given name and image, we need to display the confirmation message that came from the backend in the front end I used “$” with the variable in which the message from the backend was saved.

And finally, the purpose of this app was that on clicking the info icon FloatingActionButton(), it can also show the ModalBottomSheet using showModalBottomSheet() and building the sheet using the builder which will show the information regarding “ Integrating Docker with mobile app”.

Let me show you some pictures of the music app that I’ve tried to build with the help of the concept I’ve shown above. Here are the images:

You can play whatever and whichever song you like on the app!

Thank you! Let me know if it helps you anyhow.