React+DjangoでSNSアプリをデプロイしました!

Posted date at 2024-06-22

React

Django

Udemy

GoogleCloud

sns-app-title.png

 フロントエンド開発(React+CSS)の実践的なパターンと、Node.jsに変わるバックエンド開発(Django)を学びたく、Zin nuxさんのUdemy講座でSNSを開発する過程で楽しく学びました。

将来的にAIによる分析(画像・音声認識を含)や複雑な数値計算、データ加工などができるライブラリを使用したバックエンドを構築する場合はDjangoを検討します(DjangoはPythonのフレームワークです)。


🚀受講した講座

[SNS編] React Hooks + Django RestFramework API でフルスタックWeb開発

講師 Zin nux さん

動画再生8.5時間  林がかけた時間29.6時間(内デプロイ+記事作成15時間)

説明文

 ※なお、これより前に、React+Djangoの講座は2つ受講しています。こちらの記事📒で紹介しています。


🚀製作したアプリ

🐡実装機能

  • ・ユーザ認証(新規作成、ログイン、トークン発行)
  • ・プロフィール編集(登録、削除、編集)
  • ・友達申請・承認
  • ・DM送信、受信

🐡アプリ(埋め込み)


🐡ユーザ一覧

#既存ユーザ 〇林翔太 ID:test1@gmail.com pass:test1 〇コードマフィア test2@gmail.com test2 〇坂本涼子 test3@gmail.com test3 〇ShinCode test4@gmail.com test4 〇じゃけぇ test5@gmail.com test5

🐡デプロイ

 講座はローカル環境での開発で終わりでしたが、実際にアプリをVercelとGoogleCloudにデプロイしました。講座の倍くらい時間がかかりましたが何とかできました(詳細📒)。

Django-GAE.drawio.png


 

🚀Djangoについて

 Node.jsとは異なり、ViewやModelsといったファイルにAPIに必要な動作を定義したクラスを用意します。

 普段、GASやJavaScriptで手続き型で処理を書いているものとはかなり違います。フレームワークなので、Pythonの基本文法がわかってもほとんど意味がなく、1から勉強となります。

 良いなと感じたのは、標準で管理コンソールをビルドしてくれるので、それを使用してAPIテストがしやすい点です。また、文献も多いため開発スピードもNode.js同様早い気がします。

 AIによる分析や複雑な数値処理などNode.jsにないライブラリを使用する場合はコチラを使用しようと考えます。

 〇管理コンソール

django-admin.png


🚀AnacondaNavigator

 Pythonの開発においては、Pythonの環境を開発毎に構築するのが一般的です。理由は、ライブラリが多いため、依存関係の整合性が保ちづらくなるためです。

 その際にはこちらのAnacondaNavigatorがおすすめです。GUIで仮想環境を作成してライブラリのインストールができるので管理しやすいです。VSCodeから作成した仮想環境を使用して、pythonを実行できます。

anaconda.png

←ホームに戻る