ChinoDuino(Chino × Arduino)

自発性のないプログラマーがArduinoと出会って悪戦苦闘する様を綴っていく⇒今はいろいろ(^^;

AmplifyでPythonのfunctionを追加したけど2回目のpushができない😇

AmplifyでPythonのfunctionを追加し amplify push をして、プログラムを修正後、もう一度、 amplify push したらエラーがでてpushできなかったときの対処方法の備忘録📝

環境

  • macOS Ventura バージョン13.5.2
  • @aws-amplify/cli:12.4.0

エラー内容

$ amplify push  
✖ There was an error pulling the backend environment dev.
🛑 ENOENT: no such file or directory, stat '/xxxx/react-ts-workspace-amplified/amplify/.temp/#current-cloud-backend/function/samplePythonFunction/.venv/bin/python'

#current-cloud-backend 内にPythonの仮想環境の .venv があり、その中にシンボリックリンクがあることが悪さをしているらしい。

#current-cloud-backend は現在のクラウド状態が格納されている。

#current-cloud-backend

対処方法

Pipenvの2つの環境変数.env に記載し対処

  1. プロジェクト配下に仮想環境を配置するか指定できる環境変数PIPENV_VENV_IN_PROJECT
  2. 仮想環境の独自の配置場所を指定できる環境変数 WORKON_HOME

Amplifyでは「PIPENV_VENV_IN_PROJECT」がデフォルトで「true」になっているようなので、 amplify push を行うと作成したfunction配下に仮想環境( .venv )が作成される

これが #current-cloud-backend にはいってしまう。

このため、 Pipenvの.env の自動読み込み機能を利用するため .envPipfile と同じ場所に配置し以下を記載

PIPENV_VENV_IN_PROJECT=false
WORKON_HOME=../../../../.venvs
  • .envの記載内容の補足
    • PIPENV_VENV_IN_PROJECTtrue のままだと WORKON_HOME が有効にならなかった
    • このため PIPENV_VENV_IN_PROJECTfalse に設定し
    • 仮想環境の配置場所を #current-cloud-backend に含まれない場所に変更

無事、2回目以降も amplify push できるようになりました🙌

懸念点

ただ、この方法だとPythonのfunctionが複数になった場合、仮想環境が被ってしまうので、 amplify/backend/function とは別の場所でPipfileを統一した方がよさそう

補足:エラーが出た場合の復帰方法

こちら参考にさせていただきました!ありがとうございます🙏

以下ページの「amplify pushができなくなったら」です!

https://strip.koatech.info/articles/amplify-function/

SORACOM Beamのプラットフォームバージョン変更ではまなったこと

「プラットフォームバージョン 201509 は 2022 年 8 月 1 日にサポートを終了します」ということで少し遅くなってしまいましたが「201912」に変更したところエラーがでたのでその備忘録です!(ちなみにちゃんと以下ドキュメントを読んでいればはまらなかった・・・)

users.soracom.io

プラットフォームバージョンを変更

SORACOMコンソールで該当グループのBeamのプラットフォームバージョンを「201912」に変更し保存

他設定はこんな感じ

  • 転送先
    • 種別:Standard
    • プロトコル:MQTT
    • ホスト名:xxxxx.iot.ap-northeast-1.amazonaws.com
      • AWSのIoT Coreに転送しています
    • ポート番号:8883
  • 証明書 (key と cert) を利用しています

エラー

データをBeamに送ったところ以下エラーが発生

{
  "time": xxxxxxxxxxxxx,
  "service": "Beam",
  "resourceType": "Subscriber",
  "resourceId": "xxxxxxxxxxxxxxx",
  "body": {
    "message": "[MQTT] Destination error mqtt://xxxxx.iot.ap-northeast-1.amazonaws.com:8883: Cannot parse protocolId"
  }
}

原因

以下ちゃんと記載があるのに、転送先プロトコルを「MQTT」のまま変更していませんでした😇

「201509」のときに転送先プロトコルを「MQTT」にしていましたが、証明書 (key と cert) を利用していたので、「MQTTS」で接続してくれていたんですね!今回、プラットフォームバージョンを変更したことにより「MQTT」で接続するようになりエラーが発生したようです📝

プラットフォームバージョン 201509 においては、証明書 (key と cert) を利用している場合、転送先に接続するプロトコルの設定に関わらず MQTTS プロトコルで転送先に接続されます。プラットフォームバージョン 201912 においては、証明書の利用有無に関わらず、転送先に指定されたプロトコルで接続します。転送先のプロトコルが正しく設定されているかを事前に確認ください。

リファレンス: 制限事項と注意事項 | SORACOM Beam | ソラコムユーザーサイト - SORACOM Users

対処

SORACOMコンソールで該当グループのBeamの転送先プロトコルを「MQTTS」に変更したところ無事解決🙌

(ちなみに、別アカウントではプラットフォームバージョンを変更しても特にエラーがでなかったのでそちらとBeamの設定を比較したところ気がつきました(^^; )

Notionで進捗状況を可視化してみる

スケジュール管理するときに、予定日、開始日、終了日を入力しいちいち状況を「着手中」とか「完了」とか変更するのがめんどいし、遅れているのかオンスケなのかわからない・・・

なのでNotionのpropertyにある Formula を使って日付を入力すると現状の進捗状況が自動で切り替わるようにしてみました🙌

前提

property: Formulaについて

ExcelGoogle Sheetsの関数と同じような機能です。合計値や様々な値の算出が可能です。

詳細はこちら!

extns.notion.site

このように prop("[property名]") でpropertyの値を参照できたり、分岐やいろいろな関数等が用意されています🙌

youtu.be

完成イメージはこちら

予定、開始日、終了日により 状態状況 がかわります👀

※ 進捗バー、進捗率は「おまけ」で説明します🙏

作成していきましょう!

まずは各propertyを用意

名前 タイプ 内容
状態 Formula empty(prop("終了日")) ? (empty(prop("開始日")) ? "" : "👨‍💻") : "🔚"
状況 Formula if(empty(prop("終了日")) == false, "🔚", if(start(prop("予定")) > now(), if(empty(prop("開始日")) == false, "🆒", ""), if(empty(prop("開始日")), "🔥", if(end(prop("予定")) < now(), "🔥", "✅"))))
予定 Date 予定日を入力。 End date をONにしてrangeで設定。
開始日 Date 該当のタスクに着手開始した日を入力
終了日 Date 該当のタスクが完了した日を入力

状態状況 の判定については以下を参照

状態の判定について

状況の判定について

完成したもの

youtu.be

おまけ

進捗バー、進捗率については以下を参考に作成させてもらいました🙏

ただ、進捗率により進捗バーを変更するようにした簡易版です!

【Notion】進捗を可視化したガントチャートの作成手順 - Qiita

property
名前 タイプ 内容
進捗バー Formula slice("▓▓▓▓▓▓▓▓▓▓", 0, prop("進捗率") * 10) + slice("░░░░░░░░░░", 0, 10 - prop("進捗率") * 10)
進捗率 Number Number formatPercent に設定
完成したもの

youtu.be

Let's Enjoy Notion🙌

Flutterインストール📝 to Mac

自分のMacに以下サイトを参考にFlutterをインストールしたときの備忘録📝

docs.flutter.dev

環境

  • macOS Monterey
  • バージョン:12.4
  • プロセッサ:Intel Core i5
  • メモリ:32G
  • ログインシェル:zsh

インストール

Get the Flutter SDK

Intel用のFlutter SDKファイル(zip)をダウンロードし解凍

解凍したファイルはホームディレクトリ配下に以下のように配置

$ cd
$ cd Documents
$ mkdir development
$ cd development
$ pwd
/Users/chino/Documents/development
# 解凍したファイルを移動
$ mv ~/Downloads/flutter ./
$ ls -la
total 0
drwxr-xr-x   3 chino  staff    96  7 24 10:49 .
drwx------@ 58 chino  staff  1856  7 24 10:49 ..
drwxr-xr-x@ 27 chino  staff   864  7 14 05:40 flutter

Flutterのパスを設定

$ vi ~/.zshrc

# 以下を追記し保存

---
# flutter
export FLUTTER_HOME="$HOME/Documents/development/flutter"
export PATH="$PATH:$FLUTTER_HOME/bin"
---

Run Flutter Doctor

flutterの doctor というコマンドでFlutterに必要な開発環境が準備できているか確認できるので実行💻

$ flutter doctor

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.dev                  ║
  ║                                                                            ║
  ║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
  ║ statistics and basic crash reports. This data is used to help improve      ║
  ║ Flutter tools over time.                                                   ║
  ║                                                                            ║
  ║ Flutter tool analytics are not sent on the very first run. To disable      ║
  ║ reporting, type 'flutter config --no-analytics'. To display the current    ║
  ║ setting, type 'flutter config'. If you opt out of analytics, an opt-out    ║
  ║ event will be sent, and then no further information will be sent by the    ║
  ║ Flutter tool.                                                              ║
  ║                                                                            ║
  ║ By downloading the Flutter SDK, you agree to the Google Terms of Service.  ║
  ║ Note: The Google Privacy Policy describes how data is handled in this      ║
  ║ service.                                                                   ║
  ║                                                                            ║
  ║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and  ║
  ║ crash reports to Google.                                                   ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://flutter.dev/docs/reference/crash-reporting                         ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://policies.google.com/privacy                                        ║
  ╚════════════════════════════════════════════════════════════════════════════╝


Running "flutter pub get" in flutter_tools...                      10.3s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.5, on macOS 12.4 21F79 darwin-x64, locale ja-JP)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[!] Xcode - develop for iOS and macOS (Xcode 13.4.1)
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your
        plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.69.1)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

! Doctor found issues in 3 categories.

以下がまだ準備できていなかった

CocoaPodsのインストール

To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

ということなのでCocoaPods Guides - Getting Startedを参照しインストール👀

$ sudo gem install cocoapods

パスを設定

$ vi ~/.zshrc

# 以下を追記し保存

---
export GEM_HOME=$HOME/.gem
export PATH=$GEM_HOME/bin:$PATH
---

もう一度、 doctor を実行!

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.5, on macOS 12.4 21F79 darwin-x64, locale ja-JP)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.69.1)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

! Doctor found issues in 2 categories.

Xcodeについては準備完了🙆

Android関連のインストール

(or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).

ということなのでmacOS install | Flutterを参照しセットアップ!

まずはAndroid Studioをインストール

インストール後、Android Studioを起動し初期セットアップも完了

再び doctor を実行!

flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.5, on macOS 12.4 21F79 darwin-x64, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.69.1)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

! Doctor found issues in 1 category.

✗ cmdline-tools component is missing

macOS install | FlutterのページでAndroid Studioの初期セットアップ時にインストールされると記載があったがなぜかインストールされず。。。一応、 sdkmanager を実行してみたが command not found になってしまった・・・

このため、こちらのDownload Android Studio & App Tools - Android Developersからzipファイルをダウンロードできるようなのでダウンロード、解凍してSDK配下に配置

# SDK配下に移動
$ cd /Users/chinoyuuji/Library/Android/sdk

# ダウンロードして解凍したcommand-toolsをsdk配下に配置
$ sudo mv ~/Downloads/cmdline-tools ./

SDKの場所はAndroid Studioを起動し確認しました

sdkmanagerのパスを設定

$ vi ~/.zshrc

# 以下を追記し保存

---
# Android
export ANDROID_USER_HOME="/Users/chinoyuuji/Library/Android"
export ANDROID_HOME="$ANDROID_USER_HOME/sdk"
export ANDROID_CMDLINE_TOOLS="$ANDROID_HOME/cmdline-tools"
export PATH="$PATH:$ANDROID_CMDLINE_TOOLS/bin"
---

sdkmanagerの最新をインストール

$ sdkmanager --install "cmdline-tools;latest"
The operation couldn’t be completed. Unable to locate a Java Runtime.
Please visit http://www.java.com for information on installing Java.

JAVAがインストールしていなかったので、http://www.java.comからjavaをインストールしてから再度、コマンドを実行

$ sdkmanager --install "cmdline-tools;latest"
Error: Could not determine SDK root.
Error: Either specify it explicitly with --sdk_root= or move this package into its expected location: <sdk>/cmdline-tools/latest/

SDKのパスを指定が必要だったので指定して再実行!

$ sdkmanager --install "cmdline-tools;latest" --sdk_root=/Users/chinoyuuji/Library/Android/sdk
[=======================================] 100% Unzipping... cmdline-tools/lib/RE

できたみたいなので、 doctor で出力されていたもうひとつのコマンドを実行(すべて「y」で承諾)

$ flutter doctor --android-licenses
・・・
All SDK package licenses accepted

再び、 doctor を実行👀

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.5, on macOS 12.4 21F79 darwin-x64, locale ja-JP)
Checking Android licenses is taking an unexpectedly long time...[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.69.1)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!

No issues found! になり準備完了🙌

TWELITEをいじってみる(センサデータをみてみる)

この記事は↓の続きになります!

chinoppy.hatenablog.com

今回は、TWELITE DIPにセンサを繋いで、MONOSTICKで受信したセンサデータをみてみます!

こちらのページが参考になりますが、スイッチサイエンスで購入したBME280は配線が違うため、あわせて記載していきます📝

mono-wireless.com

前提

センサデータをみてみる

準備

ハード側

配線はこちら

f:id:chinoppy:20220321134957j:plain:w800

ソフトの書き換え、設定の編集・変更

手順としては無線タグアプリ (App_Tag) - MONO-WIRELESS.COMをMONOSTICK、TWELITE DIPに書き込み、設定等をインタラクティブモードで編集・設定します!

  • TWELITE DIPに子機用の「App_Tag_EndDevice_Input」を書き込み
  • MONOSTICKにOTAでTWELITE DIP側の設定を変更する「App_Tag_EndDevice_Input_OTA」を書き込み
  • インタラクティブモードで子機用の設定を行う
  • 子機(TWELITE DIP)の設定を変更
  • MONOSTICKでデータを受信するための「App_Tag_Parent_MONOSTICK」を書き込み
TWELITE DIPに子機用の「App_Tag_EndDevice_Input」を書き込み
  • TWELITE DIPをTWELITE R2に装着して、PCとUSB接続
    • ⚠⚠⚠差し込む方向を間違えるとTWELITE DIP側が壊れてしまう可能性があるので注意!⚠⚠⚠
  • TWELITE STAGEを起動
  • シリアルポートは「TWELITE R2」を選択
  • 「アプリ書き換え」⇒「TWELITE_APPSビルド&書換」⇒「App_Tag」⇒「App_Tag_EndDevice_Input」を選択
  • ⇒アプリがTWELITE DIPに書き込まれます

youtu.be

  • 書き込みが完了したら、TWELITE STAGEを終了させて、TWELITE R2もPCから外し、TWELITE DIPをブレッドボードに装着する
  • ブレッドボード装着後、まだ電源はいれない!
MONOSTICKにOTAでTWELITE DIP側の設定を変更する「App_Tag_EndDevice_Input_OTA」を書き込み
  • MONOSTICKをPCとUSB接続
  • TWELITE STAGEを起動
  • シリアルポートは「MONOSTICK」を選択
  • 「アプリ書き換え」⇒「TWELITE_APPSビルド&書換」⇒「App_Tag」⇒「App_Tag_EndDevice_Input_OTA」を選択
  • ⇒アプリがMONOSTICKに書き込まれます

youtu.be

インタラクティブモードで子機用の設定を行う

次にインタラクティブモードで子機に設定する内容を編集します

  • 上記の続き
  • TWELITE STAGEの「インタラクティブモード」を選択
  • 設定を変更する
    • 「b」キーでUART baundを変更:115200
    • 「o」キーでOption Bitsを変更:0x00010001
    • 「d」キーでSleep Durを変更(ms):60000(※ 1分ごと送信するようにする)
    • 「w」キーでSensor Waitを変更(ms):30
    • 「m」キーでSensor Modeを変更:0x39
    • 「p」キーでParameterを変更:0
  • 「Shift + S」キーで設定を保存

各設定の詳細はこちらを参照

無線タグアプリ インタラクティブモード - MONO-WIRELESS.COM

youtu.be

子機(TWELITE DIP)の設定を変更

上記に引き続き、TWELITE STAGEを起動したままで、子機に電源をいれて、以下のように表示されれば、TWELITE DIP側に設定が反映されたことになるようです!

SUCCESS [TWELITE DIPのED]

f:id:chinoppy:20220321151846p:plain

youtu.be

⚠障害物などに弱いので、なるべくMONOSTICKとTWELITE DIPを近い距離にして、TWELITE DIPの電源をいれてください⚠

MONOSTICKでデータを受信するための「App_Tag_Parent_MONOSTICK」を書き込み
  • MONOSTICKをPCとUSB接続
  • TWELITE STAGEを起動
  • シリアルポートは「MONOSTICK」を選択
  • 「アプリ書き換え」⇒「TWELITE_APPSビルド&書換」⇒「App_Tag」⇒「App_Tag_Parent_MONOSTICK」を選択
  • ⇒アプリがMONOSTICKに書き込まれます

youtu.be

センサデータを確認!📈

TWELITE STAGEを起動して、シリアルポートは「MONOSTICK」を選択をすると1分ごと、センサデータを確認できます!🙌

  • tm: 温度(100倍されているので、22.44℃)
  • hu: 湿度(こちらも100倍されているので、39.08%)
  • at: 気圧(975hPa)
::rc=80000000:lq=183:ct=0018:ed=82015460:id=0:ba=3180:a1=1138:a2=0689:tm=2244:hu=3908:at=0975

youtu.be

Pythonで確認してみる

Raspberry PiにMONOSTICKを装着すると /dev/ttyUSBx として認識されます

$ ls -la /dev/ttyUSB*
crw-rw---- 1 root dialout 188, 0  3月 19 23:19 /dev/ttyUSB0

Pythonでserial関連のライブラリをインストールします

$ pip3 install pyserial

コードはこんな感じ

import serial
import time

ser = serial.Serial('/dev/ttyUSB0', 115200)

while True:

    time.sleep(1)

    recv_list = ser.readline().decode('utf-8').split(':')
    if len(recv_list) < 13:
        # いったん、受信データの要素数で不要なデータ時は出力しないようにする
        continue

    print(recv_list)

実行すると以下のように受信したデータを確認できます🙌

$ python3 app_tag_loop.py
['', '', 'rc=80000000', 'lq=159', 'ct=0002', 'ed=8201C109', 'id=0', 'ba=3190', 'a1=0916', 'a2=0612', 'tm=2270', 'hu=4060', 'at=0975\r\n']

Let's Enjoy センシング!!!!!!!! 📊

TWELITEをいじってみる(購入・標準アプリをいじる)

TWELITE無線タグアプリ(App_Tag)は各種I2Cセンサー用のドライバを内蔵しているけど、対応していないI2Cセンサーを使いたくてTWELITEをいじってみてます。

その過程を何回かに分けて書いていこうと思います!TWELITEにこれから触りたい方にお役に立てればうれしいですー🙌

今回は、購入と標準アプリをいじってみます!💪

標準アプリはこちらの「クイックマニュアル」にある、「スイッチを押すと、LEDが点灯する例」を元に、以下を確認してみます!

  • MONOSTICKでTWELITE DIPからのデータを受信しているところを確認
  • MONOSTICKからTWELITE DIPと繋がっているLEDのON/OFFをしてみる

TWELITE とは

特徴

  • 省電力(乾電池でも動作できて、動作時間が長い!)
  • それなりに長い距離の無線通信ができる(ただ障害物には弱い・・・😅)
    • 中継機を置くことで通信距離を伸ばせる

などなど、その他、詳細はこちらのページの「特徴」を参照

モノをつなぐ無線マイコンモジュール TWELITE-トワイライト | 無線モジュール

どんなことができるのか👀

  • 無線マイコンモジュールに温度を測れるセンサーをつけて、その無線をデータで飛ばして、ラズパイで受信する
  • スイッチがついている無線マイコンモジュールからLEDがついている無線マイコンモジュールに命令をだして、スイッチが押されたら、LEDをつける
  • 無線マイコンモジュールを中継機として、通信距離を伸ばせたり
  • リモコンとして使用

その他、詳細はこちら!

TWELITE APPS - トワイライトアプリ - MONO-WIRELESS.COM

前提

PCに関してはMacを前提にしています🙏

  • OS:macOS Big Sur(バージョン11.6.4)

購入品💴

商品 購入先 用途等
無線マイコン高出力タイプ TWELITE RED DIP chip1stop 無線アイコン。今回は「高出力タイプ」を選択。
MONOSTICK Amazon ラズパイで受信したいので、親機として購入。
TWELITE R2*1 Amazon TWELITE DIPのアプリの詳細設定やアプリ書き込み用
KAUMO 電池ボックス Amazon TWELITE DIPの電源として購入
BME280搭載 温湿度・気圧センサモジュール ピンヘッダ実装済*2 スイッチサイエンス 次回の記事で使用予定

この他、ブレッドボードジャンパーワイヤーLED抵抗(680Ω)等必要になるので適宜、購入! ちなみに、ジャンパーワイヤーについて、ブレッドボード用バンパーワイヤーもあるので、こちらもオススメ(配線がスッキリします(^^ )。

標準アプリをいじってみる

準備

TWELITE STAGE APPをPCにダウンロード

アプリのビルド、書換、設定、表示を行うためのパソコン上で動作するソフトウエアをPCにダウンロードしします!💻

ダウンロードはこちらのページ内にある「ダウンロード」からできます

f:id:chinoppy:20220319173445p:plain:w500

そして、解凍すると環境設定完了です!

ハード側

MONOSTICKはPCに接続。

今回、親機はMONOSTICKにして、MONOSTICKとの通信がちゃんとできているかを確認したいので、TWELITE DIPの方は、クイックマニュアルにある、子機側を参照に配線等行います。

f:id:chinoppy:20220319174847p:plain:w300

実際にはこんな感じ。

f:id:chinoppy:20220319175308j:plain:w300

標準アプリを試す

MONOSTICKでTWELITE DIPからのデータを受信しているところを確認
TWELITE DIPを起動する

TWELITE DIPに電気を流す!

f:id:chinoppy:20220319194818j:plain:w300

TWELITE STAGE APPを起動する

Macの場合は、解凍した中の「TWELITE_Stage.command」をダブルクリックすると起動します。

f:id:chinoppy:20220319175928p:plain:w300

⚠もし、アプリが起動しないなど問題が発生した場合は、こちら参考になります!

インストール - TWELITE STAGE

起動成功し、受信したデータを確認できれば🙆 です🙌

youtu.be

MONOSTICKからTWELITE DIPと繋がっているLEDのON/OFFをしてみる

MONOSTICK(親機)からTWELITE DIP(子機)に指示もできます

TWELITE STAGEを起動し、ビューアを選択

f:id:chinoppy:20220319211526p:plain:w300

コマンダーを選択

f:id:chinoppy:20220319211630p:plain:w300

Enterを押す

f:id:chinoppy:20220319211803p:plain:w300

キーボードの「t」を押して「App_Twelite 0x80コマンド(t)」を選択

f:id:chinoppy:20220319211909p:plain:w300

キーボードの「1」を押すと光ったり消したりできます (ただ、私が試したときはたまに指示通りにならず、送信(SPACEキー)を押す必要もあるときがあったりちょっと不安定感がありました。。。 )

f:id:chinoppy:20220319212133p:plain:w500

動画はこちら(TWELITE STAGEのみですが・・・)

youtu.be

光ったときのハード側はこちら

f:id:chinoppy:20220319200446j:plain:w300

今回は以上になります!Let's Enjoy TWELITE!!!!!!!!!

*1:本記事では使用しません。TWELITEをいじってみる(センサデータをみてみる) - ChinoDuino(Chino × Arduino)で使用します🙏

*2:本記事では使用しません。こちらのサイトにあるBME280とは違うので注意。TWELITEをいじってみる(センサデータをみてみる) - ChinoDuino(Chino × Arduino)で詳細は掲載してます!

Amplify ✕ Reactチュートリアルをやってみて📝

本記事はAmplify初心者の私が「AWSでReactアプリケーションする」のチュートリアルをやってみて、感想やはまったところなどをあくまでゆるーくまとめたものです

ちゃんと調べずに感覚値で記載している部分等もあるのであくまでも参考まで🙏

aws.amazon.com

背景

  • フロントをJavascriptフレームワーク、バックエンドをAPIみたいな構成はよくあると思います
  • ただ、それだと工数が膨らんで、開発費も膨らんでしまう・・・
  • Firebaseという選択肢もある
  • そういえば、AWSにAmplifyあったな!

と今更ながら思いつき、どんなものかとチュートリアルをやってみました!

やってみて

  • バックエンドの構成は
    • 認証周りはCognito
    • DBはDynamoDBでgraphqlでやりとり
    • StorageはS3
    • functionsというのもあって、使用していないけど、おそらくLambdaを使っている
  • バックエンドの構築は
    • cliで作成できてデプロイもCloudFormationを使ってDynamoDBやバケット等作ってくれる
    • Amplify StudioというGUIもあって、今回は使用しなかったがそちらからも構築できそう
  • フロントエンドのデプロイ
    • githubやgitlabにPUSHしたときに自動でデプロイするようにできる
  • 料金的には
    • あまり詳しく調べていないけど、Amplify自体ではデプロイ時間が一番高そう?
    • その他は使用しているサービスでの課金(Cognito、DynamoDB、S3などなど)
  • 本番とかステージングどうするか

はまったところなど

ビルド失敗

  • フロントエンドのデプロイ時にバックエンドのビルドが失敗
  • amplifyのバージョンは「7.6.19」
内容
  • バックエンドのビルド時に以下のエラーが発生しデプロイが失敗してしまった・・・
  • amplify/cli.json 中に不明な要素がある?ようなエラーっぽい🤔
                                 # Starting phase: build
2022-02-13T02:10:02.197Z [INFO]: [31mInvalid feature flag configuration[39m
2022-02-13T02:10:02.198Z [INFO]: [31mThese feature flags are defined in the "amplify/cli.json" configuration file and are unknown to the currently running Amplify CLI:[39m
                                 [31m  - project[39m
                                 [31m  - graphqltransformer.transformerversion[39m
                                 [31m  - graphqltransformer.suppressschemamigrationprompt[39m
                                 [31m  - graphqltransformer.securityenhancementnotification[39m
                                 [31m  - graphqltransformer.showfieldauthnotification[39m
                                 [31m  - auth.useenabledmfas[39m
                                 [31mThis issue likely happens when the project has been pushed with a newer version of Amplify CLI, try updating to a newer version.[39m
                                 [31mEnsure that the CI/CD pipeline is not using an older or pinned down version of Amplify CLI.[39m
                                 [31mLearn more about feature flags: https://docs.amplify.aws/cli/reference/feature-flags[39m
2022-02-13T02:10:02.207Z [ERROR]: !!! Build failed
2022-02-13T02:10:02.207Z [ERROR]: !!! Non-Zero Exit Code detected
2022-02-13T02:10:02.207Z [INFO]: # Starting environment caching...
2022-02-13T02:10:02.208Z [INFO]: # Uploading environment cache artifact...
2022-02-13T02:10:02.351Z [INFO]: # Environment caching completed
Terminating logging...
解決方法

f:id:chinoppy:20220219213337p:plain:w600

どうも、ビルド時にAmplify CLIが古いバージョンを使用していた?っぽい

ログアウトをカスタマイズ

内容

チュートリアルでは <AmplifySignOut /> コンポーネントを使用するが、ヘッダのバー部分にログアウトの機能を置きたかった

解決方法

Auth.signOutを使用してログアウトするように変更

import { Auth } from 'aws-amplify';
・・・
function App() {
・・・
  const signOut = (e) => {
    e.preventDefault();
    Auth.signOut().then(() => {
      window.location.reload();
    });
  }
・・・
  return (
    <div>
      <CssBaseline />

      <Box sx={{ flexGrow: 1}}>
        <AppBar position="static">
          <Toolbar>
            <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
              My Notes App
            </Typography>
            <IconButton onClick={signOut}><LogoutIcon sx={{ color: 'white' }} /></IconButton>
          </Toolbar>
        </AppBar>
・・・

以下をクリックするとログアウトするようにしてみました!

f:id:chinoppy:20220219214057p:plain:w300

その他

Material-UI

Material-UIを使ってちょこっとチュートリアルの画面からきれいにしてみましたw

f:id:chinoppy:20220219214952p:plain:w500

Enjoy Amplify!!!!!