AppGyver（チョット）やってみた#4〜チュートリアル「AppGyver アプリケーションをパブリック API に接続する」まで
今回はローコード開発ツール「AppGyver」をチョットやってみたのシリーズ第4弾に入ります。
前回まででバーコードを読んでコードの数字を表示するというところまで無事修了することができ、なんだか使えるアプリ感が出てくるところまでです。いよいよここからはAPIの接続、商品データの表示に入っていきます。
ここまでの快進撃もどこまで続くかやっている自分でも楽しみです。
前回までの話と準備
まずは前回までのざっくりしたストーリーと、今回のチュートリアルをスタートするまでの準備をします。
前回までのざっくりしたお話
前回まではこんな感じです。
＃１ AppGyverという製品の概要ととりあえずサインインしてみる
＃２ チュートリアルに従って画面まで作ってみた。
＃３ ボタンを押したらバーコードを読んで読んだ結果を表示させた。
今回の準備
とりあえず前回作成したモバイルアプリのプロジェクトを呼び出すところからスタートします。
AppGyverのアプリのページ（上記）を呼び出すと以下の画面になります。
（ログインを要求されることもあります）
前回作った「Open Foof Fact API」を呼び出します。
ロードに少し時間がかかりますが、下の開発画面が開けば準備完了です。
インジケーターの値は「８０％」です。
ステップ１〜データ リソースを追加する
まずはこのアプリにバーコードを読んだ商品のコードから商品の情報を呼び出すためにデータリソースを接続します。
まずはボタンをクリックしてフォーカスさせてから上にある「DATA」をクリックします。
DATAの画面になりますが、現時点では何も設定されていないので真っ白な画面が表示されます。
右上にある「Add Data Resources 」 をクリックします。
プルダウンメニューから「Rest API direct integration」を選択します。
REST APIを接続するための画面が表示されるので以下のパラメータを入力して保存します。
・Resource ID: OpenFoodFacts
・Short description: Data from Open Food Facts API
・Resource URL: https://world.openfoodfacts.org/api/v0
このパラメーターは今回のチュートリアルに準備された商品データを呼び出すための公開された「Open Food Facts API」の情報です。
実際のアプリを作るときはこういう感じのバックエンドのアプリを作る必要があります。（SaaSや公共のデータにははじめから用意されていたりします）
ステップ２〜Get Record データの構成
REST API の接続設定ができたのでデータを取得する要求を設定します。
左側のバーから「Get Recode」を選択してレコードを呼び出す設定画面を表示します。
「Relative path」フィールドに以下の情報を入力します
/product/{barcode}.json
次に下の方にあるURL placeholder （表形式の場所）をクリックして右側にパラメータの設定項目を表示させます。
表示されたパラメータ項目に各パラメータを入力します。
・Label: Barcode
・Key: barcode
・Value type: Text
・Description: Resource ID to retrieve
・Is encoded: Enabled
・Is static: Disabled
・Is optional: Disabled
（チュートリアルには「Enabled」と書かれているので注意）
ステップ３〜テスト データ ソース
設定がおわったので、情報の取得が正しく出来るかを確認します。
確認には「CONFIG」タブの隣の「TEST」タブを選びます。
画面中央、左側の「Ｂarcode」のところの「ABC」のアイコン（Currently bound to: static text.）を選択して下の画面を出します。
Static textのタイルを選択してから「Type a text」の欄にテスト用のコード「6416453061361」を入力して上の「RUN TEST」を押します。
タイトルと中身のデータが交互に出力されるJSON形式のデータが表示されたらOKです。（けっこう長いレコードが表示されます）
けっこう苦戦しますのでステップ２を見直して何回かやり直してください
ステップ４〜レスポンスからスキーマを設定
テストが無事（？）終了したらデータスキーマ（構造）を設定するステップになります。そのためには「RUN TEST」の下にある「Set Schema from Response.」をクリックします。
実際にテストで取得したJSONファイルを読んでデータ項目の構造を取得します。
処理が終わったら右上の「save」で保存します
これでこのステップは終了です
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？