这个文章严格说，并不完全是福昕低代码平台的介绍。为什么写这个文章呢？
主要是我要找一个比较容易的方式让大家方便的去尝试，同时也可以最低门槛的可以对外发布web服务。
先看看下面的演示，直接运行即可：
<iframe allowfullscreen="allowfullscreen" frameborder="no" height="500px" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals" scrolling="no" src="https://inscode.csdn.net/@lzfly/FoxitCloudAPIsStuido/embed" width="100%"></iframe>运行后，点击打开网页，也可以在web浏览器中体验web服务
虽然之前就看到InsCode但是，从来没有去试过，哈看起来有点跟不上时代潮流了！简单介绍下什么是InsCode.
“InsCode” 是一个一站式的软件开发服务平台，它集成了从开发到部署再到运维和运营的全流程服务。InsCode 的 “Ins” 代表 “Inspiration”，即创作和寻找有灵感的代码。InsCode 提供了云端开发环境（Cloud IDE），允许开发者通过浏览器进行编程，无需下载安装，不受硬件和环境的限制。此外，InsCode 内置了 AI 辅助编程功能，可以实现添加注释、解释代码、完成代码、寻找错误、优化代码、添加测试和代码提问等 AI 功能
InsCode AI IDE 第一次发布是在 2024 年 12 月 4 日，在北京举行的 AI 产品榜·年度大会暨中国 AI 年度产品颁奖仪式上正式面向公众发布.
关于InsCode
发现InsCode,在写blog的时候看到运行代码的菜单，
点击运行代码：就弹出如下对话框
InsCode的官方地址是：https://inscode.csdn.net/
创建InsCode项目
我选择HTML-CSS-JS模版来创建项目
项目创建中：
创建完成后如下图：
我们可以看到，
我们可以看到InsCode生成了一个模版项目，现在我快速的把一个Word2PDF的Web服务加入，具体工作流创建流程请参考PDF处理的创新工具:福昕低代码平台尝鲜实现word2PDF功能.
低代码平台准备工作
创建工作流
因为前面的文章有详细介绍看，这里仅截图工作流以及属性
特别注意文件属性是：$TriggerHttp_1.result.output.doc，前端设置的key为doc
CreatePDF
Preview PDF
DownloadPDF组件
保存运行
InsCode项目代码编写
做一个很简单的模版，因此我就直接小修改下copy到默认模版了
index.html
直接复用他的模版， 我把index.html的内容修改如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css" />
<title>福昕低代码平台</title>
</head>
<body>
<img src="https://cloudapi.foxitsoftware.cn/_next/static/media/logo.9cf4e02c.svg" >
<h2>福昕低代码平台示例-Word2PDF带预览</h2>
<form id="uploadForm">
<input type="file" id="fileInput" accept=".doc,.docx" required>
<button type="submit">下载转换结果</button>
</form>
<div id="message"></div>
<iframe id="pdf-preview" style="width: 600px; height: 800px; border: 1px solid #ddd; border-radius: 4px; display: none;"></iframe>
</div>
<script src="script.js"></script>
</body>
</html>
这里几个点，我删除了他默认的log,然后加上了福昕的logo
logo地址我直接从福昕官网copy的
<img src="https://cloudapi.foxitsoftware.cn/_next/static/media/logo.9cf4e02c.svg" >
调用的js脚本的文件做了修改如下：
<script src="script.js"></script>
这样的html页面展示如下：
script.js
继续，我把upload.jscopy到script.js的文件
document.getElementById('uploadForm').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单的默认提交行为
const fileInput = document.getElementById('fileInput');
const messageDiv = document.getElementById('message');
const file = fileInput.files[0];
if (file) {
let formData = new FormData();
formData.append('doc', file);
fetch('https://cloudapis-studio.foxitsoftware.cn/studio-server/api/fbp/trigger?workflowId=21686182-a792-4d80-88c2-43efd792bda2', {
method: 'POST',
body: formData,
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
const downloadUrl = data.data.payload.find(item => item.nodeId === 'DownloadPDF_4').result.url;
const previewUrl = data.data.payload.find(item => item.nodeId === 'PreviewPDF_3').result.url;
// 设置 iframe 的 src 属性为提取到的 URL
const iframe = document.getElementById('pdf-preview');
iframe.src = previewUrl;
iframe.style.display = 'block';
if (downloadUrl) {
const encodedUrl = encodeURI(downloadUrl); // 对URL进行编码
const a = document.createElement('a');
a.style.display = 'none';
a.href = encodedUrl;
a.download = decodeURIComponent(encodedUrl.split('/').pop()); // 使用原始文件名
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(encodedUrl);
messageDiv.textContent = '文件下载成功!';
messageDiv.style.color = 'green';
}else {
messageDiv.textContent = '没有找到下载文件的URL!';
messageDiv.style.color = 'red';
}
})
}
});
好，完成点击运行，可以看到已经可以了，这个http地址是临时可用的
运行
发布
点击发布按钮，设置好项目信息，我设置如下：
点击发布，到设置就发布啦！
你还可以在你的CSDNblog中同步发布！
如果你做了实名认证，就可以直接部署你的作品了，我还没尝试，后面再说！
注意，审核需要时间哦！
运行下面的代码看看吧！