OutSystems Service Studio で REST で柴犬 API につないで柴犬を表示するアプリをつくるメモ

Posted on 2021-11-08

OutSystems Service Studio で REST で柴犬 API につないで柴犬を表示するアプリをつくるメモです。

実はめちゃくちゃ悩んでいた

https://twitter.com/1ft_seabass/status/1411867731796938752

実を言うと、このチュートリアルやった後に OutSystems のドキュメントの探し方がうまくなく、シンプルな HTTP 通信 REST の作り方がうまくたどり着けず、むちゃくちゃ悩んでおりました。

いいドキュメントにたどりつく

1つまたは複数のREST APIメソッドを利用するのREST APIの単一のメソッドを利用するの部分がまさに自分にやりたいことと分かり、なんとか HTTP というか REST のきっかけを作ることができるようになったので、今回、柴犬 API につないで表示してみます！

使っているバージョン

2021/11 現在、こちらの環境で使っています。

Windows 10 Pro
OutSystems Service Studio 11
- バージョン 11.12.6

柴犬 API

柴犬 API はこちらです。

shibe.online - the shiba inu api

この API はとても扱いやすくて、すぐに柴犬画像を取ってこれます。 http://shibe.online/api/shibes?count=[1-100]&urls=[true/false]&httpsUrls=[true/false] という HTTP GET リクエストな使い方なので、今回は http://shibe.online/api/shibes?count=1&urls=true&httpsUrls=true という形で柴犬画像を1枚だけ持ってきます。

アプリ作成

OutSystemsの価格とエディションで説明されている。無償トライアルを使っています。

New Applidation をクリックしてアプリを作成します。

From scratch を選択して NEXT ボタンをクリックします。

Reactive Web App を選択して NEXT ボタンをクリックします。

タイトルと説明は Shibainu API にしました。とりあえず。

Develop 画面に行くので Modules の CREATE MODULE ボタンをクリックします。

編集画面が表示されました。

Screen 設定

とりあえず画面を1枚作るので

Screen を真ん中のエリアにドラッグアンドドロップします。

New Screen は Empty を指定します。Screen name は Index としました。

Button 設定

左の部品リストから Button をドラックアンドドロップして配置します。配置する場所は Main Contents のエリアです。

タイトルを Get SHiba API にします。

TextArea 設定

Button のあとに、改行を一つ打ち込ちこみます。

左の部品メニューから TextArea をドラッグアンドドロップします。

右下にこの TextArea の設定が集まっています。

Properties の Variable のところで New Local Variable をクリックします。

TextVar という Variable が作られます。

Image 設定

TextArea のあとに、改行を一つ打ち込ちこみます。

左の部品メニューから Image をドラッグアンドドロップします。

Properties を確認します。

Type を External URL にして、URL で Suggestions を利用して TextVar の Variable を指定します。

このように設定しました。

REST のロジックを作る

1つまたは複数のREST APIメソッドを利用するのREST APIの単一のメソッドを利用するの部分を参考に進めます。

Logicタブで、Integrationsフォルダを開いて、 Consume REST API をクリックします。

ADD SINGLE METHOD をクリック。

Consume REST API Method 設定画面が出てきます。

Method URL は GET を選択して http://shibe.online/api/shibes?count=1&urls=true&httpsUrls=true を入力します。入力できたら Test タブで TEST ボタンをクリックします。

Response が返ってきたら COPY TO RESPONSE BODY をクリックします。

Body タブに Response が反映されました。FINISH をクリックします。

すると、Logic の REST 以下に ShibaOnline の設定一式が準備されます。これで柴犬 API の設定を作れました。

Button のクリックアクション設定

この Logic を Button のクリックアクションに設定していきます。

Button をダブルクリックして、動きの詳細を設定します。

このような画面になります。

さきほど作られた GetShibes を + のところにドラッグアンドドロップします。

左の部品メニューから Assign を GetShibes のあとにドラッグアンドドロップします。

Assign の設定を確認します。

まず Variable のほうを TextVar を指定します。

Value の部分を Expression Editor をクリックします。

Assign TextVar Value のウィンドウが出てきます。

左下の Scope から ButtonOnbClick > Response > Current > GetShibesResponse を1度だけダブルクリックします。すると、その前の GetShibes で取得された GetShibesResponse が TextVar に割り当てられる設定ができました。

DONE をクリックして設定を完了します。