你还在使用阿里云、腾讯云的云服务器产品吗?那你可就out了。
最近,在试用一款新的云服务产品AirCode。如果你是Node.js开发者,你不需要自己折腾操作系统,不需要手动安装环境,不需要折腾各种配置,你所需要的做的全部事情,就只是专注于Coding,然后动动小手,点几下按钮,平台就可以帮你完成调试、部署等一系列工作,让你的服务直接运行到线上。
对于我这种懒癌晚期,信奉简单就是美、所见即所得教信徒的JavaScript程序员来说,这种平台真是一款能让我体验到极致的快乐编程的神器。更为神奇之处是,我原本以为它只是能够写写Node接口,如果你要开发一个完整的Web应用,那前端还是需要自己完成开发,然后自己部署才可以。但是经过我这几天的研究和亲自实践,发现这个平台实际上就足以让你从零到一,开发上线一款完整的Web应用。如果你只是想开发Web产品,那么你从此可以彻底告别自己搭建云服务器了。
AirCode 可以做什么?
前面吹捧说了那么多,那么具体我们要怎么使用这个AirCode才能玩出花儿来呢?
首先,官方文档里面详细介绍了AirCode的服务端能力,上手非常简单,你直接注册好之后,进入Dashboard,创建一个新的应用起名hello,默认会生成一个云函数,长这样:
// @see https://docs.aircode.io/guide/functions/
const aircode = require('aircode');
module.exports = async function(params, context) {
console.log('Received params:', params);
return {
message: 'Hi, AirCode.',
};
}
这时候,我们如果想发布这个云函数,直接点击项目主界面上那个大大的Deploy
按钮,就可以瞬间完成发布。
发布后,你会获得一个随机的URL,比如我这个项目发布后得到的是 https://vvvix8advg.hk.aircode.run/hello
,访问这个URL,就可以看到返回的结果了。
{
message: "Hi, AirCode"
}
这时候,你可能会有个疑问,就这?好像也没什么用啊?
别急,我们可以用它来做的东西很多,我这里举一个简单的小例子。
示例之网页计数器
AirCode内置了一个数据库,开箱即用,我们可以用它来存储各种数据。
假设我们要写一个给网页计数的服务,我们可以创建一个counter表,然后将计数次数以token为key,存储在counter表中,代码如下:
// @see https://docs.aircode.io/guide/functions/
const aircode = require('aircode');
const db = aircode.db;
module.exports = async function(params, context) {
console.log('Received params:', params);
if(context.method === 'POST') {
const table = db.table('counter');
const token = params.token;
if(!token) {
context.status(403);
return {
error: 'Invalid token!',
};
}
let data;
const result = await table.where({token}).findOne();
if(!result) {
data = {times: 0, token};
} else {
data = result;
}
data.times++;
await table.save(data);
return data;
}
context.status(403);
return {
error: 'Method not allowed!',
};
}
在上面的代码里,我们处理POST请求,将对应token的数据记录从counter表里取出来,然后将times值加一,再更新数据表里的记录,同时将结果返回。
我们可以在右侧调试区域设置Params,并点击Debug轻松进行调试,可以在底部结果区切换到Database标签,查看数据表中的数据。
有了这个服务,我们就可以给网页计数。
我们尝试一下,首先将刚才的代码通过Deploy
发布一下,然后我们创建一个码上掘金项目。
<div id="app">这是第 <strong>?</strong> 次访问</div>
const apiUrl = 'https://gqsiusek61.hk.aircode.run/counter';
const counterView = document.querySelector('#app strong');
(async () => {
const result = await (await fetch(apiUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({token: location.href}),
})).json();
counterView.textContent = result.times;
})();
上面的代码,JS部分的apiUrl就是我们通过AirCode发布的服务地址,token取location.href,因为JCode每个项目生成一个唯一的projectId,这个projectId会包含在location.href中,这样就保证不同项目的token是唯一的。
接着就很简单了,post请求给apiUrl,然后获取数据即可。最终的结果如下:
于是我们看到,结合AirCode和JCode,可以让你的项目拥有梦寐以求的服务端能力。有兴趣的同学,你可以在码上掘金挑战赛中使用AirCode提供服务端能力,没准它能让你轻松获奖呢。
开发完整的App应用
如果你以为AirCode只能开发服务端Api,那就想得太简单了。实际上,AirCode能以各种格式返回HTTP请求内容,这意味着我们完全可以让它返回完整的网页。
不过为了方便开发更加复杂的Web应用,我设计了一个简单的拦截器框架,让它能够更容易写复杂的应用。
这个框架一共也没有很多代码,由一个负责管理切面的Interceptor管理器和一个App主体对象构成,核心代码如下:
class Interceptor {
constructor() {
this.aspects = [];
}
/**
use(async (ctx, next) => {
...request...
await next()
...response...
})
*/
use(/* async */ functor) {
this.aspects.push(functor);
return this;
}
async run(context) {
const aspects = this.aspects;
const proc = aspects.reduceRight(function (a, b) { // eslint-disable-line
return async () => {
await b(context, a);
};
}, () => Promise.resolve());
try {
await proc();
} catch (ex) {
console.error(ex.message);
}
return context;
}
}
module.exports = Interceptor;
// @see https://docs.aircode.io/guide/functions/
const Interceptor = require('./interceptor.js');
const fs = require('fs');
class App {
constructor() {
this.interceptor = new Interceptor();
}
run() {
return async (params, context) => {
context.params = params;
this.context = context;
await this.interceptor.run(context);
return context.body
}
}
use(aspect) {
return this.interceptor.use(aspect);
}
display(template, args = {}) {
const content = fs.readFileSync(template, 'utf-8');
return (new Function(...['app', ...Object.keys(args)], "return `"+content+"`")(this, ...Object.values(args)));
}
file(name) {
const content = fs.readFileSync(name, 'utf-8');
return content;
}
}
module.exports = App;
关于拦截器框架的原理,在我的小册《从前端到全栈》中有详细的介绍,有兴趣的同学可以看一下。
我利用这个框架,结合AirCode的能力,写了一个简单的todolist应用,效果如下:
完整的代码并不复杂,AirCode提供了项目分享的功能,我把项目分享出来,大家可以通过这个地址查看完整代码。
听闻百遍不如动手一试,AirCode基础版完全免费,你可以动手创建项目亲自试一试,我相信你会有惊喜。如果你有什么想法并着手实现了,欢迎在下方评论区交流。
原文链接:https://juejin.cn/post/7228990110385487932 作者:十年踪迹