Hướng dẫn tạo máy chủ web với ESP32 và kết nối dữ liệu trong Flutter

Trong đoạn mã này, chúng ta sẽ xem xét cách mà ESP32 có thể được lập trình để hoạt động như một máy chủ web đơn giản. Đầu tiên là việc thiết lập kết nối WiFi; bạn cần thay thế thông tin đăng nhập mạng với tên SSID và mật khẩu của mình. Sau đó, một biến `ledPin` được định nghĩa cho chân GPIO mà LED sẽ được điều khiển.

Chúng ta sử dụng thư viện WebServer để tạo ra một máy chủ HTTP lắng nghe trên cổng 80. Trong hàm `setup()`, chương trình bắt đầu bằng cách in ra thông tin về quá trình kết nối WiFi và đợi cho đến khi nó thành công. Khi đã kết nối, IP của ESP32 sẽ được hiển thị trên Serial Monitor.

Các đường dẫn URL khác nhau cũng được cấu hình tại đây: `/data` nhận yêu cầu GET và trả về một thông điệp JSON, trong khi `/morse` lắng nghe các yêu cầu POST chứa thông điệp văn bản để chuyển đổi thành mã Morse và nhấp nháy LED tương ứng.

Hàm `loop()` rất đơn giản; nó chỉ cần liên tục gọi phương thức `handleClient()` từ đối tượng server để xử lý các yêu cầu từ khách hàng.

Khi có yêu cầu tới đường dẫn `/data`, hàm `handleData()` sẽ tạo ra một JSON với nội dung "Hello from ESP32" và gửi lại cho client. Còn với đường dẫn `/morse`, hàm `handleMorse()` nhận nội dung từ client, sau đó chuyển đổi từng ký tự sang mã Morse, thực hiện việc nhấp nháy LED dựa theo ký tự đó với thời gian tương ứng cho dấu chấm và dấu gạch ngang.

Nếu muốn thêm vào sự linh hoạt trong giao tiếp giữa ứng dụng Flutter và ESP32, bạn có thể sử dụng thư viện như `http` trong Flutter để gửi hoặc nhận dữ liệu JSON qua HTTP/RESTful API mà chúng ta đã thiết lập ở đây. Điều này không chỉ giúp tăng tính tùy chỉnh mà còn mở rộng khả năng giao tiếp giữa hai nền tảng một cách dễ dàng hơn.

### Tạo ứng dụng Flutter

Tiếp theo, chúng ta sẽ tạo một ứng dụng Flutter để lấy/gửi dữ liệu từ/đến máy chủ web ESP32 và hiển thị nó trong ứng dụng. Chúng ta sẽ sử dụng gói `http` để thực hiện yêu cầu HTTP GET đến điểm cuối `/data` và phân tích phản hồi JSON.

> Lưu ý rằng bạn cần lấy địa chỉ IP của ESP32 trước khi thực hiện cuộc gọi. Bạn có thể tìm thấy nó từ máy in nối tiếp, router wifi nhà bạn hoặc bằng các ứng dụng quét mạng. Trong trường hợp của tôi, địa chỉ là 192.168.0.5.

Dưới đây là đoạn mã Flutter để lấy/gửi dữ liệu:

import 'dart:developer';

import 'package:flutter/material.dart';

import 'package:http/http.dart' as http;

import 'dart:convert';



void main() => runApp(const MyApp());



class MyApp extends StatelessWidget {

  const MyApp({Key? key}) : super(key: key);



  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Demo Gọi API ESP32',

      theme: ThemeData(

        primarySwatch: Colors.blue,

      ),

      home: const MyHomePage(),

    );

  }

}



class MyHomePage extends StatefulWidget {

  const MyHomePage({Key? key}) : super(key: key);



  @override

  _MyHomePageState createState() => _MyHomePageState();

}



class _MyHomePageState extends State<MyHomePage> {

  bool _isLoading = false;

  String _response = '';



  Future<void> fetchData() async {

    setState(() {

      _isLoading = true;

    });

    

    try {

      final response = await http.get(

        Uri.parse('http://192.168.0.5/data'),

      );

      

      log("Đây là phản hồi nhận được: $response");

      

      if (response.statusCode == 200) {

        setState(() {

          _response = json.decode(response.body)['message'];

          _isLoading = false;

        });

      } else {

        setState(() {

          _response = 'Không thể lấy dữ liệu';

          _isLoading = false;

        });

      }

    } catch (e) {

      log("", error: e, name: "lỗi");

      

      setState(() {

        _response = 'Không thể lấy dữ liệu';

        _isLoading = false;

      });

    }



    // Đảm bảo không giữ trạng thái loading nếu đã xử lý xong.

    if (_isLoading) { 

       setState(() { 

           _isLoading = false; 

       }); 

   }

   

   }



   Future<void> sendMorseRequest(String message) async { 

       setState(() { 

           _isLoading = true; 

       }); 

        

       try { 

           final response = await http.post( 

               Uri.parse('http://192.168.0.5/morse'),     

               body: {'message': message},     

           ); 

        

           log("Đây là phản hồi Morse nhận được: $response"); 

        

           if (response.statusCode == 200) {             

               setState(() {             

                   _response = 'LED đã nhấp nháy theo mã Morse';            

                   _isLoading = false;         

               });         

            } else {             

                setState(() {                

                    _response= 'Gửi yêu cầu Morse thất bại';                 

                    _isLoading=false;              

                });           

            }        

         } catch (e) {            

             log("", error:e,name:"lỗi");           

             setState((){               

                 _response='Gửi yêu cầu Morse thất bại';               

                 //_loading=false;                     

                  });                    

              }       

     }

  

   @override

   Widget build(BuildContext context) {



     return Scaffold(

         appBar: AppBar(

         title: const Text('Demo Gọi API'),

         ),

         body: Center(

             child: Column(

                 mainAxisAlignment:

                     MainAxisAlignment.center,

                 children:<Widget>[

                     ElevatedButton(

                         onPressed:

                             (){fetchData();},

                         child:

                             const Text('Lấy Dữ Liệu'),

                     ),

                     const SizedBox(height:

                         20),

                     ElevatedButton(onPressed:

                         (){

                              sendMorseRequest('hello');

                          },

                          child:

                               const Text('Gửi Yêu Cầu Morse'),

                      ),

                      const SizedBox(height:

                          20),

                      if(_isLoading)

                           const CircularProgressIndicator()

                        else if (_response.isNotEmpty)

                            Text (

                                'Phản hồi : $_response',

                                style :

                                    const TextStyle(fontSize :

                                        20),),

                  ],

              )),

     );   

 }}