ヘッドレスAPIによるリモートアプリケーション
7.4以降で利用可能
オブジェクトを作成・公開すると、Headless REST APIが自動的に生成されます。 ここでは、これらのエンドポイントを統合して、シンプルなCRUD(作成、読み取り、更新、削除)リモートアプリケーションを作成する方法について説明します。
Liferay DXPのセットアップ
新しいLiferay DXPインスタンスを起動し、以下を実行します。
docker run -it -m 8g -p 8080:8080 liferay/dxp:7.4.13-u55。
メールアドレス[email protected]_とパスワード_test_を使用して、http://localhost:8080でLiferayにサインインしてください。 プロンプトが表示されたら、パスワードを _learn_に変更します。
次に、以下の手順に従って、 /o/c/*
URLパターンを [Default Portal CORS Configuration] に追加してください。 グローバルメニュー()を開き、 [コントロールパネル] タブをクリックして、 [システム設定] → [セキュリティツール] に移動します。
[Portal Cross-Origin Resource Sharing (CORS)] タブで、 [Default Portal CORS Configuration] をクリックしてください。
[URL Pattern] に
/o/c/*
の値を追加し、 [保存] をクリックします。 これにより、すべてのオブジェクトAPI に対してCORSが有効になります。
CRUDアプリケーション用のオブジェクトを作成する
グローバルメニュー(
)を開き、 [コントロールパネル] タブをクリックして、 [オブジェクト] に移動します。
追加 ボタン (
) をクリックし、下記の値を入力します。
項目 値 ラベル J4X7-Object 複数形のラベル J4X7-Objects 名前 J4X7Object note提供されたReactアプリケーションがこの値を使用します。
新しい オブジェクト ドラフトを選択し、 [フィールド] タブをクリックして、これらの フィールド を追加します。
ラベル 項目名 種類 名前 名前 テキスト 説明 説明 テキスト [詳細] タブをクリックし、 [公開] をクリックします。
CRUDアプリケーションのセットアップ
CRUD アプリケーション をダウンロードし、解凍してください。
curl https://resources.learn.liferay.com/dxp/latest/ja/building-applications/developing-a-javascript-application/using-react/liferay-j4x7.zip -O
unzip liferay-j4x7.zip
cd liferay-j4x7
node>と<code>yarn
がインストールされていることを確認します。 そうでない場合は、以下のコマンドを実行し、プロンプトに従います。./setup_tutorial.sh
CRUDアプリケーションのフォルダに移動し、Reactサーバーを起動します。
cd j4x7-remote-app
yarn start
起動したら、
localhost:3000
にアクセスし、CRUDアプリケーションを表示します。名前と説明を入力し、 追加 をクリックして、J4X7オブジェクトを追加します。 新しい項目が追加されました。
先ほど作成したJ4X7オブジェクトのID番号をメモしておいてください。 ID番号と新しい名前および説明を入力します。 [パッチ] をクリックします。 項目は新しい名前と説明で更新されました。
ID番号を入力し、 [削除] をクリックします。 項目が削除されました。
コードを調べる
サンプルのCRUDアプリケーションは、APIリクエストを含むファイルと、CRUD操作を処理するフォームを含むファイルの2つに分かれています。
リクエストの処理
Requests.js
ファイルは、JavaScriptの組み込みの fetch()
メソッドを使用しています。
getObjects()
すべてのオブジェクトに対してGETリクエストを行います。
export const getObjects = () => {
return fetch(`http://localhost:8080/o/c/j4x7objects/`, {
headers: {
Authorization: 'Basic ' + btoa('[email protected]:learn'),
'Content-Type': 'application/json',
},
method: 'GET',
});
};
addObject()
は、新しいオブジェクトの名前と説明を使用してPOSTリクエストを行います。
export const addObject = object => {
return fetch(`http://localhost:8080/o/c/j4x7objects/`, {
body: JSON.stringify({
description: object.description,
name: object.name,
}),
headers: {
Authorization: 'Basic ' + btoa('[email protected]:learn'),
'Content-Type': 'application/json',
},
method: 'POST',
});
};
patchObject()
は、特定のオブジェクトIDと新しい名前および説明を使用したPATCHリクエストを行います。
export const patchObject = object => {
return fetch(`http://localhost:8080/o/c/j4x7objects/${object.id}`, {
body: JSON.stringify({
description: object.description,
name: object.name,
}),
headers: {
Authorization: 'Basic ' + btoa('[email protected]:learn'),
'Content-Type': 'application/json',
},
method: 'PATCH',
});
};
deleteObject()
は、特定のオブジェクトIDを使用してDELETEリクエストを行います。
export const deleteObject = id => {
return fetch(`http://localhost:8080/o/c/j4x7objects/${id}`, {
headers: {
Authorization: 'Basic ' + btoa('[email protected]:learn'),
'Content-Type': 'application/json',
},
method: 'DELETE',
});
};
ここでは、デモのために基本認証を使用しています。 本番環境では、OAuth 2.0 を用いてユーザーを認証する必要があります。 OAuth2を使ったReactアプリケーションのサンプルは、OAuth2を使ってユーザーを認証する をご覧ください。
フォームの実装
GetForm.js
は、getObjects
メソッドを呼び出し、レスポンスをJSONとしてパースします。 J4X7の各エントリーは、フォームごとに一覧表示されます。
AddForm.js
は、入力を受信し、ユーザーが Add をクリックすると、addObject
メソッドを呼び出します。
PatchForm.js
は、入力を受信し、ユーザーが Patch をクリックすると、patchObject
メソッドを呼び出します。
DeleteForm.js
は、入力を受信し、ユーザーが Delete をクリックすると、deleteObject
メソッドを呼び出します。
App.js
ファイルでフォームを集め、1つのページに表示します。