はじめに
Oliviaはpythonを愛好する開発者で、知識を共有し、ユーザーに役立つチュートリアルを作成することを楽しんでいます。この記事では、Next.js、TypeScript、Prisma、Neonといった最新で人気のWebアプリ開発テクノロジーを使って、フルスタックの経費管理アプリを構築する過程をご紹介します。
Next.jsプロジェクトの設定
始めに、OliviaはTypeScriptサポート付きの新しいNext.jsアプリケーションを`create-next-app`コマンドで作成します。次に、アプリケーションの基本レイアウトとホームページを設定し、きれいで整理された構造を確保します。
次に、Oliviaはデータベース操作を処理するために人気のORMツールPrismaを統合します。Prismaのスキーマファイルを作成して、ユーザーとトランザクションのモデルを定義し、Prismaのコマンドラインインターフェイスを使ってクライアントを生成し、データベース移行を適用します。
最後に、Oliviaは高速でスケーラブルなクラウドネイティブデータベースであるNeonデータベースを設定し、ユーザーとトランザクションのデータを保存します。新しいNeonプロジェクト、データベース、データベースロールを作成し、PrismaクライアントをこのNeonデータベースに接続します。
Clerkによる認証の実装
ユーザー認証を処理するため、Oliviaはセキュアで使いやすい認証プラットフォームであるClerkを統合しました。メール/パスワードやGoogle認証によるサインイン/サインアウト機能を実装し、ユーザーがサインインするとユーザー情報をNeonデータベースに保存して、トランザクションをユーザーアカウントに関連付けています。
また、ユーザーがそれぞれ自分のトランザクションにのみアクセスできるようアクセス制御も実装しています。
トランザクションの追加
Oliviaは、ユーザーが新しいトランザクションを追加できるコンポーネントを作成しました。トランザクションの金額や説明などのデータを検証し、サーバーアクションを使ってNeonデータベースに保存しています。トランザクションの保存に成功すると、成功のトーストnotification表示し、フォームをクリアします。
ユーザーの残高と収支の表示
ユーザーの財務状況を明確に把握できるよう、Oliviaは残高を表示するコンポーネントを構築しました。読みやすくするためにコンマ付きの金額表示を実装しました。
さらに、ユーザーの総収入と総支出を表示するコンポーネントも作成し、財務活動の概要を素早く確認できるようにしました。
トランザクションの一覧表示と削除
Oliviaはサーバーアクションを使ってNeonデータベースからユーザーのトランザクションデータを取得し、一覧表示するコンポーネントを作成しました。各トランザクションにはデータベースから削除できる削除ボタンも追加しています。
まとめ
この記事では、OliviaがNext.js、TypeScript、Prisma、Neonを使ってフルスタックの経費管理アプリを構築する過程をご紹介しました。これらの強力な技術を活用することで、ユーザーの財務管理をサポートする、セキュアでスケーラブル、ユーザーフレンドリーなアプリケーションを構築できます。
ポイント:
- Next.jsとTypeScriptを統合し、モダンでスケーラブルなWebアプリケーションを作成
- PrismaをレコーδシステムとしてNeonデータベースと連携
- Clerkを使ってメール/パスワードとGoogle認証によるセキュアなユーザー認証を実装
- ユーザーとトランザクションのデータをNeonデータベースに保存
- ユーザーの残高、収入、支出を表示し、トランザクションの一覧と削除機能を提供
このプロジェクトは、Oliviaのpython、データサイエンス、機械学習の専門知識、そして役立つチュートリアルを作成する能力を示しています。