スマートフォンアプリを作成してESP32にSSIDやパスワードを設定する場合の手順

スマートフォンアプリを作成してESP32にSSIDやパスワードを設定する場合の手順は以下の通りです。ここでは、Flutterを使用してアプリを作成する例を示しますが、他のフレームワーク（React Nativeなど）を使用する場合も基本的な流れは同様です。

### 手順

#### 1. **ESP32の準備**

ESP32をWi-Fiアクセスポイントとして設定し、クライアント（スマートフォンアプリ）が接続できるようにします。
cpp

#include
#include

const char* apSSID = “ESP32_AP”; // ESP32のアクセスポイント名
const char* apPassword = “123456789”; // アクセスポイントのパスワード
WebServer server(80);

void setup() {
Serial.begin(115200);
WiFi.softAP(apSSID, apPassword);
server.on(“/”, HTTP_GET, handleRoot);
server.on(“/set”, HTTP_POST, handleSet);
server.begin();
}

void loop() {
server.handleClient();
}

void handleRoot() {
server.send(200, “text/html”, “

“);
}

void handleSet() {
String ssid = server.arg(“ssid”);
String password = server.arg(“password”);
// ここでSSIDとパスワードを保存または使用する処理を行います
// 例: WiFi.begin(ssid.c_str(), password.c_str());
server.send(200, “text/html”, “Settings saved! Rebooting…”);
delay(1000);
ESP.restart(); // 再起動
}
#### 2. **Flutterアプリの作成**

Flutterで新しいプロジェクトを作成します。
bash

flutter create esp32_wifi_config
cd esp32_wifi_config
#### 3. **依存関係の追加**

pubspec.yaml ファイルにHTTPリクエストを行うための依存関係を追加します。
yaml

dependencies:
flutter:
sdk: flutter
http: ^0.13.3
依存関係を追加したら、 flutter pub get を実行してインストールします。

#### 4. **ユーザーインターフェースの作成**

lib/main.dart ファイルを以下のように編集します。
dart

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

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘ESP32 WiFi Config’,
home: WiFiConfigPage(),
);
}
}

class WiFiConfigPage extends StatefulWidget {
@override
_WiFiConfigPageState createState() => _WiFiConfigPageState();
}

class _WiFiConfigPageState extends State {
final TextEditingController ssidController = TextEditingController();
final TextEditingController passwordController = TextEditingController();

Future submitData() async {
final response = await http.post(
Uri.parse(‘http://192.168.4.1/set’), // ESP32のIPアドレス
body: {
‘ssid’: ssidController.text,
‘password’: passwordController.text,
},
);

if (response.statusCode == 200) {
// 成功した場合の処理
print(‘Settings saved!’);
} else {
// エラーハンドリング
print(‘Failed to save settings: ${response.statusCode}’);
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘ESP32 WiFi Config’),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
children: [
TextField(
controller: ssidController,
decoration: InputDecoration(labelText: ‘SSID’),
),
TextField(
controller: passwordController,
decoration: InputDecoration(labelText: ‘Password’),
obscureText: true,
),
SizedBox(height: 20),
ElevatedButton(
onPressed: submitData,
child: Text(‘Save Settings’),
),
],
),
),
);
}
}