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

Paano Gumawa ng isang SaaS Dashboard sa React Sa Google Sheets at 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.

Tagalog (Wikang Tagalog) translation by Anna Nelson (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:

  1. 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.

    what well be building

    1. Pag-uumpisa

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

    1. Pag-papagalaw
    2. Componento ng FusionCharts at FusionCharts React
    3. 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:

    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:

    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:

    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:

    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.

    Our Google sheet

    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):

    test

    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.

    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.

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

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

    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:

    1. Seksyon ng Nabigasyon
    2. Seksyon ng KPI
    3. 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:

    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:

    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:

    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:

    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".

    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:

    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:

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

    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.

    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:

    final dashboard

    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!

    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.