React と Google BigQuery を使用して高速データ分析アプリケーションを構築する方法-jsチュートリアル-php.cn

React と Google BigQuery を使用して高速データ分析アプリケーションを構築する方法

WBOY

リリース： 2023-09-26 18:12:29

オリジナル

628 人が閲覧しました

如何利用React和Google BigQuery构建快速的数据分析应用

React と Google BigQuery を使用して高速データ分析アプリケーションを構築する方法

はじめに:
今日の情報爆発の時代では、データ分析が重要な部分になっています。さまざまな業界とのつながりに欠かせない存在。中でも、高速かつ効率的なデータ分析アプリケーションを構築することは、多くの企業や個人が追求する目標となっています。この記事では、React と Google BigQuery を使用して高速データ分析アプリケーションを構築する方法を紹介し、詳細なコード例を示します。

1. 概要
React は、ユーザーインターフェイスを構築するために使用される JavaScript ライブラリであり、インタラクティブな Web アプリケーションを簡単に作成できます。 Google BigQuery は、フルマネージドで弾力性のある高性能の分散データウェアハウスであり、ビッグデータ分析に非常に適しています。 React と Google BigQuery を組み合わせると、強力なデータ分析アプリケーションを構築できます。

2. 準備

React と関連依存関係のインストール:
まず、Node.js 環境がインストールされていることを確認します。次に、次のコマンドを使用して、新しい React アプリケーションを作成できます:
```
npx create-react-app data-analysis-app
```
ログイン後にコピー
Google Cloud プロジェクトを作成します:
Google Cloud コンソールにログインし、新しいプロジェクトを作成します。プロジェクトで BigQuery API を有効にし、サービスアカウントを作成して、その認証情報ファイルをダウンロードします。
Google Cloud SDK をインストールします:
Google Cloud SDK をインストールし、次のコマンドを使用して Google Cloud アカウントにログインします:
```
gcloud auth login
```
ログイン後にコピー

3 React に接続する Google BigQuery で関連する依存関係をインストールする

#
```
npm install @google-cloud/bigquery
```
ログイン後にコピー
BigQuery クライアントを作成する:
ルートディレクトリの下の src ディレクトリにReact アプリケーションの新しいファイル bigquery.js を作成し、次のコードを記述します:
```
const { BigQuery } = require('@google-cloud/bigquery');

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

module.exports = bigquery;
```
ログイン後にコピー

「」を独自のサービスアカウントに置き換えます。認証情報ファイルのパス。

データ分析を使用する必要がある React コンポーネントでは、BigQuery クライアントをインポートし、クエリを実行するために提供されるメソッドを使用できます。たとえば、コンポーネントのライフサイクルメソッドでクエリを実行し、結果をコンポーネントの状態に保存できます。

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>
        );
    }
}

ログイン後にコピー

'' を独自のクエリステートメントに置き換えます。

4. データ分析アプリケーションを構築する

上記の手順により、React と Google BigQuery の接続に成功しました。次に、特定のニーズに基づいてデータ分析アプリケーションを構築できます。

データ分析ページを作成します:

React アプリケーションの src ディレクトリに新しいファイル DataAnaracyPage.js を作成し、次のコードを記述します:

import React from 'react';
import DataAnalysisComponent from './DataAnalysisComponent';

function DataAnalysisPage() {
 return (
     <div>
         <h1>数据分析应用</h1>
         <DataAnalysisComponent />
     </div>
 );
}

export default DataAnalysisPage;

ログイン後にコピー

ルートの追加:

React アプリケーションの src ディレクトリにある App.js ファイルに、データ分析ページのルートを追加します:

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import DataAnalysisPage from './DataAnalysisPage';

function App() {
 return (
     <Router>
         <Route exact path="/" component={DataAnalysisPage} />
     </Router>
 );
}

export default App;

ログイン後にコピー

React apply を実行し、ブラウザから http://localhost:3000 にアクセスしてデータ分析ページを表示します。

概要:

React と Google BigQuery を組み合わせることで、高速かつ効率的なデータ分析アプリケーションを簡単に構築できます。 React の柔軟性と BigQuery の機能を活用することで、さまざまな複雑なデータ分析のニーズを満たすことができます。この記事のコード例がデータ分析アプリケーションの構築に役立つことを願っています。

以上がReact と Google BigQuery を使用して高速データ分析アプリケーションを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。