TauriでPC用SwitchBotAPIのGUIクライアントを作った備忘録

はじめに

普段GoogleHomeとSwitchBot hubminiを使って声で操作orスマホのSwitchBotアプリから操作をしているが、コーディング中にサクッとPC上で操作したくなった。
なぜかSwitchBotのPC用アプリはない？らしいので最低限の機能を持ったAPIクライアントを自作することにした。

成果物

https://github.com/Gyabi/SwitchBotClient

開発環境

今回はGUIの開発をするのでTauriを採用した。
理由はRustの勉強したいから。あとはレガシーなUIだと使う気をなくすのでtailwind cssでぱっと見いい感じにする作戦を取りたかったから。

ざっくり使っているライブラリは以下。
開発フレームワーク

• TAURI 1.4.0
  https://tauri.app/

JavaScript

• react 18.0.15
• typescript 4.9.5

CSS

• tailwindcss 3.3.2

備忘録

ローカルへのデータ保存

api用のトークンをPCローカル環境に持ちたかったのでconfyというクレートを利用した。
https://github.com/rust-cli/confy
ほぼサンプルコード以上の知識は要らなくて、保存する名前を決めれば勝手にOS毎の所定の位置に格納してくれる。ファイルがなければ自動作成もしてくるのでまあまあ便利。

typescriptとRust間の型変換について

tauriではtypescript側からRustの関数を呼び出すことができる。
Rust内の構造体を公開する関数の引数や戻り値に設定することもできるが、以下のようにSerializeとDeserializeを実装する必要がある。

#[derive(Deserialize, Serialize, Debug, Clone)]
#[serde(rename_all = "camelCase")]
pub(crate) struct GetDeviceResponse {
    
    status_code: u16,
    body: GetDeviceResponseBody,
    message: String,
}

ちなみに、rustの中ではスネークケースで変数を書いてシリアライズ後に命名規則を変えたい場合にはrename_allという機能を使えばok
上記例ではcamelCaseへの変換を命令している。