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

FacebookやLinkedInに使われている友達申請システムやダイレクトメッセージ機能をReact HooksとDjango RestFrameworkを使って実装するコースです。

4.40 (109 reviews)
Udemy
platform
日本語
language
Network & Security
category
instructor
1,096
students
8.5 hours
content
Mar 2024
last update
$54.99
regular price

What you will learn

React Hooks

Django RestFramework

SNS機能の実装

友達申請システム+ダイレクトメッセージシステム

Description

Facebook, Instagram, Slack, Uber, Paypalなどのフロントエンドに使われているReact、YoutubeやInstagramのバックエンドに使われているPythonのWebフレームワークDjangoのRestFrameworkを使って、SNSアプリケーション開発を行います。


本コースでは、アプリケーションを開発していくため、事前に下記の基礎コースの受講をおすすめしています。


"Django REST APIでデバイス管理ツールを作ってみよう"

"React Hooks + Django REST Framework API でフルスタックWeb開発(基礎編)"


[フロントエンドで使用する技術]

Reack Hooks

Material UI

React Icon

React Cookie


[バックエンドで使用する技術]

Django REST Framework


Content

はじめに

SNS アプリケーションのコンセプト

[Back end] Django Restframework で API Endpoint

Source code
開発環境の構築
仮想環境の構築
DRFプロジェクト作成
プロジェクト urls.py
モデルの作成(1)
モデルの作成(2)
Adminパネル
シリアライザー(ユーザーAPI)
シリアライザー(ダイレクトメッセージAPI)
Views (ユーザーAPI 1)
Views (ユーザーAPI 2)
Views (ダイレクトメッセージAPI)
urls (API Apps)
API Endpoint 動作確認 (プロフィール)
API Endpoint 動作確認 (友達申請、ダイレクトメッセージ)
CORS

[Front end] React Hooks

Source code
React 開発環境構築
Material UI テーマ設定
Navbar
Router
Login コンポーネント(1) Material UI
Login コンポーネント(2) useReducer
Login コンポーネント(3) 関数
Login コンポーネント(4) Input Form
ApiContext (useEffect)
ApiContext (create + delete プロフィール)
ApiContext (プロフィール編集+友達申請)
ApiContext (ダイレクトメッセージ+友達申請承認)
ApiContextProvider
Mainコンポーネント
プロフィールリスト(1)
プロフィールリスト(2)
ログインプロフィール(style)
ログインプロフィール(functions)
ログインプロフィール(動作確認)
友達申請システム
友達承認システム
友達申請+承認システム(動作確認)
ダイレクトメッセージシステム
バッジ通知(未読友達申請数)
Scroll list

Screenshots

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

Reviews

Hiro08
May 15, 2022
他のコースは、コードはGitで公開し、コピペでサクサク進めるスタイルが無駄がなくて良かった。本コースは、コーディングする様子が動画で観れるので、それはそれで良いが、試聴時間が長くなる。このスタイルのときは、動画を観ながら一緒にコーディングできるように画面を拡大してもらえれば更に良いと思う。
Takahiro
January 2, 2021
I want to develop my original Web Application, so This movie is much useful for me. I'll enjoy your contents. Thank you!!
小山弓見夫
October 4, 2020
『こうして、ああすると。こうなります。』と言う解説だけで、『どうして、そうするのか?』等の説明が殆ど無いため、動画の意味がない。ソースコードだけ公開すれば良いのでは? ソースコードは、とても参考になると思いますが、どうして、そのように組まれているのかは、ほとんど解説が無いので、教材と言うよりは、サンプルです。
a
September 5, 2020
全体的にコードが良くないと思いました。命名規則がおかしい(Pythonコードなのに、キャメルケースが使われている)・変数名(askListFull等)から内容が読み取れない、関数名が冗長・コンポーネント名が適切でない等。 例えば、友達申請一覧を表示するコンポーネント名が"Ask"だったりします。 また、DRFのコードについてGitHubのリポジトリのリンクが公開されていますが、そちらもあまり良く有りません。 ・requirements.txt等がなくパッケージの依存が不明なのでクローンしても動かす場合は自分で依存パッケージを把握してinstallする必要がある ・一部管理画面でエラーが出る 以上の内容を許容できるのであれば、購入しても問題ないかと思います。
rikuto
August 31, 2020
説明があまりされないため、わかりやすくは無いです。ReactやRestFrameWorkを扱ったことが一度もない人には勧められません。しかし、API周りの処理は非常に参考になるのでReactとDjangoのつなげ方がいまいちわからない方は、受講してみるのもいいかもしれません。

Charts

Price

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

Rating

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

Enrollment distribution

[SNS編] React Hooks + Django RestFramework API でフルスタックWeb開発 - Distribution chart
3160380
udemy ID
5/23/2020
course created date
5/29/2020
course indexed date
Bot
course submited by