Python(Django)でSNSアプリケーションの開発Part1 ~サイト全体像と環境構築~

今回はDjangoを利用してSNSサイトの構築を行っていきます。
前回の[ブログサイト構築](https://qiita.com/Taku_nakahara/items/48836032f18154437c0b)ではDjangoの基本機能であるMVTの仕組みやHTTPについてなどwebサイトの基礎的な部分で実装しました。
今回のSNSサイト構築では「ユーザー認証機能」や「送信フォームについて」などの少しレベルアップした内容となっています。

<h2>前提</h2>
<h5>SNSサイトに必要な機能</h5>

①サインアップ機能
②ログイン機能
③ログアウト機能
④パスワードリセット機能
⑤トップページ(ログイン/ログアウトで表示変更)
------------------------------以下ログイン後に使える機能----------------------------------------------------------
⑥タイムライン
⑦投稿の詳細
⑧投稿編集(ログインユーザー自らの記事)
⑨返信
⑩ユーザーごとの投稿一覧

<h5>開発環境/ツール</h5>

使用言語：Python, HTML & CSS, JavaScript
ツール：Git/GitHub, Doker
エディター：VScode
OS:Windows11

<h5>環境構築</h5>

環境構築はDockerで行いました。
基本的な方法は[こちらの記事](https://qiita.com/Taku_nakahara/items/3a33867bdc3c339aa4a2)をご確認ください。
今回の変更箇所は以下になります。

```Python:requirement.txt
Django==3.1
```

ターミナルで以下のコマンドを入力しプロジェクトを作成しましょう。

```Python:ターミナル
docker-compose web run django-admin startproject app_sns .
docker-compose up
```
localhost:8000でwelcomeページに接続できるはずです。
続いてsettings.pyの編集です。今回もSqLiteを用いるためDATABASEの編集は不要です。
まずは[こちらの記事](https://qiita.com/Taku_nakahara/items/3a33867bdc3c339aa4a2)と同様にしましょう。

ここまで来たらアプリケーションを作成しましょう。新規ターミナルを立ち上げ以下のコマンドを入力してください。

```Python:ターミナル
docker exec -it app_sns_web_1 bash
python3 manage.py startapp user
python3 manage.py startapp timeline
```
今回はユーザー機能とタイムライン機能でアプリケーションを分けています。
先ずはユーザー機能から実装していきます。

<h2>完成したSNSアプリケーションについて</h2>

実装に入る前にまずは完成したSNSアプリについて見ていきましょう。

<h5>ログインしていない状態</h5>

①トップページ
![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402159/66936d45-ad46-7449-094d-1c8e0e462cc8.jpeg)
![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402159/5f92750d-f57d-9b3c-27c9-c53c660090a0.jpeg)
![3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402159/2f45f0f5-29ea-58ef-09fe-1eb34944c855.jpeg)
②サインアップ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402159/e9b6653a-1016-de16-6953-8447b30c5620.png)
③パスワードリセット
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402159/b2a45334-2418-e27b-c454-10eced12af42.png)
登録したメールアドレスを入力して送信すると以下のページに遷移します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402159/73778cec-c744-9b25-ee2d-b44f45b22a7c.png)
メールフォルダを確認するとlocalhost:8000からメールが送られてきているのでそのURLをクリックすると以下のページにつながります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402159/5eb0441e-9e1d-51ce-9eb0-214eee2adf8b.png)
新しいパスワードを入力しリセットすると、以下の成功画面に遷移します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402159/e947bcc8-3a02-da27-8b21-3bb40ee3eaf1.png)
<h5>ログイン状態のとき</h5>

①ログインフォーム



②タイムライン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402159/c1a717a1-7205-e5cf-011e-f4611e449830.png)
ユーザー名・記事内容は適当なのでご了承ください。
③投稿詳細
他のユーザーの投稿
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402159/cbb31de2-539c-f6b2-6a86-d2f5dcb0c033.png)
自分の投稿
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402159/eea0d826-f00b-82c5-360e-59c237efcd64.png)
削除/更新といった機能が現れます。
④投稿編集
投稿詳細(自ページ)の削除をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402159/40f4686f-296a-1efc-9a69-74adfce5fc20.png)
「削除する」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402159/50d5abe4-df8b-837e-7d05-0ee9f2754a0a.png)
「OK」をクリックしタイムラインに遷移
⑤新規投稿
ヘッダーの新規投稿をクリックすると投稿フォームに遷移します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402159/2bb4d5bb-f59c-37c2-600b-878a61f8cd16.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402159/c432468c-7dde-a8a3-c4ac-21ac1663c302.png)
内容を記入して投稿するとタイムラインに遷移します。
やってみましょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402159/06020b7e-50f0-e040-d447-2243f9775d8b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402159/720bb3ee-6dcb-87f5-b506-ce00d673414c.png)
⑥返信
続いて返信機能です。先ほど投稿詳細ページで返信ボタンがありました。それをクリックすると返信フォームが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402159/308e4664-94b3-499d-8648-353d51cb1df5.png)
適当なコメントを入力しボタンをクリックすると元の投稿詳細ページに遷移し、返信が追加されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402159/a785d636-36eb-059e-7782-17456020531b.png)
⑦ユーザーごとの投稿一覧
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402159/da71fcca-f5d0-fd02-967f-d22ef68ebd0c.png)
投稿詳細画面で「(ユーザー名)の投稿一覧」ボタンをクリックすると以下のページに遷移します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402159/8f77147f-4785-6194-e332-326467b97a84.png)
ユーザーごとの投稿が表示されました。
⑧ログアウト
ヘッダーのログアウトボタンをクリックすると以下のようになります。
ログアウト後はログイン前と同じへだーになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402159/24989549-1699-5e60-e2f3-5f7a29feb9f5.png)

以上が作成したアプリの全体になります。
次回からコードを載せていくのでチェックしてみてください。