自作アプリ用のREADME

## アプリの概要及び想定ユーザー

サービスの概要は、地域生活に即した情報、町内の催しもの（イベント）開催のお知らせや安全・防犯・防災情報、また町内会や自治会の決定事項をお知らせするシンプルな「情報伝達アプリ」です。

想定しているユーザーとしては、町内全戸に連絡事項を伝える必要がある自治会及び町内会を想定しています。紙だと印刷後、修正ができず作り直す手間がかかるので、紙ではなく WEB上で投稿・管理し、町内及び地域の情報を共有し合えるサービスを制作しました。 

## なぜこのアプリを作成するのか

自身の町内の役職の当番時、町内会発足当時からの変わらないアナログ作業を経験しました。
そのアナログ作業の一つ『回覧板』をデジタル化で解決できないかと思い、作成しました。

## 回覧板の問題点

##### ①情報伝達に日数を要する

- 当番の人が回覧板用の書類（告知事項や配布書類等）を市役所や区役所に引き取りに行き、番地による組ごとに仕分けをして、組ごとに回覧板を回すことに負担を感じた。
- 安全・防犯・防災情報の場合は、一刻も早く伝達した方が良いのだが情報共有に時間を要する。
- 回覧が停滞しやすい。


##### ②紙媒体で連絡事項などを回している

- お知らせなどの配布書類をすぐ捨てる内容のものも多く、紙が勿体無い。

##### ③過去の文書の検索が容易

- 過去の情報を遡って確認したい場合、自治会で町内会自身で書類を保存をしていない限り、内容を確認できない。


## ポートフォリオのURL

- URL: https://develop.d359ve49zsh6ze.amplifyapp.com/
- Githib :  https://github.com/kitou88C39/ts_amplify_todo

## ER図

```mermaid
erDiagram
  users ||--o{ todo : "1人のユーザーは0以上の投稿を持つ"
  users ||--o{ read: "1人のユーザーは0以上のコメントを持つ"
  read ||--o{ todo: "1つの投稿は0以上のコメントを持つ"

  users {
    bigint user_id PK
    string title　FK
    string content　FK
    string timestamp 　FK
  }

  todo {
    bigint id PK
    string title "投稿タイトル"
    text content "投稿内容"
    timestamp created_at
  }

  read {
    bigint id PK
    references todoId FK
    references readId FK
    timestamp created_at Fk
  }
```　

```mermaid
flowchart TD
       u[開発環境] --> lb{Github <br/>branch main}
       subgraph Github pages
           lb --> app1[React <br/>Typescript]
end

           lb --> app2[Application]
           app1 --> db[(AWS)]
           app2 --> db[(AWS)]
       
```


## 使用技術

- react 18.2.0
- typescript 4.8.4
- react-redux 8.0.4
- react-router-dom 6.6.1
- react-hook-form 7.22.5 
- react-icons 4.6.0
- react-markdown 8.0.3
- chakra-ui 2.3.6
- WEBサーバー：AWSamplify
- DB: aws-amplify ( amplify、Datastore )





## 機能一覧


|     |  機能  |
|-----| -----   |
|  １ |  アカウント登録機能  |
|  2  |  アカウント削除機能 　|
|  3  |  ログイン機能 　　　  |
|  4  |  ゲストユーザーログイン機能 　|
|  5  |  ログアウト機能　　|
|  6  |  タイトル・コメントの追加機能(CRUD) 　  |
|  7  |  投稿内容更新機能(CRUD) |
|  8  |  投稿内容削除機能(CRUD)|
|  9  |  既読機能  |

## 何ができるのか

##### 1. トップページ

①最初にトップページへアクセスすると画面が描画されます。
②描画された画面にサイトの使い方が説明されています。
③ボタン（GetStart）を押すとトップページへリダイレクト。

![スクリーンショット 2023-01-19 19.09.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/9e69a415-f577-e9ab-e32c-1cd38958ce8b.png)


##### 2. ユーザー登録及び認証
##### ユーザー登録


①ユーザー登録と同時にユーザー情報を aws の Amplify に保存しています。
②UserName、Email、Password を入力して登録。

![スクリーンショット 2023-02-11 10.37.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/b72a934e-7e31-40a5-718a-9abc266889b3.png)


##### ユーザー認証

①アカウント登録済みの場合はフォームに『Username』と『Password』を入力してログインする。
②認証状態を判別し、投稿画面を表示させています。

![スクリーンショット 2023-02-11 10.38.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/edcba884-b1a3-fa18-6c81-fa0730aa6d5c.png)


##### 4. 情報の投稿

https://gyazo.com/1da6d9b0ee552a459b4bb17ee7081c67


##### 5. 投稿した情報、アカウント編集及び削除

- 投稿の一覧を表示。
- 編集ボタンで投稿した内容を修正。
- 削除ボタンを押すとデータが削除される。
- 他の人が投稿記事を読んだら、既読をする事ができる。

##### 6. 工夫したところ（UI/UX）
① top画面のファーストビューで使い方がわかる画像を意識して、
何をするアプリなのかが伝わるように作成。
② 『投稿 → 編集 → 保存及び削除』と『投稿記事の既読』がわかるのシンプルな設計。
③ メインビューの配色には緑色と黒色と白色をメインに作成。

##### 7. 工夫したところ（実装面）

①AWSamplifyの認証画面を使用しながらのページ遷移


②他者の投稿に対しての既読機能


##### 8.苦労した点

- データベース設計
アプリ作成時にER図やインフラ構成図を意識せず実装したことで、
機能を修正や追加をするときにテーブル同士の関係性やデータベースを何度も修正を繰り返した。
効率悪かったが、その分、データベース設計の重要さを理解することができました。

- top画面のtop画面のファーストビューで使い方がわかる画像を意識した。
当初のデザイン、挿絵を入れたものから、大幅に何度も何度も修正を繰り返した。
何度も修正を繰り返す内に、最終的に辿り着いたのは、シンプルなのが一番だと思った。

- 既読機能
回覧板をイメージしたアプリなので、
投稿内容に対して誰が読んだか読んでいないかを確認する機能をつけたかった。
データベース同様に機能の修正と追加を何度も繰り返した。
この既読機能の追加に時間を費やしたが、
最終的に既読の実装ができたのでよかった。