チャレンジ:反応アプリケーションからスプレッドシートを作成する?

私は最近、K - 12の科学教師と学生によって使用されるクイズアプリのためのデータ報告機能の開発を含む既存のプロジェクトのための小さな機能を構築するために署名しました.以前の私のアプリケーションのデータ報告を調査したことがなかったので、私は私が多くの研究と実験をしたことを知っていました.
以下は、私の研究の旅の最初のいくつかのステップを共有し、どのように私は実験を通じて私の既存のアプリの1つを学んだ.次の2つの記事で、私は科学アプリケーションで実装する予定のソリューションを共有します.

仕様
私は最終的に取り組んでいるアプリケーションは、教師が学生のグループにクイズ/活動を割り当てることができますクイズアプリです、学生は個別に活動を完了することができますし、クラスのレベルと個々の結果は、データベースに格納されているクイズの後、ブラウザで表示することができます管理されます.
私は、スプレッドシートにこれらのクラスレベルと個々の結果をエクスポートする方法を考え出すことに頼まれました.私は、レポートが完了したとき、結果がどのように見えるかについてサンプルスプレッドシートを与えられました.そして、それは教師が理解して、データに基づいて教育的な決定をするのを援助するために、カスタムスタイルと条件付き書式のかなりのビットで、2枚のシートを含みました.しかし、この例のスプレッドシートを超えて、私は最終的な製品を作成するために使用するどの技術を決定する自由を与えられた.アプリケーションは、反応/次を使用して開発されました.Graphqlでフロントエンドとノードバックエンド.

私の研究と初期の決定
最初から、私はExcelベースのソリューションやGoogleシートベースのソリューションを開発することができました.GoogleベースのソリューションはGoogleのサインやOAuthのいくつかの様々な必要がありますが、私はExcelベースのソリューションは、それがおそらく認証を必要としないので実装することが容易かもしれないと考えた.しかし、前の先生として、私は、ほとんどの公立学校がGoogle製品を走らせるのを知っています.

オプションは1となります.
私は簡単に探検excel4node パッケージは、簡単に解決されているExcelの私の最初の認識は正確ではない可能性が実現.スプレッドシートがサーバー側で作成され、クライアント側に送られる必要があることをすぐに知りました.クライアント側に一度、ワークブックをダウンロード可能なExcelスプレッドシートに変換するために必要なコードがかなりありました.私はこの解決策を私の既存の反応アプリの1つに統合しました、そして、私がアクセスするために必要としたデータの全てがフロントエンドですでにアクセス可能であるのを発見しました.したがって、私はGoogleシートソリューションを探索するために移動することを決めた.
しかし、あなたがこのルートに行くことに興味があるならば、チェックしてくださいexcel4node documentation そして、Stackoverflowの上で多くの探索をして、ワークブックをダウンロードするいろいろな方法を理解してください.あなたが私の乱雑な実験を見たいと思うならば、あなたはExcelワークブックをつくるために、私のサーバーサイドコードを見ることができますhere 私の反応コンポーネントhere .

import React from 'react';


const Excel = (data) => {

    // frontend code to download spreadsheet using axios for fetch and code to download excel spreadsheet
    function download(data) {
        const axios = require('axios');

        axios.get('/myreport', {responseType: 'blob'})
            .then(response => {
                let headerLine = response.headers['content-disposition'];
                let startFileNameIndex = headerLine.indexOf('"') + 1
                let endFileNameIndex = headerLine.lastIndexOf('"')
                let filename = headerLine.substring(startFileNameIndex, endFileNameIndex)
                const url = window.URL.createObjectURL(new Blob([response.data], 
                {type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}));
                const link = document.createElement('a');

                link.href = url;
                link.setAttribute('download', filename);
                document.body.appendChild(link);
                link.click();
                link.remove();
            }).catch(error => {
                console.log(error)
            })
    }

    return <button onClick={download} className="block">Download Data to Excel</button>

}

export default Excel

この乱暴な実験の後、私はオプション1月2日に移動する準備ができました.

オプションCount 2 : GoogleシートAPI
私が研究を始めたときGoogle Sheets API , たくさんのチュートリアルとサンプルコードがありました.しかし、残念ながら、サンプルのどれも本当に私のユースケースに適していませんでした.サンプルは、Googleが適切な機能を提供することができることを示しました、しかし、私は、私が取り組んでいるアプリケーションの文脈でそれを働かせる方法を理解するために、私自身で本質的でした.一方best tutorial example 私はノードとサーバー側での作業に関与していた.JSは、フロントエンドから新しいGoogleシートを生成して開くように見えるかもしれません.
シリーズの次の記事では、私は私のデモアプリケーションで働いているソリューションを概説します.あなたは、あなた自身の既存の反応アプリケーションのいずれかからデータを使用してGoogleシートを作成するに沿って従うことができるでしょう.それをチェック!