Python
↓↓クリックして頂けると励みになります。ランキング参加中プログラミング【04 | startapp】 ホーム】 >> 【06 | テンプレート】django-bootstrapをインストールします。 コマンド pip install django-bootstrap4==2.3.1 「crowdsource/settings.py」ファイル…
ランキング参加中プログラミング【03 | Django管理ダッシュボード】 ホーム】 >> 【05 | Bootstrap】アプリを作成します。 今回はアプリ名を「core」としました。 コマンド python manage.py startapp core アプリ作成 「settings.py」ファイルにアプリを登…
ランキング参加中プログラミング【02 | アプリケーション作成】 ホーム】 >> 【04 | startapp】 Visual Studio Codeでデスクトップに作成された「crowdsource」フォルダを開きます。 フォルダを開く ターミナルを開き、仮想環境をアクティベートします。 コ…
ランキング参加中プログラミング【01 | 開発環境を整える】 ホーム】 >> 【03 | Django管理ダッシュボード】ターミナルでデスクトップに移動します。 コマンド cd ~/Desktop/ 仮想環境を作成します。 名前は「venvcrowdsource」にしました。 コマンド python…
ランキング参加中プログラミング【ホーム】 >> 【02 | アプリケーション作成】まずは開発のための環境を構築していきます。 Homebrewのインストール Homebrewとは、Mac上でソフトウェアのインストールやアンインストールを管理してくれるシステムです。 イン…
[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 ダッシュボードで「公開可能キー」と「シークレットキー」をコピーし…
[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」ファイルを新規作成し…
[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…