AppGyver（チョット）やってみた#5〜チュートリアル「パブリック API から AppGyver アプリケーションにデータをフェッチする」まで
今回はローコード開発ツール「AppGyver」をチョットやってみたのシリーズ第5弾に入ります。
前回はついにデータとの接続からスキーマの設定などデータ廻りの設定を無事に終わらせましたが、今回は画面側とそのデータ呼び出しAPIをつなぎます。いよいよゴールに近づいてきました。
前回までの話と準備
まずは前回までのざっくりしたストーリーと、今回のチュートリアルをスタートするまでの準備をします。
前回までのざっくりしたお話
前回まではこんな感じです。
＃１ AppGyverという製品の概要ととりあえずサインインしてみる
＃２ チュートリアルに従って画面まで作ってみた。
＃３ ボタンを押したらバーコードを読んで読んだ結果を表示させた。
＃４ データを呼び出すAPIの設定とデータの定義をした
今回の準備
今回も前回作成したモバイルアプリのプロジェクトを呼び出すところからスタートします。
AppGyverのアプリのページ（上記）を呼び出すと以下の画面になります。
（ログインを要求されることもあります）
前回作った「Open Foof Fact API」を呼び出します。
ロードに少し時間がかかりますが、下の開発画面が開けば準備完了です。
インジケーターの値は「８０％」のままです。
伸び悩んでる？？？？？
ステップ１〜アラート コンポーネントを削除する
まずは以前に作ったアラートの部分を着手します。
この部分はバーコードの読み込みが正しく行われるかのテストのために作ったのでこの部分は不要になります。
設定したときと同様にボタン（Scan）をクリックした状態で右下にある「add logic to BUTTON1」をクリックしてロジック パネルを表示させます。
クリックして「✕」をクリックするとAlertのロジックが削除されます。
ステップ２〜Get Record コンポーネントを追加する
次に削除した「Alert」の代わりにデータを呼び出す「Get Recode」を追加して接続します。
Dataのところから「Get Recode」をドラッグアンドドロップで配置します。
配置したら「DEVICE:Scan QR/barcode」の一番上と「DATA:Get recode」を接続します。
ステップ３〜バインディングを編集
ロジックフローができたら、その中身である出力に情報をバインドする設定をします。
ロジックフローにある「Get Record」をクリックし、右側のプロパティの「ABC」のところ「Currently bound to: Static text」を選択してバインディングオプション画面を開きます。
下の段にあるOutput value of another nodeを選択して、パラメータ設定画面を表示させ下記を選択します
・Select logic node – Scan QR/barcode
・Select node output – Scan QR/barcode / QR barcode content
最後にダイアログ下で「save」をクリックして保存します。
ステップ４〜データ変数を追加する
次は受信したデータを表示するための一時保管を行うためのデータ変数を設定します。
変数の設定は「VARIABLES」モードに切り替えます。
画面が切り替わったら左のメニューから「Data Variables.」を選択します。
次に画面の右側にある「ADD DATA VARIABLE」をクリックして選択肢から個々までに用意した「OpenFoodFactst」を選択します。
呼び出すデータは単一レコードなので、右側のパラメータは「Single data recode」を選択しておきます。
つぎにデフォルトで設定されてしまっている余計な機能「５秒おきに新しい情報を取得する既定のロジック」を除外するために画面右下の「Show Logic for Empty Page」をクリックします。
DATA:Get recode、UTILITY:Delay、VERIABLE:Set data variableの３つを削除します。
最後に「Save」してこのフェースは完了です
ステップ５〜スキャンボタンのデータ変数を設定
次にスキャンボタンを押すことによって得られるデータ変数を設定します。
ふたたび「VIEW」モードに切り替えます。
ボタンをクリックして関連するロジックフローを表示します
左側のロジックフローの部品からVariablesのところのSet Data Variablesを選択してロジックフローにドラッグアンドドロップして「DATA:Get recode」の上のコネクタと接続します。
次に、取得したデータをデータ変数に格納します。
チュートリアルを読むと標準の方法だと処理がうまくいかない場合があるみたいです。
まずはやってみます。
右の「data」にある「｛ ｝」「Custom object」の「｛ ｝」をクリックします。（注意：この部分はチュートリアルの説明が抜けています）
「Output value of another node」を選択してパラメータ画面に以下の内容をセットします。
・Select logic node: Get record
・Select node output: Record
選択はできたのですが、なぜか「save」がでてきません。
仕方がないので戻って「Output value of another node」ではなく「Formula」を選択して下の画面をだします。
式（Formula）に以下の式を入れます。
outputs["Get record"].record
「save」をクリックします
これで無事（？？？？？？）終わりました
この記事が気に入ったらサポートをしてみませんか？