前の。
Djangoでbitflyerの収支管理アプリを作ってみる（03.ユーザー情報新規登録画面を作る。）
https://qiita.com/redmeteor777/items/5013c04db5c7edcf8cba
3.ダッシュボード画面。(dashboard.html)
ログインしたら飛んでくる画面。
左上に「現在の累計収支」を表示。
左下に「現在の資産情報」を表示。
どちらもLightningと現物、日本円それぞれの情報を一目できるように。
右側は縦ぶち抜きで「取引履歴」を表示。
bitflyerは両建てできないので、在庫ゼロになったところを「決済完了」として表示しましょうか。
それぞれの表示領域をクリックすると「収支確認画面」「資産情報確認画面」「取引履歴確認画面」に遷移。
ログアウト用のボタンも付けましょう。
やりましょう。
bitflyerのAPIを使うために、ccxtをインストールしておきましょう。
ccxtはいろんな取引所のAPIを簡単に使えるようにしてくれるライブラリです。
>pip install ccxt
途中までは前回とほぼ同様。
入力フォームは使わないので、forms.pyの編集は不要です。
views.pyにdashboard用の関数を追加。
views.py
from django.shortcuts import render
from django.http import HttpResponse
from .forms import LoginForm
from .forms import RegistrationForm
import ccxt
def login(request):
params = {
'title': 'Login_Form',
'message': 'input your e-mail and pass.',
'form': LoginForm()
}
if (request.method == 'POST'):
params['message'] = \
'メールアドレス：' + request.POST['user_id'] + \
'<br>パスワード：' + request.POST['password']
params['form'] = LoginForm(request.POST)
return render(request, 'bfmonitor/login.html', params)
def registration(request):
params = {
'title': 'Registration_Form',
'message': 'input your e-mail, pass, API and Secret.',
'form': RegistrationForm()
}
if (request.method == 'POST'):
params['message'] = \
'メールアドレス：' + request.POST['user_id'] + \
'<br>パスワード：' + request.POST['password'] + \
'<br>API_Key：' + request.POST['api_key'] + \
'<br>API_Secret：' + request.POST['api_secret']
params['form'] = RegistrationForm(request.POST)
return render(request, 'bfmonitor/registration.html', params)
def dashboard(request):
params = {
'title': 'Dashboard',
'message': 'This is dashboard.'
}
return render(request, 'bfmonitor/dashboard.html', params)
dashboard.htmlを作成する。
dashboard.html
{% load static %}
<!doctype html>
<html lang="ja">
<head>
<meta charset="uth-8">
<title>{{title}}</title>
<link rel="stylesheet" type="text/css"
href="{% static 'login/css/style.css' %}" />
</head>
<body>
<h1>{{title}}</h1>
<p>{{message|safe}}</p>
<div class="parent">
<div class="collateral">収支</div>
<div class="balance">資産</div>
<div class="history">取引履歴</div>
</div>
</body>
</html>
HTMLやCSSがやたらと苦手なので、牛歩作戦でいきます。
（一気にやろうと思ったけどわけわかんなくて全然進まなかった）
とりあえず画面構成を作るとこまで頑張るべく諸々を仮置きします。
style.cssの作成。
bitflyer_monitor\bfmonitor\login\static\login\css\
とディレクトリを作成していき、cssディレクトリ内に[style.css]を作成します。
style.css
body {
color:gray;
font-size:16pt;
}
h1 {
color:red;
opacity:0.2;
font-size:60pt;
margin-top:-20px;
margin-bottom:0px;
text-align:right;
}
p {
margin: 10px;
}
.parent {
position: relative;
width: 90%;
}
.parent > div {
width: 50%;
}
.parent > div:not(.history) {
height: 5em;
}
.history {
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
.collateral { background-color: #e89; }
.balance { background-color: #8e9; }
.history { background-color: red; }
urls.pyを編集。
いつものです。
urls.py
"""bfmonitor URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/3.0/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
import login.views as login
urlpatterns = [
path('admin/', admin.site.urls),
path('login/', login.login, name='login'),
path('registration/', login.registration, name='registration'),
path('dashboard/', login.dashboard, name='dashboard'),
]
ではサーバーを起動して確認してみましょう。
>python manage.py runserver
ダッシュボード画面にアクセスして表示を確認します。
http://localhost:8000/dashboard/
左に色違いで二段、右に縦ぶちぬきの赤塗り枠が出ればOKです。
あとは枠の中に表示するもん埋め込むだけですね、余裕余裕ｗｗｗ(一級フラグ建築士)