Warning: count(): Parameter must be an array or an object that implements Countable in /home/c9962019/public_html/mochinoki-labo.com/wp-content/plugins/rich-table-of-content/functions.php on line 490
こんにちは、MSKです。
僕が勤務している企業は勤怠システムがなく、自分で出勤時間と退勤時間を記録し、月末にその記録を提出しなければなりません。
毎日時間を記入するのは面倒なので、ボタンを押すだけで出勤・退勤の時間を記録できるアプリを作成したいと思います。
今回は仕様をざっくりと決定して作り始めたいと思います。
関連する記事は以下になります。
出退勤の時間を記録するWebアプリの作り始め！<- この記事はここ！
出退勤時間を記録するアプリのAPIを作る！
出退勤時間を記録するアプリのユーザー登録と認証を実装する！
使用する言語など
今回作成するアプリはフロントエンドとバックエンドを分けて開発します。
バックエンドには
- 開発言語はPython
- 使うフレームワークはDjangoとDjango Rest Framework
- データベースにはPostgreSQL
フロントエンドにはReactを使っていきます。
インフラ周りには勉強も兼ねてDockerを使ってみたいと思っています。
（現時点であんまりDockerに詳しくないので、いろんな人の話を聞いて使ってみようと思っています。）
サーバーにはconoha VPSを使います。
フロントの設計と必要なデータ
出退勤を記録するためのアプリなので次のデータが必要です。
- 出勤時間
- 退勤時間
画面には、出勤ボタンと退勤ボタン、できれば過去の履歴を表示したいと思っています。
次のような画面をイメージしています。
月末に提出しなければならないので、csv出力をやりたいとも思っています。
とりあえず、作り始める
まずはバックエンドの方から作って行こうと思います。
Dockerはまだ勉強中なので、先にローカル環境で作成します。
Pythonのインストール
以下の記事で解説していますので、こちらを参考にしてください。
仮想環境とインストールなど
まずプロジェクトを入れるディレクトリを作成しておきます。
そのディレクトリの中で仮想環境を準備します。
python3 -m venv venv
仮想環境をアクティベートした後に
Djangoとdjango rest frameworkをインストールします。
pip install Django pip install djangorestframework
次のコマンドを入力してプロジェクトを作成します。
django-admin startproject (プロジェクト名) .
次にアプリを作成します。
django-admin startapp api
作成したアプリとdjango rest frameworkを登録します。
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'api.apps.ApiConfig',
]
モデルの作成とマイグレーション
ローカルに準備したPostgreSQLに接続を行います。
settings.pyに入力を行います。
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql',
'NAME': 'xxx', #作ったDB名
'USER': 'xxxx', #作ったユーザー名
'PASSWORD': 'yyyy', #ユーザー作った時のパスワード
'HOST': 'localhost',
'PORT': '',
}
}
モデルを作成します。
models.pyに今回使用するデータを定義します。
出退勤アプリなので、出勤か退勤かが分かり、それぞれの時間がわかればOKです。
ATTENDANCE_CHOICE = (
(1,"出勤"),
(2,"退勤"),
)
class ApiModel(models.Model):
type = models.IntegerField(choices=ATTENDANCE_CHOICE)
created_at = models.DateTimeField(default=timezone.now)
次に管理者ページからモデルをいじりたいので、admin.pyに次を追加します。
from .models import ApiModel admin.site.register(ApiModel)
管理者ページに入るためにスーパーユーザーを作っておきます。
python manage.py createsuperuser
管理者ページを表示してモデルを見てみます。
python manage.py makemigrations python manage.py migrate python manage.py runserver
http://127.0.0.1:8000/admin/にアクセスするとログインページが表示されますので、スーパーユーザーでログインします。
ログインするとapi modelsという項目ができていると思います。
あとで動作確認するので、いくつか項目を足しておきます。
最後に
とりあえず、ざっくりと概要を決めたので作って運用してみたいと思います。Dockerやデプロイ周りでかなりつまづきそうですが、失敗なども書いていきたいと思います。
次はAPIやログインのための実装をして、Postmanを使って動作確認をしたいと思います。
以上、「出退勤の時間を記録するWebアプリの作り始め！」でした。
最後までご覧いただき、ありがとうございます。
