ヘッドレスAPIによるリモートアプリケーション

ヘッドレス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] に追加してください。 グローバルメニュー(グローバルメニュー)を開き、 [コントロールパネル] タブをクリックして、 [システム設定] → [セキュリティツール] に移動します。

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

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

    Add the /o/c/* URL Pattern for Object APIs.

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

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

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

    項目
    ラベル J4X7-Object
    複数形のラベル J4X7-Objects
    名前 J4X7Object
    note

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

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

    ラベル 項目名 種類
    名前 名前 テキスト
    説明 説明 テキスト
  4. 詳細] タブをクリックし、 [公開] をクリックします。

CRUDアプリケーションのセットアップ

  1. 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
    
  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',
	});
};
note

ここでは、デモのために基本認証を使用しています。 本番環境では、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つのページに表示します。

追加情報

基本的なカスタム要素の作成 ヘッドレスフレームワークの統合