使用 Google Sheet 作为数据库在 Google Apps 脚本上创建一个完整的网络应用程序

weixin_0010034

152人浏览 · 2022-08-09 10:26:15

weixin_0010034 · 2022-08-09 10:26:15 发布

所有 JavaScript 开发人员都应该对 Google 的 Apps 脚本感兴趣。

Apps 脚本非常适合自动化。您可以直接访问 Google 的许多服务,例如 Google 表格、Gmail、Google 文档、Google 日历等。在此处查看一些Google Apps 脚本入门教程。

稍加想象,您就可以使用 Google Apps 脚本创建非常令人兴奋的应用程序和插件。

Apps 脚本的第一个限制是它使用旧版本的 Javascript。它不支持 ES6 及其特性。不是什么大问题。我们可以使用 babel 并交叉编译到兼容的版本。下一个限制是没有打包/模块设置。您不能在 Apps 脚本环境中直接使用 npm 模块。

值得庆幸的是,有一个名为clasp的命令行工具。使用 clasp 工具可以轻松上传您的 Apps 脚本代码。

所以在这个项目的第一部分,让我们尝试在 Apps Script 中使用 ES6 和 npm 模块。我们将使用 Webpack+babel 从我们的源代码创建一个包。然后我们将使用 clasp 工具上传捆绑包。

在此处查看第一部分的代码:

https://github.com/gsmart-in/AppsCurryStep2

Webpack 创建捆绑包

最有趣的部分是这里的 webpack 配置:

https://github.com/gsmart-in/AppsCurryStep2/blob/master/webpack.gas.js

在 server 文件夹中,可以看到两个文件:api.js 和 lib.js

api.js 是直接暴露给 Apps Script 的一种。此文件只能包含与 Apps 脚本兼容的代码,并且可以直接上传。该文件将包含全局函数,因为这是 Apps Script 可以理解的。

lib.js 是我们的包入口点。我们可以在 lib.js 及其任何依赖项中使用 ES6 和 npm 模块。总之,调用结构将是:

api.js -> lib.js -> 你的自定义模块。

回到我们的webpack 配置

output: 
  {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'var',
    library: 'AppLib'
  }

库目标设置为“var”和库名称“AppLib”,因此可以在 api.js 中像这样访问库(lib.js)中的导出标识:

function doGet() 
{
    var output = 'Today is '+AppLib.getTodaysDateLongForm()+"\n\n";

    return ContentService.createTextOutput(output);
}

在 webpack 配置的 modules 部分,我们有 babel 交叉编译的规则。

此外,我们使用 Copy 插件简单地将 api.js 文件复制到输出文件夹(从输出文件夹我们使用 clasp 工具将生成的代码上传到 Apps Script)

使用 npm 模块

在lib.js我们可以使用 ES6 或任何你想要的高级特性。它也可以包括其他模块。


import * as moment from 'moment';
import _ from 'lodash';

function getTodaysDateLongForm()
{
    return moment().format('LLLL');
}

为了试用这个应用程序,克隆项目并按照自述文件页面中的说明进行操作。

在此处阅读详细文章:Using ES6 and npm modules in Google Apps Script。

为 Apps 脚本项目创建丰富的 UI

让我们构建一个“请求管理”应用程序。该应用程序将是一个单页应用程序。您将能够创建新请求(针对笔记本电脑、手机等),并且管理员可以查看、批准或拒绝这些请求。在后端,应用程序会将请求添加到 Google 表格中。因此,Google Sheet 充当数据库。

这是完整的项目:

https://github.com/gsmart-in/AppsCurryApp

在此处查看应用程序的快速演示:

Google Apps 脚本中的单页应用程序

代码分为两部分:“客户端”和“服务器”。客户端文件夹包含 Vuejs、SCSS 和 index.html 模板。我们将所有这些组合在一起创建捆绑包,即上传的 index.html 文件。

[ Apps Curry 的文件夹结构](https://res.cloudinary.com/practicaldev/image/fetch/s--vb0IPsZ7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev .s3.amazonaws.com/i/fpmc1boz1l07pjs6ae0k.png)

服务器文件夹包含在 Apps 脚本中运行的代码。 ES6 中的代码被编译为 Apps Script 兼容代码并被上传。

服务器文件夹还包含服务器端代码的单元测试

您必须将所有 CSS 和 Javascript 捆绑并内联到一个 HTML 文件中!

Google Apps 脚本的一个限制是它只有一个功能来显示您的页面。没有像在普通网站中那样快速链接 javascript/css 文件的方法。所以你必须捆绑所有的 JS/CSS 并内联它。

所以我们使用 HtmlWebpackInlineSourcePlugin webpack 插件将生成的 CSS 和 JS 内联到 index.html

这是 webpack 的配置:

const path = require('path');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
var webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');


module.exports = merge(common, {
    mode: 'production',
  output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, '../deploy/gas')
    },
    plugins: [
     new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery',
          'window.jQuery': 'jquery'
     }),
     new HtmlWebpackPlugin({
          template: 'client/src/index.html',
        inlineSource: '.(js|css)$'
     }),
     new HtmlWebpackInlineSourcePlugin()
   ]
});

结论

这个项目的目的是看看我们可以在多大程度上扩展 Apps Script 的限制,使其成为构建完整 Web 应用程序的平台。虽然你还不能在这个平台上构建生产级甚至有限的用户群应用程序,但这让我们对这个平台的潜力有了一些了解。想象一下,能够创建应用程序、推送它,而无需担心扩展问题。想象一个内置用户访问管理的平台。也许,有一天,这个例子将有助于创建这样一个更好的、可扩展的通用应用程序平台。