Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. FusionCharts
Webdesign

Build một SaaS Dashboard bằng React với Google Sheets và FusionCharts

by
Difficulty:BeginnerLength:LongLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong bài này, tôi sẽ hướng dẫn quá trình tạo SaaS Dashboard bằng cách tìm nạp dữ liệu từ Google Sheets bằng Google Sheets API. Để tạo dashboard này, chúng ta sẽ sử dụng React, một thư viện JavaScript để xây dựng giao diện người dùng; FusionCharts, một thư viện biểu đồ dựa trên JavaScript; và Bulma, một framework CSS dựa trên Flexbox.

Tiếp đến

Đây là những gì chúng ta sẽ tìm hiểu:

  1. Thiết lập
  • React
  • Component React FusionCharts và FusionCharts
  • Bulma CSS Framework
  • Thiết lập Google Sheets API
  • Kết nối Google Sheets API & tìm nạp dữ liệu
  • Xây dựng bố cục SaaS Dashboard
  • Tạo KPI
  • Tạo biểu đồ
  • Phần kết luận
  • Trước khi chúng ta tiếp tục và thiết lập, tôi muốn cho bạn xem bản xem trước của SaaS Dashboard mà bạn sẽ có thể tạo ra, một khi bạn đã thực hiện theo hướng dẫn này. Ở đây, một liên kết đến những gì chúng ta sẽ xây dựng.

    what well be building

    1. Cài đặt

    Để theo dõi, bạn sẽ cần thiết lập dự án của mình với các phụ thuộc sau:

    1. React
    2. FusionCharts Core Package và Component của nó
    3. Bulma

    Bao gồm React

    React boilerplate của Facebook sẽ giúp chúng tôi bắt đầu trong nháy mắt. Nó sẽ thiết lập React cùng với tất cả các tiện ích mà chúng ta sẽ cần cho ứng dụng dashboard của mình. Vì vậy, trong terminal của bạn (với tôi là iTerm with Zsh), bạn có thể tiếp tục và nhập:

    Bạn có thể tìm hiểu thêm về create-react-app, boilerplate mà chúng ta sẽ sử dụng ở đây.

    saas-dashboard là thư mục làm việc trong đó React boilerplate sẽ được cài đặt cùng với tất cả các tiện ích và phụ thuộc, và chúng ta sẽ bổ sung thêm một vài thứ mà chúng ta sẽ cần cho hướng dẫn này như được giải thích dưới đây.

    Bao gồm FusionCharts Core Package và React Component của nó

    Chúng ta sẽ sử dụng FusionCharts để render biểu đồ trong ứng của chúng ta. Bạn có thể đọc thêm về FusionCharts trên fusioncharts.com.

    Có nhiều cách để cài đặt FusionCharts; để được hướng dẫn chung, bạn có thể xem trang tài liệu này.

    Trực tiếp Tải về FusionCharts

    Bạn có thể tải trực tiếp các tập tin JavaScript từ trang web FusionCharts và bao gồm chúng trong ứng dụng của bạn bằng cách sử dụng thẻ <script> trong /public/index.html. trong /public/index.html của ứng dụng bảng điều khiển.

    Sử dụng NPM

    Chúng ta sẽ sử dụng NPM trong hướng dẫn này. Vì vậy, trong terminal, điều hướng đến thư mục làm việc, tức là saas-dashboard và nhập:

    FusionCharts cung cấp một component nhẹ và dễ sử dụng cho React có thể được sử dụng để thêm các biểu đồ JavaScript trong các ứng dụng React mà không gặp rắc rối gì. Chúng ta sẽ sử dụng nó trong ứng dụng của chúng ta, vì vậy, hãy cài đặt nó bằng cách sử dụng lệnh dưới đây:

    Bạn có thể tìm hiểu thêm về component FusionCharts từ repo FusionCharts.

    Bao gồm Bulma

    Để tạo bố cục và giao diện người dùng cho ứng dụng dashboard của chúng ta, chúng ta sẽ sử dụng framework CSS Bulma. Vì vậy, trong terminal hãy nhập:

    Bây giờ chúng ta đã thêm tất cả các phụ thuộc cho ứng dụng của mình, chúng ta có thể tiếp tục thiết lập Google Sheets API.

    Thiết lập Google Sheets API

    Chúng ta sẽ tạo một dự án mới cho ứng dụng dashboard của mình trên Google Developer API console để sử dụng dữ liệu từ Google Sheets. Tôi sẽ gọi nó là "gsheets-dashboard". Bạn có thể tạo một dự án mới bằng cách sử dụng liên kết này.

    Một khi dự án đã được tạo, bạn sẽ được chuyển hướng đến Google Developer API dashboard. Bây giờ, để bật Google Sheets API cho ứng dụng của chúng ta, hãy nhấp vào Go to APIs overview. Khi bạn nhấp vào Enable APIs and Services, bạn sẽ có được API Library, vì vậy hãy tiếp tục và tìm kiếm "Google Sheets API".

    Khi bạn tìm thấy nó, hãy nhấp vào Enable và sau khi nó được xử lý, bạn sẽ thấy trang như hình dưới đây:

    Trong thanh sidebar, đi tới Credentials và nhấp vào Create credentials và chọn API Key. Nhấp vào Restrict Key và đặt tên cho nó (Tôi đặt nó thành "SaasDashboardAPIKey").

    Lưu khóa được tạo ra, vì chúng ta sẽ cần nó để lấy dữ liệu từ Google Sheet của chúng ta sau này.

    Trong phần API Restrictions, chọn Google Sheets API và lưu. Bây giờ chúng ta đã sẵn sàng cho bước tiếp theo, nơi chúng ta sẽ kết nối với Google Sheets API và tìm nạp một số dữ liệu.

    2. Kết nối Google Sheets API & Tìm nạp dữ liệu

    Chúng ta sẽ hướng đến Google Sheet mà chúng ta sẽ sử dụng cho ứng dụng dashboard của mình. Đây là một ảnh chụp màn hình về giao diện của nó, được xây dựng với một số dữ liệu mẫu mà ta đã thu thập được cho một doanh nghiệp SaaS mẫu. Bạn sẽ thấy dữ liệu hàng tháng trong ba năm, tập trung vào một số Key Performance Indicators (KPIs) của một doanh nghiệp SaaS. Chúng bao gồm doanh thu, khách hàng và các chỉ số tăng trưởng khác.

    Our Google sheet

    Bây giờ chúng ta cần chia sẻ cái sheet đó để bất cứ ai cũng có thể nhìn thấy nó. Đối với điều này, trong menu File, bấm Share. Sau đó, nhấp vào Get shareable link và sau khi nó được xử lý, sheet sẽ được chia sẻ với "Anyone with link can view" theo mặc định.

    Vì chúng ta muốn công khai sheet, hãy truy cập vào "Anyone with link can view" và nhấp vào tùy chọn More trong trình đơn thả xuống. Chọn trên "On - Public on the web" và lưu.

    Bạn có thể truy cập sheet mà tôi sẽ sử dụng từ liên kết này.

    Chúng ta sẽ ghi chú ID của sheet (có thể tìm thấy trong URL cho Google Sheets, đối với tôi, nó là 1QZ3vKssyG9xEG-RJklQlBezIR8WqCfML4EfO2qe5vbw).

    Chúng ta sẽ sử dụng phương thức batchGet cho ứng dụng dashboar của chúng ta. Nó trả về một hoặc nhiều phạm vi giá trị từ sheet. Bạn có thể tìm hiểu thêm về nó ở đây. Được trang bị cả API Key và ID của sheet, hãy đến Google Sheets API để test thử nó (bạn cũng có thể sử dụng trình duyệt/postman (tôi sử dụng cái này!) để test và nhận phản hồi JSON giống như thế này):

    test

    Tôi đã ẩn API Key, bạn có thể đặt API Key của riêng mình vào vị trí của nó.

    Bây giờ, hãy mở thư mục làm việc của chúng ta (với tôi là saas-dashboard) trong một code editor và tạo một tập tin mới có tên config.js. Thêm API Key và sheet ID của bạn như sau.

    Bây giờ, hãy tìm đến tập tin App.js. Chúng ta sẽ thêm mọi thứ trực tiếp vào App.js, cái mà boilerplate đã cho chúng ta. Đây không phải là kiến ​​trúc tốt nhất, mà chỉ là một biểu hiện của khái niệm.

    Các bước bên dưới cho thấy cách tôi kết nối ứng dụng của chúng ta với Google Sheets API và lấy dữ liệu từ nó:

    1. Import config.js mà chúng ta đã tạo bằng code ở bên dưới và khai báo một biến có URL yêu cầu cho Google Sheets API.

    2. Bây giờ, chúng ta sẽ thiết lập một mảng rỗng trong this.state như được trong đoạn code dưới đây:

    3. Lấy dữ liệu JSON từ phương thức lifecycle của React là componentDidMount:

    Tuyệt vời! Bây giờ chúng ta đã thiết lập kết nối với Google Sheets, chúng ta có thể bắt đầu xây dựng bố cục cho dashboard của mình.

    Lưu ý: Bạn có thể xác minh kết nối bằng cách log biến items bên trong state.

    3. Xây dựng SaaS Dashboard Layout

    Chúng ta sẽ sử dụng Bulma để xây dựng bố cục cho ứng dụng dashboard của mình. Bulma là một framework CSS dựa trên Flexbox và cung cấp cho chúng ta hàng tấn các phần tử và components được xây dựng sẵn và có thể tùy biến.

    Nó sẽ trông như thế này. Để biết thêm thông tin về ý nghĩa của các KPI này đối với doanh nghiệp, hãy đọc Saas Metrics That Matter: KPI bạn nên theo dõi. Một khi bạn đã tạo dashboard, phiên bản cuối cùng sẽ trông giống như ảnh chụp màn hình bên dưới:

    Bạn cũng có thể kiểm tra dashboard trực tiếp ở đây.

    Bây giờ, hãy phân chia bố cục dashboard của chúng ta thành ba section:

    1. Section Điều hướng
    2. Section KPI
    3. Section Biểu đồ

    Chúng ta cũng sẽ ghi đè lên một số kiểu mặc định do Bulma cung cấp bằng CSS của chính chúng ta sẽ có trong tập tin App.css.

    Tạo Section Điều hướng

    Để tạo điều hướng, chúng ta sẽ sử dụng component Navbar của Bulma. Dưới đây là đoạn code HTML:

    Bây giờ section điều hướng của chúng ta đã sẵn sàng, chúng ta sẽ tạo một container để chứa hai section tiếp theo trong dashboard của chúng tôi. Đây là đoạn code HTML:

    Bạn có thể tìm hiểu thêm về container ở đây.

    Tạo Section KPI

    Để tạo section KPI, chúng ta sẽ sử dụng một thẻ <section> và sử dụng component Columns và Card được cung cấp bởi Bulma. Bên dưới đây là đoạn HTML:

    Đoạn code ở trên sẽ tạo một thẻ KPI. Tương tự, chúng ta sẽ tạo thẻ cho cả bốn KPI mà chúng ta muốn trình bày.

    Tạo Section Charts

    Để tạo section biểu đồ, chúng ta lần nữa sẽ sử dụng một thẻ <section> với component Columns và Card do Bulma cung cấp. Chúng ta sẽ để trống <div> với ID duy nhất cho biểu đồ.

    Bên dưới là đoạn HTML:

    Chúng ta sẽ thêm tất cả các thẻ biểu đồ trong các component column đơn để làm cho dashboard của chúng ta responsive, thêm các breakpoint khác nhau được cung cấp bởi Bulma cho mỗi cột. Bạn có thể tìm hiểu thêm về các breakpoint đáp ứng này trong tài liệu hướng dẫn của Bulma.

    Đoạn code ở trên sẽ tạo một thẻ biểu đồ. Tương tự, chúng ta sẽ tạo thẻ cho tất cả sáu biểu đồ mà chúng ta muốn hiển thị. Nếu bạn đã làm theo các bước ở trên cho đến lúc này, bạn sẽ có một bố cục tương tự như trong hình trên. Nếu không, đừng lo lắng, tôi sẽ thêm liên kết đến repo Github cho dashboard này vào cuối hướng dẫn.

    4. Tạo KPI cho SaaS Dashboard

    Bây giờ bố cục của chúng ta đã sẵn sàng, chúng ta sẽ định nghĩa chức năng cho một số phần tử và cung cấp dữ liệu cho chúng từ Google Sheets. Chúng ta bắt đầu bằng cách định nghĩa một hàm gọi là getData trong component của chúng ta, sẽ lấy năm làm đối số để khử cấu trúc dữ liệu Google Sheets trong state của ứng dụng.

    Bây giờ, chúng ta sẽ lặp qua dữ liệu để tính toán các giá trị cần thiết cho KPI. Dưới đây là code để tạo KPI cho "Renewed Users".

    Tương tự, chúng ta sẽ định nghĩa các biến cho KPI khác và gán giá trị cho chúng khi lặp qua dữ liệu bằng đoạn code ở trên.

    5. Tạo biểu đồ cho SaaS Dashboard

    Bây giờ, chúng ta sẽ tạo dữ liệu JSON cho các biểu đồ và sử dụng FusionCharts và component React của nó để render chúng.

    Trong hàm getData mà chúng ta đã tạo ở bước trước đó, chúng ta sẽ định nghĩa một mảng rỗng trong đó sẽ có dữ liệu cho biểu đồ. Dưới đây là code cần thiết:

    Chúng ta sẽ sử dụng biểu đồ "Multi-series 2D Single Y Combination Chart" (mscombi2d) trong dashboard của chúng ta. FusionCharts cung cấp rất nhiều thuộc tính có thể được sử dụng để tùy biến giao diện của biểu đồ.

    Bây giờ, chúng ta sẽ tạo một tập tin có tên là "chartCosmetics.js", sẽ có các tùy chọn cosmetic cho biểu đồ của chúng ta do đó chúng ta không phải định nghĩa chúng mỗi khi chúng ta tạo. Nó trông như thế này:

    Bây giờ, chúng tôi sẽ tạo một mảng dữ liệu JSON cho mỗi biểu đồ và sử dụng các tùy chọn cosmetic ở trên:

    Lưu ý: Bạn phải khai báo một biến null trong state của ứng dụng cho mỗi biểu đồ để nó có thể được sử dụng sau này như chúng ta đã làm ở trên cho dữ liệu Google Sheet.

    Bây giờ thì dữ liệu JSON đã sẵn sàng cho biểu đồ của chúng ta, chúng ta sẽ truyền nó đến component React của FusionCharts bên dưới phần tử <div> mà chúng ta đã tạo ra trước đó cho mỗi biểu đồ.

    Để tìm hiểu thêm về cách sử dụng component FusionCharts, bạn có thể tham khảo trang tài liệu dành cho nhà phát triển.

    Bạn có thể làm theo các bước ở trên để tạo các biểu đồ còn lại. Bây giờ chúng ta sẽ gọi hàm getData với năm 2018 là một đối số từ phương thức thành componentDidMount do đó dashboard của chúng ta tải dữ liệu 2018 theo mặc định. Nếu bạn đã làm theo các bước ở trên, bạn sẽ có một dashboard đầy đủ chức năng như trong hình dưới đây:

    final dashboard

    Phần kết luận

    Hướng dẫn này sẽ giúp bạn tạo SaaS Dashboard bằng Google Sheets. Nếu đã theo dõi thì giờ đây bạn đã có thể thêm nhiều thành phần UI, biểu đồ, KPI và các tính năng bổ sung. Tôi đã tự thêm một số style và chức năng và bạn có thể xem dashboard cuối cùng ở đây.

    Để tham khảo, bạn có thể kiểm tra mã nguồn từ kho lưu trữ Github. Nếu bạn có bất kỳ câu hỏi hoặc phản hồi nào, hãy để lại bình luận bên dưới hoặc nhắn tôi trên Twitter!

    Advertisement
    Advertisement
    Advertisement
    Advertisement
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.