実装で学ぶフルスタックWeb開発
M1 MacBookAirで環境構築
OS Sonoma 14.3
| 環境構築
Docker DesktopをinstallすればOK
4.27.1にupdateさせた
既存のimage、containerはそのままでupdateできた
MySQL
VSCode
plugin
yarn
gamunu.vscode-yarn
ms-vscode-remote.remote-containers
containerの設定
yarnで必要なlibraryをinstall
React UI Toolのインストール
$ yarn add @mui/material
$ yarn add @emotion/react
$ yarn add @emotion/styled
ReactGridのインストール
$ yarn add @mui/x-data-grid
$ yarn add axios
Backendの設定
フロントエンドとバックエンドのシステム連携
DjangoでAPIを作成する
Databaseのstop起因のErrorが出てしばらく詰まった
code:zsh
Watching for file changes with StatReloader
Performing system checks...
System check identified no issues (0 silenced).
code:zsh
django.db.utils.OperationalError: (1049, "Unknown database 'app'")
最終的にdatabaseをdockerで作り直して、appのschemaをもう一度作った
するとdjangoのGetも成功した
https://gyazo.com/308bb497c2e15bd14e2391a122461512
フロントエンドからバックエンドのAPIを呼び出す
本の通りやっても失敗した
URLをハードコード
これでできた
https://gyazo.com/0baed8c8a6edc8d3d1202a3caa5a53a9
これでschemaとtableを作れた
MySQLにinsertでレコードを追加する
バックエンドからDBの値を取得する
localhostだと取得できた
https://gyazo.com/8027542b1982c463a29ec3f64bb627de
frontend→backend→dbの疎通に成功
https://gyazo.com/99d487c41461fe2d39c48e2c9833913e
第二部でやること
設計
フロントエンド実装
バックエンド実装
通常使用される動機処理
非同期処理
DB
第2部で作るものは在庫管理アプリケーション
ログイン機能
商品管理機能
商品の登録など
在庫管理機能
商品在庫の販売など
画面設計
ログイン画面
ヘッダー
サイドバー
商品一覧画面
商品在庫画面
売上一括登録画面
役割
フロントエンド
WebアプリケーションのUTを構築および表示する
責務:ユーザーが直接操作する画面やコンポーネントの作成など
Next.jsなので、クライアントサイドだけでなくサーバーサイドだけでも動作する
バックエンド
フロントエンドからリクエストを受け取る
DBや外部のAPIなどのリソースとやり取りを行う
結果をフロントエンドに返す
責務
データの処理
ビジネスロジックの実装
セキュリティの管理
データベースの操作
機能の洗い出し
データの対応関係を決めること
画面とURLの対応関係
table:URLマッピングの例
画面名 URL
バックエンドとのインターフェース
APIのURLを決めておく
一般的なREST APIの設計方針に従って構造を決める
バックエンドはAPIサーバーとして起動するから
table:APIとURLの対応関係
API メソッド URL
...
DB設計
ベースの作成
セットアップ関数
クリーンナップ関数
依存関係
Next.jsのルーティング(復習)
ビルトインコンポーネント
フロントエンドがどうも好きになれず、、、chap5は一旦コピペした
djangoでmodel生成
$ python manage.py makemigrations inventory --settings config.settings.development
https://gyazo.com/d04184fa9c3de0aa8189a211419a83a4
CREATE文(DDL)の作成
$ python manage.py sqlmigrate inventory 0001 --settings config.settings.development
https://gyazo.com/96fbe3c1576cd31fd6db180c27c4d611
migrateの実行
https://gyazo.com/ebcbfbf4373def0be8a51095a9905645
recordの作成
https://gyazo.com/81261d4b473d41ca54b607548c4fb841
https://gyazo.com/c61a00e7eecf6a6abde3df630d6d2066
serializer
https://gyazo.com/f95744abc5ac4bb4e801e42b18bfd11e
6-6-2終わり
https://gyazo.com/a24dbd627b08441a051a890d6ce5b326