自作WebAPIとESP32との通信:WebAPI編

# はじめに

この記事は[Web API Advent Calendar 2020](https://qiita.com/advent-calendar/2020/webapi)の12日目の記事です。同時に、初投稿&誕生日でもあります。

# 本題

* 前にESP32と自作WebAPIとの通信をやったので、そのやり方的なもの。
* やることとしては、ESP32から自作WebAPIに値を送り、レスポンスを返すという簡単なもの。

# 用意するもの

* PC(python3やESP32、git等の開発環境はセットアップ済み)
* GitHubのアカウント
* ESP32(Arduino互換)

# 手順

##　1.色々とインストールする

```shell
pip3 install -U pip   # pipのアップグレード
pip3 install Flask    # Flaskのインストール 
pip3 install gunicorn # gunicornのインストール
```

## 2.WebAPIのテスト

* テスト用にhello.pyを作る

```python:hello.py
from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello():
    return "Hello"

if __name__ == "__main__":
    app.run(debug=True, port=80)
```

* hello.pyを実行

```shell
python hello.py
```

* ブラウザからlocalhostにアクセスして、Helloと表示できたら成功

![Hello.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467463/676b854d-d926-bdb2-42a4-4a96a28aa718.png)

WebAPIの実行終了は```Ctrl+C```をターミナルで入力すれば終わります

## 3.WebAPIの作成

* 今回はESP32から$a,b$を受け取り、$a+b$の値を返すWebAPIを作る

```python:webapi.py
from flask import Flask
app = Flask(__name__)

@app.route("/a=<x>,b=<y>")
def Sum(x,y):
    return str(int(x)+int(y))

if __name__ == "__main__":
    app.run(debug=True, port=80)
```

* webapi.pyを実行します

```shell
python webapi.py
```

* ブラウザからlocalhost/a=2,b=3にアクセスして、5と表示されたら成功

![webapi.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467463/143909b2-22a6-df7a-ad9c-e1e864c528b9.png)

## 4.必要なファイルを用意

webapi.pyと同じディレクトリに以下のファイルを追加します

* Procfile
* requirements.txt

Procfileには、実行コマンドを書きます

```:Procfile
web: gunicorn webapi:app
```

requirements.txtにはHeroku上で使うpythonのライブラリを書きます

```shell
pip3 freeze > requirements.txt
```

## 5.GitHubにpush

* リポジトリを作成する

![repo.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467463/f7e65315-ae94-afbf-5bba-76b659528c75.png)

* プログラマなどが入ってるディレクトリで以下のコマンドを打ち、**main**にpushします

```shell
git init
git checkout -b main
git add *
git commit -m "First commit"
git remote add origin 自分のリポジトリのURL
git push -u origin main
```

## 6.Herokuでの設定

* [Herokuのサインアップ](https://signup.heroku.com/)からアカウントを作成します

* 下の画面まで行ったら[Create a new app]を選択します

![Heroku.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467463/baebc955-0754-5ed2-f6a8-ff849aef4b34.png)

* アプリの名前を決めます

![createApp.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467463/2270946b-dec2-dfc5-f2c8-9940475e8f45.png)

* [Deployment method]からGitHubを選択し、ログイン

![deploy.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467463/b829b74f-0572-9744-774e-de43cc8c4789.png)

* 下の画像のrepo-namesから先ほど作成した自分のリポジトリの名前を入力してください

![connectGithub.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467463/6fd4b5a9-7314-3fc0-33de-a5b49ff61530.png)

* [Enable Automatic Deploys]をクリックする(GitHubのmainにpushすると自動的にデプロイされる)
* [Deploy Branch]を押して、デプロイする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467463/692d9d7a-6260-c94c-8623-61fe42e8f396.png)

**※ここでデプロイが失敗した場合、不要なライブラリが悪さをしている可能性があります**
　その場合は、requirements.txt内から不要なライブラリを削除してください
　因みに自分は、py32winが邪魔をしました

* テストのため*https://[Herokuでのアプリ名].herokuapp.com/a=2,b=3*に接続
　以下のような画面が表示されたら成功
![HerokuTest.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467463/16891cec-d76c-dc1c-a768-0c23710b1a67.png)

# まとめ

FlaskとHerokuの使い方について自分なりにまとめてみました。
初めての投稿ということもあり、わかりにくい部分も多かったともいます。
何かわからないことや指摘がある場合、言ってくださると助かります。
それでは、まとめや続きは明日の[ESP32編(Arduino Advent Calendar 2020)](https://qiita.com/suzakutakumi3/items/e7eb92a88ffa003f7b23)で!