PureJS Python 웹 앱에서 JavaScript 리포팅 도구를 사용하는 방법
페이지 정보
작성자 GrapeCity
작성일 2022-05-26 16:07 조회 699회
댓글 0건
본문
관련링크
ActiveReportsJS는 서버 종속성이 없는 100% 클라이언트 측 보고 도구입니다. 따라서 Python 응용 프로그램을 비롯하여 ActiveReportsJS 및 모든 웹 서버를 사용할 수 있습니다. 이 튜토리얼에서는 Python 응용 프로그램과 ActiveReportsJS를 통합하는 방법에 대해 간단하게 설명합니다. 이 튜토리얼을 마치면 다음을 수행할 수 있습니다.
- Django 프레임워크를 사용하여 JSON API를 제공하는 Python 웹 응용 프로그램 만들기
- CSV 파일에서 데이터 초기화
- JSON API 끝점 구성
- ActiveReportsJS 보고서를 만들어 JSON API에서 데이터 시각화
- 정적 HTML 페이지를 만들어 보고서 뷰어에서 보고서 표시
필수 컴포넌트
다음 내용에서는 컴퓨터에 Python 및 Django가 설치되어 있다고 가정합니다. 공식 에서 설치 방법에 대한 정보를 찾을 수 있습니다. 장치에 ActiveReportsJS도 설치되어 있으면 가장 좋습니다. 설치되지 않은 경우 에서 다운로드할 수 있습니다.
Django 응용 프로그램 만들기
이 튜토리얼에서는 Django 웹 프레임워크를 사용합니다. 새로운 Django 응용 프로그램을 만들려면 터미널 또는 명령 프롬프트에서 다음 명령을 실행합니다.
django-admin startproject ReportingOnDjango cd ReportingOnDjango py manage.py startapp sales_api
그런 다음 Visual Studio Code와 같이 즐겨 사용하는 코드 편집기에서 새로 만든 ReportingOnDjango 디렉터리를 엽니다. ReportingOnDjango 폴더에서 settings.py 파일을 열고 'sales_api.apps.SalesApiConfig' 항목을 INSTALLED_APPS 어레이에 추가하여 다음과 같이 보이도록 만듭니다.
INSTALLED_APPS = [ 'sales_api.apps.SalesApiConfig', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', ]
JSON API의 데이터 모델 만들기
웹사이트에서 다운로드할 수 있는 Sales 데이터 집합을 사용해 보겠습니다. 100개의 레코드부터 5백만 개의 레코드까지 다양한 크기의 데이터 집합을 제공합니다. 간단하게 100개의 레코드가 있는 첫 번째 데이터 집합을 사용하겠습니다. 데이터 집합에는 많은 필드가 있지만 이 튜토리얼에서는 이 중 몇 가지만 사용하겠습니다. JSON API의 데이터 모델을 만들려면 sales_api/models.py의 콘텐츠를 다음과 바꿉니다.
from django.db import models class Sale(models.Model): region = models.CharField(max_length=200) itemType = models.CharField(max_length=200) unitsSold = models.IntegerField()
그런 다음 터미널 또는 명령 프롬프트에서 다음 명령을 실행합니다.
py manage.py makemigrations sales_api python manage.py migrate
응용 프로그램 데이터 추가
웹사이트에서 다운로드할 수 있는 Sales 데이터 집합을 사용해 보겠습니다. 100개의 레코드부터 5백만 개의 레코드까지 다양한 크기의 데이터 집합을 제공합니다. 간단하게 100개의 레코드가 있는 첫 번째 데이터 집합을 사용하겠습니다.
데이터를 다운로드하고 보관 파일에서 응용 프로그램의 루트 디렉터리로 압축을 해제합니다.
터미널 또는 명령 프롬프트에서 python manage.py shell 명령을 실행하여 대화형 Python 셸을 시작하고 다음 명령을 입력합니다.
from sales_api.models import Sale
import csv
with open('100 Sales Records.csv', newline='') as csvfile:
reader = csv.reader(csvfile, delimiter=',')
next(reader)
for row in reader:
Sale.objects.create(region=row[0], itemType=row[2], unitsSold=row[8])JSON API 엔드포인트 구성
판매 목록을 반환하는 JSON API 끝점을 구성하는 가장 쉬운 방법은 Django REST Framework를 사용하는 것입니다. 터미널 또는 명령 프롬프트에서 pip install djangorestframework 명령을 실행한 후 'rest_framework' 항목을 ReportingOnDjango\settings.py 파일의 INSTALLED_APPS 어레이에 추가하여 설치할 수 있습니다.
'serializers.py' 파일을 sales_api 폴더에 추가하고 콘텐츠를 다음으로 바꿉니다.
from rest_framework import serializers
from .models import Sale
class SaleSerializer(serializers.HyperlinkedModelSerializer):
class Meta:
model = Sale
fields = ('region', 'itemType', 'unitsSold')sales_api 폴더에 있는 view.py 파일의 콘텐츠를 다음으로 바꿉니다.
from rest_framework import viewsets from .serializers import SaleSerializer from .models import Sale class SaleViewSet(viewsets.ModelViewSet): queryset = Sale.objects.all() serializer_class = SaleSerializer
서버 정적 파일에 대해서는 settings.py 파일의 STATIC_ROOT 변수를 구성합니다.
STATIC_ROOT = BASE_DIR / 'sales_api/static/',
마지막으로 ReportingOnDjango 폴더에 있는 'urls.py' 파일의 콘텐츠를 다음으로 바꿉니다.
from django.contrib import admin
from django.urls import include, path
from rest_framework import routers
from sales_api import views
router = routers.DefaultRouter()
router.register(r'sales', views.SaleViewSet)
urlpatterns = [
path('api/', include(router.urls)),
path('admin/', admin.site.urls),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)py manage.py runserver 8080을 사용하여 서버를 실행하고 http://localhost:8080/api/sales URL을 엽니다. 위에 설명한 단계를 수행하면 페이지에 판매 목록이 표시됩니다.
ActiveReportsJS 보고서 만들기
이제 JSON API에서 데이터를 시각화하는 보고서를 만들어 보겠습니다.
에서 파일 메뉴를 클릭하고 새로 만든 보고서를 위해 연속 페이지 레이아웃 템플릿을 선택합니다.
속성 검사자의 을 열고 추가 버튼을 클릭합니다.
데이터 소스 편집기 대화 상자에서 엔드포인트 필드에 http://localhost:8080/api/sales를 입력하고 변경 사항 저장 버튼을 클릭합니다.
데이터 패널에서 데이터 소스 근처에 있는 + 아이콘을 클릭합니다.
데이터 집합 편집기 대화 상자에서 이름 필드에는 Sales를, JSON 경로 필드에는 $.*를 입력합니다.
유효성 검사 버튼을 클릭하고 데이터베이스 필드 섹션이 [3개 항목] 텍스트를 표시하는지 확인하고 변경 사항 저장 버튼을 클릭합니다.
도구 모음 왼쪽에 있는 메뉴를 사용하여 도구 상자를 확장합니다.
차트 항목을 도구 상자에서 보고서 페이지 영역의 왼쪽 위로 끌어 놓습니다. 차트 마법사 대화 상자가 나타납니다. 막대 유형을 선택하고 첫 번째 화면에서 다음 버튼을 클릭합니다.
대화 상자의 두 번째 화면에서 다음 이미지에 표시된 대로 데이터를 구성하고 다음 버튼을 클릭합니다.
세 번째 화면에서 마침 버튼을 클릭합니다.
보고서 페이지의 전체 너비를 채우기 위해 차트 보고서 항목의 크기를 조정합니다. 차트 범례를 클릭하여 속성을 속성 패널에 로드하고 방향 속성을 가로로, 위치 속성을 아래쪽으로 설정합니다.
파일 메뉴를 클릭하고 새로 만든 보고서를 응용 프로그램의 "ReportingOnDjango\sales_api\static" 폴더에 SalesReport.rdlx-json이라는 이름으로 저장합니다.
보고서를 표시할 정적 HTML 페이지 만들기
응용 프로그램의 "ReportingOnDjango\sales_api\static" 폴더에서 report.html 파일을 만들고 파일 내용을 다음 코드로 바꿉니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sales Report</title>
<link
rel="stylesheet"
href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-ui.css"
type="text/css"
/>
<link
rel="stylesheet"
href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-viewer.css"
type="text/css"
/>
<script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-core.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-viewer.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-pdf.js"></script>
<style>
#viewer-host {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="viewer-host"></div>
<script>
var viewer = new ActiveReports.Viewer("#viewer-host");
viewer.open('SalesReport.rdlx-json');
</script>
</body>
</html>브라우저에서 을 열어 보고서를 확인합니다. 단계를 올바르게 따른 경우 JSON API 데이터를 표시하는 보고서가 나타납니다.
지금 바로 ActiveReportsJS를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
