时间戳

首页 > 解决方案 > 如何使用 Google Apps Script、React 和 MobX 创建 Google Web 应用程序

reactjs - 如何使用 Google Apps Script、React 和 MobX 创建 Google Web 应用程序

问题描述

我react-google-apps-script在 GitHub 上找到了项目，它似乎能够让我梦想一个基于 React 的 Google Apps Script 项目成为现实。有一段时间，自从我学习了 React（和 MobX），我就一直想在 Google Apps 脚本项目中使用它！

但是，根据文档，它似乎仅适用于对话框窗口... :'(

话虽如此，我有一个自由职业客户正在寻找可以与她的 Google 表格交互的 UI，最合理的方法是创建一个网络应用程序。我过去曾创建过基于 Google Apps 脚本的网络应用程序，事实上这是我第一次接触它。似乎它们只支持原始 HTML 模板和 jQuery 。

但是，知道了我现在所知道的一切，我想在 Google Apps 脚本上创建一个简单的基于 React + MobX MVVM 的 Web 应用程序。我们如何使用这个项目来完成它？

标签： reactjsgoogle-apps-scriptmobx

解决方案

更新：我应该更仔细地阅读！这很尴尬！！

通过查看src/server/ui.js，我看到主要用例将 React 项目注入到控制 Google 电子表格的 Google Apps 脚本项目中的模态中，甚至是如何实现的。

这是该文件中的代码：

export const onOpen = () => {
  const menu = SpreadsheetApp.getUi()
    .createMenu('My Sample React Project') // edit me!
    .addItem('Sheet Editor', 'openDialog')
    .addItem('Sheet Editor (Bootstrap)', 'openDialogBootstrap')
    .addItem('About me', 'openAboutSidebar');

  menu.addToUi();
};

export const openDialog = () => {
  const html = HtmlService.createHtmlOutputFromFile('dialog-demo')
    .setWidth(600)
    .setHeight(600);
  SpreadsheetApp.getUi().showModalDialog(html, 'Sheet Editor');
};

export const openDialogBootstrap = () => {
  const html = HtmlService.createHtmlOutputFromFile('dialog-demo-bootstrap')
    .setWidth(600)
    .setHeight(600);
  SpreadsheetApp.getUi().showModalDialog(html, 'Sheet Editor (Bootstrap)');
};

export const openAboutSidebar = () => {
  const html = HtmlService.createHtmlOutputFromFile('sidebar-about-page');
  SpreadsheetApp.getUi().showSidebar(html);
};

值得注意的是，这将转换为后端 Google Apps 脚本代码。

这意味着我们可以通过编辑onOpen方法来定制它并使其更通用。我认为这是开发人员的责任：P

伟大的项目！它很容易上手，我可以看到如何使用 MobX 和 MVVM 将它变成我自己的！

推荐阅读