Paano Gumawa ng isang SaaS Dashboard sa React Sa Google Sheets at FusionCharts

Sponsored Content

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

() translation by (you can also view the original English article)

Sa pagtuturo na ito, ipapaliwanag ko ang proseso ng pag-gawa ng isang dashboard ng SaaS sa pamamagitan ng pagkuha ng datos mula sa mga Google Sheet gamit ang Google Sheets API. Upang gumawa ng dashboard na ito ay gagamitin natin ang React, isang JavaScript library para sa mga pag-gawa ng mga interface ng gumagamit; FusionCharts, isang JavaScript base sa pagkakasunod-sunod na library; at Bulma, ang CSS framework base sa Flexbox.

Susunod na

Narito kung ano ang ating buong tatalakayin:

Pag-uumpisa

Pag-papagalaw
Componento ng FusionCharts at FusionCharts React
Bulma CSS Framework
Google Sheets API Setup

Pagkonekta ng datos ng Google Sheets API at Pagsundo

Pagbuo ng Layout ng Dashboard ng SaaS

Pag-gawa KPIs

Pag-gawa Charts

Konklusyon

Bago tayo magpatuloy at mag-umpisa, gusto kong ipakita sa iyo ang isang preview ng SaaS Dashboard na maaari kang makagawa, kapag ikaw ay nawala sa pagtuturo na ito. Narito ang isang live na link ng kung ano ang ating magiging pag-gawa.

1. Pag-uumpisa

Upang sumunod, kailangan mong umpisahan ang iyong proyekto sa sumusunod na mga pagkakasunod-sunod:

Pag-papagalaw
Componento ng FusionCharts at FusionCharts React
Bulma

Kasama ang React

Ang Facebook ay React boilerplate ay magsisimula sa atin sa isang sandali. Magtatatag ito ng React kasama ang lahat ng mga kagamitan na kakailanganin natin para sa ating dashboard app. Kaya, sa terminal na gusto mo (iTerm na may Zsh para sa akin) maaari kang magpatuloy at makapasok:

1	$ npx create-react-app saas-dashboard

Maaari kang matuto nang higit pa tungkol sa create-react-app, ang boilerplate ang ating ginamit dito.

Ang saas-dashboard ay ang isang umaandar na direktoryo kung saan ang React boilerplate ay mai-install kasama ang lahat ng mga kagamitan at mga kinakasama, at magdaragdag tayo ng ilang higit pa na kakailanganin natin para sa pagtuturo na ito tulad ng ipinaliwanag sa ibaba.

Kabilang ang FusionCharts Core Package at ang itong mga React Component

Tayo ay gagamit ng FusionCharts upang maglagay ng mga chart sa ating dashboard app. Maaari kang magpatuloy at magbasa nang higit pa tungkol sa fusioncharts.com.

Maraming mga paraan upang mai-install ang FusionCharts; para sa mga pangkalahatang pagtuturo maaari mong tingnan ang pahinang dokumentasyon na ito.

Direktang Pag-download ng FusionCharts

Maaari kang direktang mag-download ng mga mga nilalaman ng JavaScript mula sa website ng FusionCharts at isama ang mga ito sa iyong application gamit ang isang <script> na tag sa /public/index.html ng dashboard app.

Paggamit ng NPM

Magagamit natin ang NPM sa pagtuturo na ito. Kaya, sa terminal, magtungo sa direktang direktoryo ng i.e. saas-dashboard at ipasok ang:

1	$ npm install --save fusioncharts

Nagbibigay ang FusionCharts ng magaan at simpleng gamit na bahagi para sa React na maaaring magamit upang magdagdag ng mga chart ng JavaScript sa React apps nang walang anumang abala. Gagamitin natin ito sa ating app, kaya ipa-install ito gamit ang mga sumusunod sa ibaba:

1	$ npm install --save react-fusioncharts

Maaari kang matuto nang higit pa tungkol sa bahagi ng FusionCharts React mula sa FusionCharts repo.

Kasama ang Bulma

Upang lumikha ng layout at UI para sa ating dashboard app ay gagamitin natin ang Bulma CSS framework. Kaya magtungo sa terminal at ipasok ang:

1	$ npm install --save bulma

Ngayon na naidagdag na natin ang lahat ng mga kinakasama para sa ating dashboard app, maaari namang pumunta at umpisahan ang Google Sheets API.

Google Sheets API Setup

Gagawa tayo ng isang bagong proyekto para sa ating dashboard app sa tulong ng Google Developer API upang gamitin ang datos mula sa Google Sheets. Tatawagin ko ito bilang "dashboard". Maaari kang lumikha ng isang bagong proyekto gamit ang link na ito.

Sa sandaling ang proyekto ay nagawa na, ikaw ay maibabalik sa Google Developer API dashboard. Ngayon, upang paganahin ang Google Sheets API para sa ating app, pindutin ang Go sa overview ng API. Sa sandaling napindot mo na ang Enable APIs at Services ay ipapakita sa API Library, kaya maaari kang maghanap ng "Google Sheet API".

Sa sandaling makita mo ito, pindutin ang Pangalan, at pagkatapos na maiproseso dapat mong makita ang pahina tulad ng ipinapakita sa ibaba:

Sa sidebar, tumuloy sa Mga Kredensyal at pindutin ang pindutan ng Lumikha ng mga kredensyal at piliin ang API Key. Pindutin ang Limitahan ang Key at magtakda ng pangalan para dito (Gamitin ito sa "SaasDashboardAPIKey").

Itabi ang key na nabuo, dahil kailangan natin ito upang kunin ang mga datos mula sa ating Google Sheet mamaya.

Sa ilalim ng Mga Paghihigpit sa API piliin ang Google Sheets API at itabi. Ngayon ay handa na tayong magtungo para sa ating susunod na hakbang kung saan natin ikinonekta ang Google Sheets API at makuha ang ilang mga datos.

2. Pagkonekta ng datos ng Google Sheets API at Pagsundo

Pumunta tayo sa Google Sheet na gagamitin natin para sa ating dashboard app. Narito ang isang screenshot ng hitsura nito, na binuo gamit ang ilang halimbawa na datos na nakolekta ko para sa isang kathang-isip na negosyo ng SaaS. Makikita mo na mayroong buwanang datos sa loob ng tatlong taon, na nakatuon sa ilang Key Performance Indicators (KPIs) ng isang negosyo sa Saa. Kabilang dito ang kita, mga kostumer, at iba pang mga indikasyon ng paglago.

Ngayon kailangan nating ibahagi ang sheet upang makita ng sinuman. Para sa mga ito, sa menu ng File, pindutin ang Ibahagi. Pagkatapos, pindutin ang Magbahagi ng link na maibahagi at pagkatapos na maproseso ito, ibabahagi ang sheet para sa "Maaaring makita ng sinuman na may link ang access sa pamamagitan ng default.

Dahil gusto nating gawing pampubliko ang sheet, magtungo sa "Ang sinumang may link ay maaaring tingnan" at pindutin ang Higit pang opsyon sa pang-ibaba. Piliin ang "Sa - Pampublikong sa web" at itabi.

Maaari mong mabuksan ang sheet na gagamitin ko mula sa link na ito.

Tayo ay magtatabi ng isang nota ng spreadsheet ID (ito ay matatagpuan sa URL para sa Google Sheets, para sa akin 1QZ3vKssyG9xEG-RJklQlBezIR8WqCfML4EfO2qe5vbw).

Gagamitin natin ang batchGet na paraan para sa ating dashboard app. Binabalik nito ang isa o higit pang mga hanay ng mga halaga mula sa isang spreadsheet. Maaari kang matuto nang higit pa tungkol dito. Gamit ang parehong Key ng API at spreadsheet ID, ipinapadala sa Google Sheets API explorer upang subukan ito (maaari mo ring gamitin ang browser/postman (Ginamit ko ito!) Upang subukan mo at makakuha ng tugon ng JSON na mukhang tulad nito):

Mayroon akong sencored ang API Key Maaari mong ilagay ang iyong sariling API Key sa lugar nito.

Ngayon binuksan natin ang ating gumaganang direktoryo (saas-dashboard para sa akin) sa isang editor ng koda at lumikha ng isang bagong datos na tinatawag na config.js. Magdagdag ng iyong API key at spreadsheet ID bilang mga sumusunod.

1	export default {
2	apiKey: 'YOUR_API_KEY',
3	spreadsheetId: '1kVwf5oIZMPqY4Y2WRj9NzeDgy3zBBj-px-Hl41sFlT8'
4	}

Ngayon ay tumungo sa App.js file. Tayo ay magdadagdag ng lahat ng direkta sa App.js, na kung saan ang ating boilerplate ay nagbigay sa atin. Ito ay hindi perpekto at ang pinakamahusay na arkitektura, sa halip ay lamang ng isang display ng mga konsepto.

Ang mga hakbang sa ibaba ay nagpapakita kung paano ko ikonekta ang ating dashboard app sa Google Sheets API at makuha ang mga datos mula dito:

1. Ilipat ang config.js na nilikha natin gamit ang koda sa ibaba at ipinapahayag ang isang baryabol na may isang URL ng kahilingan para sa Google Sheets API.

1	import config from './config';
2
3	const url = `https://sheets.googleapis.com/v4/spreadsheets/${ config.spreadsheetId }/values:batchGet?ranges=Sheet1&majorDimension=ROWS&key=${ config.apiKey }`;

2. Ngayon, maglalagay tayo ng isang walang laman na array sa this.state ito na ipinapakita sa koda sa ibaba:

constructor() {
    super();
    this.state = {
     items:[]
    };
  }

3. Kunin ang datos ng JSON mula sa Reactís lifecycle componentDidMount na paraan:

componentDidMount() {
    fetch(url).then(response => response.json()).then(data => {
      let batchRowValues = data.valueRanges[0].values;
 
      const rows = [];
      for (let i = 1; i < batchRowValues.length; i++) {
        let rowObject = {};
        for (let j = 0; j < batchRowValues[i].length; j++) {
          rowObject[batchRowValues[0][j]] = batchRowValues[i][j];
        }
        rows.push(rowObject);
      }
      
      this.setState({ items: rows });
    });
}

Kahanga-hanga! Ngayon na nagawa na natin ang isang koneksyon sa ating Mga Google Sheet, maaari nating simulan ang pagbuo ng layout para sa ating dashboard.

Tandaan: Maaari mong payagan ang koneksyon sa pamamagitan ng pag-log sa mga gamit na maaaring ibalik sa loob ng estado.

3. Pagbuo ng Layout ng Dashboard ng SaaS

Magagamit natin ang Bulma upang itayo ang layout para sa ating dashboard app. Ang Bulma ay isang framework ng CSS batay sa Flexbox at nagbibigay sa atin ng tonelada ng mga nakagawa na at napapasadyang elemento at mga bahagi.

Narito kung paano ang magiging hitsura nito. Para sa karagdagang impormasyon tungkol sa kung ano ang ibig sabihin ng mga KPI na ito para sa isang negosyo, basahin ang Saas Metrics na talaga namang importante: KPIs Dapat Mong Pagsubaybay. Sa sandaling nilikha mo ang dashboard, ang huling bersyon ay magiging ganito ang screenshot sa ibaba:

Maaari mo ring tingnan ang live dashboard dito.

Ngayon, pinaghati-hatiin ang layout ng ating dashboard sa tatlong bahagi:

Seksyon ng Nabigasyon
Seksyon ng KPI
Seksyon ng Charts

Susubukan rin natin ang ilan sa mga default na estilo na ibinigay ng Bulma gamit ang ating sariling CSS na kung saan ay naroroon sa file App.css.

Paglikha ng Nabigasyon na Seksyon

Upang lumikha ng nabigasyon, gagamitin natin ang Bulmaís Navbar kagamitan. Sa ibaba ay ang nagreresultang HTML snippet:

<nav className="navbar has-shadow is-spaced" role="navigation" aria-label="main navigation">
        <div className="navbar-brand">
                <div className="navbar-item is-size-4 has-text-weight-semibold has-text-grey-darker">SaaS Dashboard<span className="is-size-6 has-text-grey has-text-weight-normal">by FusionCharts</span></div>
        </div>
        <div className="navbar-end" aria-label="menu" aria-expanded="false">
                <a id="btn-2018" className="navbar-item is-active has-text-link" href="#" onClick={this.updateDashboard}>2018</a>
                <a id="btn-2017" className="navbar-item" href="#" onClick={this.updateDashboard}>2017</a>
                <a id="btn-2016" className="navbar-item" herf="#" onClick={this.updateDashboard}>2016</a>
        </div>
</nav>

Ngayon na handa na ang seksyon ng ating pagnanabiga, lumikha tayo ng lalagyan upang ilagay sa susunod na dalawang mga seksyon ng ating dashboard. Narito ang HTML snippet:

<div className="container is-fullhd">
  // kpi section
  
  // charts section
</div>

Maaari kang matuto nang higit pa tungkol sa mga lalagyan dito.

Paglikha ng KPI na Seksyon

Upang lumikha ng seksyon ng KPI, gagamitin natin ang isang HTML <section> at gamitin ang Mga Haligi at mga bahagi ng Card na ibinigay ng Bulma. Nasa ibaba ang HTML snippet:

<section className="section is-bottom-paddingless has-paddingtop-size-1">
   <div className="columns">
      <div className="column">
         <div className="card">
            <div className="card-content">
               <div className="columns columns-kpi is-mobile is-desktop has-block-display">
                  <div className="column header is-two-thirds-desktop is-full-tablet is-two-thirds-mobile has-text-left is-bottom-paddingless">Renewed Users
                  </div>
                  <div id="renewed-users-changeper" className="column has-text-right has-text-left-tablet-only has-text-left-desktop-only is-bottom-paddingless" data-up="↑" data-down="↓">...</div>
               </div>
               <div id="renewed-users-val">...</div>
            </div>
         </div>
      </div>
   </div>
</section>

Ang snippet sa itaas ay lilikha ng isang KPI card. Katulad nito, gagawin natin ang mga card para sa lahat ng apat na KPI na nais nating ipakita.

Paglikha ng Charts na Seksyon

Upang lumikha ng seksyon ng mga chart, muli nating gagamitin ang isang HTML <section> na may Mga Haligi at mga bahagi ng Card na ibinigay ng Bulma. Aalisin natin ang walang laman na <div> na may natatanging ID para sa chart.

Nasa ibaba ang HTML snippet:

<section className="section is-bottom-paddingless has-paddingtop-size-1">
   <div className="columns is-multiline">
      <div className="column is-half-tablet is-one-third-desktop is-half-fullhd">
         <div className="card">
            <div className="card-content has-chart">
               <div className="columns is-marginless is-mobile is-desktop has-block-display">
                  <div className="column header is-two-thirds-desktop is-full-tablet is-two-thirds-mobile has-text-left is-bottom-paddingless">Monthly Reccuring Revenue</div>
                  <div id="mrr-changeper" className="column has-text-right has-text-left-tablet-only has-text-left-desktop-only is-bottom-paddingless" data-up="↑" data-down="↓">...</div>
               </div>
               <div id="mrr-val">...</div>
            </div>
            <div id="mrr-chart">
            </div>
         </div>
      </div>
   </div>
</section>

Dadalhin natin ang lahat ng mga chart card sa mga bahagi ng solong hanay upang gawing tumutugon ang ating dashboard, pagdaragdag ng iba't ibang mga paghinto na ibinigay ng Bulma para sa bawat column. Maaari kang matuto nang higit pa tungkol sa mga tumutugon na mga punto ng paghinto na ito sa dokumentasyon ng Bulma.

Ang snippet sa itaas ay lilikha ng isang chart card. Katulad nito, lilikha tayo ng mga card para sa lahat ng anim na chart na nais nating ipakita. Kung sinunod mo ang mga hakbang sa itaas sa ngayon dapat kang magkaroon ng katulad na layout tulad ng sa imahe sa itaas. Kung hindi, huwag mag-alala, ako ay maglalagay ng link sa Github repo para sa dashboard na ito sa dulo ng pagtuturo.

4. Paglikha ng mga KPI para sa SaaS Dashboard

Ngayon na handa na ang ating layout, tutukuyin natin ang pag-andar para sa ilan sa mga elemento at datos ng feed sa mga ito mula sa Google Sheet. Nagsisimula tayo sa pamamagitan ng pagtukoy sa isang function na tinatawag na getData sa ating bahagi na kukunin ang taon bilang argumento upang palitan ang istraktura ng mga data ng Google Sheets na naroroon sa estado ng app.

Ngayon, lilipat tayo sa pamamagitan ng datos upang kalkulahin ang mga halaga kung kinakailangan para sa KPIs. Ngayon ay ang koda upang lumikha ng KPI para sa "Mga Pinag-isang User".

getData = arg => {
   // google sheet data
   const arr = this.state.items;
   const arrLen = arr.length;

   // renewed users
   let renewedUsersVal = 0;
   let prevRenewedUsersVal = 0;
   let renewedUsersChangeper = 0;
   const renewedUsersChangeperElem = document.getElementById("renewed-users-changeper");

   for (let i = 0; i < arrLen; i++) {
      let monthStr = arr[i]["month"];
      if (monthStr.includes(arg)) {
         renewedUsersVal += parseInt(arr[i].renewed_users);
      } else if (monthStr.includes(parseInt(arg) - 1)) {
         prevRenewedUsersVal += parseInt(arr[i].renewed_users);
      }
   }

   // feeding kpi card values and chart kpi tickers
   document.getElementById("renewed-users-val").innerHTML = renewedUsersVal;
};

Katulad nito, itatakda natin ang mga variable para sa iba pang mga KPI at maglagay ng isang halaga sa mga ito sa pagpapalit sa pamamagitan ng datos gamit ang snippet na koda sa itaas.

5. Paglikha ng Mga Chart para sa SaaS Dashboard

Ngayon, bubuo tayo ng datos ng JSON para sa mga chart at gamitin ang FusionCharts at bahagi ng React nito upang makagawa sa kanila.

Sa function na getData na nilikha natin sa nakaraang hakbang, itatakda natin ang isang walang laman na array na magkakaroon ng data para sa chart. Ngayon ay kailangan ang koda:

// chart cards
let chartDataArr = [];
      
// chart 1 => MRR
let mrrChangeper = 0;
const mrrChangeperElem = document.getElementById('mrr-changeper');

for (let i = 0; i < arrLen; i++) {
   let monthStr = arr[i]["month"];
   if (monthStr.includes(arg)) chartDataArr.push(arr[i]);
}

let chartDataArrLen = chartDataArr.length;

Gagamitin natin ang chart ng "Multi-Series 2D Single Y Combination Chart" (mscombi2d) sa ating dashboard. Nagbibigay ang FusionCharts ng isang tonelada ng mga katangian na maaaring magamit upang ipasadya ang hitsura at pakiramdam ng iyong mga chart.

Ngayon, lilikha tayo ng isang datos na tinatawag na "chartCosmetics.js" na magkakaroon ng mga opsyon sa pagpapaganda para sa ating chart upang hindi natin kailangang tukuyin ang mga ito sa tuwing gumagawa tayo ng isa. Narito ang hitsura nito:

export default {
   currencyChart: {
      bgcolor: "#FFFFFF",
      canvasBgColor: "#FFFFFF",
      showBorder: "0",
      showCanvasBorder: "0",
      showLabels: "0",
      drawCrossLine: "1",
      divLineAlpha: "0",
      showYAxisValues: "0",
      chartLeftMargin: "0",
      chartRightMargin: "0",
      canvasRightMargin: "0",
      canvasLeftMargin: "0",
      chartBottomMargin: "0",
      canvasBottomMargin: "0",
      chartTopMargin: "0",
      canvasTopMargin: "0",
      showValues: "0",
      shadow: "0",
      legendPadding: "0",
      showShadow: "0",
      paletteColors: "#3273DC",
      drawAnchors: "0",
      showAlternateHGridColor: "0",
      crossLineColor: "#363636",
      crossLineAlpha: "15",
      drawCrossLineOnTop: "0",
      usePlotGradientColor: "1",
      plotFillAlpha: "15",
      plotColorinTooltip: "0",
      tooltipBorderAlpha: "0",
      toolTipPadding: "0",
      baseFontColor: "#205BBB",
      baseFontSize: "15",
      baseFont: "Nunito",
      tooltipbgalpha: "0",
      plotFillAngle: "90",
      numberPrefix: "$",
      plotToolText: "<b>$label: $dataValue</b>"
   },
   percentChart: {
      bgcolor: "#FFFFFF",
      canvasBgColor: "#FFFFFF",
      showBorder: "0",
      showCanvasBorder: "0",
      showLabels: "0",
      drawCrossLine: "1",
      divLineAlpha: "0",
      showYAxisValues: "0",
      chartLeftMargin: "0",
      chartRightMargin: "0",
      canvasRightMargin: "0",
      canvasLeftMargin: "0",
      chartBottomMargin: "0",
      canvasBottomMargin: "0",
      chartTopMargin: "0",
      canvasTopMargin: "0",
      showValues: "0",
      shadow: "0",
      legendPadding: "0",
      showShadow: "0",
      paletteColors: "#3273DC",
      drawAnchors: "0",
      showAlternateHGridColor: "0",
      crossLineColor: "#363636",
      crossLineAlpha: "15",
      drawCrossLineOnTop: "0",
      usePlotGradientColor: "1",
      plotFillAlpha: "15",
      plotColorinTooltip: "0",
      tooltipBorderAlpha: "0",
      toolTipPadding: "0",
      baseFontColor: "#205BBB",
      baseFontSize: "15",
      baseFont: "Nunito",
      tooltipbgalpha: "0",
      plotFillAngle: "90",
      numberSuffix: "%",
      plotToolText: "<b>$label: $dataValue</b>"
   }
};

Ngayon, bubuo tayo ng array ng datos ng JSON para sa bawat chart at gamitin ang mga opsyon sa itaas na kosmetiko:

// mrr-chart
let mrrChartDataArr = [];
let mrrChartCatArr = [];
for (let i = 0; i < chartDataArrLen; i++) {
   mrrChartCatArr.push({ label: chartDataArr[i].month });
   mrrChartDataArr.push({ value: chartDataArr[i].gross_revenue });
}

const mrrChartConfig = {
   type: "mscombi2d",
   width: "100%",
   height: "100%",
   dataFormat: "json",
   dataSource: {
      chart: chartCosmetics.currencyChart,
      categories: [
         {
            category: mrrChartCatArr
         }
      ],
      dataset: [
         {
            renderAs: "spline",
            lineThickness: "3",
            alpha: "50",
            data: mrrChartDataArr
         },
         {
            renderAs: "splinearea",
            showPlotBorder: "0",
            plotToolText: " ",
            data: mrrChartDataArr
         }
      ]
   }
};

// passing mrr chart JSON array to app's state
this.setState({ mrrChartData: mrrChartConfig });

// feeding value to KPI present in chart card
document.getElementById('mrr-val').innerHTML = `$${ chartDataArr[chartDataArrLen-1].gross_revenue }`;

Tandaan: Kailangan mong ideklara ang isang variable ng null sa estado ng app para sa bawat chart upang magamit ito sa ibang pagkakataon tulad ng ginawa natin sa itaas para sa datos ng Google Sheet.

Ngayon na ang datos ng JSON ay handa na para sa ating mga chart, ipapasa natin ito sa FusionCharts’ React component sa ilalim ng <div> elemento na nilikha natin para sa bawat chart.

1	<div id="mrr-chart">
2	<ReactFC {...this.state.mrrChartData} />
3	</div>

Upang matuto nang higit pa tungkol sa paggamit ng FusionCharts React component, maaari kang sumangguni sa pahina ng dokumentasyon ng developer na ito.

Maaari mong sundin ang mga hakbang sa itaas upang lumikha ng natitirang mga chart. Gagamitin natin ngayon ang getData function sa 2018 bilang isang argumento mula sa componentDidMount na paraan upang ang ating dashboard ay aandar ng 2018 na datos bilang default. Kung sinunod mo ang mga hakbang sa itaas sa ngayon dapat kang magkaroon ng isang functional dashboard tulad ng sa imahe sa ibaba:

Konklusyon

Ang pagtuturo na ito ay tutulong sa iyo na lumikha ng isang dashboard ng SaaS gamit ang Google Sheets. Kung nakasunod ka, maaari ka na ngayong magtrabaho gamit ang iyong magic sa pagdaragdag ng higit pang mga elemento ng UI, mga chart, KPI at mga karagdagang kagamitan. Nagdagdag ako ng ilang estilo at pag-andar sa sarili ko at maaari mong tingnan ang huling dashboard dito.

Para sa mga katanungan, maaari mong tingnan ang pinagmumulan ng mga koda mula sa Github na lalagyanan. Kung mayroon kang anumang mga katanungan o komento, mag-iwan ng komento sa ibaba o kaya naman ay kausapin ako sa Twitter!