QRオーダーシステムの構築
[45 | デプロイ準備] ホーム]ランキング参加中プログラミングDjangoなどのPythonアプリケーションをデプロイする際に使うGunicornをインストールします。 「qrmenu_server」側のターミナルで作業します。 source ~/Desktop/venvqrmenu/bin/activateでアクテ…
[44 | Heroku設定] ホーム] >> [46 | デプロイ]ランキング参加中プログラミング「qrmenu_server」側で作業します。 「heroku CLI」をインストールします。 コマンド brew tap heroku/brew && brew install heroku xcodeのバージョンが古い場合、以下のような…
[43 | UI設定フォーム] ホーム] >> [45 | デプロイ準備]ランキング参加中プログラミング作成したアプリケーションをherokuにデプロイします。 まずはアカウントを作成してください。 jp.heroku.com 新規登録 必要な項目を入力してアカウント登録してください…
[42 | UI設定ページ] ホーム] >> [44 | Heroku設定]ランキング参加中プログラミングReact-Colorをインストールします。 コマンド npm i react-color@2.19.3 -s 「src/pages/MenuSettings.js」ファイルを編集します。 記述編集 【Desktop/QRMenu/qrmenu_react…
[41 | UIの更新] ホーム] >> [43 | UI設定フォーム]ランキング参加中プログラミング「qrmenu_react/src/pages」フォルダに「MenuSettings.js」ファイルを新規作成します。 作成した「MenuSettings.js」ファイルを以下のように編集します。 新規作成 【QRMenu…
[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 サインアップをクリック 今回はデベロッパーを選択しました。 デベロッパーを選択 左下の歯車マーク「設定」をクリ…
