【個人開発】カレンダーの予定ごとにチャットすることができるアプリ開発 【Next.js, TypeScript, Python, Flask, Docker】

## 自己紹介
こんにちは！文系大卒のりょま(25歳)です。
私はフルタイムでの就業経験はありませんが、ソフトウェアエンジニアを目指して自己学習を進め、プロジェクトを通じて実践的なスキルを身に付けてきました。

## はじめに
![cc-put-event.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3361410/621e9279-6ae4-5468-3597-f1245405f0ae.png)

今回は、私が開発したアプリ 「Chatendar（チャテンダー）」 をご紹介します。Chatendarは、カレンダーとチャットを融合させた、イベントや予定ごとの情報管理に特化したアプリです。友達やチームメンバーとチャットしながらイベントの詳細を決め、そのままイベント情報に反映させることができます。

「チャットで決めた重要な予定や詳細を、過去のメッセージから探すのは面倒だ」と感じたことはありませんか？Chatendarなら、その問題を解決できます。チャットを通じて決まった内容が直接イベントに追加されるため、情報の見逃しや混乱を防ぐことができます。

### 概要
#### アプリ名
#### Chatendar(チャテンダー)
#### 説明
カレンダーがベースとなっており、加えてイベント・予定の作成、友達機能、グループチャット機能があります。

#### 使い方

https://youtu.be/xAF3BQmRTGY

https://github.com/R-koma/calendar-chat

このアプリは以下の特徴を持っています。
##### カレンダー機能
・アプリをカレンダーとして利用でき、ユーザーは自分のスケジュールを管理できる。

![cc-home.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3361410/85113e1e-3610-2005-99eb-4e78243c5865.png)

![cc-side-modal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3361410/bfa0722b-e32a-7959-d047-e2eac43d190b.png)

https://zenn.dev/ryoma_itngineer/articles/2eff5031d08295


##### イベント作成
・イベント名、日付、時間、場所、説明、友達を招待する機能を備えたイベントを作成できます。
・作成したイベントは、指定された日付のカレンダー上に表示されます。
・イベント作成者のみ、作成したイベント詳細の項目を編集・削除することができます。

![cc-create-event.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3361410/6b77346d-d56f-1df0-4f66-3625a4269d49.png)

![cc-invite-friend.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3361410/d8d9f4e0-3172-65e8-7ea1-f223daec0d28.png)

![cc-result-invite.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3361410/608a204a-4667-36b0-c902-1ad6a755b258.png)

![cc-put-event.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3361410/7939fb5a-a07c-d4ce-cfcd-cf37204be188.png)

![cc-event-detail.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3361410/358728ed-06ca-7d48-8931-1b7bf5675551.png)

https://zenn.dev/ryoma_itngineer/articles/0398646caa77fe

##### 友達機能
・友達を追加することができ、ユーザー名またはメールアドレスで検索して友達申請を送ることが可能です。
![cc-friends-search.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3361410/562d6931-a59b-df83-8acc-241330e7bdae.png)

![cc-friend-search-result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3361410/50a8a99b-1af7-15fe-6e61-9009e8d0bbfb.png)

![cc-display-friends-request.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3361410/0b9d8d8c-18e6-ed88-e14f-815bcca72764.png)

![cc-add-frinds-list.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3361410/6aeceec8-5239-1a8d-260a-a876287d1754.png)

https://zenn.dev/ryoma_itngineer/articles/17388144860a72

##### イベントに友達を招待
・作成したイベントに自分の友達を招待することができます。
招待されたユーザーは「イベント招待リスト」で招待を確認し、参加または不参加を選択できます。

![cc-event-invite-list.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3361410/9138410a-0a74-0403-781c-2d3180259b42.png)


##### イベント参加
・イベントに参加すると、そのイベントがユーザーのカレンダーに追加されます。
・イベントをクリックすると詳細を確認することができ、「チャット」ボタンを押すとチャット画面に遷移します。



##### グループチャット
・イベントの参加メンバーとグループチャットを行うことができ、イベントに関するディスカッションや情報交換がスムーズに行えます。

![cc-event-detail.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3361410/358728ed-06ca-7d48-8931-1b7bf5675551.png)

![cc-chat.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3361410/0b2ebd38-77c2-2e67-f283-09531cc6b654.png)

https://zenn.dev/ryoma_itngineer/articles/736215a3f2bbaa

#### ユーザーストーリー
役割: プロジェクトマネージャー、サラリーマン

目的: 特定のプロジェクトやイベントに関連するチームメンバーとのコミュニケーションを効率化する。

メリット: 各イベントに対応したグループチャットを利用することで、関連情報が一箇所に集約され、メンバー間の認識の齟齬を防ぐことができる。

* * *

役割: 友達同士の予定

目的: イベントを計画し、関連する情報を共有する。

メリット: 各イベントに対応したグループチャットを通じて、日時、集合場所などの詳細を友達同士で確認できる。

## 技術スタック
### プログラミング言語/データベース
|カテゴリー|名前|説明|目的|
|:-----------:|:------------:|:------------:|:------------:|
|フレームワーク|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による認証。

#### ユーザー検索機能
・このアプリを登録しているユーザーを検索する。

#### 友達認証
・友達申請できる。
・承認と拒否を選択することができる。

#### イベント作成と共有
・ユーザーがイベントの詳細を入力して作成。
・イベントに友達を招待する。

#### グループチャット
・イベント毎に参加メンバー同士でグループチャットをすることができる。

#### 参加状況の確認
・招待された参加者の参加・不参加を管理・表示する。

### 非機能要件
実装済み
1. セキュリティ
・全てのパスワードをハッシュ化して保存。
・JWTには有効期限を設定し、定期的な更新を行う。

2. コンテナ管理機能
・Dockerにより環境の一貫性を保つ。
・デプロイメントの効率化をする。

準備中

3. コンテナオーケストレーション
・AWS ECSを使用するため、サービスの自動スケーリング、ロードバランシング、ヘルスチェックの設定をする。

4. CI/CDの設定
・GitHub Actionsを用いて、コードの自動テスト、ビルド、デプロイを行うプロセスを確立する。

5. デプロイメント自動化
・AWS ECSによるデプロイメントプロセスを自動化し、迅速かつ安全なアプリケーション更新を実現する。



## 今後実装したいこと
・AWS ECSデプロイをする
・GitHub ActionsでCI/CDを実装
・マイクロサービスアーキテクチャ
・ユーザーのアイコン設定
・チャットで写真・動画・URLなどの共有
・weekとdayのカレンダー表示
・リアルタイム通知と既読
・リマインダー
・メールアドレスによる認証

## 最後に
最後までご覧いただきありがとうございました。
まだまだ、実装したいことが沢山あります。日々アップデートして行く予定です。

これからもQiitaを通して自分自身の知識や情報をアウトプットしていきます。よろしくお願いします。