아마존 퀵 사이트 더 나은 데이터 기반 의사결정을 내리기 위해 모든 규모의 조직에서 사용하는 서버리스 비즈니스 인텔리전스(BI) 서비스입니다. QuickSight 대시보드는 SaaS 앱 및 웹 포털에 내장되어 대화형 대시보드, 자연어 쿼리 또는 데이터 분석 기능을 앱 사용자에게 원활하게 제공할 수도 있습니다. 그만큼 QuickSight 데모 센트럴 사용할 수 있는 많은 대시보드, 기능 쇼케이스, 팁과 요령이 포함되어 있습니다. 에서 QuickSight 임베디드 분석 개발자 포털 애플리케이션에 대시보드를 삽입하는 방법에 대한 자세한 내용을 확인할 수 있습니다.
QuickSight 사용자 인터페이스는 현재 15개 언어를 지원합니다. 너는 선택할 수있다. 사용자별로. 사용자 인터페이스에 대해 선택한 언어는 UI 구성 요소와 관련하여 QuickSight에서 생성된 모든 텍스트를 현지화하며 대시보드에 표시되는 데이터에는 적용되지 않습니다.
이 게시물에서는 번역된 텍스트가 포함된 새 열을 생성하고 QuickSight 대시보드에서 선택한 언어로 데이터를 표시하기 위한 언어 선택 매개변수 및 관련 컨트롤을 제공하여 데이터 수준에서 다국어 대시보드를 생성하는 방법을 설명합니다. 여러 가지 방법으로 번역된 텍스트로 새 열을 만들 수 있습니다. 이 게시물에서는 다음을 사용하여 새 열을 만듭니다. 아마존 아테나 GitHub 프로젝트 샘플에 구현된 사용자 정의 함수 Amazon Comprehend 및 Amazon Translate를 사용한 텍스트 번역 및 분석을 위한 Amazon Athena UDF. 이 접근 방식을 사용하면 에서 제공하는 신경 기계 번역을 사용하여 번역된 텍스트가 포함된 열을 자동으로 쉽게 생성할 수 있습니다. 아마존 번역.
솔루션 개요
다음 다이어그램은이 솔루션의 아키텍처를 보여줍니다.
이 게시물에서는 샘플을 사용합니다. SaaS-Sales.csv 데이터세트를 만들고 다음 단계를 따르세요.
- 부 데이터 세트를 버킷으로 아마존 단순 스토리지 서비스 (아마존 S3).
- Athena를 사용하여 CSV 파일을 읽기 위한 데이터베이스와 테이블을 정의합니다.
- 번역된 텍스트가 포함된 열을 사용하여 Parquet 형식의 새 테이블을 만듭니다.
- QuickSight에서 새 데이터세트를 만듭니다.
- 매개변수와 컨트롤을 생성하여 언어를 선택하세요.
- 동적 다국어 계산 필드를 만듭니다.
- 계산된 다국어 계산 필드를 사용하여 분석을 만듭니다.
- 다국어 대시보드를 게시합니다.
- 포함된 대시보드에서 사용할 시각적 개체에 대한 파라메트릭 헤더와 제목을 만듭니다.
대안적인 접근 방식은 직접적으로 수행하는 것입니다. CSV 데이터 세트 업로드 QuickSight로 변환하고 QuickSight로 번역된 텍스트가 포함된 새 열을 만듭니다. 계산된 필드예를 들어 ifelse() 조건부 함수 번역된 값을 직접 할당합니다.
사전 조건
이 게시물의 단계를 수행하려면 활성 QuickSight Standard Edition 또는 Enterprise Edition이 있는 AWS 계정이 있어야 합니다. 신청.
Amazon S3의 버킷에 데이터 세트 복사
사용 AWS 명령 줄 인터페이스 (AWS CLI) S3 버킷 생성 qs-ml-blog-data 접두사 아래에 데이터세트를 복사합니다. saas-sales 귀하의 AWS 계정에서. 당신은 다음을 따라야합니다 버킷 이름 지정 규칙 버킷을 생성합니다. 다음 코드를 참조하세요.
$ MY_BUCKET=qs-ml-blog-data
$ PREFIX=saas-sales
$ aws s3 mb s3://${MY_BUCKET}/
$ aws s3 cp
"s3://ee-assets-prod-us-east-1/modules/337d5d05acc64a6fa37bcba6b921071c/v1/SaaS-Sales.csv"
"s3://${MY_BUCKET}/${PREFIX}/SaaS-Sales.csv"
CSV 파일을 읽기 위한 데이터베이스 및 테이블 정의
Athena 쿼리 편집기를 사용하여 데이터베이스 생성 qs_ml_blog_db:
CREATE DATABASE IF NOT EXISTS qs_ml_blog_db;그런 다음 새 테이블을 만듭니다. qs_ml_blog_db.saas_sales:
CREATE EXTERNAL TABLE IF NOT EXISTS qs_ml_blog_db.saas_sales (
row_id bigint,
order_id string,
order_date string,
date_key bigint,
contact_name string,
country_en string,
city_en string,
region string,
subregion string,
customer string,
customer_id bigint,
industry_en string,
segment string,
product string,
license string,
sales double,
quantity bigint,
discount double,
profit double)
ROW FORMAT DELIMITED
FIELDS TERMINATED BY ','
STORED AS INPUTFORMAT
'org.apache.hadoop.mapred.TextInputFormat'
OUTPUTFORMAT
'org.apache.hadoop.hive.ql.io.HiveIgnoreKeyTextOutputFormat'
LOCATION
's3://<MY_BUCKET>/saas-sales/'
TBLPROPERTIES (
'areColumnsQuoted'='false',
'classification'='csv',
'columnsOrdered'='true',
'compressionType'='none',
'delimiter'=',',
'skip.header.line.count'='1',
'typeOfData'='file')
번역된 텍스트가 있는 열을 사용하여 Parquet 형식의 새 테이블을 만듭니다.
우리는 열을 번역하고 싶습니다 country_en, city_en및 industry_en 독일어, 스페인어, 이탈리아어로. 확장 가능하고 유연한 방식으로 이를 수행하기 위해 GitHub 프로젝트 샘플을 사용합니다. Amazon Comprehend 및 Amazon Translate를 사용한 텍스트 번역 및 분석을 위한 Amazon Athena UDF.
다음 지침에 따라 사용자 정의 함수를 설정한 후 GitHub 레포, Athena에서 다음 SQL 쿼리를 실행하여 새 테이블을 생성합니다. qs_ml_blog_db.saas_sales_ml 번역된 열은 translate_text 사용자 정의 함수 및 기타 사소한 변경 사항:
CREATE TABLE qs_ml_blog_db.saas_sales_ml WITH (
format = 'PARQUET',
parquet_compression = 'SNAPPY',
external_location = 's3://<MY_BUCKET>/saas-sales-ml/'
) AS
USING EXTERNAL FUNCTION translate_text(text_col VARCHAR, sourcelang VARCHAR, targetlang VARCHAR, terminologyname VARCHAR) RETURNS VARCHAR LAMBDA 'textanalytics-udf'
SELECT
row_id,
order_id,
date_parse("order_date",'%m/%d/%Y') as order_date,
date_key,
contact_name,
country_en,
translate_text(country_en, 'en', 'de', NULL) as country_de,
translate_text(country_en, 'en', 'es', NULL) as country_es,
translate_text(country_en, 'en', 'it', NULL) as country_it,
city_en,
translate_text(city_en, 'en', 'de', NULL) as city_de,
translate_text(city_en, 'en', 'es', NULL) as city_es,
translate_text(city_en, 'en', 'it', NULL) as city_it,
region,
subregion,
customer,
customer_id,
industry_en,
translate_text(industry_en, 'en', 'de', NULL) as industry_de,
translate_text(industry_en, 'en', 'es', NULL) as industry_es,
translate_text(industry_en, 'en', 'it', NULL) as industry_it,
segment,
product,
license,
sales,
quantity,
discount,
profit
FROM qs_ml_blog_db.saas_sales
;열당 하나씩 세 가지 간단한 쿼리를 실행하여 번역이 포함된 새 열이 생성되었는지 확인합니다. 각 쿼리 뒤에는 결과를 보여주는 스크린샷이 포함되어 있습니다.
SELECT
distinct(country_en),
country_de,
country_es,
country_it
FROM qs_ml_blog_db.saas_sales_ml
ORDER BY country_en
limit 10
;
SELECT
distinct(city_en),
city_de,
city_es,
city_it
FROM qs_ml_blog_db.saas_sales_ml
ORDER BY city_en
limit 10
;
SELECT
distinct(industry_en),
industry_de,
industry_es,
industry_it
FROM qs_ml_blog_db.saas_sales_ml
ORDER BY industry_en
limit 10
;
이제 새 테이블을 사용할 수 있습니다 saas_sales_ml QuickSight에서 데이터 세트를 생성하기 위한 입력으로 사용됩니다.
QuickSight에서 데이터세트 만들기
QuickSight에서 데이터세트를 생성하려면 다음 단계를 완료하세요.
- QuickSight 콘솔에서 데이터 세트 탐색 창에서
- 왼쪽 메뉴에서 데이터세트 만들기.
- 왼쪽 메뉴에서 아테나.
- 럭셔리 데이터 소스 이름시작하다
athena_primary. - 럭셔리 Athena 작업 그룹¸ 선택 일차.
- 왼쪽 메뉴에서 데이터 소스 생성.
- 선택
saas_sales_ml이전에 생성된 테이블을 선택하고 선택.
- 테이블을 SPICE로 가져오도록 선택하고 시각화를 선택하여 새 대시보드 생성을 시작합니다.
분석 섹션에서 테이블을 SPICE로 성공적으로 가져왔음을 알리는 메시지가 표시됩니다.
매개변수를 생성하고 언어를 선택하는 컨트롤을 만듭니다.
매개변수를 생성하고 대시보드의 언어를 선택하는 데 사용하는 컨트롤을 연결하려면 다음 단계를 완료하세요.
- 분석 섹션에서 다음을 선택합니다. 파라미터 과 하나 생성.
- 럭셔리 성함, 입력
Language. - 럭셔리 데이터 유형선택한다. 끈.
- 럭셔리 마케팅은:, 고르다 단일 값.
- 럭셔리 정적 기본값, 입력
English. - 왼쪽 메뉴에서 만들기.
- 매개변수를 컨트롤에 연결하려면 Control.
- 럭셔리 표시 이름선택한다. 지원하는 언어.
- 럭셔리 스타일선택한다. 쓰러지 다.
- 럭셔리 마케팅은:, 고르다 특정 값.
- 럭셔리 특정 값 정의, 입력
English,German,Italian및French(한 줄에 하나의 값). - 선택 숨기기 매개변수에 기본값이 구성되어 있는 경우 제어 값에서 모든 옵션을 선택합니다..
- 왼쪽 메뉴에서 추가.
이제 컨트롤을 사용할 수 있으며 매개변수에 연결되어 Controls 분석에서 현재 시트의 섹션입니다.
동적 다국어 계산 필드 만들기
이제 현재 선택한 언어에 따라 값이 변경되는 계산된 필드를 만들 준비가 되었습니다.
- 메뉴 모음에서 추가 선택하고 계산 된 필드 추가.
- 사용 ifelse 조건부 함수 의 가치를 평가하기 위해
Language매개변수를 선택하고 데이터세트에서 올바른 열을 선택하여 계산된 필드에 값을 할당합니다. - 만들기
Country다음 표현식을 사용하여 계산된 필드: - 왼쪽 메뉴에서 찜하기.
- 다음에 대한 과정을 반복합니다.
City계산된 필드: - 다음에 대한 과정을 반복합니다.
Industry계산된 필드:
이제 계산된 필드를 분석에 사용할 수 있습니다.
계산된 다국어 계산 필드를 사용하여 분석 만들기
두 가지를 사용하여 분석 만들기 도넛 차트 및 피벗 테이블 세 가지 다국어 필드를 사용합니다. 영상의 부제목에서 문자열을 사용하세요. Language: <<$Language>> 현재 선택된 언어를 표시합니다. 다음 스크린샷은 분석을 보여줍니다.
다음에서 새로운 언어를 선택하면 지원하는 언어 제어하면 그에 따라 시각적인 내용이 조정됩니다. 다음 스크린샷은 이탈리아어로 된 분석을 보여줍니다.
이제 분석을 대시보드로 게시할 준비가 되었습니다.
다국어 대시보드 게시
메뉴 모음에서 공유 과 대시 보드 게시.
새 대시보드를 "다국어 대시보드"로 게시하고 고급 게시 옵션을 기본값으로 두고 다음을 선택합니다. 대시 보드 게시.
이제 대시보드가 준비되었습니다.
대시보드를 내장하고 외부 페이지의 매개변수를 제어함으로써 다국어 기능을 한 단계 더 발전시킬 수 있습니다. Amazon QuickSight 임베딩 SDK.
내장된 대시보드에서 사용할 시각적 개체에 대한 파라메트릭 헤더 및 제목 만들기
인셀덤 공식 판매점인 QuickSight 대시보드 포함Walk Through California 프로그램, 장소 매개변수의 값은 다음과 같습니다. JavaScript에서 프로그래밍 방식으로 설정. 이는 기본값을 설정하고 지역화 및 기본 데이터 언어 설정을 변경하는 데 유용할 수 있습니다. 다음 단계에서는 지금까지 만든 대시보드를 수정하고 HTML 페이지에 삽입한 후 Amazon QuickSight 임베딩 SDK 번역된 텍스트에서 제목, 범례, 헤더 등을 표시하는 데 사용되는 매개변수 값을 동적으로 설정합니다. HTML 페이지의 전체 코드는 이 게시물의 부록에도 제공됩니다.
다음 표에 따라 분석의 시각적 개체 제목 및 헤더, 시트 이름, 시각적 범례 및 컨트롤 레이블에 대한 새 매개 변수를 만듭니다.
| 성함 | 데이터 유형 | 마케팅은: | 정적 기본값 |
| 시티 | 끈 | 단일 값 | City |
| 국가 | 끈 | 단일 값 | 국가 |
| donut01제목 | 끈 | 단일 값 | 국가별 매출 |
| donut02제목 | 끈 | 단일 값 | 업종별 수량 |
| 산업 | 끈 | 단일 값 | 산업별 |
| 지원하는 언어 | 끈 | 단일 값 | 영어 |
| 언어 제어 라벨 | 끈 | 단일 값 | 지원하는 언어 |
| 피벗제목 | 끈 | 단일 값 | 국가, 도시, 산업별 매출 |
| 판매 | 끈 | 단일 값 | 세일즈 |
| sheet001이름 | 끈 | 단일 값 | 요약 보기 |
이제 매개변수를 다음에서 사용할 수 있습니다. 파라미터 메뉴를 선택합니다.
이제 분석에서 각 시트 제목, 시각적 제목, 범례 제목, 열 머리글, 축 레이블 등 내부의 매개 변수를 사용할 수 있습니다. 다음 스크린샷은 이러한 매개변수를 각 제목에 삽입하는 방법을 보여주는 예를 제공합니다.
먼저 시트 이름을 삽입합니다.
그런 다음 언어 제어 이름을 추가합니다.
도넛 차트의 제목을 편집합니다.
또한 도넛 차트의 범례 제목도 추가합니다.
다음 스크린샷에서는 피벗 테이블 행 이름을 지정합니다.
또한 피벗 테이블 열 이름도 지정합니다.
분석을 새 대시보드에 게시하고 게시물의 단계를 따르세요. Amazon QuickSight의 새로운 원클릭 임베딩 기능을 사용하여 몇 분 안에 앱과 포털에 대화형 대시보드를 임베드하세요. 웹 사이트나 웹 애플리케이션에서 호스팅되는 HTML 페이지에 대시보드를 포함합니다.
이 게시물의 부록에 제공된 예제 HTML 페이지에는 언어 변경 시 QuickSight UI 로케일을 자동으로 동기화하는 옵션과 함께 이전 섹션의 데이터세트에서 생성한 XNUMX개 언어 간을 전환하는 컨트롤 하나와 독립적으로 변경하는 컨트롤 하나가 포함되어 있습니다. 필요에 따라 UI 로캘을 변경합니다.
다음 스크린샷은 데이터 언어와 QuickSight UI 로캘 조합의 몇 가지 예를 제공합니다.
다음은 영어 QuickSight UI 로케일이 포함된 영어 데이터 언어의 예입니다.
다음은 동기화된 이탈리아어 QuickSight UI 로캘을 사용하는 이탈리아어 데이터 언어의 예입니다.
다음 스크린샷은 일본어 QuickSight UI 로캘이 포함된 독일어 데이터 언어를 보여줍니다.
결론
이 게시물에서는 기계 학습을 사용하여 데이터를 자동으로 번역하고 Athena, QuickSight 및 Amazon Translate를 사용하여 다국어 대시보드를 구축하는 방법과 QuickSight 내장 대시보드를 사용하여 고급 다국어 기능을 추가하는 방법을 시연했습니다. 동일한 접근 방식을 사용하여 하나 이상의 매개변수 값에 따라 측정기준과 측정항목에 대해 서로 다른 값을 표시할 수 있습니다.
QuickSight는 30명의 사용자에게 XNUMX일 무료 평가판 구독을 제공합니다. 당신은 할 수 시작하다 즉시. QuickSight에 대해 자세히 알아보고 질문할 수 있습니다. Amazon QuickSight 커뮤니티.
부록: 내장된 대시보드 호스트 페이지
HTML 페이지의 전체 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>Amazon QuickSight Multilingual Embedded Dashboard</title>
<script src="https://unpkg.com/amazon-quicksight-embedding-sdk@1.18.1/dist/quicksight-embedding-js-sdk.min.js"></script>
<script type="text/javascript">
var url = "https://<<YOUR_AMAZON_QUICKSIGHT_REGION>>.quicksight.aws.amazon.com/sn/embed/share/accounts/<<YOUR_AWS_ACCOUNT_ID>>/dashboards/<<DASHBOARD_ID>>?directory_alias=<<YOUR_AMAZON_QUICKSIGHT_ACCOUNT_NAME>>"
var defaultLanguageOptions = 'en_US'
var dashboard
var trns = {
en_US: {
locale: "en-US",
language: "English",
languagecontrollabel: "Language",
sheet001name: "Summary View",
sales: "Sales",
country: "Country",
city: "City",
industry: "Industry",
quantity: "Quantity",
by: "by",
and: "and"
},
de_DE: {
locale: "de-DE",
language: "German",
languagecontrollabel: "Sprache",
sheet001name: "Zusammenfassende Ansicht",
sales: "Umsätze",
country: "Land",
city: "Stadt",
industry: "Industrie",
quantity: "Anzahl",
by: "von",
and: "und"
},
it_IT: {
locale: "it-IT",
language: "Italian",
languagecontrollabel: "Lingua",
sheet001name: "Prospetto Riassuntivo",
sales: "Vendite",
country: "Paese",
city: "Città",
industry: "Settore",
quantity: "Quantità",
by: "per",
and: "e"
},
es_ES: {
locale: "es-ES",
language: "Spanish",
languagecontrollabel: "Idioma",
sheet001name: "Vista de Resumen",
sales: "Ventas",
country: "Paìs",
city: "Ciudad",
industry: "Industria",
quantity: "Cantidad",
by: "por",
and: "y"
}
}
function setLanguageParameters(l){
return {
Language: trns[l]['language'],
languagecontrollabel: trns[l]['languagecontrollabel'],
sheet001name: trns[l]['sheet001name'],
donut01title: trns[l]['sales']+" "+trns[l]['by']+" "+trns[l]['country'],
donut02title: trns[l]['quantity']+" "+trns[l]['by']+" "+trns[l]['industry'],
pivottitle: trns[l]['sales']+" "+trns[l]['by']+" "+trns[l]['country']+", "+trns[l]['city']+" "+trns[l]['and']+" "+trns[l]['industry'],
sales: trns[l]['sales'],
country: trns[l]['country'],
city: trns[l]['city'],
industry: trns[l]['industry'],
}
}
function embedDashboard(lOpts, forceLocale) {
var languageOptions = defaultLanguageOptions
if (lOpts) languageOptions = lOpts
var containerDiv = document.getElementById("embeddingContainer");
containerDiv.innerHTML = ''
parameters = setLanguageParameters(languageOptions)
if(!forceLocale) locale = trns[languageOptions]['locale']
else locale = forceLocale
var options = {
url: url,
container: containerDiv,
parameters: parameters,
scrolling: "no",
height: "AutoFit",
loadingHeight: "930px",
width: "1024px",
locale: locale
};
dashboard = QuickSightEmbedding.embedDashboard(options);
}
function onLangChange(langSel) {
var l = langSel.value
if(!document.getElementById("changeLocale").checked){
dashboard.setParameters(setLanguageParameters(l))
}
else {
var selLocale = document.getElementById("locale")
selLocale.value = trns[l]['locale']
embedDashboard(l)
}
}
function onLocaleChange(obj) {
var locl = obj.value
var lang = document.getElementById("lang").value
document.getElementById("changeLocale").checked = false
embedDashboard(lang,locl)
}
function onSyncLocaleChange(obj){
if(obj.checked){
var selLocale = document.getElementById('locale')
var selLang = document.getElementById('lang').value
selLocale.value = trns[selLang]['locale']
embedDashboard(selLang, trns[selLang]['locale'])
}
}
</script>
</head>
<body onload="embedDashboard()">
<div style="text-align: center; width: 1024px;">
<h2>Amazon QuickSight Multilingual Embedded Dashboard</h2>
<span>
<label for="lang">Language</label>
<select id="lang" name="lang" onchange="onLangChange(this)">
<option value="en_US" selected>English</option>
<option value="de_DE">German</option>
<option value="it_IT">Italian</option>
<option value="es_ES">Spanish</option>
</select>
</span>
-
<span>
<label for="changeLocale">Sync UI Locale with Language</label>
<input type="checkbox" id="changeLocale" name="changeLocale" onchange="onSyncLocaleChange(this)">
</span>
|
<span>
<label for="locale">QuickSight UI Locale</label>
<select id="locale" name="locale" onchange="onLocaleChange(this)">
<option value="en-US" selected>English</option>
<option value="da-DK">Dansk</option>
<option value="de-DE">Deutsch</option>
<option value="ja-JP">日本語</option>
<option value="es-ES">Español</option>
<option value="fr-FR">Français</option>
<option value="it-IT">Italiano</option>
<option value="nl-NL">Nederlands</option>
<option value="nb-NO">Norsk</option>
<option value="pt-BR">Português</option>
<option value="fi-FI">Suomi</option>
<option value="sv-SE">Svenska</option>
<option value="ko-KR">한국어</option>
<option value="zh-CN">中文 (简体)</option>
<option value="zh-TW">中文 (繁體)</option>
</select>
</span>
</div>
<div id="embeddingContainer"></div>
</body>
</html>
저자에 관하여
프란체스코 마렐리 Amazon Web Services의 주요 솔루션 아키텍트입니다. 그는 분석, 데이터 관리, 빅데이터 시스템의 설계 및 구현을 전문으로 합니다. Francesco는 또한 시스템 통합, 애플리케이션 설계 및 구현 분야에서도 풍부한 경험을 갖고 있습니다. 그는 음악, 레코드판 수집, 베이스 연주에 열정을 갖고 있습니다.
