Cara membina aplikasi analisis data pantas menggunakan React dan Google BigQuery

Cara menggunakan React dan Google BigQuery untuk membina aplikasi analisis data yang pantas

Pengenalan:
Dalam era ledakan maklumat hari ini, analisis data telah menjadi pautan yang sangat diperlukan dalam pelbagai industri. Antaranya, membina aplikasi analisis data yang pantas dan cekap telah menjadi matlamat yang diusahakan oleh banyak syarikat dan individu. Artikel ini akan memperkenalkan cara menggunakan React dan Google BigQuery untuk membina aplikasi analisis data yang pantas dan memberikan contoh kod terperinci.

1. Gambaran Keseluruhan
React ialah perpustakaan JavaScript untuk membina antara muka pengguna. Ia boleh membuat aplikasi web interaktif dengan mudah. Google BigQuery ialah gudang data teragih yang diurus sepenuhnya, anjal, berprestasi tinggi, yang sangat sesuai untuk analisis data besar. Menggabungkan React dan Google BigQuery, anda boleh membina aplikasi analisis data yang berkuasa.

2. Persediaan

1. Pasang React dan kebergantungan yang berkaitan:
   Pertama, pastikan persekitaran Node.js telah dipasang. Kemudian, anda boleh membuat aplikasi React baharu dengan arahan berikut:

   npx create-react-app data-analysis-app

   Salin selepas log masuk
2. Buat projek Google Cloud:
   Log masuk ke konsol Google Cloud dan buat projek baharu. Dayakan API BigQuery dalam projek, buat Akaun Perkhidmatan dan muat turun fail bukti kelayakannya.

3. Pasang Google Cloud SDK:
   Pasang Google Cloud SDK, dan gunakan perintah berikut untuk log masuk ke akaun Google Cloud anda:

   gcloud auth login

   Salin selepas log masuk

3.

1. Buat klien BigQuery:

   Buat fail baharu bigquery.js dalam direktori src dalam direktori akar aplikasi React dan tulis kod berikut:

   npm install @google-cloud/bigquery

   Salin selepas log masuk

2. Tukar '

Menggunakan BigQuery dalam komponen React:

const { BigQuery } = require('@google-cloud/bigquery');

// 设置Service Account凭证
const bigquery = new BigQuery({
 keyFilename: '<path-to-service-account-json>'
});

module.exports = bigquery;

Ganti '' dengan pertanyaan anda sendiri.
3. 
   4 Bina aplikasi analisis data
Melalui langkah di atas, kami telah berjaya menyambungkan React dan Google BigQuery. Seterusnya, anda boleh membina aplikasi analisis data berdasarkan keperluan khusus anda.

Buat halaman analisis data:
Buat fail baharu DataAnalysisPage.js dalam direktori src aplikasi React, dan tulis kod berikut:

import bigquery from './bigquery.js';

class DataAnalysisComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            result: []
        };
    }

    componentDidMount() {
        this.executeQuery();
    }

    executeQuery() {
        bigquery
            .query('<your-query>')
            .then((results) => {
                this.setState({ result: results });
            })
            .catch((err) => {
                console.error('Error executing query:', err);
            });
    }

    render() {
        // 渲染数据分析结果
        return (
            <div>
                {this.state.result.map((row, index) => (
                    <div key={index}>{row}</div>
                ))}
            </div>
        );
    }
}

1. Tambahkan laluan:
   Aplikasi dalam direktori Aplikasi React Dalam fail .js, tambahkan laluan halaman analisis data:

   import React from 'react';
   import DataAnalysisComponent from './DataAnalysisComponent';
   
   function DataAnalysisPage() {
    return (
        <div>
            <h1>数据分析应用</h1>
            <DataAnalysisComponent />
        </div>
    );
   }
   
   export default DataAnalysisPage;

   Salin selepas log masuk
2. Jalankan aplikasi:

   Jalankan aplikasi React dan akses http://localhost:3000 melalui penyemak imbas untuk melihat halaman analisis data.
   

Ringkasan:
3. Dengan menggabungkan React dan Google BigQuery, kami boleh membina aplikasi analisis data yang pantas dan cekap dengan mudah. Dengan memanfaatkan fleksibiliti React dan kuasa BigQuery, kami dapat memenuhi pelbagai keperluan analisis data yang kompleks. Saya harap contoh kod dalam artikel ini akan membantu anda membina aplikasi analisis data.
   

Atas ialah kandungan terperinci Cara membina aplikasi analisis data pantas menggunakan React dan Google BigQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!