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

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

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

2. Tukar '

Menggunakan BigQuery dalam komponen React:

Dalam komponen React yang perlu menggunakan analisis data, anda boleh mengimport klien BigQuery dan menggunakan kaedah yang disediakan untuk melaksanakan pertanyaan. Sebagai contoh, anda boleh melaksanakan pertanyaan dalam kaedah kitaran hayat komponen dan menyimpan hasilnya kepada keadaan komponen:

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;

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!