LoginSignup
1
0

棚卸し用GlideApps再開発~list relationの作り方2023版

Posted at

こんにちは!
東京圏のとある微生物検査室で、毎日食品安全を担保するため仕事を頑張っています。

前回の記事で、棚卸アプリを作りました。記事は以下になります。

記事の通り先月の月末の棚卸で実際に使って、うまく行けましたが、これは、私最初想像した形ではありません!
なぜこの形になっているのは、31日の棚卸に間に合うために妥協して作ったものです。
私が作りたいのは、以下の図のようなものです。

「ラボ > 部屋 > 保管場所 > 試薬」のように、タッチすると次の階層が表示される仕組みです。
今回この仕組みができたので、紹介したいと思います。

完成物

https://s-app-s784.glide.page
image.png

2023年版?アプリ作成文章でも賞味期限?

私最初アプリを作成する時、実はQiitaの先輩たちの記事をたくさん読みました。その中には、以下のような記事もあります。

在庫管理のアプリですが、私の想像と似ている構造ですね。これを真似して作ったら、楽勝!と思いますが、そんな簡単にできませんでした(笑)。
なぜかというか、2022年の記事は、List RelationというComponentで実現していますが、2023年7月時点、ListのComponetはすべて削除されました。世の中変わり早いですね。
今回は、このList Relationがなくても、 同じ仕組み の作る方法を紹介します。来年で変わらないよう祈ります!
スクリーンショット (16).png

レイアウトを作成よりデータが大事

この機能を実現するために、 データの結びつけ が一番重要です。ラボの中にはどの部屋が入ってます、部屋の中にはどの保管場所が入ってます。これを明確に設定すれば、90%が終わります。

とりあえず、以下のように4つの表を作ります。

図が多いため折り畳みします

スクリーンショット (21).png
スクリーンショット (22).png
スクリーンショット (23).png
スクリーンショット (24).png

ご覧の通り、
「部屋」 のテーブルには、「ラボ」 の列が含まれています。
「保管庫」のテーブルには、「部屋」 の列が含まれています。
「試薬」 のテーブルには、「保管庫」の列が含まれています。
このデータのデザインは、今回の仕組みの土台になります。

次に、ラボのテーブルを例にとして、データの結び方法を説明します。
まずは新しい列を追加するボタンを押します。
image.png
新しい列のtypeは、Relationを選択します。
image.png
Relationの設定欄に、マッチする値を部屋のラボ列に選択します。これでラボテーブルと部屋テーブルが結びました。
そして重要ポイント:Match multipleを必ずチェックします!奏しないと、値は一対一になります!
image.png
正しく結びになったら、Relationの列はこうなります。
image.png
残りのテーブルも同じやり方で順次結びつければ、ほぼ完成です~

レイアウト のデザインに戻りましょう。
ここもラボを例として説明します。
ラボのページの赤い範囲で適当にクリックします。中身のデザインに入ります。
image.png
COMPONENTSの右の+をクリックして、中のListを選びます。
image.png
ListのDATAのSourceを先作ったRelation列を選びます。
image.png
これだけで、完成になります。簡単でしょう~
image.png
これで順次すべて作れば、動画のような構造になります。

デジタル開発は、完成がない

今回の修正で、一つことを分かりました。
ツール作りや、アプリ開発は、 完成がありません
作っても作っても、修正や改善できるところがどんどん現れます。
でもそれは、できるだけ完成を到達してから公開する意味ではなくで、中途半端なものでもリリースして、そこからいろんなフィードバックをもらうのは開発の近道です。

よっぽど開発できる人間は、失敗が恐れず、聞く耳を持っている人間です。

以上、今回のGlideApps開発補足編です。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0