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

Како да се изгради Saas Dashboard во React со Google Sheets и 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.

Macedonian (Македонски јазик) translation by Andrijana Mitevska (you can also view the original English article)

Во ова упатство ќе го објаснам процесот на креирање на контролната табла на SaaS преку преземање на податоци од Google Sheets со помош на API на Google Sheets. За да ја создадеме оваа табла, ќе користиме React, библиотека со JavaScript за градење на кориснички интерфејси; FusionCharts, библиотека за трасирање базирана на JavaScript; и Bulma, CSS рамка врз основа на Flexbox.

Следи

Еве што ќе опфатиме:

  1. Поставување
  • Реагирање
  • FusionCharts и FusionCharts React Component
  • Bulma CSS Framework
  • Поставување на API за Google Sheets
  • Поврзување API на Google Sheets и податоци за преземање
  • Градење на табелата на Saas Dashboard
  • Креирање KPIs
  • Креирање на графики
  • Заклучок
  • Пред да продолжиме и да поставиме, сакам да ви покажам преглед на Saas контролната табла што ќе можете да ја креирате, откако ќе го поминате овој туторијал. Еве линк во врска со она што ќе го градиме.

    what well be building

    1. Поставување

    За да следите заедно, ќе треба да го поставите вашиот проект со следниве зависности:

    1. Реагирање
    2. Основен пакет на FusionCharts и неговата реактивна компонента
    3. Bulma

    Вклучувајќи React

    Фејсбук React boilerplate ќе нè стартува во неверојатна состојба. Ќе се постави React заедно со сите комунални услуги што ќе ни требаат за нашата апликација на таблата. Значи, во терминалот по ваш избор (iTerm со Zsh за мене) можете да продолжите и да влезете:

    Можете да дознаете повеќе за креирање-реагира-апликација, бојлерот што го користевме овде.

    saas-dashboard е работен директориум каде што ќе се инсталира React boilerplate заедно со сите комунални услуги и зависности, и ќе додадеме уште неколку што ќе ни треба за ова упатство како што е објаснето подолу.

    Вклучувајќи го и FusionCharts Core пакет и негова реактивна компонента

    Ќе ги користиме FusionCharts за да направите табели во нашата апликативна табла. Можете да продолжите и да прочитате повеќе за FusionCharts на fusioncharts.com.

    Постојат повеќе начини за инсталирање на FusionCharts; за општи упатства можете да ја проверите оваа страница за документација.

    Директно преземање на FusionCharts

    Можете директно да ги преземете JavaScript-датотеките од веб-страницата на FusionCharts и да ги вклучите во вашата апликација користејќи ознака во /public/index.html од апликативната табла.

    Користење на НПМ

    Ние ќе го користиме НПМ во ова упатство. Значи, во терминалот, одете до работниот директориум, односно saas-табла и внесете:

    FusionCharts обезбедува лесна и едноставна за употреба компонента за React, која може да се користи за додавање на табелите за JavaScript во React apps без никаков проблем. Ќе ја користиме во нашата апликација, па ајде да ја инсталираме користејќи ја командата подолу:

    Можете да дознаете повеќе за компонентата Реагира FusionCharts од репо FusionCharts.

    Вклучувајќи го и Булма

    За да креираме распоред и интерфејс за нашата апликација на табла, ќе ја користиме рамката на Bulma CSS. Значи, во терминалот оди напред и внесете:

    Сега кога додадовме сите зависности за нашата апликација на табла, можеме да одиме и да го поставите API за Google Sheets.

    Поставување на API за Google Sheets

    Ќе креираме нов проект за нашата апликација на таблата на конзолата на Google Developer API за да трошиме податоци од Google Sheets. Ќе го нарекувам "gsheets-dashboard". Можете да креирате нов проект користејќи ја оваа врска.

    Откако проектот ќе биде креиран, ќе бидете пренасочени кон таблата со алатки на Google Developer API. Сега, за да овозможите API за Google Sheets за нашата апликација, кликнете Оди на прегледот на API-ите. Откако ќе кликнете на "Овозможи API-и и услуги", ќе бидете претставени со API-библиотека, па повелете и побарајте "API за Google Sheets".

    Откако ќе го пронајдете, кликнете Овозможи, и откако ќе се обработи, треба да ја видите страницата како што е прикажано подолу:

    Во страничната лента преместете се на Credentials и кликнете на копчето Креирај акредитиви и изберете API клуч. Кликнете на Restrict Key и поставете име за тоа (јас го поставив на "SaasDashboardAPIKey").

    Зачувај го генерираниот клуч, како што ќе ни треба за да повлечеме податоци од нашиот Google Лист подоцна.

    Под Ограничувања на API изберете API на Google Панели и зачувајте. Сега ние сме добро да одиме на нашиот следен чекор, каде што ќе го поврземе API на Google Sheets и ќе донесам некои податоци.

    2. Поврзување API на Google Sheets и преземање на податоци

    Ќе се упатиме кон Google Sheet што ќе го користиме за нашата апликација на табла. Еве скриншот на тоа како изгледа, изграден со некои примерочни податоци што ги собрав за измислен бизнис на SaaS. Ќе видите дека има месечни податоци за три години, фокусирајќи се на некои клучни показатели за успешност (КПИ) на бизнис SaaS. Тие вклучуваат приходи, потрошувачи и други показатели за раст.

    Our Google sheet

    Сега треба да го делиме листот за да може секој да го види. За ова, во менито Датотека, кликнете Сподели. Потоа, кликнете Добиј споделена линк и откако ќе се обработи, листот ќе биде споделен за "Секој со линк може да го гледа" пристапот стандардно.

    Бидејќи сакаме да го направиме листот јавно, префрлете се на "Секој со линк може да гледа" и кликнете на опцијата "Повеќе" во опаѓачкото мени. Изберете "On - Public on the web" опција и зачувајте.

    Можете да пристапите до листот што ќе го користам од оваа врска.

    Ние ќе задржиме белешка на ID на табела (ова може да се најде во URL-то за Google Sheets, за мене тоа е 1QZ3vKssyG9xEG-RJklQlBezIR8WqCfML4EfO2qe5vbw).

    Ќе ја користиме методата batchGet за нашата апликација на табла. Таа враќа една или повеќе опсези на вредности од табела. Можете да дознаете повеќе за тоа овде. Наоружан со идентификациски клуч и ID на табеларни пресметки, ајде да одиме во Google Sheets API истражувачот за да го тестираме (исто така можете да го користите прелистувачот / поштарот (го користав ова!) За да го тестирам и да добијам JSON одговор што изгледа вака):

    test

    Јас го цензурирав API-клучот-можете да го поставите вашиот сопствен API клуч на своето место.

    Сега, ајде да го отвориме нашиот работен директориум (saas-табла за мене) во уредувач на кодови и да создадете нова датотека наречена config.js. Додајте го вашиот API клуч и ID на табеларни податоци како што следува.

    Сега да преминеме во датотеката App.js. Ќе додадеме сè директно на App.js, што ни го даде нашиот бојлер. Ова не е идеално најдобрата архитектура, туку само приказ на концептите.

    Следните чекори покажуваат како ќе ја поврземе апликацијата на табла со API на Google Sheets и ќе добиваме податоци од него:

    1. Увезете config.js што го создадовме со користење на кодот подолу и прогласи променлива со URL на барање за API за Google Sheets.

    2. Сега, ќе поставиме празен низа во this.state како што е прикажано во кодот подолу:

    3. Земете ги податоците од JSON од компонентата на React на животниот циклусDidMount метод:

    Прекрасно! Сега кога имаме воспоставено врска со нашите Google Sheets, можеме да започнеме со изработка на изгледот за нашата табла.

    Забелешка: Можете да ја потврдите врската со запишување на променливата на ставки во државата.

    3. Изградба на поставувањето на таблата на SaaS

    Ќе ја користиме Булма за да го изградиме изгледот за нашата апликација на таблата. Bulma е CSS рамка базирана на Flexbox и ни дава тони претходно изградени и индивидуализирачки елементи и компоненти.

    Еве како ќе изгледа. За повеќе информации за она што овие KPIs значи за бизнис, прочитајте ги Метриките на Саас што навистина значат: KPI што треба да ги следите. Откако ќе ја креирате контролната табла, финалната верзија ќе изгледа сликата подолу:

    Исто така, можете да ја проверите контролната табла во живо тука.

    Сега, да го поделиме распоредот на нашата табла на три дела:

    1. Навигационен дел
    2. КПИ секција
    3. График секција

    Ние, исто така, ќе презапишеме некои од стандардните стилови обезбедени од Bulma, користејќи го нашиот сопствен CSS кој ќе биде присутен во датотеката App.css.

    Креирање на секцијата за навигација

    За да ја креираме навигацијата, ќе ја користиме компонентата на Намбар на Булма. Подолу е резултантниот HTML фрагмент:

    Сега, кога нашата секција за навигација е подготвена, ќе создадеме контејнер за да ги смените следните два дела на нашата табла. Еве го следниов HTML:

    Можете да дознаете повеќе за контејнерите овде.

    Креирање на секцијата KPI

    За да креираме дел од KPI, ќе користиме HTML и ќе ги користиме компонентите Columns и Card, обезбедени од Bulma. Подолу е HTML фрагмент:

    Горенаведениот фрагмент ќе создаде една KPI картичка. Слично на тоа, ние ќе создадеме карти за сите четири KPI што сакаме да ги покажеме.

    Креирање на табулаторот

    За да го креираме делот за графикони, повторно ќе користиме HTML со колоните и компонентите на картичката обезбедени од Bulma. Ќе оставиме празен со единствениот проект за табелата.

    Подолу е HTML фрагмент:

    Ние ќе ги додадеме сите графички картички во компоненти со единечни колони за да ја реагираме контролната табла, додавајќи различни гранични точки обезбедени од Bulma за секоја колона. Можете да дознаете повеќе за овие одзивни точки на прекин во документацијата на Булма.

    Горенаведениот фрагмент ќе создаде една графичка картичка. Слично на тоа, ние ќе создадеме карти за сите шест графикони кои сакаме да ги покажеме. Ако сте ги следеле горенаведените чекори досега, треба да имате сличен изглед како на сликата погоре. Ако не, не се грижи, јас ќе додадам врска до Github репо за оваа табла на крајот од туториал.

    4. Креирање на KPI за Saas контролната табла

    Сега, кога нашиот распоред е подготвен, ние ќе ја дефинираме функционалноста за некои од елементите и податоците за нивното доставување од Google Sheets. Започнуваме со дефинирање на функција наречена getData во нашата компонента која ќе ја преземе годината како аргумент за деструктура на податоците на Google Sheets кои се присутни во состојбата на апликацијата.

    Сега, ќе ги префрлиме податоците за да ги пресметаме вредностите колку што е потребно за KPI. Подолу е кодот за креирање на KPI за "Обновливи корисници".

    Слично на тоа, ние ќе ги дефинираме променливите за други KPIs и ќе им доделиме вредност при нивно собирање низ податоците користејќи го гореспоменатиот код.

    5. Креирање на графики за Saas контролната табла

    Сега, ќе формираме JSON податоци за графиконите и ќе ги користиме FusionCharts и компонентата React за да ги направат.

    Во функцијата getData што ја создадовме во претходниот чекор, ќе дефинираме празен низа која ќе има податоци за табелата. Подолу е потребниот код:

    Ние ќе ја користиме табелата "Multi-серија 2D Single Y Combination Chart" (mscombi2d) во нашата табла. FusionCharts обезбедува еден тон на атрибути кои можат да се користат за прилагодување на изгледот и чувството на вашите листи.

    Сега, ние ќе создадеме датотека наречена "chartCosmetics.js", која ќе има козметички опции за нашата табела, така што ние не мораме да ги дефинираме секој пат кога ќе го креираме. Еве како изгледа:

    Сега, ќе формираме низа од податоци на JSON за секоја табела и ги користиме горенаведените козметички опции:

    Забелешка: Мора да прогласиш променлива нула во состојбата на апликацијата за секој дијаграм, за да може да се користи подоцна, како што беше погоре, за податоците на Google Sheet.

    Сега кога JSON податоците се подготвени за нашите графикони, ние ќе го пренесеме до компонентата Reactive of FusionCharts под елементот што го создадовме за секоја табела.

    За да дознаете повеќе за користењето на компонентата React Reactor, можете да се повикате на оваа страница за документација на програмер.

    Можете да ги следите горе наведените чекори за да ги креирате останатите графикони. Сега ќе ја повикаме getData функцијата со 2018 како аргумент од методот componentDidMount, така што нашата контролна табла стандардно ќе се вчита со 2018 податоци. Доколку сте го следеле погоре наведените чекори, треба да имате функционална контролна табла како на сликата подолу:

    final dashboard

    Заклучок

    Ова упатство ќе ви помогне да креирате контролна табла на SaaS користејќи Google Sheets. Следејќи го заедно, сега можете да работите на вашата магија за додавање на повеќе кориснички елементи, графикони, KPI и дополнителни функции. Јас додадов некои стил и функционалност и можете да ја проверите последната табла тука.

    За повикување, можете да го проверите изворниот код од Github складиштето. Ако имате какви било прашања или повратни информации, оставете коментар подолу или викате на мене на Твитер!

    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.