見出し画像

『Adalo』 動作が遅い時の対処法

moroです。🦥

『 SmartDish 』は、Nocodeで作られたアプリです。
*2020年11月20日現在

作り始めたのが2020年7月の初め、8月中旬にはお店でアプリを導入して検証させて頂き、9月1日に正式リリースをしました!

前回は、こちらの記事で初歩の勉強法をまとめました。


今回は、よくある質問の「アプリの動作が遅く、どのように対応していますか?」についてお答えします。

シンプルな対処法ですが、何度も色んな構造を試したので精度は高いと思います。



1. ListのFilterはあまり設定しない

こちらのスクリーンショットは、SmartDish のユーザーさん向けのアプリのお店一覧リストです。私も最初やっていたのですが、ここのCustome Filter にいくつも Filter を作ると、表示が遅くなります。

これを読んでいる方は既に気づいているかもしれませんが....

画像1

しかし、ここのCustome Filter を使わないとできないことってたくさんあると思います。そこでやったのが List 内の要素をグループ別にして、表示させます。


例えば、SmartDishでいうと、お店を CLOSE にしたい条件は何個もあって
・お店の受付開始時間内であること
・お店が注文受付を一時停止していないこと
・お店がお休みでないこと
・公開しているお店であること
などがあります。


画像2

これらの条件を Filter をかけて表示すると、表示までの時間がすごく長い(体感で3秒以上かかる気がする...)ので、このように見た目は同じですが、条件別にオブジェクトを作っています。

グループを作成して、階層構造にすることで、ひとつのオブジェクトを表示させる条件を複数にすることができます。

言葉だとわかりづらいので、詳しか知りたい方がいれば連絡もらえれば、見せます🙋🏽‍♀️


2. そもそもListを使わない

SmartDish のユーザーのアプリでは、来店時間を選択する画面があるのですが、これらをリストで表示させるには、
・お店が受付ている時間であること
・表示時間が今の時間よりも後の時間であること(過ぎた時間は表示しない)
などがあります。

画像3

これらをListで表示させる方が簡単なのですが、Listで表示させて、toggle ボタンを使って切り替えると toggle ボタンの表示が切り替わるのに、1秒ほどはかかるので(dataに反映されるのはもっと遅い)、このように一つ一つプロパティを作成しています。

このプロパティをボタンにすることで同じ画面の表示の切り替えがなくなり、ユーザーストレスフリーになります!

後は、Selecting Menu という Property は、選択などには使えます。List で選択機能を使うのに対して、Selecting Menu では、見た目の反映が遅いなどといったことはないので、ミスなく実装ができると思います。



3. toggleの使い方

2.でも話しましたが、現時点(*2020年11月20日現在)では、toggle は動作が遅いので、基本使わないのがベストですが、どうしても使わないとできない状況があると思います。

まず toggle の Click action は2種類に分けられます。
✅ データベースの boolean を切り替える場合
✅ データベースの relationship 紐付けた要素に追加または除外

boolean を切り替える場合は、早さはあまり問題ないですが、relationship で紐づけた要素の切り替えは結構時間がかかります。(表示もデータの反映も...)

画像4

この場合は、toggle で切り替えたい要素を2つグループにして用意し、 Change Visibility でその要素に値が含まれている場合、いない場合をそれぞれ設定します。

ボタンを押してデータベースに反映されてからは、toggle の切り替えが変わるよりも Change Visibility の方が早いです。


以上、3つの対処法が『Adalo』での動作が遅い場合の対処法でした。よく頂く質問だったのでまとめて見ました。


他にも細かいところで工夫していたりするので、もし質問がある方はTwitterのDMなど気軽にどうぞ〜!

この記事を見る時期によっては、『Adalo』が改善されていて問題なく実装ができているかもしれません。もしもっと良い方法がある!という方はこっそり教えてください。🤭

この記事が気に入ったらサポートをしてみませんか?