自己紹介
こんにちは！文系大卒のりょま(25歳)です。
私はフルタイムでの就業経験はありませんが、ソフトウェアエンジニアを目指して自己学習を進め、プロジェクトを通じて実践的なスキルを身に付けてきました。
はじめに
今回は、私が開発したアプリ 「Chatendar（チャテンダー）」 をご紹介します。Chatendarは、カレンダーとチャットを融合させた、イベントや予定ごとの情報管理に特化したアプリです。友達やチームメンバーとチャットしながらイベントの詳細を決め、そのままイベント情報に反映させることができます。
「チャットで決めた重要な予定や詳細を、過去のメッセージから探すのは面倒だ」と感じたことはありませんか？Chatendarなら、その問題を解決できます。チャットを通じて決まった内容が直接イベントに追加されるため、情報の見逃しや混乱を防ぐことができます。
概要
アプリ名
Chatendar(チャテンダー)
説明
カレンダーがベースとなっており、加えてイベント・予定の作成、友達機能、グループチャット機能があります。
使い方
このアプリは以下の特徴を持っています。
カレンダー機能
・アプリをカレンダーとして利用でき、ユーザーは自分のスケジュールを管理できる。
イベント作成
・イベント名、日付、時間、場所、説明、友達を招待する機能を備えたイベントを作成できます。
・作成したイベントは、指定された日付のカレンダー上に表示されます。
・イベント作成者のみ、作成したイベント詳細の項目を編集・削除することができます。
友達機能
・友達を追加することができ、ユーザー名またはメールアドレスで検索して友達申請を送ることが可能です。
イベントに友達を招待
・作成したイベントに自分の友達を招待することができます。
招待されたユーザーは「イベント招待リスト」で招待を確認し、参加または不参加を選択できます。
イベント参加
・イベントに参加すると、そのイベントがユーザーのカレンダーに追加されます。
・イベントをクリックすると詳細を確認することができ、「チャット」ボタンを押すとチャット画面に遷移します。
グループチャット
・イベントの参加メンバーとグループチャットを行うことができ、イベントに関するディスカッションや情報交換がスムーズに行えます。
ユーザーストーリー
役割: プロジェクトマネージャー、サラリーマン
目的: 特定のプロジェクトやイベントに関連するチームメンバーとのコミュニケーションを効率化する。
メリット: 各イベントに対応したグループチャットを利用することで、関連情報が一箇所に集約され、メンバー間の認識の齟齬を防ぐことができる。
役割: 友達同士の予定
目的: イベントを計画し、関連する情報を共有する。
メリット: 各イベントに対応したグループチャットを通じて、日時、集合場所などの詳細を友達同士で確認できる。
技術スタック
プログラミング言語/データベース
| カテゴリー | 名前 | 説明 | 目的 |
|---|---|---|---|
| フレームワーク | Next.js/TypeScript | Reactフレームワーク | フロントエンドの管理 |
| Flask | Pythonフレームワーク | バックエンドの管理 | |
| ライブラリー | axios | HTTPリクエストを処理 | API通信 |
| 拡張機能 | socket.io-client | リアルタイムを実現する | チャット機能 |
| SQLAlchemy | ORMを提供 | DB操作を簡略化し、管理 | |
| flask_jwt_extended | JWT認証機能を提供 | 認証と認可のトークン管理 | |
| flask_socketio | リアルタイムを実現する | チャット機能 | |
| DB | PostgreSQL | RDBMS | データの保存と管理 |
アーキテクチャ
・MVCアーキテクチャ
その他
| 技術 | サービス |
|---|---|
| コンテナ化 | Docker |
| デザイン(調整中) | draw.io(ER図,AWS構成図) Figma(画面遷移図) |
| 実装予定 | 以下の項目は現在取り掛かり中です。 |
| デプロイ | AWS ECS |
| CI/CD | GitHub Actions |
技術選定理由
Next.js
比較 : React, Vue.js, Angular
・様々なレンダリング手法があるので、それぞれのページごとにパフォーマンスを最適化することができる。(現段階では適切なレンダリングとは言えないので、リファクタリングしてから適切なレンダリングを実装する予定)
・Next.jsはTypeScriptと相性がよく、型安全な開発をすることができる。
・Reactのエコシステムを活用できるので、メンテナンス性や拡張性が向上する。
・すぐにTailWindCSSを使うことができる。
Flask
比較：Django, Node.js, Go, Ruby, PHP, Java
・軽量でシンプル: 初期設定が少なく、必要な機能を自分でカスタマイズできる。
・機能を柔軟に拡張できる。
・スケーラビリティ：軽量であるが、パフォーマンスも高いため、将来的にアプリを拡張する場合でも対応しやすい設計。
・PythonはAPI開発だけでなく、データ処理、機械学習、AI開発をすることができるため、汎用性が高い。
・記述がわかりやすい。
・学習コストが低い。
PostgreSQL
比較：SQLite, MySQL
・AWS ECSでデプロイするため。
・オープンソースで拡張性が高い。
・事前に利用したことがあった。
機能要件
ユーザー登録機能
◎新規登録
・ユーザー名とメールアドレスとパスワードを用いてアカウントを作成できる。
◎ログイン機能
・メールアドレスとパスワードによるログイン。
・JWTによる認証。
ユーザー検索機能
・このアプリを登録しているユーザーを検索する。
友達認証
・友達申請できる。
・承認と拒否を選択することができる。
イベント作成と共有
・ユーザーがイベントの詳細を入力して作成。
・イベントに友達を招待する。
グループチャット
・イベント毎に参加メンバー同士でグループチャットをすることができる。
参加状況の確認
・招待された参加者の参加・不参加を管理・表示する。
非機能要件
実装済み
-
セキュリティ
・全てのパスワードをハッシュ化して保存。
・JWTには有効期限を設定し、定期的な更新を行う。 -
コンテナ管理機能
・Dockerにより環境の一貫性を保つ。
・デプロイメントの効率化をする。
準備中
-
コンテナオーケストレーション
・AWS ECSを使用するため、サービスの自動スケーリング、ロードバランシング、ヘルスチェックの設定をする。 -
CI/CDの設定
・GitHub Actionsを用いて、コードの自動テスト、ビルド、デプロイを行うプロセスを確立する。 -
デプロイメント自動化
・AWS ECSによるデプロイメントプロセスを自動化し、迅速かつ安全なアプリケーション更新を実現する。
今後実装したいこと
・AWS ECSデプロイをする
・GitHub ActionsでCI/CDを実装
・マイクロサービスアーキテクチャ
・ユーザーのアイコン設定
・チャットで写真・動画・URLなどの共有
・weekとdayのカレンダー表示
・リアルタイム通知と既読
・リマインダー
・メールアドレスによる認証
最後に
最後までご覧いただきありがとうございました。
まだまだ、実装したいことが沢山あります。日々アップデートして行く予定です。
これからもQiitaを通して自分自身の知識や情報をアウトプットしていきます。よろしくお願いします。