Rust 웹 응용 프로그램에서 JavaScript 리포팅 도구를 사용하는 방법

기타 Rust 웹 응용 프로그램에서 JavaScript 리포팅 도구를 사용하는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2022-08-19 12:28 조회 534회 댓글 0건

본문

관련링크

ActiveReportsJS는 제로 서버 종속성이 있는 100% 클라이언트 측 보고 도구입니다. 즉, Rust 응용 프로그램을 비롯하여 모든 웹 서버와 ActiveReportsJS를 함께 사용할 수 있습니다. 이 문서에는 Rust 응용 프로그램과 ActiveReportsJS를 통합하는 방법에 대한 간단하면서 완전한 자습서가 포함되어 있습니다. 자습서를 마치면 다음을 수행할 수 있습니다.

Actix Web 프레임워크를 사용하여 JSON API를 제공하는 Rust 응용 프로그램 만들기
CSV 파일에서 데이터 초기화
JSON API 끝점 구성
ActiveReportsJS 보고서를 만들어 JSON API에서 얻은 데이터 시각화
정적 HTML 페이지를 만들고 제공하여 보고서 뷰어에서 보고서 표시

* 전제 조건: 이어지는 내용에서는 컴퓨터에 Rust가 설치되어 있다고 가정합니다. 설치되어 있지 않은 경우 공식 Rust 설치 가이드를 따르십시오. 컴퓨터에 ActiveReportsJS도 설치되어 있으면 가장 좋습니다. 설치되지 않은 경우 ActiveReportsJS 웹사이트에서 다운로드할 수 있습니다.

Rust 응용 프로그램 만들기

새로운 Rust 응용 프로그램을 만들려면 터미널 또는 명령 프롬프트에서 다음 명령을 실행합니다.

cargo new ReportingOnRust

그런 다음 Visual Stuio Code와 같이 자주 사용하는 코드 편집기에서 새로 만든 ReportingOnRust 디렉터리를 열고 Cargo.toml 파일에 다음 종속성을 추가합니다.

[dependencies]
actix-web = "*"
actix-files = "*"
serde = { version = "*", features = ["derive"] }
csv = "*"
rustc-serialize = "*"

응용 프로그램 데이터 추가

E for Excel 웹사이트에서 다운로드할 수 있는 Sales 데이터 집합을 사용해 보겠습니다. 이 웹사이트에서는 레코드 수 100개부터 5백만 개까지 다양한 크기의 데이터 집합을 제공합니다. 단순화를 위해 100개의 레코드가 있는 첫 번째 데이터 집합을 사용하겠습니다.

100-Sales-Records.zip 보관 파일에서 얻은 데이터를 다운로드하고 응용 프로그램의 'data' 폴더(만들어야 함)에 압축 해제합니다.

데이터 집합에는 많은 필드가 있지만 이 자습서에서는 이 중 몇 가지만 사용하겠습니다. sale.rs 파일을 응용 프로그램의 src 폴더에 추가하고 다음 코드를 추가합니다.

use serde::Deserialize;
use serde::Serialize;
extern crate csv;

#[derive(Serialize, Deserialize)]
pub struct Sale {
  #[serde(rename = "Region")]
   region: String,
  #[serde(rename = "Item Type")]
   item_type: String,
  #[serde(rename = "Units Sold")]
   inits_sold: i32,
}

pub fn get_sales() -> Result<Vec<Sale>, &'static str> {
   let reader = csv::Reader::from_path("data/100 Sales Records.csv");
   if reader.is_ok() {
       let mut sales: Vec<Sale> = Vec::new();
       for result in reader.unwrap().deserialize() {
           if result.is_ok() {
               let record: Sale = result.unwrap();
               sales.push(record);
          }
      }
       Ok(sales)
  } else {
       Err("can't read the data file")
  }
}

JSON API 끝점 구성

응용 프로그램의 src\main.rs 파일을 열고 파일 내용을 다음 코드로 바꿉니다.

use actix_web::{get, web, App, HttpServer, Responder, Result};
mod sale;

#[get("/sales")]
async fn sales() -> Result<impl Responder> {
   let sales = sale::get_sales();
   if sales.is_ok() {
       Ok(web::Json(sales.unwrap()))
  } else {
       Ok(web::Json(vec![]))
  }
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
   HttpServer::new(|| {
       App::new()
          .service(sales)
  })
  .bind(("127.0.0.1", 8080))?
  .run()
  .await
}

cargo 실행 명령을 사용하여 응용 프로그램을 실행하고 브라우저에서 http://127.0.0.1:8080/sales를 열어 JSON API가 반환한 데이터를 확인합니다.

ActiveReportsJS 보고서 만들기

JSON API에서 얻은 데이터를 시각화하는 보고서를 만들어 보겠습니다.

독립 실행형 보고서 디자이너 응용 프로그램에서 파일 메뉴를 클릭하고 새로 만든 보고서를 위해 연속 페이지 레이아웃 템플릿을 선택합니다.

속성 검사자의 데이터 패널을 열고 추가 버튼을 클릭합니다.

데이터 소스 편집기 대화 상자에서 끝점 필드에 http://127.0.0.1:8080/sales를 입력하고 변경 사항 저장 버튼을 클릭합니다.

데이터 소스

데이터 패널에서 데이터 소스 근처에 있는 + 아이콘을 클릭합니다.

데이터 집합 편집기 대화 상자에서 이름 필드에는 Sales를, JSON 경로 필드에는 $.*를 입력합니다.

유효성 검사 버튼을 클릭하고 데이터베이스 필드 섹션에 [3개 항목] 텍스트가 표시되는지 확인한 다음 변경 사항 저장 버튼을 클릭합니다.

도구 모음 왼쪽에 있는 햄버거 메뉴를 사용하여 도구 상자를 확장합니다.

차트 항목을 도구 상자에서 보고서 페이지 영역의 왼쪽 위로 끌어 놓습니다. 차트 마법사 대화 상자가 나타납니다. 첫 번째 화면에서 막대 유형을 선택하고 다음 버튼을 클릭합니다.

대화 상자의 두 번째 화면에서 다음 이미지에 표시된 대로 데이터를 구성하고 다음 버튼을 클릭합니다.

차트 마법사

세 번째 화면에서 마침 버튼을 클릭합니다.

차트 보고서 항목이 보고서 페이지의 너비 전체를 채우도록 항목 크기를 조정합니다. 차트 범례를 클릭하여 속성을 속성 패널에 로드하고 방향 속성을 가로로, 위치 속성을 아래쪽으로 설정합니다.

파일 메뉴를 클릭하고 새로 만든 보고서를 응용 프로그램의 'static' 폴더(만들어야 함)에 SalesReport.rdlx-json이라는 이름으로 저장합니다.

보고서를 표시할 정적 HTML 페이지를 만들고 제공하기

응용 프로그램의 static 폴더에 index.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>

응용 프로그램을 중지하고 main.rs 파일을 수정하여 actix_files의 use 선언과 static file services가 포함되도록 합니다.

use actix_files as fs;
use actix_web::{get, web, App, HttpServer, Responder, Result};
mod sale;

#[get("/sales")]
async fn sales() -> Result<impl Responder> {
   let sales = sale::get_sales();
   if sales.is_ok() {
       Ok(web::Json(sales.unwrap()))
  } else {
       Ok(web::Json(vec![]))
  }
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
   HttpServer::new(|| {
       App::new()
          .service(fs::Files::new("/reporting", "./static").index_file("index.html"))
          .service(sales)
  })
  .bind(("127.0.0.1", 8080))?
  .run()
  .await
}

응용 프로그램을 다시 실행하고 브라우저에서 http://127.0.0.1:8080/reporting/ URL을 방문하여 보고서를 확인합니다. 단계를 올바르게 따른 경우 JSON API에서 얻은 데이터가 표시된 보고서가 나타납니다.