[40 | 飲食店モデルのアップデート] ホーム] >> [42 | UI設定ページ]ランキング参加中プログラミング「qrmenu_react」側の作業を行います。 「qrmenu_react/public/index.html」ファイルに記述の追加をします。 記述追加 【Desktop/QRMenu/qrmenu_react/publ…

[39 | 提供完了] ホーム] >> [41 | UIの更新]ランキング参加中プログラミング「qrmenu_server」側で作業します。 「qrmenu_server/qrmenucore/models.py」ファイルに記述を追加します。 記述追加 【Desktop/QRMenu/qrmenu_server/qrmenucore/models.py】11,1…

[38 | 受注表示] ホーム] >> [40 | 飲食店モデルのアップデート]ランキング参加中プログラミング「qrmenu_react/src/apis.js」ファイルに記述を追加します。 記述追加 【QRMenu/qrmenu_react/src/apis.js】123行目 import { toast } from 'react-toastify'; …

[37 | 受注データ実装] ホーム] >> [39 | 提供完了]ランキング参加中プログラミングオーダーを飲食店側が把握できるよう実装します。 「qrmenu_react/src/pages/Place.js」ファイルを編集します。 記述編集 【QRMenu/qrmenu_react/src/pages/Place.js】 impo…

[36 | 支払い処理実装] ホーム] >> [38 | 受注表示]ランキング参加中プログラミング「qrmenu_server」側で作業します。 「qrmenu_server/qrmenucore/serializers.py」ファイルに記述を追加します。 記述追加 【Desktop/QRMenu/qrmenu_server/qrmenucore/seri…

[35 | クレジットカード フォーム] ホーム] >> [37 | 受注データ実装]ランキング参加中プログラミング「src/apis.js」ファイルに記述を追加します。 記述編集 【Desktop/QRMenu/qrmenu_react/src/apis.js】115行目〜 import { toast } from 'react-toastify'…

[34 | Stripeモデルの実装] ホーム] >> [36 | 支払い処理実装]ランキング参加中プログラミング「qrmenu_react」側の実装を行います。 まずはstripeをインストールします。 コマンド npm install @stripe/react-stripe-js@1.4.0 @stripe/stripe-js@1.13.2 -s …

[33 | カート実装] ホーム] >> [35 | クレジットカード フォーム]ランキング参加中プログラミングまずは以下の手順でStripeのアカウントを取得してください。 mrradiology.hatenablog.jp ダッシュボードで「公開可能キー」と「シークレットキー」をコピーし…

[32 | カートボタン] ホーム] >> [34 | Stripeモデルの実装]ランキング参加中プログラミング「qrmenu_react/src/components」フォルダに「ShoppingCart.js」ファイルを新規作成します。 作成した「src/components/ShoppingCart.js」ファイルを以下のように編…

[31 | アイテム数の実装] ホーム] >> [33 | カート実装]ランキング参加中プログラミング「qrmenu_react/src/pages/Menu.js」ファイルを編集します。 記述編集 【Desktop/QRMenu/qrmenu_react/src/pages/Menu.js】 import { Container, Row, Col, Button } fr…

[30 | メニューページ] ホーム] >> [32 | カートボタン]ランキング参加中プログラミング「qrmenu_react/src/pages/Menu.js」ファイルを編集します。 記述編集 【QRMenu/qrmenu_react/src/pages/Menu.js】 import { Container, Row, Col } from 'react-bootst…

[29 | QRコードプリント] ホーム] >> [31 | アイテム数の実装]ランキング参加中プログラミング「QRMenu/qrmenu_react/src/pages」フォルダに「Menu.js」ファイルを新規作成します。 作成した「src/pages/Menu.js」ファイルを以下のように編集します。 新規作…

[28 | QRコード表示] ホーム] >> [30 | メニューページ]ランキング参加中プログラミング「react-to-print」をインストールします。 コマンド npm i react-to-print@2.12.4 -s 「src/components」フォルダに「QRCode.js」ファイルを新規作成します。 新規作成…

[27 | メニューアイテム削除] ホーム] >> [29 | QRコードプリント]ランキング参加中プログラミング「qrcode.react」をインストールします。 コマンド npm i qrcode.react@1.0.1 -s 「qrmenu_react/src/components」フォルダに「QRCodeModal.js」ファイルを新…

[26 | メニューアイテム更新] ホーム] >> [28 | QRコード表示]ランキング参加中プログラミング削除機能を実装します。 「qrmenu_react/src/apis.js」ファイルに記述を追加します。 記述追加 【QRMenu/qrmenu_react/src/apis.js】99行目 import { toast } fro…

[25 | メニューアイテム詳細表示] ホーム] >> [27 | メニューアイテム削除]ランキング参加中プログラミング「src/pages/Place.js」ファイルを編集します。 記述編集 【QRMenu/qrmenu_react/src/pages/Place.js】 import { IoMdArrowBack } from 'react-icons…

[24 | アイテム登録ページの更新] ホーム] >> [26 | メニューアイテム更新]ランキング参加中プログラミング「src/pages/Place.js」ファイルを編集します。 記述編集 【QRMenu/qrmenu_react/src/pages/Place.js】 import { IoMdArrowBack } from 'react-icons…

[23 | メニューアイテム登録] ホーム] >> [25 | メニューアイテム詳細表示] ランキング参加中プログラミング「qrmenu_react/src」フォルダに「components」フォルダを新規作成します。 作成した「components」フォルダに「MenuItem.js」ファイルを新規作成し…

[22 | カテゴリー登録] ホーム] >> [24 | アイテム登録ページの更新]ランキング参加中プログラミングメニューアイテムを登録できるように実装します。 「qrmenu_react/src/apis.js」ファイルを編集します。 記述編集 【QRMenu/qrmenu_react/src/apis.js】 im…

[21 | react-icons] ホーム] >> [23 | メニューアイテム登録]ランキング参加中プログラミングカテゴリー登録できるように実装していきます。 「qrmenu_react/src/apis.js」ファイルに記述を追加します。 記述追加 【QRMenu/qrmenu_react/src/apis.js】87行目…

[20 | Permission] ホーム] >> [22 | カテゴリー登録]ランキング参加中プログラミング作業は「qrmenu_react」側に移ります。 react-iconsを使用できるようターミナルでインストールします。 コマンド npm i react-icons@4.2.0 -s 「src/apis.js」ファイルに…

[19 | カテゴリー実装] ホーム] >> [21 | react-icons]ランキング参加中プログラミング登録したユーザーのみが変更できるようpermissionを追加します。 「qrmenu_server/qrmenucore」フォルダに「permissions.py」ファイルを新規作成します。 新規作成 【QRM…

[18 | ホームページ] ホーム] >> [20 | Permission] ランキング参加中プログラミングカテゴリーを追加するため、「Desktop/QRMenu/qrmenu_server」の実装をします。 「qrmenu_server/qrmenucore/models.py」ファイルを編集します。 記述編集 【QRMenu/qrmenu…

[17 | react-dropzone] ホーム] >> [19 | カテゴリー実装]ランキング参加中プログラミング「src/pages/Home.js」ファイルを編集します。 記述編集 【QRMenu/qrmenu_react/src/pages/Home.js】 import { Button, Jumbotron, Container, Row, Col, Image } fro…

[16 | 画像アップロード] ホーム] >> [18 | ホームページ]ランキング参加中プログラミングCloudinaryにサインアップします。 cloudinary.com サインアップをクリック 今回はデベロッパーを選択しました。 デベロッパーを選択 左下の歯車マーク「設定」をクリ…

[15 | 飲食店 表示] ホーム] >> [17 | react-dropzone]ランキング参加中プログラミング「src/apis.js」ファイルに関数を追加します。 記述追加 【Desktop/QRMenu/qrmenu_react/src/apis.js】 import { toast } from 'react-toastify'; function request(path…

[14 | 飲食店登録実装] ホーム] >> [16 | 画像アップロード]ランキング参加中プログラミングVisual Studio Codeで「qrmenu_react」側を編集します。 「src/apis.js」ファイルに記述を追加します。 記述追加 【QRMenu/qrmenu_react/src/apis.js】62〜64行目 i…

[13 | ユーザー登録] ホーム] >> [15 | 飲食店 表示]ランキング参加中プログラミングDjango側（qrmenu_server）の実装を行います。 Visual Studio Codeで「qrmenu_server」を開きます。 「qrmenucore」フォルダの「models.py」ファイルを開きます。 models.p…

[12 | Auth Context] ホーム] >> [14 | 飲食店登録実装]ランキング参加中プログラミング「qrmenu_react/src/apis.js」ファイルを編集します。 記述編集 【QRMenu/qrmenu_react/src/apis.js】 import { toast } from 'react-toastify'; function request(path…

[11 | ログイン機能実装] ホーム] >> [13 | ユーザー登録]ランキング参加中プログラミング「qrmenu_react/src」フォルダの中に「contexts」フォルダを新規作成します。 新規作成した「contexts」フォルダの中に「AuthContext.js」ファイルを新規作成します。…