Amazon QuickSight là một dịch vụ Business Intelligence (BI) không máy chủ được các tổ chức thuộc mọi quy mô sử dụng để đưa ra các quyết định dựa trên dữ liệu một cách tốt hơn.
Bảng biểu đồ QuickSight cũng có thể được thêm vào các ứng dụng SaaS và cổng web để cung cấp các bảng biểu đồ tương tác, truy vấn dùng ngôn ngữ tự nhiên hoặc khả năng phân tích dữ liệu cho người dùng ứng dụng một cách liền mạch. QuickSight Demo Central chứa nhiều bảng biểu đồ, giới thiệu tính năng cũng như các mẹo và thủ thuật mà bạn có thể sử dụng; trong QuickSight Embedded Analytics Developer Portal, bạn có thể tìm thấy chi tiết về cách thêm bảng biểu đồ vào ứng dụng của mình.
Giao diện người dùng QuickSight hiện hỗ trợ 15 ngôn ngữ mà bạn có thể chọn. Ngôn ngữ được chọn cho giao diện người dùng bản địa hóa tất cả văn bản do QuickSight tạo ra đối với các thành phần giao diện người dùng và không áp dụng cho dữ liệu hiển thị trong bảng biểu đồ.
Bài đăng này mô tả cách tạo bảng biểu đồ đa ngôn ngữ ở cấp dữ liệu bằng cách tạo các cột mới chứa văn bản đã dịch và cung cấp tham số lựa chọn ngôn ngữ và điều khiển liên quan để hiển thị dữ liệu bằng ngôn ngữ đã chọn trong bảng biểu đồ QuickSight.
Bạn có thể tạo các cột mới với văn bản đã dịch theo một số cách; trong bài đăng này, chúng tôi tạo các cột mới bằng cách sử dụng các chức năng do người dùng định nghĩa của Amazon Athena được triển khai trong dự án GitHub mẫu Amazon Athena UDFs for text translation and analytics using Amazon Comprehend and Amazon Translate. Cách tiếp cận này giúp bạn dễ dàng tạo tự động các cột có văn bản đã dịch bằng cách sử dụng dịch máy thần kinh do Amazon Translate cung cấp.
Tổng quan về giải pháp
Sơ đồ sau đây minh họa kiến trúc của giải pháp này.
Đối với bài đăng này, chúng tôi sử dụng tập dữ liệu SaaS-Sales.csv mẫu và làm theo các bước sau:
- Copy tập dữ liệu vào một bucket trong Amazon Simple Storage Service (Amazon S3).
- Sử dụng Athena để xác định cơ sở dữ liệu và bảng để đọc tệp CSV.
- Tạo một bảng mới ở định dạng Parquet với các cột có văn bản đã dịch.
- Tạo tập dữ liệu mới trong QuickSight.
- Tạo tham số và điều khiển để chọn ngôn ngữ.
- Tạo các trường được tính toán đa ngôn ngữ động.
- Tạo phân tích với các trường được tính toán đa ngôn ngữ được tính toán.
- Xuất bản bảng biểu đồ đa ngôn ngữ.
- Tạo tiêu đề và tiêu đề tham số cho hình ảnh để sử dụng trong bảng biểu đồ được thêm vào.
Một phương pháp thay thế có thể là tải tập dữ liệu CSV lên QuickSight và tạo các cột mới với văn bản đã dịch dưới dạng QuickSight calculated fields, ví dụ: sử dụng ifelse() conditional function để chỉ định trực tiếp các giá trị đã dịch.
Điều kiện tiên quyết
Để làm theo các bước trong bài đăng này, bạn cần có tài khoản AWS với subscription QuickSight Standard Edition hoặc Enterprise Edition đang hoạt động.
Sao chép tập dữ liệu vào một bucket trong Amazon S3
Sử dụng AWS Command Line Interface (AWS CLI) để tạo qs-ml-blog-data trong nhóm S3 và sao chép tập dữ liệu dưới tiền tố saas-sales trong tài khoản AWS của bạn. Bạn phải tuân theo các bucket naming rules để tạo nhóm của mình. Xem đoạn mã sau:
Bash
| $ 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” |
Xác định cơ sở dữ liệu và bảng để đọc tệp CSV
Sử dụng trình chỉnh sửa truy vấn Athena để tạo cơ sở dữ liệu qs_ml_blog_db
SQL
| CREATE DATABASE IF NOT EXISTS qs_ml_blog_db; |
Sau đó, tạo bảng mới qs_ml_blog_db.saas_sales:
SQL
| 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’) |
Tạo một bảng mới ở định dạng Parquet với các cột có văn bản đã dịch
Chúng tôi muốn dịch các cột country_en, city_en, và industry_en sang tiếng Đức, tiếng Tây Ban Nha và tiếng Ý. Để thực hiện điều này theo cách có thể mở rộng và linh hoạt, chúng tôi sử dụng Amazon Athena UDFs for text translation and analytics using Amazon Comprehend and Amazon Translate.
Sau khi bạn thiết lập các chức năng do người dùng định nghĩa theo hướng dẫn trong GitHub repo, hãy chạy truy vấn SQL sau trong Athena để tạo bảng mới qs_ml_blog_db.saas_sales_ml với các cột đã dịch bằng cách sử dụng hàm translate_text do người dùng định nghĩa và một số thay đổi nhỏ khác:
SQL
| 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 ; |
Chạy ba truy vấn đơn giản, một truy vấn trên mỗi cột, để kiểm tra việc tạo các cột mới với bản dịch có thành công hay không. Chúng tôi đính kèm ảnh chụp màn hình sau mỗi truy vấn hiển thị kết quả của nó.
SQL
| SELECT
distinct(country_en), country_de, country_es, country_it FROM qs_ml_blog_db.saas_sales_ml ORDER BY country_en limit 10 ; |
SQL
| SELECT
distinct(city_en), city_de, city_es, city_it FROM qs_ml_blog_db.saas_sales_ml ORDER BY city_en limit 10 ; |
SQL
| SELECT
distinct(industry_en), industry_de, industry_es, industry_it FROM qs_ml_blog_db.saas_sales_ml ORDER BY industry_en limit 10 ; |
Bây giờ bạn có thể sử dụng bảng saas_sales_ml mới làm đầu vào để tạo tập dữ liệu trong QuickSight.
Tạo tập dữ liệu trong QuickSight
Để tạo tập dữ liệu của bạn trong QuickSight, hãy hoàn thành các bước sau:
- Trên bảng biểu đồ QuickSight, chọn Datasets trong ngăn dẫn hướng.
- Chọn Create a dataset.
- Chọn Athena.
- Đối với Data source name¸ nhập athena_primary.
- Đối với Athena workgroup¸ chọn primary.
- Chọn Create data source.
- Chọn bảng saas_sales_ml đã tạo trước đó và chọn Select.
- Chọn nhập bảng vào SPICE và chọn Visualize để bắt đầu tạo bảng biểu đồ mới.
Trong phần phân tích, bạn nhận được một thông báo cho biết rằng bảng đã được nhập thành công vào SPICE.
Tạo tham số và điều khiển để chọn ngôn ngữ
Để tạo tham số và liên kết điều khiển mà bạn sử dụng để chọn ngôn ngữ cho bảng biểu đồ, hãy hoàn thành các bước sau:
- Trong phần phân tích, chọn Parameters và Create one.
- Đối với Name, nhập Language
- Đối với Data type, chọn String.
- Đối với Values, chọn Single value.
- Đối với Static default value, nhập English.
- Chọn Create.
- Để kết nối tham số với một điều khiển, hãy chọn Control.
- Đối với Display name, chọn Language.
- Đối với Style, chọn Dropdown.
- Đối với Values, hãy chọn Specific values.
- Để Define specific values, hãy nhập English, German, Italian, và French (một giá trị trên mỗi dòng).
- Chọn Hide Select all option from the control values if the parameter has a default configured.
- Chọn Add
Mục điều khiển hiện có sẵn, được liên kết với tham số và hiển thị trong phần Controls của trang tính hiện tại trong phân tích.
Tạo các trường được tính toán đa ngôn ngữ
Bây giờ, bạn đã sẵn sàng để tạo các trường được tính toán có giá trị sẽ thay đổi dựa trên ngôn ngữ hiện được chọn.
- Trong thanh menu, chọn Add và chọn Add calculated field.
- Sử dụng ifelse conditional function để đánh giá giá trị của tham số Language và chọn cột đúng trong tập dữ liệu để gán giá trị cho trường được tính toán.
- Tạo trường Country được tính bằng cách sử dụng biểu thức sau:
| ifelse(
${Language} = ‘English’, {country_en}, ${Language} = ‘German’, {country_de}, ${Language} = ‘Italian’, {country_it}, ${Language} = ‘Spanish’, {country_es}, {country_en} ) |
- Chọn Save
- Lặp lại quy trình cho trường City :
| ifelse(
${Language} = ‘English’, {city_en}, ${Language} = ‘German’, {city_de}, ${Language} = ‘Italian’, {city_it}, ${Language} = ‘Spanish’, {city_es}, {city_en} ) |
- Lặp lại quy trình cho trường Industry:
| ifelse(
${Language} = ‘English’, {industry_en}, ${Language} = ‘German’, {industry_de}, ${Language} = ‘Italian’, {industry_it}, ${Language} = ‘Spanish’, {industry_es}, {industry_en} ) |
Các trường được tính toán hiện đã có sẵn và sẵn sàng để sử dụng trong phân tích.
Tạo phân tích với các trường được tính toán đa ngôn ngữ được tính toán
Tạo phân tích với hai donut charts và pivot table sử dụng ba trường đa ngôn ngữ. Trong phụ đề của hình ảnh, sử dụng chuỗi Language: <<$Language>> để hiển thị ngôn ngữ hiện được chọn. Ảnh chụp màn hình sau đây cho thấy phân tích của chúng tôi.
Nếu bạn chọn ngôn ngữ mới từ Language control, hình ảnh sẽ điều chỉnh theo. Ảnh chụp màn hình sau đây cho thấy phân tích bằng tiếng Ý.
Bây giờ bạn đã sẵn sàng xuất bản phân tích dưới dạng bảng biểu đồ.
Xuất bản bảng biểu đồ đa ngôn ngữ
Trong thanh menu, chọn Share và Publish dashboard.
Xuất bản bảng biểu đồ mới dưới dạng “Multilingual dashboard”, để các tùy chọn xuất bản nâng cao ở giá trị mặc định của chúng và chọn Publish dashboard.
Bảng biểu đồ hiện đã sẵn sàng.
Chúng tôi có thể tiến thêm một bước nữa về các tính năng đa ngôn ngữ bằng cách thêm bảng biểu đồ và kiểm soát các thông số trong trang bên ngoài bằng cách sử dụng Amazon QuickSight Embedding SDK.
Tạo tiêu đề tham số và tiêu đề cho hình ảnh để sử dụng trong bảng biểu đồ
Khi embedding an QuickSight dashboard, các giá trị của locale và thông số có thể được set programmatically from JavaScript. Điều này có thể hữu ích để đặt các giá trị mặc định và thay đổi cài đặt cho bản địa hóa và ngôn ngữ dữ liệu mặc định. Các bước sau đây cho biết cách sử dụng các tính năng này bằng cách sửa đổi bảng biểu đồ mà chúng tôi đã tạo cho đến nay, thêm nó vào trang HTML và sử dụng Amazon QuickSight Embedding SDK để đặt động giá trị của các tham số được sử dụng để hiển thị tiêu đề, chú giải, tiêu đề và nhiều hơn trong văn bản dịch. Mã đầy đủ cho trang HTML cũng được cung cấp trong phần phụ lục của bài đăng này.
Tạo các tham số mới cho tiêu đề và tiêu đề của hình ảnh trong phân tích, tên trang tính, chú giải hình ảnh và nhãn điều khiển theo bảng sau.
| Name | Data type | Values | Static default value |
| city | String | Single value | City |
| country | String | Single value | Country |
| donut01title | String | Single value | Sales by Country |
| donut02title | String | Single value | Quantity by Industry |
| industry | String | Single value | Industry |
| Language | String | Single value | English |
| languagecontrollabel | String | Single value | Language |
| pivottitle | String | Single value | Sales by Country, City and Industy |
| sales | String | Single value | Sales |
| sheet001name | String | Single value | Summary View |
Các tham số hiện có sẵn trên menu Parameters.
Giờ đây, bạn có thể sử dụng các tham số bên trong mỗi tiêu đề trang tính, tiêu đề trực quan, tiêu đề chú giải, tiêu đề cột, nhãn trục, v.v. trong phân tích của mình. Ảnh chụp màn hình sau cung cấp các ví dụ minh họa cách chèn các thông số này vào mỗi tiêu đề.
Đầu tiên, chúng tôi chèn tên trang tính.
Sau đó, chúng tôi thêm tên điều khiển ngôn ngữ.
Chúng tôi chỉnh sửa tiêu đề của biểu đồ bánh
Chúng tôi cũng thêm các legend titles của biểu đồ bánh.
Trong ảnh chụp màn hình sau, chúng tôi chỉ định tên hàng của bảng tổng hợp.
Chúng tôi cũng chỉ định tên cột bảng tổng hợp.
Xuất bản phân tích lên bảng biểu đồ mới và làm theo các bước trong bài đăng Embed interactive dashboards in your apps and portals in minutes with Amazon QuickSight’s new 1-click embedding feature để thêm bảng biểu đồ vào trang HTML được lưu trữ trong trang web hoặc ứng dụng web của bạn.
Trang HTML mẫu được cung cấp trong phụ lục của bài đăng này chứa một điều khiển để chuyển đổi giữa bốn ngôn ngữ bạn đã tạo trong tập dữ liệu ở các phần trước với tùy chọn tự động đồng bộ hóa ngôn ngữ giao diện người dùng QuickSight khi thay đổi ngôn ngữ và một điều khiển để thay đổi độc lập ngôn ngữ giao diện người dùng theo yêu cầu.
Ảnh chụp màn hình sau cung cấp một số ví dụ về sự kết hợp của ngôn ngữ dữ liệu và ngôn ngữ giao diện người dùng QuickSight.
Sau đây là một ví dụ về ngôn ngữ dữ liệu tiếng Anh với ngôn ngữ tiếng Anh QuickSight UI.
Sau đây là một ví dụ về ngôn ngữ dữ liệu Ý với ngôn ngữ giao diện người dùng QuickSight của Ý được đồng bộ hóa.
Ảnh chụp màn hình sau đây hiển thị ngôn ngữ dữ liệu tiếng Đức với ngôn ngữ giao diện người dùng QuickSight của Nhật Bản.
Kết luận
Bài đăng này đã trình bày cách tự động dịch dữ liệu bằng cách sử dụng máy học và xây dựng bảng biểu đồ đa ngôn ngữ với Athena, QuickSight và Amazon Translate, cũng như cách thêm các tính năng đa ngôn ngữ nâng cao với bảng biểu đồ QuickSight. Bạn có thể sử dụng cùng một phương pháp để hiển thị các giá trị khác nhau cho thứ nguyên cũng như chỉ số tùy thuộc vào giá trị của một hoặc nhiều thông số.
QuickSight cung cấp đăng ký dùng thử miễn phí 30 ngày cho bốn người dùng; bạn có thể bắt đầu ngay lập tức. Bạn có thể tìm hiểu thêm và đặt câu hỏi về QuickSight trong Amazon QuickSight Community.
Về TechX Corp.
TechX Corp. là đối tác AWS tại Việt Nam được thành lập năm 2019 bởi các chuyên gia có trên 15 năm kinh nghiệm đến từ các công ty đa quốc gia và tập đoàn đi đầu về chuyển đổi số. Sứ mệnh của TechX là tạo lập môi trường cho những con người đầy đam mê, nhiệt huyết thỏa sức khám phá và kiến tạo, mang đến những sản phẩm công nghệ đơn giản và thân thiện, góp phần đẩy nhanh quá trình xây dựng một Việt Nam số trên nền tảng công nghệ điện toán đám mây.
TechX 2 năm liền nhận danh hiệu Đối tác AWS của năm – AWS Partner of the Year tại Việt Nam
Phụ lục: Trang lưu trữ bảng biểu đồ được nhúng
Mã đầy đủ cho trang HTML như sau:
| HTML
<!DOCTYPE html> <html> <head> <title>Amazon QuickSight Multilingual Embedded Dashboard</title> https://unpkg.com/[email protected]/dist/quicksight-embedding-js-sdk.min.js <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> |
