ユースケース例：翻訳アプリ
この例では、レシピを実行およびコンポーネントをリセット/再読み込みアクションと変数を活用したシンプルなページを作成する方法を示します。 このアプリを使用すると、エンドユーザーはAI by Workatoを使用して、ドキュメントを任意のターゲット言語に翻訳できます。
ユースケース例
このガイドでは翻訳のユースケースを使用しており、例として役立つことを目的としています。 トリガー、アクション、条件付きロジックの設定などのレシピ変更では、固有の要件に合わせて追加のカスタマイズが必要になる場合があります。
前提条件
- AI by Workato
- レシピを実行アクションとコンポーネントをリセット/再読み込みアクションが有効になっているWorkflow apps
翻訳アプリの作成は、次の手順で構成されます。
既存のWorkflow appから開始することもできます。 レシピ実行アクションおよびコンポーネントのリセット/再読み込みアクションを有効にする既存のアプリがある場合は、アクションを有効にするに進みます。
新しいアプリを作成する
新しいアプリを作成する
新しいアプリを作成するには、次の手順を完了します。
プラットフォーム > Workflow apps portalに移動します。
+ New appをクリックします。
プロジェクト名フィールドに移動し、プロジェクトの一意の名前を指定します。
アプリ名フィールドに移動し、アプリケーションの一意の名前を入力します。 この名前は、アプリのエンドユーザーに表示されます。
リクエストを送信およびリクエストをレビューオプションの選択を解除します。
Create projectをクリックします。
アプリを設計する
アプリを設計する
新しいアプリに移動し、ページを作成をクリックします。
ページ名フィールドに移動し、ページの一意の名前を入力します。
既存のページコンポーネントを変更します。
ページ上部のテキストコンポーネントをクリックし、プロパティパネルに移動してアプリのタイトルと補助テキストをカスタマイズします。
名前コンポーネントをクリックし、削除アイコンをクリックしてページから削除します。
説明コンポーネントをクリックし、プロパティパネルに移動して、ラベルフィールドにText to translateと入力します。
このコンポーネントを必須としてマークします。
必要に応じて、色や画像をカスタマイズし、メインコンテナーのサイズを変更します。
アプリユーザーがテキストの元の言語を指定できるコンポーネントを追加します。
ページコンポーネントパネルに移動し、単一選択コンポーネントを選択します。 それをページにドラッグアンドドロップします。
コンポーネントプロパティパネルに移動し、ソースとして手動を選択して、オプションのリストを指定します。
このフィールドは任意のままにします。
ヒントフィールドに移動し、Leave blank to let the app detect the original language automaticallyと入力します。
アプリユーザーにターゲット言語の選択を求めるコンポーネントを追加します。
ページコンポーネントパネルに移動し、単一選択コンポーネントを選択します。 それをページにドラッグアンドドロップします。
コンポーネントプロパティパネルに移動し、ソースとして手動を選択して、言語のリストをオプションとして指定します。
このフィールドを必須としてマークします。
アプリユーザーに翻訳済みテキストの出力形式の選択を求めるコンポーネントを追加します。
ページコンポーネントパネルに移動し、単一選択コンポーネントを選択します。 それをページにドラッグアンドドロップします。
コンポーネントプロパティパネルに移動し、ソースとして手動を選択して、オプションのリストを指定します。 この例では、html、markdown、plain textを指定しています。
翻訳済みテキストを保持するコンテナーをページに追加します。
ページコンポーネントパネルに移動し、コンテナーを選択します。
それをページにドラッグアンドドロップします。
ページコンポーネントパネルに移動し、テキストコンポーネントを選択します。 それをページにドラッグアンドドロップします。
コンポーネントプロパティパネルに移動し、テキストフィールドにTranslated textと入力します。
ページコンポーネントパネルに移動し、テキストコンポーネントを選択します。 それをページにドラッグアンドドロップします。
このコンポーネントは今のところ空白のままにします。
ページコンポーネントパネルに移動し、ボタンコンポーネントを選択します。 それをページにドラッグアンドドロップします。
コンポーネントプロパティパネル>デザインに移動し、ラベルフィールドにResetと入力します。
アクションタブをクリックします。
アクションメニューに移動し、コンポーネントの値をリセットを選択します。
コンポーネントフィールドに移動し、クリアする予定のコンポーネント値を選択します。例：ページ。
設定は次のようになります:
リセットボタンの設定
プレビューをクリックして、アプリの外観をプレビューします。
保存をクリックします。
アクションを有効にする
この例では、アプリケーションで次の機能を有効にする予定です。
- ユーザーが送信をクリックすると、元のテキストを指定したターゲット言語に翻訳するレシピが実行されます。
- このレシピは、翻訳済みテキストをアプリケーションに返します。
- ユーザーはリセットボタンをクリックしてすべてのページコンポーネントの値をリセットし、新しいテキストを翻訳できるようにします。
レシピを実行アクションを有効にするには、ページエディターとレシピエディターで作業する必要があります。
ユーザーが送信をクリックしたときにアクションを有効にするには、次の手順を完了します。
送信ボタンを選択します。
プロパティパネル>アクションに移動します。
アクションドロップダウンメニューを使用して、レシピを実行を選択します。
レシピドロップダウンメニューを使用して、レシピを作成をクリックします。 これにより、レシピを設定ページが新しいブラウザータブで開きます。
レシピを設定する
このレシピのカスタマイズは、トリガーの変更、追加のレシピステップの追加、ページコンポーネントへのデータの返却で構成されます。
レシピを設定するには、次の手順を完了します:
名前フィールドに移動し、目的を区別できるレシピの一意の名前を指定します。
レシピの場所を選択します。 レシピは、Workflow appと同じプロジェクト内に含まれている必要があります。
ビルドを開始をクリックします。
Workatoは、New component event（リアルタイム）トリガーとReturn data to componentアクションが事前設定されたレシピを生成します:
レシピの概要
New component or drop-down eventトリガーを変更
New component or drop-down eventトリガーを選択します。
Setupタブに移動します。
Input parametersに移動し、+ Add fieldをクリックします。
名前フィールドに移動し、このパラメーターの一意の名前を指定します。
ラベルフィールドに移動し、target languageなど、このパラメーターの一意の名前を指定します。
Data typeフィールドに移動し、Stringを選択します。
任意フィールドに移動し、YesまたはNoを選択します。 Noの場合、ユーザーは対応するWorkflow appsフィールドでこのパラメーターの入力を指定する必要があります。
任意です。 Hintフィールドに移動し、ユーザーがこのフィールドに入力するのに役立つヒントを指定します。
設定は次のようになります:
入力パラメーターの設定
次の追加入力パラメーターを作成します:
| パラメーター名 | ラベル | データ型 | 任意 |
|---|---|---|---|
| source_text | ソーステキスト | 文字列 | いいえ |
| output_format | 出力形式 | 文字列 | はい |
出力スキーマに移動し、+フィールドを追加をクリックします。 この設定部分では、アプリに返す予定のデータのタイプを定義できます。
名前フィールドに移動し、translated_textなど、このパラメーターの一意の名前を指定します。
ラベルフィールドに移動し、translated textなど、このパラメーターの一意の名前を指定します。
Data typeフィールドに移動し、Stringを選択します。
任意フィールドに移動し、YesまたはNoを選択します。 Noの場合、ユーザーは対応するWorkflow appsフィールドでこのパラメーターの入力を指定する必要があり、このフィールドも必須としてマークする必要があります。
任意です。 Hintフィールドに移動し、ユーザーがこのフィールドに入力するのに役立つヒントを指定します。
追加のレシピステップを追加する
他のアプリケーションからデータを取得してアプリに返すために、追加のレシピステップを追加します。 このステップでは、AI by Workatoを使用してテキストを翻訳します。
ステップ2をクリックします。
アプリとしてAI by Workatoを検索して選択します。
テキストを翻訳アクションを選択します。
出力言語フィールドに移動し、ターゲット言語Step 1データピルをマッピングします。
ソーステキストフィールドに移動し、Translate the following intoと入力して、出力形式Step 1データピルとソーステキストStep 1データピルをマッピングします。
設定は次のようになります:
データピルマッピング
コンポーネントにデータを返すアクションを変更する
翻訳済みテキストをページに返すには、次の手順を完了します。
Return data to componentアクションを選択します。
Consider action as successfulフィールドに移動し、Yesを選択します。
翻訳済みテキストフィールドに移動し、翻訳済みテキストStep 2データピルをマッピングします。
任意です。 Successful toast messageフィールドに移動し、カスタム成功メッセージを指定します。 それ以外の場合、成功メッセージは表示されません。
Save、Exitの順にクリックします。
スタートレシピをクリックします。
完成したレシピは次のようになります:
完了したレシピ
ページコンポーネントにレシピ出力を表示する
ページエディターに戻り、ページコンポーネントに翻訳済みテキストを表示します。
アプリを完了するには、次の手順を完了します。
ページ変数を作成する
ページキャンバスをクリックします。
プロパティパネル>デザインに移動します。
+ Add variableをクリックします。
名前フィールドに移動し、translated textなど、変数の一意の名前を入力します。
データ型フィールドに移動し、Stringを選択します。
任意です。 <null>など、変数のデフォルト値を指定します。
完了をクリックします。
設定は次のようになります:
変数を作成
データピルをマッピングする
送信ボタンをクリックして選択し、コンポーネントプロパティパネルに移動します。
ソーステキストフィールドに移動し、値翻訳するテキストデータピルをマッピングします。
ターゲット言語フィールドに移動し、選択した値ターゲット言語データピルをマッピングします。
出力形式フィールドに移動し、選択した値出力形式データピルをマッピングします。
設定は次のようになります:
入力パラメーターをマッピング
変数を設定する
この変数は、翻訳済みテキストをアプリに返すために使用されます。
値を設定するレシピ出力>レシピ出力フィールドに移動し、translated-textを選択します。 これは、レシピで定義した出力フィールドです。
値の設定先フィールドに移動し、translated-text変数を選択します。
設定は次のようになります:
レシピ出力を使用して変数値を設定
変数をコンポーネントにマッピングする
この変数には翻訳済みテキストが含まれます。
翻訳済みテキストコンテナーに移動します。
テキストコンポーネントを選択します。
プロパティパネル>テキストに移動します。
ページデータモジュールからTranslated-textデータピルをマッピングします。
設定は次のようになります:
変数の設定
Save、Exitの順にクリックします。
アプリを公開する
アプリを公開するには、次の手順を完了します。
アプリを含むプロジェクトに移動します。
本番環境に移行をクリックします。
アプリを公開する前に、1つ以上のユーザーグループをアプリに追加する必要があります。
Last updated: