Advertisement
  1. Web Design
  2. FusionCharts
Webdesign

Cara Membina Papan Pemuka SaaS dalam React Dengan Google Sheets dan 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.

Malay (Melayu) translation by Muhammad Viqqri (you can also view the original English article)

Dalam tutorial ini, saya akan menerangkan proses membuat papan pemuka SaaS dengan mengambil data dari Helaian Google menggunakan API Google Sheets. Untuk membuat papan pemuka ini, kami akan menggunakan React, perpustakaan JavaScript untuk membina antara muka pengguna; FusionCharts, pustaka carta berasaskan JavaScript; dan Bulma, rangka kerja CSS berdasarkan Flexbox.

Akan datang

Inilah yang akan kita pelajari:

  1. Setup
  • React
  • Komponen Reaktor FusionCharts dan FusionCharts
  • Rangka Kerja CSS Bulma
  • Persediaan API Helaian Google
  • Menyambung API Google Sheets * Mengambil data
  • Membina Tata Letak Dasbor SaaS
  • Membuat KPI
  • Membuat Carta
  • Kesimpulannya
  • Sebelum kita pergi dan buat, saya ingin menunjukkan kepada anda preview Dashboard SaaS yang anda akan dapat buat, sebaik sahaja anda meneruskan tutorial ini. Berikut adalah pautan langsung mengenai apa yang akan kami bina.

    what well be building

    1. Setup

    Untuk mengikutinya, anda perlu menyediakan projek anda dengan kebergantungan yang berikut:

    1. React
    2. FusionCharts Core Package dan React Componentnya
    3. mencari

    Termasuk Reaktik

    Dulang Reaktif Facebook akan membawa kita bermula dalam keadaan sengit. Ia akan menubuhkan React bersama semua utiliti yang kami perlukan untuk aplikasi papan pemuka kami. Jadi, di terminal pilihan anda (iTerm dengan Zsh untuk saya) anda boleh pergi ke hadapan dan masukkan:

    Anda boleh mengetahui lebih lanjut mengenai create-react-app, boilerplate yang telah kami gunakan di sini.

    saas-dashboard adalah direktori kerja di mana boilerplate React akan dipasang bersama-sama dengan semua utiliti dan dependencies, dan kami akan menambahkan beberapa lagi yang kami perlukan untuk tutorial ini seperti yang dijelaskan di bawah.

    Termasuk Pakej Teras FusionCharts dan Komponen Reaktiknya

    Kami akan menggunakan FusionCharts untuk membuat carta dalam apl papan pemuka kami. Anda boleh meneruskan dan membaca lebih lanjut mengenai FusionCharts di fusioncharts.com.

    Terdapat pelbagai cara untuk memasang FusionCharts; untuk arahan umum anda boleh menyemak halaman dokumentasi ini.

    Muat Turun Langsung FusionCharts

    Anda boleh memuat turun fail JavaScript secara langsung dari laman web FusionCharts dan menyertakannya dalam aplikasi anda menggunakan tag <script> dalam / public_index.html apl papan pemuka.

    Menggunakan NPM

    Kami akan menggunakan NPM dalam tutorial ini. Oleh itu, di terminal, navigasi ke direktori kerja sama ada di saas-dashboard dan masukkan:

    FusionCharts menyediakan komponen ringan dan mudah digunakan untuk React yang boleh digunakan untuk menambah carta JavaScript dalam apl React tanpa sebarang masalah. Kami akan menggunakannya dalam apl kami, jadi mari memasangnya dengan menggunakan arahan di bawah:

    Anda boleh mengetahui lebih lanjut mengenai komponen FusionCharts React dari pada repo FusionCharts.

    Termasuk Menemukan

    Untuk membuat susun atur dan UI untuk apl papan pemuka kami, kami akan menggunakan framework CSS Bulma. Jadi, di terminal teruskan dan masukkan:

    Kini kami telah menambah semua dependencies untuk aplikasi papan pemuka kami, kami boleh pergi dan menyediakan API Helaian Google.

    Persediaan API Helaian Google

    Kami akan mewujudkan satu projek baru untuk apl papan pemuka kami pada konsol API Google Developer untuk menggunakan data dari Helaian Google. Saya akan panggil ia 'gsheets-dashboard'. Anda boleh membuat projek baru menggunakan pautan ini.

    Setelah projek dibuat, anda akan diarahkan ke pemuka Google API API Pemaju. Sekarang, untuk membolehkan API Helaian Google untuk apl kami, klik Pergi ke Gambaran keseluruhan API. Sebaik sahaja anda klik Membolehkan API dan Perkhidmatan, anda akan dibentangkan dengan Perpustakaan API, jadi teruskan dan cari 'API Google Sheets'.

    Sebaik sahaja anda menemuinya, klik Aktifkan, dan selepas diproses, anda akan melihat halaman seperti yang ditunjukkan di bawah:

    Di bar sisi, tengarai ke Bukti Kredensial dan klik butang Bukti kelayakan dan pilih API Key. Klik Restrict Key dan tetapkan nama untuknya (saya telah menetapkannya kepada 'SaasDashboardAPIKey').

    Simpan kunci yang dihasilkan, kerana kami memerlukannya untuk menarik data dari Google Sheet kemudian.

    Di bawah Sekatan API pilih API Helaian Google dan simpan. Sekarang kita baik untuk pergi ke langkah seterusnya di mana kita akan menyambung API Helaian Google dan mengambil beberapa data.

    2. Menyambung API Helaian Google * Mengambil Data

    Kami akan menuju ke Helaian Google yang akan kami gunakan untuk aplikasi papan pemuka kami. Berikut ialah tangkapan skrin bagaimana ia kelihatan, dibina dengan beberapa data sampel yang saya kumpulkan untuk perniagaan SaaS fiksyen. Anda akan melihat data bulanan selama tiga tahun, dengan memberi tumpuan kepada beberapa Petunjuk Prestasi Utama (KPI) perniagaan SaaS. Ini termasuk pendapatan, pelanggan, dan petunjuk pertumbuhan lain.

    Our Google sheet

    Kini kita perlu berkongsi lembaran supaya sesiapa dapat melihatnya. Untuk ini, dalam menu Fail, klik Kongsi. Kemudian, klik Dapatkan pautan yang boleh dikongsi dan selepas diproses, kunci akan dikongsi untuk akses 'Sesiapa sahaja yang boleh melihat' secara lalai.

    Oleh kerana kami mahu membuat lembaran awam, menuju ke 'Sesiapa sahaja yang mempunyai pautan boleh melihat' dan klik pilihan Lagi di lungsur turun. Pilih 'Aktif - Umum di web' pilihan dan simpan.

    Anda boleh mengakses helaian yang akan saya gunakan dari pautan ini.

    Kami akan menyimpan nota ID spreadsheet (ini boleh didapati di URL untuk Helaian Google, untuk saya itu 1QZ3vKssyG9xEG-RJklQlBezIR8WqCfML4EfO2qe5vbw).

    Kami akan menggunakan kaedah batchGet untuk apl papan pemuka kami. Ia mengembalikan satu atau lebih julat nilai dari spreadsheet. Anda boleh mengetahui lebih lanjut mengenainya di sini. Berbekalkan ID dan ID hamparan API, marilah ke Google Explorer API explorer untuk mengujinya (anda juga boleh menggunakan penyemak imbas / posmen (saya menggunakan ini!) Untuk menguji dan mendapatkan respons JSON yang kelihatan seperti ini):

    test

    Saya telah menapis Kunci API-anda boleh meletakkan Kunci API anda sendiri di tempatnya.

    Sekarang mari buka direktori kerja kami (saas-dashboard untuk saya) dalam editor kod dan buat fail baru bernama config.js. Tambah kunci API dan ID hamparan anda seperti berikut.

    Sekarang mari kepala ke fail App.js. Kami akan menambah semuanya secara langsung kepada App.js, yang telah kami hantarkan kepada kami. Ini bukan seni bina yang terbaik, melainkan hanya memaparkan konsep-konsep.

    Langkah-langkah di bawah menunjukkan bagaimana saya akan menyambungkan aplikasi papan pemuka kami ke API Helaian Google dan mengambil data daripadanya:

    1. Import config.js yang kami buat dengan menggunakan kod di bawah dan mengisytiharkan pemboleh ubah dengan URL permintaan untuk API Google Sheets.

    2. Sekarang, kami akan menetapkan satu array kosong di this.state seperti ditunjukkan dalam kod di bawah:

    3. Ambil data JSON dari komponen komponen Lifecycle componenDidMount:

    Awesome! Sekarang bahawa kami telah membuat sambungan dengan Helaian Google kami, kami boleh mula membina susun atur untuk papan pemuka kami.

    Nota: Anda boleh mengesahkan sambungan dengan melog masuk pembolehubah items dalam keadaan.

    3. Membina susun atur Dashboard SaaS

    Kami akan menggunakan Bulma untuk membina susun atur untuk apl papan pemuka kami. Bulma adalah rangka kerja CSS berdasarkan Flexbox dan memberi kami banyak elemen dan komponen yang telah dibina dan disesuaikan.

    Inilah caranya. Untuk mendapatkan maklumat lanjut tentang apa yang dimaksudkan oleh KPI untuk perniagaan, bacalah Saas Metrics Itu Sungguh Penting: KPI Anda Perlu Menjejaki. Sebaik sahaja anda telah mencipta papan pemuka, versi akhir akan kelihatan seperti tangkapan skrin di bawah:

    Anda juga boleh menyemak papan pemuka langsung di sini.

    Sekarang, mari bahagikan susunatur papan pemuka kami ke dalam tiga bahagian:

    1. Navigation Section
    2. KPI Section
    3. Charts Section

    Kami juga akan menulis ganti beberapa gaya lalai yang disediakan oleh Bulma menggunakan CSS kita sendiri yang akan hadir dalam App.css file.

    Mencipta Seksyen Navigasi

    Untuk membuat navigasi, kami akan menggunakan komponen Navbar Bulma. Berikut ialah coretan HTML yang dihasilkan:

    Sekarang seksyen navigasi kami siap, kami akan membuat sebuah container untuk menempatkan dua bahagian seterusnya papan pemuka kami. Inilah coretan HTML:

    Anda boleh mengetahui lebih lanjut mengenai bekas di sini.

    Mencipta KPI Section

    Untuk membuat bahagian KPI, kami akan menggunakan HTML <section> dan menggunakan komponen Lajur dan Kad yang disediakan oleh Bulma. Berikut adalah coretan HTML:

    Potongan di atas akan membuat satu kad KPI. Begitu juga, kami akan membuat kad untuk semua empat KPI yang kami mahu paparkan.

    Mencipta Seksyen Carta

    Untuk membuat bahagian carta, kami akan menggunakan HTML <section> dengan komponen Lajur dan Kad yang disediakan oleh Bulma. Kami akan meninggalkan kosong <div> dengan ID unik untuk carta.

    Berikut adalah coretan HTML:

    Kami akan menambah semua kad carta dalam komponen lajur tunggal untuk membuat papan pemuka kami responsif, menambah pelbagai titik putus yang disediakan oleh Bulma untuk setiap lajur. Anda boleh mengetahui lebih lanjut mengenai perkara-perkara ini dalam dokumentasi Bulma.

    Potongan di atas akan membuat satu kad carta. Begitu juga, kami akan membuat kad untuk kesemua enam carta yang ingin kami paparkan. Jika anda telah mengikuti langkah-langkah di atas setakat ini, anda sepatutnya mempunyai susun atur yang serupa seperti pada gambar di atas. Jika tidak, jangan bimbang, saya akan menambah pautan ke replikasi Github untuk papan pemuka ini pada akhir tutorial.

    4. Membuat KPI untuk Papan SaaS Dashboard

    Sekarang susun atur kami siap, kami akan menentukan fungsi untuk beberapa elemen dan data suapan kepada mereka dari Helaian Google. Kami mulakan dengan mendefinisikan fungsi yang dinamakan getData dalam komponen kami yang akan mengambil tahun sebagai hujah untuk menyusun data Google Sheets 'yang terdapat dalam keadaan aplikasinya.

    Kini, kita akan melelong melalui data untuk mengira nilai-nilai yang diperlukan untuk KPI. Berikut adalah kod untuk mencipta KPI untuk 'Pengguna yang Diperbaharui'.

    Begitu juga, kami akan menentukan pembolehubah untuk KPI lain dan memberikan nilai kepada mereka setelah menggeledah data menggunakan coretan kod di atas.

    5. Membuat Carta untuk Papan SaaS Dashboard

    Sekarang, kami akan membentuk data JSON untuk carta dan menggunakan FusionCharts dan komponen React untuk menjadikannya.

    Dalam fungsi getData yang kami buat dalam langkah sebelumnya, kami akan menentukan array kosong yang akan mempunyai data untuk carta. Berikut adalah kod yang diperlukan:

    Kami akan menggunakan carta 'Carta Multi-siri 2D Single Y Kombinasi' (mscombi2d) di papan pemuka kami. FusionCharts menyediakan satu ton atribut yang boleh digunakan untuk menyesuaikan rupa dan rasa carta anda.

    Sekarang, kami akan membuat fail yang dipanggil 'chartCosmetics.js' yang akan mempunyai pilihan kosmetik untuk carta kami supaya kami tidak perlu menentukannya setiap kali kami membuatnya. Inilah caranya:

    Sekarang, kami akan membentuk pelbagai data JSON untuk setiap carta dan menggunakan pilihan kosmetik di atas:

    Nota: Anda perlu mengisytiharkan pemboleh ubah kosong dalam keadaan aplikasi untuk setiap carta supaya ia boleh digunakan kemudian seperti yang kami lakukan di atas untuk data Google Sheet.

    Sekarang bahawa data JSON bersedia untuk carta kami, kami akan lulus ke komponen React FusionCharts 'di bawah elemen <div> yang kami buat untuk setiap carta.

    Untuk mengetahui lebih lanjut mengenai penggunaan komponen FusionCharts React, anda boleh merujuk kepada halaman dokumentasi pemaju ini.

    Anda boleh mengikuti langkah-langkah di atas untuk membuat carta yang tersisa. Sekarang kita akan memanggil fungsi getData dengan 2018 sebagai hujah dari kaedah componentDidMount supaya beban papan pemuka kami dengan data 2018 secara lalai. Sekiranya anda telah mengikuti langkah-langkah di atas setakat ini, anda sepatutnya mempunyai papan pemuka berfungsi seperti pada imej di bawah:

    final dashboard

    Kesimpulannya

    Tutorial ini akan membantu anda membuat papan pemuka SaaS menggunakan Helaian Google. Setelah mengikuti, kini anda boleh menggunakan sihir anda untuk menambah lebih banyak unsur UI, carta, KPI dan ciri tambahan. Saya telah menambah beberapa gaya dan fungsi saya sendiri dan anda boleh menyemak papan pemuka akhir di sini.

    Sebagai rujukan, anda boleh menyemak kod sumber dari repositori Github. Jika anda mempunyai sebarang pertanyaan atau maklum balas, tinggalkan komen di bawah atau berteriak kepada saya di 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.