背景

バックエンドエンジニアをやっています。litestar+sqlalchemy+lambdaの構成でAPIをつくったのですが、フロントの方から管理者画面を作った方がいいよの声が...
普通みんな持ってるでしょって言われました
あるあるなんでしょうか？
みなさん教えてください

というわけで、管理者画面を拵えることになったのですが、工数はないので、適当なライブラリを使うことに。Djangoみたいに簡単にできればいいなというところで、sqladminを見つけました。
簡単な管理者画面にはとてもいいのですが、jinja2で毎レスポンスごとに、全てのhtmlを送ってくる仕様でした。
ちょっと困るのでlambda+cognitoで使えるようにhtmxを使って書き換えることにしました。

TL;DR

sqladminでcrudできるの楽しい
htmxおもしろい
sqladminlambda作ってみたので、みてみてください

そもそも

sqladminについて

sqlalchemyのモデル定義をもとに、starlette系のASGIライブラリで管理者画面を作ることができる。
starletteでasgiを作り、sqlalchemyのモデルをwtformsでフォーム化、jinja2でhtmlをレンダリングする。

利点

少しの変更で、crudができるようになる
モデルのcrudの前に処理を挟むことができるので、必要な独自処理を追加できる
拡張性が高い

個人的に足りなかったこと

毎回全てのhtmlをレンダリングして返してくるので、効率が悪い
- せめて、最小限のDOMを返すようにしたい
cognitoに対応したい

開発

色々やってみたかったのですが、第一弾として、htmxに対応してもらって、id_tokenを渡すことで、apigatewayの認証にも対応できるようにしました。

やったこと

htmxによる擬似的なページ遷移の実現
htmxによるDOM操作
htmxでid_tokenを渡せるように修正

htmxについて

<button hx-get="/api/user-info"
  hx-trigger="load"
  hx-headers='{"Authorization": "Bearer ${localStorage.getItem("id_token")}"}'
  hx-target="this"
  hx-push-url="true">
</button>

このbutton操作によってできること

DOM操作
- hx-target属性を使用して、更新する要素を指定
- hx-triggerで、いつHTMXのリクエストを実行するかを制御
認証トークンの設定
- 個別のリクエストでhx-headers属性を使用してヘッダーを設定
ルーティングの仮想遷移
- hx-push-url="true"属性により、ブラウザの履歴にURLを追加

終わりに

あくまでも個人的見解です。
夢はあるなと
cognitoの対応もしたのですが、sqladminの外側で定義したので、ライブラリに含めることはできなかったです。
lambdaとsession周りをどう適応させるかわからず今回はこのような方式にしましたが、ちょくちょく認証が切れて、ログアウトさせられるのをどうにかしたいところです。
最近litestarにハマっているので、starlette系だけではなく、litestarにも対応させたいです。litestarの方にもpiccolo adminがありましたが、こちらの方が使いやすそうな印象でした。
文章力がほしい...

参考