AppGyver（チョット）やってみた#6〜チュートリアル「取得したデータを AppGyver アプリケーションに表示する」まで
今回はローコード開発ツール「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」で保存します。
正しく設定されるとサンプルの商品名が表示されます。
ステップ３〜カロリー情報を表示
商品名の次はカロリーを表示します。商品名と同様にTextコンポーネントを配置して「ABC」（Currently bound to: Static text）をクリックし「Formula」を選択します。
Formula（式）に以下の式を入力します
data.OpenFoodFacts1.product.nutriments.energy
「save」で完了です。
正しく設定されるとサンプルのカロリー情報が表示されます。
ステップ４〜表示画像
次は画像がある場合に画像を表示するための設定をします。
まずは画面の下に「image」コンポーネントをドラッグアンドドロップで配置します。
右側のプロパティで「Source」のアイコン部分（imageのアイコン）をクリックします。
Formulaを選択します。
下の式をFormura（式）に入力します
data.OpenFoodFacts1.product.image_front_url
「save」で保存してこのパートは終了です。
imageのエリアに写真が表示されます。
ステップ５〜保存してテストする
最後にプロジェクトを保存してテストします。
最後に画面右上の「save」をクリックして保存します。
次に個々まで作ったアプリをテストします。
テストはスマホのAppGyver Previewアプリにて行います。
保存後にスマホのアプリを開きます。今回修正した「Product information」の文字が出ているはずです。「Scan」ボタンで商品のスキャンをします
残念ながらチュートリアルにある商品の写真が不鮮明でバーコードが読めません。
仕方がないのでAPI接続のときに使ったコードをバーコード化しましたので使ってください。
読むと商品名、カロリー、画像が表示されます。
今回のいきなり始めたチュートリアルですが
いろいろ挫折しそうになりましたが、無事完了しました
いいなと思ったら応援しよう！
