はじめに
こんにちは。今回初投稿です。
大学の戦略的教育プログラムの一環で行われたIoT Dojo前期の活動が終了したのでそこで扱った技術について少しまとめてみたいなーと思います。
こうゆう記事書くの初めてなんであんまりうまい説明できないかもですがご了承ください。
プロジェクトの概要
今回私たちは、今話題の（？）「自立航法測位」について5,6人のグループで活動を行いました。最初は知識も全くない状態だったのでこのプロジェクトを行ってくれている大学院生のメンターさんに色々聞きながらプロジェクトを進めていきました。正直テーマを決めるのにも相当大変で、ここから開発から何からどうなるんだろうと当時は不安でした。
自立航法測位をするときに「esp32」というデバイスに加速度センサと角度センサの6軸を用いて自立航法測位を行いました。センサから取得した値をもとに座標を計算して、その値をもとにあらかじめ作成しておいたマップ（7m×7m）に描画していきます。
今回私はサーバー側のデータ受け取りと、それをhtml側にデータを送って描画するところを担当したのでそれについてメモを残そうと思います。（概要長くね？）
1歩判定をどうしたかとかは他のチームメンバーが書いてくれたのでこちらをご覧ください🙏
https://qiita.com/nk_gfp/items/e22ac9ac31f354c8c7eb
使用した機器
先ほども少し触れましたが今回使用した機器はこちらです
- esp32
- ジャイロセンサー
- 加速度センサー
- ブレッドボード（大きめのやつ）
- PC（サーバー)
大体こんな感じです。
Flaskとは？
今回、小規模なWebアプリケーション開発だったので、「Flask」というpythonのWebアプリケーションフレームワークを使用しました。
#Flaskのインストール
ubntsu上で
pip install flask
これでインストールが終了です。（めちゃ簡単！）
Flask実行方法
HTMLデータ送信、受け取り
次に、サーバー側からデータが送られてきたときの処理とリクエストが送られてきたときの処理を書きます。
@app.route("/test")
def web_view():#関数名は何でもいいです
......
# htmlにデータを送る
return render_template("map_create.html", data=[x_data,y_data,x_re_data,y_re_data])
このリターン文で指定したデータをHTMLに送ることができます。
...
<body>
...
let list_data = {{ data | tojeson }}
...
</body>
これでlist_dataという変数に先ほどFlaskで送ったデータを受け取ることができます。
HTMLにデータを送る、受け取りはこれで終了です。
esp（センサー）からデータ送信、受け取り
次に、espからデータの送信、受け取りについてです。espは言語にmicropythonを使います。（ほとんどpythonと同じです）
url = 'http://192.168.2.101:5000/' #サーバのIP
payload = {"degree": degree_list} #データ部分(key:distance, value:test)
#JSON形式にする
header = {'Content-Type' : 'application/json'}
#おまじない
response = urequests.post(url, data = ujson.dumps(payload).encode("utf-8"), headers = header)
print(response)
response.close()
これがesp側での送信する処理です。espからはjson形式でデータを送っています。urlにFlaskサーバーに送るためのIPアドレスを指定します。それでデータを指定してresponseを送ります。これで、データの送信は終了です。
次にデータをサーバー側で受信します。
@app.route("/",methods=["POST"])
def main(): #関数名はなんでもOK
...
# アプリケーションを動かすためのおまじない
if __name__ == '__main__':
app.run(host="0.0.0.0", port=5000, debug=True) #ポート5000番
...
このapp.runのところはFlaskを動かすためのおまじない（？）です。後は、Ubuntuなどのコマンドプロンプトで
export FLASK_APP=flask_server.py
flask run --host=0.0.0.0
これを入力し実行することで、Flaskを起動することができます。
これで、Flaskの実行方法は終了です！
おわりに
記事を書いてみて、技術について説明するのも結構難しいなと思いました。課外活動では、チーム開発とかいろいろ大変な部分もありましたが、とても勉強になったと思いました。Webアプリケーション開発は面白いなーと思いました。後期も参加する予定なので新チームで頑張りたいと思います！