1. Django-dashing으로 IoT 대시보드 생성

대시보드 형태의 웹페이지를 찾다가 Dashing이라는 것을 찾았습니다.

윈도우10 UI 스타일로 깔끔한 스타일의 대시보드를 만들 수 있습니다.

파이썬 장고(Django)를 위한 Django-dashing으로 쉽게 장고를 통해 사용할 수 있습니다.

Django-dashing을 설정하고 실행하는 방법입니다.

프로젝트는 파이썬 IDE인 PyCharm을 기준으로 설명합니다.

1. 프로젝트 생성 및 가상환경 생성

먼저 파이썬 프로젝트를 생성합니다.

메뉴의 Create New Project를 실행하면 됩니다.

먼저 프로젝트 경로를 입력하고 우측의 설정 버튼을 클릭해서 Create VirtualEnv를 실행합니다.

가상환경 이름과 경로를 적당히 입력합니다.

OK를 눌러서 가상환경 생성을 완료합니다.

가상환경 생성이 완료되면 Create를 눌러서 프로젝트를 생성합니다.

2. 장고 프로젝트 생성

기본 파이썬 프로젝트가 생성되면 장고(Django) 프로젝트를 생성합니다.

먼저 Alt + F12나 메뉴의 View > Tool Windows > Terminal을 실행해서 터미널 창을 엽니다.

터미널 앞 부분에 가상환경 이름이 표시되면 정상입니다.

이제 Django와 django-dashing을 설치합니다.

메뉴의 File > Settings를 실행하거나 Alt + F7로 프로젝트 설정을 실행합니다.

좌측의 Project interpreter 메뉴를 선택하고 우측에 보이는 + 버튼을 누릅니다.

검색을 통해 Django와 django-dashing을 찾고 하단의 Install Package를 눌러서 설치합니다.

이제 터미널에서 다음과 같이 입력해서 새로운 장고 프로젝트를 생성합니다.

django-admin startproject iotdashboard .

반드시 프로젝트 이름 뒤에 점을 추가해야 합니다.

실행 이후에 파일과 디렉토리가 생성되는 것을 확인할 수 있습니다.

몇 가지 설정을 위해서 프로젝트 디렉토리 하위의 settings.py를 일부 수정합니다.

먼저 BASE_DIR을 다음과 같이 수정합니다.

BASE_DIR = os.path.dirname(os.path.abspath(__file__))

그리고 TIME_ZONE 설정 부분을 찾아서 Asia/Seoul로 변경합니다.

TIME_ZONE = 'Asia/Seoul'

다음으로 파일의 끝부분에 위치한 STATIC_URL 항목 아래에 다음 내용을 추가합니다.

STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'), )

그리고 dashing 위젯을 사용하기 위해서 아래 코드를 추가합니다.

DASHING = {
    'INSTALLED_WIDGETS': ('number', 'list', 'graph', 'clock', 'weather'),
}

기본적으로 제공되는 위젯들을 사용할 수 있게 됩니다.

마지막으로 dashing을 사용할 수 있도록 INSTALLED_APPS 부분의 마지막에 추가합니다.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'dashing',
]

대시보드 웹페이지를 위한 준비가 완료됩니다.

3. 대시보드 URL 설정하기

웹페이지에 연결하기 위한 URL 설정을 위해 iotdashboard/urls.py의 내용을 다음과 같이 수정합니다.

from django.conf.urls import include, url
from django.contrib import admin

from dashing.utils import router
from django.views.generic.base import RedirectView

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^dashboard/', include(router.urls), name='dashboard'),
    url(r'^$', RedirectView.as_view(url='dashboard/'), name='index')
]

모든 내용이 반영되면 다음 명령어를 터미널에 입력합니다.

python manage.py runserver

웹페이지에 8000번 포트로 연결해서 다음과 같이 나오면 성공입니다.

심플한 디자인의 대시보드가 완성되었습니다.