Zipperを使用してサーバーレスアプリを高速に構築：TypeScriptで記述し、その他のすべてをオフロードする

Using Zipper to build serverless apps quickly written in TypeScript and offload everything else.

初めてRuby on Railsのデモンストレーションを見た時を覚えています。デモンストレーターたちは非常に少ない努力で、実際のビジネス目的に使えるフルスタックのWebアプリケーションを作り上げました。私は感心しました – 特にSeamやStrutsフレームワークを使って同様のソリューションを提供するのにどれだけの時間がかかったか考えると。

Rubyは1993年に作成された、使いやすいスクリプト言語であり、オブジェクト指向の機能も備えています。Ruby on Railsは2000年代半ばに次のレベルに進化しました – Twitter、Shopify、GitHub、Airbnbの初期のスタートアップの取り組みにおいて選ばれるべきテクノロジーとなるために適切なタイミングで登場しました。

私は次のような疑問を抱きました。「Ruby on Railsのような製品を、インフラストラクチャーや基盤となるデータ層を気にすることなく持つことは可能なのか？」

その時、私はZipperプラットフォームを見つけました。

Zipperについて

Zipperは、シンプルなTypeScriptの関数を使用してウェブサービスを構築するためのプラットフォームです。Zipperを使用して、アプレット（Javaとは関係ありませんが、同じ名前を共有しています）を作成し、Zipperのプラットフォーム上でビルドおよびデプロイします。

Zipperの最も素晴らしい点は、TypeScriptを使用してソリューションのコーディングに集中することができることで、他のことを心配する必要がないということです。Zipperは以下のことを処理します：

  • ユーザーインターフェース

  • ソリューションのホストに必要なインフラストラクチャー

  • 永続化層

  • アプレットとの対話に使用するAPI

  • 認証

このプラットフォームは現在ベータ版ですが、一般のユーザーにも利用できます。この記事を書いた時点では、新規利用者が始めるための4つのテンプレートが用意されていました：

  • Hello World – 基本的なアプレットで、始めるためのものです

  • CRUDテンプレート – ToDoリストを提供し、アイテムの作成、表示、更新、削除ができます

  • Slackアプテンプレート – Slackサービスとの連携方法の例を提供します

  • AI生成コード – ソリューションを自然言語で表現し、AIがアプレットを作成します

また、ZipperプラットフォームにはGitベースのリポジトリと同様にフォークできるアプレットのギャラリーもあります。

私はZipperプラットフォームをテストし、バレットアプレットを作成することにしました。

HOAバレットユースケース

ホームオーナーズアソシエーション（HOA）の概念は20世紀にアメリカで勢いを増しました。住宅地区は、共通のエリアの管理や住民のためのルールやガイドラインの確立などを扱うためにHOAを形成しました。彼らの目標は、住宅建設業者が開発を終えた後も、住宅地区全体の生活の質を維持することです。

HOAはしばしば選挙を行い、住宅所有者が自分の意見や視点に最も合う候補者に投票することを許可します。実際、昨年、私はWeb3技術を使用してHOAバレットを作成する方法について記事を公開しました。

この記事では、同じアプローチをZipperを使用して行いたいと思いました。

バレットの要件

バレットアプレットの要件は以下の通りです：

  1. バレットの所有者として、バレットの候補者リストを作成できる必要があります。

  2. バレットの所有者として、登録済み有権者リストを作成できる必要があります。

  3. 有権者として、候補者リストを表示できる必要があります。

  4. 有権者として、1人の候補者に1票を投じることができる必要があります。

  5. 有権者として、各候補者に対して投じられた投票の現在の集計結果を表示できる必要があります。

さらに、いくつかの拡張目標もあると思いました：

  1. バレットの所有者として、すべての候補者をクリアできる必要があります。

  2. バレットの所有者として、すべての有権者をクリアできる必要があります。

  3. バレットの所有者として、バレットのタイトルを設定できる必要があります。

  4. バレットの所有者として、バレットのサブタイトルを設定できる必要があります。

バラエティのアプレットの設計

Zipperプラットフォームで作業を開始するために、zipper.devに移動し、「サインイン」ボタンをクリックしました。次に、認証元を選択しました:

ログインすると、ダッシュボードから「アプレットの作成」ボタンを使用して新しいアプレットを作成しました:

一意の名前が生成されますが、ユースケースをよりよく識別するために変更することができます。現時点では、デフォルトの設定をそのままにして「次へ」ボタンを押しました – これにより、アプレット作成のための4つの異なるテンプレートから選択することができました。

私はCRUDテンプレートから始めました。これは、Zipperプラットフォーム上で一般的な作成、表示、更新、削除のフローがどのように動作するかの良い例を提供します。コードが作成されると、以下のように画面が表示されます:

完全に機能するアプレットが用意されたので、HOA投票の要件を満たすためにコードを更新できるようになりました。

コア要素の確立

投票アプレットのために、最初にtypes.tsファイルを以下のように更新することにしました:

新しいconstants.tsというファイル内に、投票のタイトルとサブタイトルの定数値を確立することにしました:

投票の変更を投票の所有者のみに許可するために、アプレットのSecretsタブを使用して所有者シークレットを作成し、値には自分のメールアドレスを設定しました。

次に、validateRequest()関数が含まれているcommon.tsファイルを導入しました:

これにより、この関数にコンテキストを渡して、投票と有権者に変更を加えることができるのはownerシークレットの値のみであることを確認できました。

候補者の確立

元のCRUDアプレットでToDoアイテムが作成される方法を理解した後、以下のようにcreate-candidate.tsファイルを導入することができました:

このユースケースでは、候補者の名前のみを提供すれば十分ですが、Candidateオブジェクトには一意のIDと受け取った票数も含まれています。

ここで、キー/値データストアからすべての候補者を削除するdelete-all-candidates.tsファイルも作成しました:

この時点で、「プレビュー」機能を使用してCandidate A、Candidate B、Candidate Cを作成しました:

有権者の登録

投票が準備できたので、投票用に有権者を登録する機能が必要でした。そのために、以下の内容のcreate-voter.tsファイルを追加しました:

有権者を登録するために、メールアドレスと名前の入力を提供することにしました。また、votedというブール型のプロパティがあり、これは一度だけ投票するルールを強制するために使用されます。

以前と同様に、delete-all-voters.tsファイルも作成しました:

これで、いくつかの有権者を登録する準備が整いましたので、自分自身を投票者として登録しました:

投票の作成

最後に、投票を確立する必要がありました。これは、以下のようにmain.tsを更新することで行いました:

以下のバリデーションを処理ロジックの一部として追加しました:

  • メールプロパティは必須でなければならず、そうでない場合は「有効なメールアドレスを提供してください」というメッセージが表示されます。

  • 提供されたメール値は登録された有権者と一致する必要があり、そうでない場合は「提供されたメールアドレスに投票する権限がありません」というメッセージが表示されます。

  • 投票する候補者が少なくとも1人以上いなければならず、そうでない場合は「この投票用に設定された候補者はありません」というメッセージが表示されます。

  • 登録された有権者が既に投票している場合、投票ボタンは投票用紙上のすべての候補者に対して無効になります。

main.tsファイルには、各候補者のボタンがあり、これらはすべてvote.tsファイルを呼び出します。以下に表示されます:

この時点で、投票アプレットは使用準備が整いました。

HOA投票の実行

登録済みの有権者ごとに、以下に示されるリンクの形式のメールを送信します：

https://squeeking-echoing-cricket.zipper.run/run/[email protected]

リンクは、emailクエリパラメータに適切なメールアドレスを提供するようにカスタマイズされます。リンクをクリックすると、main.tsファイルが実行され、メールパラメータが渡されます。これにより、登録済みの有権者はメールアドレスを入力する必要がなくなります。

投票用紙は以下のように表示されます：

私は候補者Bに投票することにしました。ボタンを押すと、投票用紙は以下のように更新されます：

候補者Bの得票数が1増え、すべての投票ボタンが無効になりました。成功です！

結論

投票用アプレットの要件を振り返ると、UI、インフラストラクチャー、デプロイメントを含めて、ストレッチゴールを満たすことができたことに気づきました。この経験の最も良い点は、100%の時間を解決策の構築に集中できたことであり、インフラストラクチャーや永続ストアに対して時間を費やす必要がありませんでした。

私の読者の皆様は、次のミッションステートメントに焦点を当てていることをおぼえているかもしれません。このミッションステートメントは、どのITプロフェッショナルにも当てはまると考えています：

「自分の知的財産の価値を高める機能/機能を提供するために時間を費やすことに集中してください。その他のすべてはフレームワーク、製品、サービスを活用してください。」

– J. Vester

Zipperプラットフォームは、私の個人的なミッションステートメントに100%準拠しています。実際、Ruby on Railsよりも一歩進んでいます。なぜなら、サービスを実行する場所や構成する必要のあるデータストアを心配する必要がないからです。アプレットのアプローチを使用することで、私の投票用紙は既にデプロイされ、使用準備ができています。

アプレットを試してみたい場合は、単にzipper.devにログインしてビルドを開始してください。現在、Zipperプラットフォームの利用は無料です。AI Generated Codeテンプレートを試してみてください。何を構築したいかの段落を提供し、結果のアプレットがどれくらい思い描いたものに近いかを確認するのは本当に面白いです。

私の投票用アプレットを試してみたい場合は、以下の場所でZipperギャラリー内でフォークすることもできます：

https://zipper.dev/johnjvester/ballot

素晴らしい一日をお過ごしください！

We will continue to update VoAGI; if you have any questions or suggestions, please contact us!

Share:

Was this article helpful?

93 out of 132 found this helpful

Related articles

Discover more

Want to read more? Go here