無料でWebアプリを作ろう_004.yaml

[1 1◆jG/Re6aTC. 23/05/06(土) 17:34:35]

## 概要

タイトルの通りWebアプリを作ろうと四苦八苦するスレ主の様子を観察し意見やアドバイスまたは茶々をいれてくれると嬉しいスレです

一人でやってるとサボったりエタったりしそうなのでスレ立ててみました

4スレ目

[2 1◆jG/Re6aTC. 23/05/06(土) 17:37:03]

あらすじ

仮Web画面を作った

↓

ローカルデモデータで表示できることを確認した

↓

デモデータを返すWebAPIを作った

↓

デモデータをWebAPIから受け取って画面に表示できることを確認した

↓

OracleCloud上に用意したデモデータをWebAPI内で取得してデータとして整形して返すようにした

↓

Okteto Cloud(k8s) 上にアプリをデプロイしてインターネット経由でhttpsアクセス(+認証/認可)できるようにした←今ココ

[3 1◆jG/Re6aTC. 23/05/06(土) 17:38:16]

過去スレ

1スレ目

無料でWebアプリを作ろう_001.html｜あにまん掲示板

2スレ目

無料でWebアプリを作ろう_002.js｜あにまん掲示板

3スレ目

無料でWebアプリを作ろう_003.py｜あにまん掲示板

[4 1◆jG/Re6aTC. 23/05/06(土) 17:43:36]

スレの方針

- 作業をタレ流すのと余裕があれば適当に補足説明するよ
- 流れとかぶった切って感想質問などしてくれても全然OK
- 「初歩的すぎて質問していいの？」って質問も大歓迎
- 「オススメのモジュールあるアルよ」大歓迎
- 「まだ〇校生or〇学生だし...」大歓迎 先生は応援します！

[5 1◆jG/Re6aTC. 23/05/06(土) 17:49:22]

とりあえず今回のトライアルで取り組む要件を考えて雑に外部設計

こんな感じかなあ？

レイアウトが汚いのは許して...

どうせフレームワークがある程度綺麗にしてくれるし...

[6 1◆jG/Re6aTC. 23/05/06(土) 18:15:11]

### 内部設計_002

さてなんちゃってで進めている設計も今回ちょっと考えないといけないポイントがある

DBのテーブル定義！

今回はデータのIPO(Input/Process/Output)が関わる部分が多いのである程度は固めておかないといけない

とりあえずトライアル001時点でのテーブル定義はこう

[7 1◆jG/Re6aTC. 23/05/06(土) 18:34:46]

これに要件によってカラムを追加したり変更したりするのだけど...

相変わらず命名に悩むな...

と思っていたところで最近はやりのChatgptを使うことを思いつく

なるほど...馬鹿にならないレベルで参考になる

現状様々な分野で利用に関する評価が分かれているAIだが少なくとも机上ではなく実際に使った側の感想としてプログラミング分野では滅茶苦茶役に立つ

[8 1◆jG/Re6aTC. 23/05/06(土) 18:51:59]

ChatGPTの力も借りつつテーブルを再設計

多分こんな感じでいい...はず

(細かい名称や並び順などもちょっと調整)

[9 1◆jG/Re6aTC. 23/05/06(土) 19:05:33]

残量がstrだったのをintに修正

[10 1◆jG/Re6aTC. 23/05/06(土) 19:07:51]

しかし量をintにするのはどうなのかな...

0.5個とか1.5本とかそんな表現をしたくなる時が来るんじゃないのかな...

それとも全部グラムに統一する前提にするべきなのかな...

しかしそれではグラム記載がないものを買ったときはどうする？
例えば林檎を買ったときわざわざグラムを計るのか？

うーんもう少し悩むか

[11 1◆jG/Re6aTC. 23/05/06(土) 21:26:11]

いーや悩んでも良い考えが浮かばない時間がもったいない！

ここはとりあえずintだ！0.5個に対応したいと思ったときに考えよう！

[12 1◆jG/Re6aTC. 23/05/06(土) 21:30:32]

ほんでもってこういう規模のテーブルになってくるとRDB(リレーショナルデータベース)としてデータのかたまりごとにテーブルを分ける所謂「正規化」をやった方が良くなるんだけどこのトライアルでは実施しないことにします

正規化は主にパフォーマンス(データサイズや処理時間)に影響するけど機能的には変わらないからですね

色々固まってテーブルの内容がほぼ固定されるようになったらまた考えます

[13 1◆jG/Re6aTC. 23/05/06(土) 21:38:08]

さてこの段階までくるとIPO表をちゃんと作った方がいい気がするのですが...

認識を共有すべきチームがあるでもなし

この辺りを垂れ流してもあまり見栄えが良くないのでさっさと開発に移ってみましょう

これで「やっぱり作っておけばよかった！」と思ったら次トライアルで取り入れましょう

[14 1◆jG/Re6aTC. 23/05/06(土) 21:46:07]

実行環境の構成は前トライアルと変わりませんね

また、k8s(Okteto)で動作することは判明したので開発自体はローカル環境メインで実施しある程度の区切りとなるタイミングでk8sに反映してインターネット上で動作するか確認します

何だかんだでk8sに反映するためにはイメージとしてビルドしてPushしてyamlの参照イメージを書き換えて...と手間がかかりますからね

[15 1◆jG/Re6aTC. 23/05/06(土) 21:50:16]

### 開発_003

開発は決めていた優先順位

1. 無料で作りたい(継続かつマスト)
2. 単価計算のため残量のデータ型を数値型にしたい
3. データに購入日を追加したい
4. WebAPIに例外処理(DB接続エラー時などの処理)を追加しエラー時にはWeb画面からおおよそのエラー内容がわかるようにしたい
5. 冷蔵庫の中身をWeb画面から登録・編集・削除したい
6. 賞味期限切れそうなときは文字色を変えるなどして知らせたい
7. バーコードスキャンで入力を簡素化したい

に従って着手します

つまりまずはテーブルの再作成になりますね

テーブルはPythonのModelを利用して作成していたのでテーブル定義に従ってModelを改修します

こいつですね

[16 1◆jG/Re6aTC. 23/05/07(日) 00:08:35]

こんな感じで新テーブル定義に沿った形に更新しました

[17 1◆jG/Re6aTC. 23/05/07(日) 00:10:08]

キリがいいので今日はここまで

引き続きご意見ご感想アドバイスお待ちしております

[18 1◆jG/Re6aTC. 23/05/07(日) 02:02:00]

Okteto検証ですがLabelを変更しただけのPodの生存時間が25時間を越えましたね

これは朗報です

つまり適当なPodを立ててそれに自分自身のLabelを12時間おきくらいにUpdateさせればnsがsleepになることはなさそうだということですね

[19 1◆jG/Re6aTC. 23/05/07(日) 12:05:08]

保守

[20 1◆jG/Re6aTC. 23/05/07(日) 18:24:51]

新しいテーブル定義でアプリ用テーブルを作り直しました

[21 1◆jG/Re6aTC. 23/05/07(日) 18:30:43]

あとデモデータを入れやすいようにCSVファイルからデータをInsertできる関数を作りました

まずはこんな感じでデモデータ用CSVを準備

[22 1◆jG/Re6aTC. 23/05/07(日) 18:31:07]

あとはこんな感じでメソッド作成

[23 1◆jG/Re6aTC. 23/05/07(日) 18:37:05]

Selectと同じようにPandasにはSQLAlchemyのengineを使ってdfをinsertできる便利な関数 to_sql があったのでありがたーく使います

デフォルト値を使う列は空(NaN/null)の値が入っているのでdfから削除しておかないと「nullは許可されていません」エラーになるので注意

to_sqlの引数としてif_exists='append', を指定することでデータの挿入になります(ないと「テーブルが既に存在します」エラーになる)

またdfには自動的にindex列が作られますがそのままInsertしようとすると「indexなんて列はテーブルにありません」エラーになります

なので index=False, を指定してindex列はinsertに使用しないようにします

[24 1◆jG/Re6aTC. 23/05/07(日) 18:39:50]

実行するとこんな感じでちゃんとDBに入ってますね

今さらですがSQLAlchemyを使うとDB指定のドライバーのみ使用する場合と比べて一般的に処理速度が低下します

レスポンスを気にするアプリの場合手放しで採用するのは非推奨ですね

[25 1◆jG/Re6aTC. 23/05/07(日) 19:27:44]

次は要件のうちの「4. WebAPIに例外処理(DB接続エラー時などの処理)を追加しエラー時にはWeb画面からおおよそのエラー内容がわかるようにしたい」を実現します

WebAPI側でいわゆる「Try-Catch」を追記します

Pythonだと「try-except」になります

Tryセクション内でエラーが発生した時に処理を停止せずCatchセクションに遷移する記述ですね

これを検索処理前に構えさらにその前に処理の成功フラグとエラー時に送信する予定のメッセージ文字列を定義しておきます

[26 1◆jG/Re6aTC. 23/05/07(日) 19:33:15]

あとは処理の終端でexceptセクションを記述します

ここで成功フラグを折ってエラーメッセージを取得しています

finallyは正常のときでもエラーの時でも必ず実行されるセクションなのでここで明示的にconnectionをcloseしています

最終的に下で成功フラグがFalseなら

raise HTTPException(status_code=500, detail=message)

でエラーメッセージを添えてエラーレスポンスを返しています

[27 1◆jG/Re6aTC. 23/05/07(日) 19:35:33]

APIを叩くとエラー時にはこんな風にメッセージが返ってきます

このままでも十分ですがこれを後でwebixのダイアログで出すようにすればなおヨシですね

[28 1◆jG/Re6aTC. 23/05/07(日) 21:25:00]

こんな風にエラーメッセージをWebUI側に出せるようにしました

これでデバッグもやりやすくなりますね

(お仕事として考えるならユーザに見せてはいけないログとかあるかもですが今回は個人用なので考えなくていいいですね)

[29 1◆jG/Re6aTC. 23/05/07(日) 22:54:44]

テーブル定義の変更に伴いid名などが変わったのでそれに合わせて画面側も修正しました

ただ最安値や平均値などは量と単位が加わったことによって今までの方法では計算できなくなりました

多分これについてはデータ挿入時に計算して別テーブルに保存するのが綺麗な気がするので今は空白のままにしようと思います

[30 1◆jG/Re6aTC. 23/05/08(月) 00:24:40]

賞味期限切れのアイテムを赤で強調表示できるようにしました

次は同日内だと黄色にするなどの場合分けをしたいですね

ただ若干タイムゾーンで混乱したのでデータ型をDatetimeじゃなくてタイムゾーン付きTIMESTAMPあたりにした方が良いのかもしれない

うーん、次トライアルに回すかここで解決しようとするか...悩ましい

[31 1◆jG/Re6aTC. 23/05/08(月) 00:25:12]

本日はここまで

GWが終わってしまいましたが開発は継続していきます

引き続きご意見ご感想アドバイスお待ちしております