为 Deno Subhosting Hackathon 构建云 IDE

更新 2024/01/19：黑客松已结束，获奖者已确定。感谢所有参与者！

随着软件开发技能变得更加容易掌握，并且代码正走进越来越多的团队成员手中，将开发环境直接包含在你的 Web 应用程序中变得越来越流行。

Salesforce 等 SaaS 公司包含基于浏览器的开发环境，以使用代码自定义其平台。
Twilio 和 Retool 等开发者工具公司使开发者能够在浏览器中编写 JavaScript，以驱动工作流程和处理系统事件。
Codecademy 等教育平台为学生提供基于浏览器的开发工具。
即使是专业的开发者也使用 repl.it 等平台在浏览器中开发和分享代码片段，一些公司选择将完整的开发环境迁移到云端。

你的客户很有可能从你平台中的代码级自定义中获益，并且你可能想要构建如上所列的功能。构建云 IDE 可能令人生畏，但 Deno Subhosting API 通过允许你在数秒内在 Deno Deploy 的全球分布式 V8 隔离云上以编程方式部署和运行代码，从而简化了该过程。

今天，我们邀请你通过参加我们的 Deno Subhosting Hackathon 来了解更多关于 Deno Subhosting 的功能，你将在其中面临构建你自己的云 IDE 或将云 IDE 集成到你现有产品中的挑战。

提交指南

要提交黑客松项目，你必须构建一个基于浏览器的 IDE，该 IDE 使用 Subhosting API 执行 JavaScript 或 TypeScript 代码。你的项目可以是

一个以使用 subhosting 的基于浏览器的 IDE 为特色的全新项目
一个新添加了使用 subhosting 的基于浏览器的 IDE 的现有项目

当你构建了一个符合此描述的应用程序后，请在此处提交，并包含以下关键信息

标题
你的项目描述
可演示产品或视频演示的 URL

请注意，所有项目都必须在 Deno Subhosting 基础设施上成功运行代码。对于添加了云 IDE 的现有项目，我们也将接受视频演示来代替可演示的 URL。

我们将接受提交，截止时间为太平洋时间 1 月 18 日星期四中午 12 点。我们将在 1 月 19 日星期五公布获奖者。

不确定要构建什么？

市面上有很多很棒的基于云的 IDE，一些是为特定目的而设计的，例如用于前端的 CodePen 和用于无服务器 JavaScript 函数的 Val.town，还有更通用的 IDE，如 Repl.it 或 GitPod。还有一些 IDE 内置于 SaaS 产品中，例如 Salesforce 的代码构建器，它允许开发者扩展其功能。无论其用途如何，这些 IDE 的简化开发体验使你能够跳过配置并直接投入原型设计。

以下是我们认为可以在本次黑客松范围内构建的一些示例。

从浏览器 IDE 创建和部署 Discord 或 Slack 机器人
从浏览器 IDE 创建和部署 Alexa Actions/Skills
使用在浏览器中编写的代码处理 webhook
使用基于浏览器的代码实现 OpenAI functions

无论你构建什么，它都需要从浏览器获取代码并使用 Subhosting API 运行它。我们迫不及待地想看看你在这个提示下能有多么的创意。

资源

这里有一些链接和资源可以帮助你入门。

Subhosting IDE Starter 模板 - 一个云 IDE 模板，可帮助你开始使用 Subhosting API
Monaco editor - VS Code 使用的开源的基于浏览器的编辑器，可能有助于实现基于浏览器的代码编辑。你也可以考虑其他替代方案，如 CodeMirror 或 Ace 。
Subhosting 快速入门指南
Subhosting REST API 参考

此外，我们将在 1 月 11 日星期四太平洋时间上午 11 点 举办现场代码直播，我们将向你展示使用 Subhosting IDE 模板构建你自己的云 IDE 的第一步。我们计划稍后将其转录成博客的书面教程。

在这个现场代码直播中学习如何使用 Deno Subhosting API 构建你自己的云 IDE。

在接下来的几天里，我们将宣布更多资源来分享一些技巧和窍门。加入我们的 Discord 并更新你的角色以包含 events 以保持关注！

奖品

我们将根据以下类别奖励奖品。

最有趣
最实用
最具技术性
Ryan 最喜爱

所有获奖者将获得价值 100 美元的 Deno 周边商品礼品卡。

获奖作品

感谢所有人的参与，并祝贺以下获奖者！以下是每个类别的获奖者。

最有趣：Deno Blocks

Deno Blocks 是一个浏览器中的可视化代码编辑器，允许你拖放代码块来编写代码。它使用 Fresh 和 Blockly 构建。在此处查看他们的视频演示。

screenshot of Deno Blocks

最实用：DenoCode

DenoCode 是一款云编辑器，它让你可以选择使用 ChatGPT 代表你生成代码。它使用 Firebase auth、OpenAI、SvelteKit 和 Monaco 构建。在此处查看他们的视频演示。

screenshot of DenoCode

最具技术性：deco.play

deco.play，除了是一个使用强大的浏览器内代码编辑器的 CMS 之外，还使用 AI 根据你上传的网站截图创建一个 Preact 组件。这个应用使用 Fresh、Tailwind 和 GPT Assistant 构建。在此处查看他们的视频演示。

screenshot of deco.play

Ryan 最喜爱：Deno Blocks

Ryan 审阅了提交的作品，并说他最喜欢 Deno Blocks 。

恭喜，Deno 团队将与你联系以提供奖品信息！

错过了这次黑客松？

还会有更多！通过关注我们的 Twitter 或加入我们的 Discord 来保持关注！