Payslip Generator App

はじめに

このチュートリアルでは、Catalystを使用して従業員の給与明細を生成するアプリケーションを構築します。このアプリケーションでは、会社の給与明細テンプレートのスタイルを設定し、フォームに従業員の詳細情報を入力し、メールで各従業員に給与明細を送信できます。

クライアントアプリケーションは以下のようになります：

従業員に送信されるメールは以下のようになります：

生成されてPDFとしてメールで送信される給与明細は以下のようになります：

動作するアプリケーションにアクセスして機能をテストできます：アプリを試す！

Payslip Generatorアプリケーションは、以下のCatalystサービスとそのコンポーネントを使用します：

1. Catalyst SmartBrowz
   

   • Templates: Templatesは、給与明細のカスタムテンプレートを作成するために使用します。
   • PDF & Screenshot: PDF & Screenshotは、テンプレートのテストおよびバックエンドでのテンプレートのPDF生成に使用します。

2. Catalyst Serverless
   

   • Advanced I/O Function: Advanced I/O functionはNode.jsを使用してコーディングできます。カスタマイズしたテンプレートに詳細情報を入力し、Mailコンポーネントをトリガーして従業員にメールを送信するためのAPIが含まれています。

3. Catalyst Cloud Scale
   

   • Web Client Hosting: アプリケーションのフロント/クライアント側は、Web Client Hostingを使用してCatalyst上でホストします。Catalystのネイティブプラグインを使用して、基本的なWebアプリとしてWebクライアントを初期化・作成できます。
   • Mail: Mailは、従業員への自動メールの送信元となるメールアドレスを設定するために使用します。

このアプリケーションの構築には、Catalyst WebコンソールとCatalystコマンドラインインターフェース（CLI）を使用します。

このチュートリアルでは、ファンクションおよびクライアントコンポーネントに含めるファイルのコードが提供されます。ここに記載されたコードをコピーして、指示に従って適切なファイルに貼り付けてください。

アプリケーションアーキテクチャ

Payslip Generatorアプリケーションのロジックは以下のとおりです：

• フォームの送信: エンドユーザーは、クライアント側に表示されるフォームに、氏名、役職、ID、メールアドレス、基本給、控除額、手当、支払方法などの従業員の詳細情報を入力します。詳細情報の入力が完了したら、Submitをクリックします。

• PDF & Screenshot SDKのトリガー: バックエンドでは、PDF & Screenshot SDKがトリガーされ、ヘッドレスブラウザが起動します。Catalystが生成したTemplate IDを使用して、フォームで収集した詳細情報がテンプレートにレンダリングされ、PDFに変換されます。

• メールの送信: 生成されたPDFは、Send Mail SDKを使用して、フォームに入力されたメールアドレスに添付ファイルとしてメール送信されます。これによりMailコンポーネントが呼び出されます。ユーザーにはメール送信完了が通知され、フォームがリフレッシュされて次のユーザー情報を受け付ける準備が整います。