在这篇博客文章中，我想与您分享我如何自行出版的Appreciation Jar, a gratitude journaling app for couples。
如果您想在开始阅读之前查看应用的外观，这是一个简短的演示视频：
想法
我和我的伴侣正在寻找彼此更加注意并分享积极肯定的方法。我们最初是从一个物理罐开始的，我们将小手写笔记放入中（我想您可以称其为原始的“ MVP”）。一个傍晚，以一种特别以开发人员为中心的心情，我决定将技术锤子带到这个想法上，并花了几个周末建造一个具有PHP和php和tailwind的数字欣赏罐原型。结果可以在this GitHub repo中找到。
原型是成功的，我们使用了几个月。在那几个月中，构建实际应用的想法增长。
设计
我从来没有从头开始设计一个复杂的应用程序，所以让我感到惊讶的一件事是花了多长时间。我花了大约一个月的晚上来完成最初的草图。回想起来，我应该能够预测这一点，设计是一种令人难以置信的复杂工艺，需要一生才能掌握。你生活和学习！
我将无花果作为设计工具，而Icons8进行了插图。我真正喜欢Icons8的一件事是它们具有插图集，因此您可以以相同的样式获得多个插图，这使应用程序具有专业的感觉，因为所有插图都是一致的。
从网络到本机
我知道，如果我想在常规应用商店中发布该应用程序，我的原型需要进行全面的大修。它缺乏基本功能，例如支持多个罐子，身份验证系统，入职指南等能力。我还听说过发布一个只是显示现有网站was generally not encouraged的“框架”的应用程序，尤其是在Apple App Store中。
我非常尊重本地应用程序开发人员，与此同时，我知道学习iOS和Android开发，然后在两个代码库中实施该应用程序（+ Web）将是一个不可行的任务，因此我决定我需要基于Web技术进行此操作，并尝试拥有一个代码库。
我还听说Google在其App Store中支持Progressive Web Apps，而Apple最近拥有added web push support to Safari on iOS，这是许多开发人员需要的本地功能。
经过一些研究，我钉了钉住我必须使用bubblewrap，PWABuilder或Capacitor。由于所有这些与Progressive Web Apps一起工作，所以我开始从建造PWA开始。
第一个版本-PWA带有Sveltekit
我选择了Svelte和SvelteKit作为该应用程序的前端堆栈。我认为这是当今网络的最佳全栈框架。该项目的一个重要方面是其能够以多种方式编译的能力：从纯静态单页应用程序到具有全面前端和后端的复杂node.js应用程序。
构建该应用程序的Web版本基本上是平稳的，但是我对构建完整应用程序所需的复杂性有了很多了解。诸如入职，网站范围内通知系统（我使用svelte-french-toast，值得更多的爱！）之类的东西，必须建立一个可重复使用的组件和连贯的页面过渡的整个组件库，只是一些障碍。
一个特别有趣的旅行是基于出色的Web Push series at web.dev实施推送通知。即使在iOS上使用它在Safari中使用它，这真的很酷（尽管用户需要首先将应用程序添加到主屏幕上才能正常工作，这是很多步骤，并且很难指导用户上的用户如何正确执行）。
另一个有趣的旅行是服务人员。像许多事情一样，SvelteKit makes it super easy to get started with it。如果您有兴趣为您的网站建立服务工作者，我不建议使用Wookbox或Vite-PWA/Sveltekit之类的外部库。 在Sveltekit中服务工作者的默认实施仅是60行代码，而我的拙见，对此不值得额外依赖。
决定本机包装 - 电容器！
经过不同的方式，在本地打包Web应用程序后，我便解决了电容器。原因是BubbleWrap仅适用于Android，而PwaBuilder将iOS支持列为实验。
我真的很喜欢电容器的一件事是，它是不仅是您网站的帧。在电容器中，您可以将单页应用程序构建为HTML，CSS和JS和JS和 and wask内部您的应用程序。一方面，这意味着需要将新功能提交给应用商店，就像本机应用一样，但另一方面，我希望Apple和Google更喜欢这种方法，因为它可以删除“黑匣子”刚包装网站拥有的应用程序的元素。在电容器方法中，您可以通过代码分析确定应用程序可以呈现的内容，就像本机应用程序一样。这也意味着您的应用程序即使用户离线也可以优雅地工作，就像您有服务工作者一样。
另一个支持电容器的点是其mature plugin ecosystem，这使得实现诸如PUSH Notification和Support Andive Antern Flemation（例如Light / Dark Mode）之类的东西很简单。< / p>。< / p>
电容器 + PWA混合体系结构
我想在这个项目中尝试的一件事是具有“混合”体系结构，其中一个代码库将用于部署PWA（Web版本）和电容器版本。经过一些实验，我想到了以下概述的架构：
我将在未来的博客文章中进行更多详细介绍此体系结构！高级概述是该应用程序是两次构建的。首先，我们使用adapter-node构建该应用程序，然后将其部署到网站（在我们的情况下，您可以在https://jar.appreciation.place上找到它），并用作应用程序的PWA版本以及后端的API端点。
该应用程序还使用adapter-static构建了第二次。此版本没有任何后端端点，因为Sveltekit中的所有+server.ts文件都将从适配器静态导出中删除，除非它们设置了export const prerender = true;。 （在这种情况下，它们被预先作为静态的数据斑点）。这是很自然的，因为适配器静态根本没有后端的概念，它只是在文件夹中仅在文件夹中的HTML，CSS和JavaScript。变量呈现到所有获取的URL。这样我就可以做到这一点，以便适配器节点版本和适配器静态版本都连接到同一API端点。您可以看到此获取包装器in this gist的示例。
使用多个适配器构建的实际代码是svelte.config.js的一个小添加，它查找称为ADAPTER的环境变量，并根据此值动态切换适配器：
import adapterStatic from '@sveltejs/adapter-static';
import adapterNode from '@sveltejs/adapter-node';
import preprocess from 'svelte-preprocess';
const adapter = process.env.ADAPTER === 'node' ? adapterNode : adapterStatic;
const adapterConfig =
process.env.ADAPTER === 'node'
? {
out: 'build-node'
}
: {
fallback: 'index.html',
pages: 'build-static',
assets: 'build-static'
};
const config = {
preprocess: preprocess(),
kit: {
adapter: adapter(adapterConfig)
}
};
export default config;
然后，您可以使用ADAPTER=node npm run build或ADAPTER=static npm run build构建应用程序来选择适配器！
因为我们正在处理必须同时使用静态和节点适配器构建的奇怪要求，所以我选择不使用Form Actions进行此项目。取而代之的是，我在src/routes/api下添加了+server.ts端点，以获取或更新需要获取或更新的所有数据。然后，我在按钮上使用普通的on:click处理程序来触发fetch请求以提交数据。作为另一种方法，karimfromjordan posted an awesome Action（与形式的动作不同）在Svelte Discord上，可用于使用实际形式并用use:form替换use:enhance，以触发JSON端点。如果您想查看代码而不加入不和谐，则可以找到in this gist。
我确实在运行客户端时大量使用+page.ts负载功能，并且可以与所有适配器一起使用。我在hooks.server.ts中实现了身份验证检查，因为所有API请求都通过服务器挂钩。在根布局（src/routes/+layout.ts）加载文件中，我添加了以下行：
export const ssr = false;
export const prerender = false;
这确保将整个应用程序作为单个页面应用程序渲染而无需任何服务器端渲染。
我没有使用cookie进行身份验证，而是在网络上选择svelte-local-storage-store，而在电容器版本中选择了@capacitor/preferences。电容器使基于应用程序在网络上运行还是在这样的本机设备上更改行为非常容易：
import { Capacitor } from '@capacitor/core';
Capacitor.isNativePlatform(); // True for iOS / Android, false on web
与Docker和Caprover的自主
为了托管后端和Postgres数据库，我受到了"Small Web"哲学的启发。我决定不使用诸如Vercel或Netlify之类的PAA，因为我想使GDPR合规性尽可能简单。所有升值罐的基础架构均托管在德国的服务器上。由于该项目的目标不是商业化，因此可预测的成本也很重要。在这个项目的机会上，我不想担心从无服务的价格产生高昂的成本。
我使用digitalocean 托管CapRover实例。 Caprover是一个自托管的PAA，可在虚拟专用服务器上运行。如果您对这种托管方法感到好奇，我最近就Svelte Society YouTube Channel进行了关于此架构的讨论。
github Action中的工作流
这个应用程序是一个实验，我想尝试尽可能多地自动化它（至少在及时及时设置回报开始之前）。我最终使用GitHub操作自动化了很多，例如自动在Caprover上构建和部署后端适配器节点版本，并构建准备上传到每个相应商店的Android和iOS版本。如果您对GitHub Action构建电容器应用程序的技术感兴趣，我写了a guide for Android和another one for iOS。这是我最终得到的高级工作流程：
可以将更多的内容自动化，例如直接将构建文件运送到Google和Apple，但我觉得这个工作流对我达到了可接受的平衡。
出版给Google Play
经过一番研究，我对进入Google Play评论过程的信心非常有信心。 Google Play使PWA成为头等舱成员，他们甚至提供bubblewrap，以帮助您将PWA转换为可以提交的应用程序。我还读到，人们在使用PWABuilder进行应用程序（内部使用BubbleWrap）方面取得了成功。我认为我的电容器应用程序将有一个不错的机会通过。
Google Play收取的一次性费用为25美元，以注册为开发人员，我发现这很合理。
提交我的应用程序后，它是在大约5-7天内批准的而没有其他问题！
我成功发布应用程序的最大技巧是真正深入介绍并填写Google Play游戏机中的所有内容。与您的应用程序，隐私和监管合规性以及营销材料中的内容有关，有很多事情需要填写，但是所有内容都记录在第台控制台内部。
。 
发布到Apple App Store
如果我对我在Google Play上的成功充满信心，那与Apple App Store相反。在进行了一些研究之后，即使是Pwabuilder（通常对PWAS非常积极）painted a somewhat bleak picture，甚至称PWAS在iOS上称为“二等公民”。基于Web的应用程序有some special restrictions。苹果还拥有一个非常广泛的"minimum functionality clause"。
对这份提交的信心不太自信，我研究了几种方法将本机功能添加到应用程序中，因为我听说可以帮助进行审核过程。尽管通知可以被视为本地功能，但是自Safari added push support for web apps in 16.4以来，我认为它不会再有资格。
我最终添加了一个特定于iOS的功能，这是当您添加或喜欢欣赏时触发的触觉振动。我使用了Capacitor guide for building plugins for iOS，在Chatgpt的一些帮助下，我很快就有一个小插件，可以触发不同的触觉模式。我在这部分电容器的经验非常好。即使对于像我这样的初学者，也可以易于理解且易于使用！
与电容器在应用中嵌入所有代码的事实（因此没有加载外部代码），我希望这足以通过评论。
Apple评论和与Google Play的比较
提交了我的应用程序后，我收到了一个非常有希望的消息，该消息说苹果在48小时内审查了大多数应用程序。大约两天后，我收到了一条消息，即对我的应用程序的审查将需要更长的时间。在这一点上，我的信心处于历史最低水平。 ð大约一周后，我收到了一条消息，我的应用程序获得了批准，没有其他问题！因此，如果这发生在您身上，请不要担心太多！
我认为我在审核过程中可能有些运气。我还认为，该应用程序中没有任何货币化的事实可能会有所帮助，因为我想苹果一旦涉及应用程序内购买，因此对应用程序进行了更大的审查。
与Google Play游戏机相比，我发现关于数据隐私以及一般需要完成的一般步骤的填写令人惊讶的少。苹果开发人员控制台更加精简。
注册为Apple开发人员的费用为每年$ 100。我认为这是非常合理的，因为Apple确实为您处理了很多事情，例如基础架构，载人审查过程等。还包括XCode Cloud的访问权限，如果您有几个需要偶尔构建的应用程序，则足够了。但是，在世界许多地方，100美元仍然有很多东西，我希望他们为独奏开发商提供便宜的级别。
学习
令人沮丧的一件事是从几天内可以构建的原型到生产应用程序所需的时间，即使对于像这一应用一样简单的应用程序也是如此。
即使我使用了很多已经很满意的技术，但我肯定使用了太多的innovation tokens和我必须学习的所有新技术，这有助于花费多长时间。由于这是一个附带的项目，所以这并没有让我感到不安，因为我没有在任何截止日期之前努力。考虑到所有因素，这个项目花费了 7个月零586 git Consits 到达今天的状态。
如果您正在考虑踏上这一旅程，我的建议是从一个非常简单的项目开始。显然，即使是单页的CRUD应用程序，即使是新手，也可能需要大量时间来开发。另一个建议是避免压力；让事情以自己的节奏进步，并尽力享受学习体验。毕竟，这就是我们进行附带项目的原因。 （或者至少，我告诉自己这个ð）。
如果您一直到最后，请非常感谢您的阅读，我希望您能激发自己尝试！如果您有任何疑问，请随时发表评论。
我计划在将来发表另一篇文章，在其中我更深入地了解如何使用上述所有内容建立一个工作项目，但是要写一段时间。如果您想知道何时下降，请随时在Twitter或Bluesky上关注我！
尝试欣赏罐子使用Dani Guitarra上的Unsplash的照片