Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Advertisement
  1. Web Design
  2. FusionCharts
Webdesign

Come costruire un cruscotto di SaaS in reagiscono con Google fogli di lavoro e 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.

Italian (Italiano) translation by Mirko Pizii (you can also view the original English article)

In questo tutorial spiegherò il processo di creazione di un dashboard di SaaS di recupero di dati da fogli di Google utilizzando l'API di Google fogli. Per creare questo dashboard useremo React, una libreria JavaScript per la creazione di interfacce utente; FusionCharts, un JavaScript basato biblioteca dei grafici; e Bulma, un framework CSS basato su Flexbox.

Fino a venire

Ecco cosa ci sarò coprono:

  1. Programma di installazione
  • React
  • FusionCharts e FusionCharts reagire componente
  • Bulma CSS Framework
  • Configurazione di API di Google fogli
  • Collegamento fogli Google API
  • Costruire il Layout di SaaS Dashboard
  • Creazione di indicatori KPI
  • Creazione di grafici
  • Conclusione
  • Prima di andare avanti e impostare, voglio mostrarvi un anteprima del SaaS Dashboard sarete in grado di creare, una volta sei andato attraverso questo tutorial. Qui è un collegamento in diretta di quello che avrai costruendo.

    what well be building

    1. installazione

    Per proseguire, è necessario impostare il progetto con le seguenti dipendenze:

    1. React
    2. FusionCharts Core Package e la sua componente di reagire
    3. Bulma

    Tra cui reagire

    Boilerplate React di Facebook otterrà noi iniziato in un batter d'occhio. Istituirà reagire insieme a tutte le utilità che ci servirà per la nostra app di dashboard. Così, nel terminale di vostra scelta (iTerm con Zsh per me) può andare avanti e immettere:

    È possibile ulteriori informazioni creare-react-app, abbiamo usato qui nei commenti.

    Saas-dashboard è la directory di lavoro dove il boilerplate React verrà installato insieme a tutte le utenze e le dipendenze, e aggiungeremo qualche altro che abbiamo bisogno per questo tutorial, come spiegato sotto.

    Tra cui pacchetto FusionCharts Core e la sua componente di reagire

    Per eseguire il rendering grafici nella nostra applicazione dashboard useremo FusionCharts. Si può andare avanti e saperne di più su FusionCharts su fusioncharts.com.

    Ci sono diversi modi per installare FusionCharts; per istruzioni generali è possibile controllare questa pagina di documentazione.

    FusionCharts Direct Download

    Potete direttamente scaricare file JavaScript dal sito FusionCharts e includerli nella tua applicazione utilizzando un <script> su /public/index.html

    Utilizzando NPM

    In questo tutorial useremo NPM. Così, nel terminale, spostarsi nella directory di lavoro cioè saas-dashboard e immettere:

    FusionCharts fornisce un componente leggero e semplice da usare per reagire, che può essere utilizzato per aggiungere grafici JavaScript nelle app di reagire senza alcun problema. Abbiamo verrà utilizzato nella nostra app, quindi cerchiamo di installarlo usando il comando seguente:

    Si può imparare di più sul componente FusionCharts reagire dal repo FusionCharts.

    Tra cui Bulma

    Per creare il layout e interfaccia utente per la nostra app cruscotto useremo il framework CSS Bulma. Così, nel terminale andare avanti ed entrare:

    Ora che abbiamo aggiunto tutte le dipendenze per la nostra app di cruscotto, possiamo andare e impostare Google fogli di API.

    Configurazione di API di Google fogli

    Creeremo un nuovo progetto per la nostra app dashboard della console di Google Developer API di utilizzare i dati da Google fogli di lavoro. Potrà essere chiamata a esso "gsheets-dashboard". È possibile creare un nuovo progetto utilizzando questo link.

    Una volta creato il progetto, sarete reindirizzati al dashboard Google Developer API. Ora, per attivare l'API di fogli di Google per la nostra app, fare clic su Vai alla panoramica di API. Una volta che si sceglie di abilitare API e servizi ti verrà presentato con la libreria di API, quindi andare avanti e cercare "API di Google fogli".

    Una volta trovato, fare clic su attiva, e dopo l'elaborazione si dovrebbe vedere la pagina come illustrato di seguito:

    Nella barra laterale, dirigiti verso le credenziali e cliccate su Crea credenziali e selezionare la chiave API. Fare clic sulla chiave di limitare e impostare un nome per esso (ho impostato a "SaasDashboardAPIKey").

    Salvare la chiave generata, come avrai bisogno di estrarre i dati dal nostro foglio di Google più tardi.

    Sotto restrizioni API selezionare l'API di Google Fogli e salvare. Ora siamo pronti per partire per il nostro prossimo passo dove collegare l'API di Google Fogli e recuperare alcuni dati.

    2. collegamento fogli Google API

    Ci dirigeremo al foglio di Google che useremo per la nostra app di dashboard. Ecco uno screenshot di come appare, costruito con alcuni dati di esempio che ho raccolto per un immaginario business SaaS. Vedrete c'è dati mensili per tre anni, concentrandosi su alcuni indicatori di prestazioni chiave (KPI) di un business di SaaS. Questi includono entrate, clienti e altri indicatori di crescita.

    Our Google sheet

    Ora abbiamo bisogno di condividere il foglio in modo che chiunque può vederlo. Per questo, nel menu File, fare clic su Condividi. Quindi, fare clic su Get link condivisibile e dopo l'elaborazione, il foglio verrà condivisi per "Chiunque con link può visualizzare" accesso per impostazione predefinita.

    Poiché vogliamo rendere la testa di pubblico, foglio a "Chiunque con link può visualizzare" e scegliere l'opzione più in discesa. Selezionare opzione "Su - pubblica sul web" e salvare.

    È possibile accedere il foglio che verranno utilizzati da questo link.

    Vi terremo una nota dell'ID di foglio di calcolo (questo può essere trovato nell'URL per Google fogli di lavoro, per me è 1QZ3vKssyG9xEG-RJklQlBezIR8WqCfML4EfO2qe5vbw).

    Si utilizzerà il metodo di batchGet per la nostra app di dashboard. Restituisce uno o più intervalli di valori da un foglio di calcolo. Si può saperne di più qui. Armati con la chiave API e il foglio di calcolo ID, Dirigiamoci a explorer Google Fogli API per eseguire il test (è possibile anche utilizzare browser/postino (io ho usato questo!) per testarlo e ottenere risposta JSON che sembra qualcosa di simile):

    test

    Io ho censurato la chiave API – è possibile inserire la propria chiave di API al suo posto.

    Ora apriamo la nostra directory di lavoro (saas-cruscotto per me) in un editor di codice e creare un nuovo file chiamato config.js. Aggiungi il tuo ID di chiave e foglio di calcolo di API come segue.

    Ora andiamo al file App.js. Ne aggiungeremo tutto direttamente a App.js, che ci ha dato il nostro standard. Questo non è idealmente la migliore architettura, piuttosto solo un display dei concetti.

    La procedura riportata di seguito Mostra come avrai collega la nostra applicazione dashboard per l'API di Google Fogli e recupera i dati da esso:

    1. importare config.js che abbiamo creato utilizzando il codice riportato di seguito e dichiarare una variabile con un URL di richiesta per l'API di Google fogli.

    2. ora, potrai impostare una matrice vuota in this.state come mostrato nel codice seguente:

    3. recuperare i dati JSON da metodo per componentDidMount del ciclo di vita di reagire:

    Impressionante! Ora che abbiamo stabilito una connessione con il nostro Google fogli di lavoro, possiamo iniziare a costruire il layout per il nostro dashboard.

    Nota: È possibile verificare la connessione eseguendo l'accesso alla variabile di elementi all'interno dello stato.

    3. costruire il Layout di SaaS Dashboard

    Ci sarò con Bulma per costruire il layout per il nostro cruscotto app. Bulma è un framework CSS basato su Flexbox e ci dà tonnellate di elementi predefiniti e personalizzabili e componenti.

    Ecco come apparirà. Per ulteriori informazioni su ciò che questi indicatori KPI significano per un'azienda, leggere Saas metriche che davvero contano: KPI si dovrebbe essere Tracking. Una volta che hai creato il cruscotto, la versione finale sarà simile alla schermata qui sotto:

    È anche possibile controllare il pannello live qui.

    Ora, dividiamo il layout del nostro dashboard in tre parti:

    1. Sezione di navigazione
    2. Sezione KPI
    3. Grafici di sezione

    Abbiamo anche sovrascriverà alcuni degli stili predefiniti forniti da Bulma usando i nostri CSS che sarà presente nel file CSS.

    Creazione della sezione di navigazione

    Per creare la navigazione, useremo il componente Navbar di Bulma. Di seguito è il frammento di HTML risultante:

    Ora che la nostra sezione di navigazione è pronto, creeremo un contenitore per ospitare le due sezioni successive del nostro dashboard. Ecco il frammento HTML:

    Si può imparare di più sui contenitori qui.

    Creazione della sezione KPI

    Per creare la sezione KPI, il sistema utilizza un HTML <section> e utilizzare le colonne e componenti di carta forniti da Bulma. Di seguito è il frammento di codice HTML:

    Il frammento sopra riportato verrà creata una scheda di KPI. Allo stesso modo, creeremo schede per tutti i quattro gli indicatori KPI che vogliamo mostrare.

    Creare la sezione grafici

    Per creare la sezione grafici, useremo nuovamente un HTML <section> con colonne e componenti di carta forniti da Bulma. Saremo lasciando un vuoto <div> con l'ID univoco per il grafico.

    Di seguito è il frammento di codice HTML:

    Aggiungiamo tutte le carte di grafico in componenti di singola colonna per rendere la nostra dashboard reattivi, aggiungendo punti di interruzione diversi forniti da Bulma per ogni colonna. Si può imparare di più su questi punti di interruzione reattivi nella documentazione di Bulma.

    Questo frammento di codice creerà una scheda grafico. Allo stesso modo, creeremo schede per tutti i sei grafici che vogliamo mostrare. Se hai seguito i passaggi precedenti fino ad ora si dovrebbe avere un layout simile come l'immagine qui sopra. Se così non fosse, non ti preoccupare, sarò aggiungendo il link al repo Github per questo cruscotto alla fine del tutorial.

    4. creazione di KPI per SaaS Dashboard

    Ora che il nostro layout è pronto, ci definiscono funzionalità per alcuni degli elementi e dati del feed a loro da Google fogli di lavoro. Iniziamo definendo una funzione chiamata getData nel nostro componente che avrà l'anno come argomento a-struttura dati Google fogli di lavoro presenti nello stato dell'app.

    Ora, noi ll loop attraverso i dati per calcolare i valori come necessario per gli indicatori KPI. Di seguito è riportato il codice per creare l'indicatore KPI per "Utenti rinnovato".

    Allo stesso modo, ci sarà definire variabili per altri KPI e assegnare un valore a loro al momento scorrono i dati utilizzando il frammento di codice precedente.

    5. creazione di grafici per il Dashboard di SaaS

    Ora, formare i dati JSON per i grafici e utilizzare FusionCharts e la sua componente di reagire per eseguirne il rendering.

    La funzione getData che abbiamo creato nel passaggio precedente, definiremo una matrice vuota che avrà i dati per il grafico. Qui di seguito è il codice necessario:

    Useremo il "grafico multi-serie 2D singola combinazione di Y" (mscombi2d) grafico nella nostra bacheca. FusionCharts fornisce una tonnellata di attributi che può essere utilizzato per personalizzare l'aspetto dei grafici.

    Ora, ci creerà un file chiamato "chartCosmetics.js", che avrà opzioni di cosmetici per la nostra tabella di modo che non dobbiamo definirli ogni volta che creiamo uno. Ecco come appare:

    Ora, costituiscono una matrice di dati JSON per ogni grafico e utilizzare le opzioni descritte sopra cosmetiche:

    Nota: È necessario dichiarare una variabile null nello stato dell'app per ogni grafico in modo che può essere utilizzato più tardi come abbiamo fatto in precedenza per i dati del foglio di Google.

    Ora che i dati JSON sono pronti per i nostri grafici, si passerà al componente di reagire dei FusionCharts sotto il <div> elemento che abbiamo creato per ogni grafico.

    Per ulteriori informazioni sull'utilizzo del componente FusionCharts reagire, è possibile fare riferimento a questa pagina di documentazione dello sviluppatore.

    Potete seguire i passaggi precedenti per creare le tabelle rimanenti. Ora chiameremo funzione getData con 2018 come argomento dal metodo componentDidMount in modo che la nostra dashboard carichi con 2018 dati per impostazione predefinita. Se hai seguito i passaggi precedenti fino ad ora si dovrebbe avere un cruscotto funzionale come nell'immagine qui sotto:

    final dashboard

    Conclusione

    Questo tutorial vi aiuterà a creare un dashboard di SaaS tramite Google fogli di lavoro. Avendo seguito, è ora possibile utilizzare la tua magia sull'aggiunta di più elementi dell'interfaccia utente, grafici, indicatori KPI e caratteristiche aggiuntive. Ho aggiunto alcune funzionalità e stile me stesso e si può verificare il dashboard finale qui.

    Per riferimento, è possibile controllare il codice sorgente dal repository su Github. Se avete domande o commenti, lascia un commento qui sotto o scrivere a me su 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.