Documentation

Headless APIによるリモートアプリケーション

7.4以降で利用可能

オブジェクトを作成・公開すると、Headless REST APIが自動的に生成されます。 ここでは、これらのエンドポイントを統合して、シンプルなCRUD(作成、読み取り、更新、削除)リモートアプリケーションを作成する方法について説明します。

Liferay DXPのセットアップ

新しいLiferay DXPインスタンスを起動し、以下を実行します。

docker run -it -m 8g -p 8080:8080 liferay/dxp:7.4.13-u29。

メールアドレス_test@liferay.com_とパスワード_test_を使用して、http://localhost:8080でLiferayにサインインしてください。 プロンプトが表示されたら、パスワードを _learn_に変更します。

次に、以下の手順に従って、 /o/c/*URLパターンを [Default Portal CORS Configuration] に追加してください。 グローバルメニュー(グローバルメニュー)を開き、 [コントロールパネル] タブをクリックして、 [System Settings] → [Security Tools] に移動します。

  1. Portal Cross-Origin Resource Sharing (CORS)] タブで、 [Default Portal CORS Configuration] をクリックしてください。

  2. URL Pattern] に/o/c/*の値を追加し、 [保存] をクリックします。 これにより、すべてのオブジェクトAPI に対してCORSが有効になります。

    オブジェクトAPIの/o/c/* URLパターンを追加します。

CRUDアプリケーション用のオブジェクトを作成する

  1. グローバルメニュー(グローバルメニュー)を開き、 [コントロールパネル] タブをクリックして、 [オブジェクト] に移動します。

  2. 追加 ボタン (追加ボタン) をクリックし、下記の値を入力します。

    項目

    ラベル

    J4X7-Object

    複数形のラベル

    J4X7-Objects

    名前

    J4X7Object

    注釈

    提供されたReactアプリケーションがこの値を使用します。

  3. 新しい オブジェクト ドラフトを選択し、 [フィールド] タブをクリックして、これらの フィールド を追加します。

    ラベル

    項目名

    種類

    名前

    名前

    テキスト

    説明

    説明

    テキスト

  4. 詳細] タブをクリックし、 [公開] をクリックします。

CRUDアプリをセットアップする

  1. CRUDアプリをダウンロードし、解凍してください。

    curl https://learn.liferay.com/dxp/latest/en/building-applications/remote-apps/liferay-j4x7.zip -O
    
    unzip liferay-j4x7.zip
    
    cd liferay-j4x7
    
  2. node>と<code>yarnがインストールされていることを確認します。 そうでない場合は、以下のコマンドを実行し、プロンプトに従います。

    ./setup_tutorial.sh
    
  3. CRUDアプリケーションのフォルダに移動し、Reactサーバーを起動します。

    cd j4x7-remote-app
    
    yarn start
    

    起動したら、localhost:3000にアクセスし、CRUDアプリを表示します。

  4. 名前と説明を入力し、 追加 をクリックして、J4X7オブジェクトを追加します。 新しい項目が追加されました。

    名前と説明を入力して、追加をクリックします。

  5. 先ほど作成したJ4X7オブジェクトのID番号をメモしておいてください。 ID番号と新しい名前および説明を入力します。 [パッチ] をクリックします。 項目は新しい名前と説明で更新されました。

  6. 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経由でユーザーを認証する必要があります。

フォームの実装

GetForm.jsは、getObjectsメソッドを呼び出し、レスポンスをJSONとしてパースします。 J4X7の各エントリーは、フォームごとに一覧表示されます。

AddForm.jsは、入力を受信し、ユーザーが Add をクリックすると、addObjectメソッドを呼び出します。

PatchForm.jsは、入力を受信し、ユーザーが Patch をクリックすると、patchObjectメソッドを呼び出します。

DeleteForm.jsは、入力を受信し、ユーザーが Delete をクリックすると、deleteObjectメソッドを呼び出します。

App.jsファイルでフォームを集め、1つのページに表示します。

追加情報

Liferayリモートアプリケーションの作成 ヘッドレスフレームワークの統合