Monitoring water level indicator using mobile app

Question

I'm trying to make an app for monitoring water level using flutter on android studio (hedge hog). What I understand is that the work I am doing lies in an IoT category. I have made an UI for water level indicator. I also know about blynk app. Point is I want to make an app just like blynk that resembles my UI that I made, so that I can monitor water level. I have also done work on esp module. i have controlled Leds and relays using Esp module. The UI of mobile app has different types of features, but what I want to achieve is how to recieve/send data between esp and mobile app. One thing I know that I have to use an app like blynk app, but I don't understand how to make. 
 what I understand is listed below: Basic knowledge of Flutter so that I can make a UI. Understanding of Esp module to control Leds and relays 
 Following is my code of UI 
 
 import 'package:flutter/material.dart';

class RowWithTwoColumns extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 home: Scaffold(
 body: Container(
 child: Row(
 mainAxisAlignment: MainAxisAlignment.spaceAround,
 children: [
 Column(
 mainAxisAlignment: MainAxisAlignment.start,
 children: [
 Transform.translate(
 offset: const Offset(20, 40),
 child:
 //Image.asset('assets/images/blue_1.png',width: 30,),),
 Image.asset(
 'assets/images/blue_1.png',
 width: 30,
 ),
 ),
 Transform.translate(
 offset: const Offset(20, 80),
 child: Image.asset(
 'assets/images/green.png',
 width: 30,
 ),
 ),
 Transform.translate(
 offset: const Offset(20, 120),
 child: Image.asset(
 'assets/images/green.png',
 width: 30,
 ),
 ),
 Transform.translate(
 offset: const Offset(20, 160),
 child: Image.asset(
 'assets/images/green.png',
 width: 30,
 ),
 ),
 Transform.translate(
 offset: const Offset(20, 200),
 child: Image.asset(
 'assets/images/red_1.png',
 width: 30,
 ),
 ),
 Transform.translate(
 offset: const Offset(20, 240),
 child: Image.asset(
 'assets/images/red_1.png',
 width: 30,
 ),
 ),
 Transform.translate(
 offset: const Offset(20, 280),
 child: Image.asset(
 'assets/images/red_1.png',
 width: 30,
 ),
 ),
 Transform.translate(
 offset: const Offset(20, 300),
 child: Text(
 'WATER
LEVEL',
 textAlign: TextAlign.center,
 ),
 ),
 ],
 ),
 Column(
 mainAxisAlignment: MainAxisAlignment.start,
 children: [
 Transform.translate(
 offset: const Offset(20, 40),
 child: Text(
 '100 %',
 style: TextStyle(fontSize: 20),
 ),
 ),
 Transform.translate(
 offset: const Offset(20, 80),
 child: Text(
 '90 %',
 style: TextStyle(fontSize: 20),
 ),
 ),
 Transform.translate(
 offset: const Offset(20, 123),
 child: Text(
 '75 %',
 style: TextStyle(fontSize: 20),
 ),
 ),
 Transform.translate(
 offset: const Offset(20, 163),
 child: Text(
 '60 %',
 style: TextStyle(fontSize: 20),
 ),
 ),
 Transform.translate(
 offset: const Offset(20, 204),
 child: Text(
 '45 %',
 style: TextStyle(fontSize: 20),
 ),
 ),
 Transform.translate(
 offset: const Offset(20, 243),
 child: Text(
 '30 %',
 style: TextStyle(fontSize: 20),
 ),
 ),
 Transform.translate(
 offset: const Offset(20, 285),
 child: Text(
 '15 %',
 style: TextStyle(fontSize: 20),
 ),
 ),
 ],
 ),
 Column(mainAxisAlignment: MainAxisAlignment.start, children: [
 Transform.translate(
 offset: const Offset(0, 32),
 child: SwitchScreen(),
 ),
 Transform.translate(
 offset: const Offset(0, 55),
 child: SwitchScreen(),
 ),
 Transform.translate(
 offset: const Offset(0, 75),
 child: SwitchScreen(),
 ),
 Transform.translate(
 offset: const Offset(0, 98),
 child: SwitchScreen(),
 ),
 Transform.translate(
 offset: const Offset(0, 120),
 child: SwitchScreen(),
 ),
 Transform.translate(
 offset: const Offset(0, 137),
 child: SwitchScreen(),
 ),
 Transform.translate(
 offset: const Offset(0, 162),
 child: SwitchScreen(),
 ),
 Transform.translate(
 offset: const Offset(0, 175),
 child: Text(
 'ON 
 NOTIFY',
 textAlign: TextAlign.center,
 ),
 ),
 ]),
 Column(mainAxisAlignment: MainAxisAlignment.start, children: [
 Transform.translate(
 offset: const Offset(0, 32),
 child: SwitchScreen(),
 ),
 Transform.translate(
 offset: const Offset(0, 55),
 child: SwitchScreen(),
 ),
 Transform.translate(
 offset: const Offset(0, 75),
 child: SwitchScreen(),
 ),
 Transform.translate(
 offset: const Offset(0, 98),
 child: SwitchScreen(),
 ),
 Transform.translate(
 offset: const Offset(0, 120),
 child: SwitchScreen(),
 ),
 Transform.translate(
 offset: const Offset(0, 137),
 child: SwitchScreen(),
 ),
 Transform.translate(
 offset: const Offset(0, 162),
 child: SwitchScreen(),
 ),
 Transform.translate(
 offset: const Offset(0, 175),
 child: Text(
 'OFF 
 NOTIFY',
 textAlign: TextAlign.center,
 ),
 ),
 ]),
 ],
 ),
 ),
 appBar: AppBar(
 title: Text(
 'Water Level Indicator',
 style: TextStyle(color: Colors.white),
 ),
 backgroundColor: Colors.blueAccent,
 centerTitle: true,
 )),
 );
 }
}

class SwitchScreen extends StatefulWidget {
 @override
 SwitchClass createState() => new SwitchClass();
}
class SwitchClass extends State {
 bool isSwitched = false;

 void toggleSwitch(bool value) {
 if (isSwitched == false) {
 setState(() {
 isSwitched = true;
 });
 } else {
 setState(() {
 isSwitched = false;
 });
 }
 }
 @override
 Widget build(BuildContext context) {
 return Column(mainAxisAlignment: MainAxisAlignment.center, children: [
 Transform.scale(
 scale: 1,
 child: Switch(
 onChanged: toggleSwitch,
 value: isSwitched,
 )),
 ]);
 }
} Image of my UI 
 
 I have tried to get an idea of creating alternative of blynk app using different platforms including the following tutorial whose link I'm sharing but since I'm beginner in esp and cloud that's why I found it difficult to grasp. https://www.instructables.com/Build-Your-Own-IoT-Platform-Using-Nodejs-and-ESP82/ 
 If any of the respected member could give me a line of action so I would be glad

shabaz · Answer

Hi, 
 If you're after an IoT solution, then a key bit that's currently missing is the cloud portion. Ordinarily, the ESP32 would be programmed to transmit the water level to an IoT platform in the cloud, which will store it. Then, your mobile app would use HTTP to connect and retrieve the desired information from that cloud. 
 If you want that route, then you'd need to decide on an IoT platform and read up on it (each will be different) and look for examples for it, since the popular ones will most likely have some example code already (although it can often be old code that may need tweaks). Two of the most popular ones to check out are AWS IoT and Azure IoT. There are various other less-widespread ones such as Blynk and Arduino IoT (which most likely are using AWS or Azure underneath anyway), some of which are hobby ones, which may (almost certainly) cost more in the long term if you're expecting to connect many devices, but will be (sometimes) easier to use (I have not tried them) but less flexible. Most platforms are free (sometimes indefinitely) for one or two devices. 
 If you are instead just seeking to directly establish some sort of point-to-point connection with your ESP32 (i.e. no cloud), then there's no one method as such, it is really up to you, depending on what you're comfortable coding. If you're using WiFi with the ESP32 then one option could be to make the ESP32 act as a HTTP server. Then, your mobile app simply needs to make a HTTP request. You'd need to figure out the detail (e.g. how the ESP32 is configured with the WiFi credentials etc), and you could look at other existing projects to see some solutions. Another option is to use Bluetooth (BLE), in which case one implementation would involve the ESP32 being configured to act as a 'BLE Peripheral' sending out advertisements containing the water level data, which your mobile app would read; you'd need to seek out BLE example code for the app platform you're using, since the API will be different for each one. If you're using Android Studio to code your app then you can just google for it, the Android Studio documentation for BLE already contains code snippets so that's a start, but you'll need to read up a bit on BLE to understand how data is organised and transferred. A key way of figuring it out before writing any app code, is to use an existing BLE exploration type of app, such as 'LightBlue' for Android (available in the Play store). One you are able to retrieve data using that app, then you'd work on your app, otherwise you'd be flying blind.

Monitoring water level indicator using mobile app

Top Replies