AppGyver（チョット）やってみた#6〜チュートリアル「取得したデータを AppGyver アプリケーションに表示する」まで

2022年10月10日 19:15

今回はローコード開発ツール「AppGyver」をチョットやってみたのシリーズ第6弾に入ります。
前回は正しく選んでもフリーズして反応しないという事態になりましたが、無事回避策で華麗に逃げ、今回はやっと取得したデータを画面に表示するところまでやってきました。
果たして最後まで走り抜けられるのか？？？？

前回までの話と準備

まずは前回までのざっくりしたストーリーと、今回のチュートリアルをスタートするまでの準備をします。

前回までのざっくりしたお話

前回まではこんな感じです。

＃１　AppGyverという製品の概要ととりあえずサインインしてみる
＃２　チュートリアルに従って画面まで作ってみた。
＃３　ボタンを押したらバーコードを読んで読んだ結果を表示させた。
＃４　データを呼び出すAPIの設定とデータの定義をした
＃５　APIによるデータ取得をボタンのロジックと接続した

今回の準備

今回も前回作成したモバイルアプリのプロジェクトを呼び出すところからスタートします。

AppGyverのアプリのページ（上記）を呼び出すと以下の画面になります。
（ログインを要求されることもあります）

前回作った「Open Foof Fact API」を呼び出します。

ロードに少し時間がかかりますが、下の開発画面が開けば準備完了です。

むむむむむ
まだ「８０％」のままです。
まるで「９９％終わっています」と言いながら全然終わらないプロジェクトのタスクのようです。

ステップ１〜アプリにテキストコンポーネントを追加する

ついにアプリの画面に食品のカロリーなどの上品情報を表示するエリアを作ります。
まずはScanボタンの下にTitleコンポーネントを設置し、名称を「Product Information」に変更します。

次にその下にTextコンポーネントを持ってきます。（注意：チュートリアルではParagraphとなっています）

ステップ２〜商品名表示

次は取得したデータから商品名を表示するエリアを作ります。APIで取得した情報のなかから表示すべき情報を選んで配置します。

追加したTextをクリックし左側のパラメーターから「ABC」（Currently bound to: Static text）をクリックして次の画面で、「Data Variables.」を選ぶところですが、選ぶのが大変な上「save」が表示されないトラブルがあるので「Formula」（式）を選択します。
式には

data.OpenFoodFacts1.product.product_name

と入力して「save」で保存します。