菲尔：Rachel 没有 iPhone，而我完全融入了 Apple 生态系统，部分是因为这个原因，但部分是因为它只是一个令人惊叹的工具集，我正在使用 Expo，它是一个围绕 React Native 的工具集合帮助快速发展。有一个 Expo 应用程序，它允许您在开发阶段完全绕过 App Store，只需将 JavaScript 捆绑包发送到他们的服务器，当用户在手机上下载 Expo 客户端时，他们就可以下载该应用程序JavaScript 捆绑并在 Expo 客户端中加载应用程序。那有意义吗？

德鲁：确实如此，是的。

菲尔：是的。Expo确实是确保这个应用程序能够快速开发的关键，因为这意味着每隔几个小时我就可以构建一些东西，而Rachel可能会看到它，并考虑进行整个构建并将其发布到App Store并通过在谷歌生态系统中，你不可能每隔几个小时就这样做一次。它只是不会……您会花费更多的时间来构建应用程序而不是实际开发应用程序。世博会在这个过程中至关重要。

德鲁：Expo 是您在开发工作流程中使用的工具，使您能够在开发阶段做到这一点，但它不是您投入生产的工具？是对的吗？

菲尔：确切地。它用于开发阶段，但也处理构建过程。使用 CLI，它将构建一个包，然后您可以将其上传到 Play 商店或 App Store。它负责所有的身份验证、密钥和证书以及传统上令人头痛和令人难以置信的令人畏惧的事情的所有方面。这使得……我认为这让很多人放弃了应用程序开发。获得所有这些证书非常困难，但实际上，世博会让这一切变得异常简单。

德鲁：你是如何在 React 端构建东西的？

菲尔：我有一个入门框架。我开发了一种构建应用程序的模式。我使用 Redux 作为状态管理，虽然它不是规定性的，但有一个与之相伴的粗略结构。是的，我不太知道要讨论多少细节，但最后有很多无状态组件，我正在研究这些组件，并且我很欣赏它的优点。

菲尔：另一件值得一提的事情是，我今年真的开始打字，或者试图训练自己打字。我决定，尽管这需要……我并不擅长，所以我知道使用 TypeScript 构建应用程序会花费更长的时间，但这样做感觉更安全，因为我的编辑器中围绕 TypeScript 的智能意味着我“不要那么频繁地犯错误。过去我就遇到过这样的情况，我没有使用 TypeScript，而且遇到了很多未定义的红屏，我只是避免了这种情况并进行了管理。希望这意味着现在我可以添加功能，而不用担心破坏已经存在的东西。

德鲁：您之前是否使用过 React Native 做过很多工作？

菲尔：是的。我在 React Native 中构建了很多东西。现在很好，因为它真的安定下来了。现在这与整个 React 生态系统是一致的。现在我认为钩子正在被更广泛地采用，所有这些……最新的一批重大变化，一切都感觉现在有点稳定了，值得学习这些东西并实施它们。是的，太棒了。这很棒。

德鲁：想想你的工作流程，你说你是从在后端模拟 API 开始的。然后，您构建了一个 Laravel 应用程序来…… API 是您的 Laravel 应用程序向移动应用程序公开的内容，对吗？

菲尔：确切地。实际上，文档和模拟 API 只是为我提供了一个工作标准。这就是我想要达到的目标。而且我也……有时我发现，实际上，我很想现在就在应用程序上工作，而不是在后端上工作，这使我可以在后端未就位时切换到在应用程序上工作。所以，这是这样做的另一个原因。

德鲁：我认为这是一个较大的团队可以使用的工作流程，并且可以依赖于您可能让不同的人开发后端和移动应用程序的地方。如果您有一个模拟 API 可供开始，那么两个团队都可以同时向内研究该 API。

菲尔：这就是我第一次想到这个想法的原因，因为实际上，这意味着如果我正在构建后端，那么其他人就可以开发移动应用程序。

德鲁：在时间压力下你如何平衡？您如何在快速行动和依赖您熟悉的技术之间取得平衡，您知道自己可以快速工作，并且知道这可以完成工作……您如何在传统上可能较长的研发阶段之间取得平衡？实际上，最适合这项工作的技术是什么？是否只使用您知道会做得很好并且可以快速发货的情况？

菲尔：这是一个好问题。我想，一旦向我提到这个项目，我就想我确切地知道我将如何构建这一切。如果我没有孩子，坐在黑暗的房间里，如果我一直扎实、扎实、扎实地努力，我想我可能会在大约五天内扭转局面，因为要求非常多符合我构建应用程序的经验。我已经构建了类似的东西，它调用 API，将结果存储在状态中并呈现它们。我现在的处境是，有些地方我会想，“好吧，我需要回去重构它。”

菲尔：就像我谈到过输入tin一样，但实际上应用程序中的类型可能非常宽松，需要收紧。在后端，没有太多测试，现在我们开始推出后端，因为很多人站出来说：“实际上，这是一个很好的资源。我愿意自愿将其翻译成我的母语。” 后端被更多的人使用，所以我只是想，坚持一下，我需要在这里进行更多测试，以确保不会出现任何问题，因为现在有人在生产中使用它。

菲尔：我想我回答了你的问题。本质上，没有做出任何决定。我必须尽快把它拿出来。

德鲁：您是否曾经考虑过将其制作为渐进式网络应用程序？

菲尔：我们做到了。就在这一切开始之前，发布了一条我没有完全理解的公告。我在 Jeremy Keith 的博客上读到的一些公告让我对渐进式网络应用程序感到紧张。我真的很 土耳其 WhatsApp 号码列表 喜欢这项技术及其背后的想法，但我只是觉得它还没有发展得足够远。我觉得这在人们的心理中还不够深入，而告诉人们去应用商店下载应用程序，每个人都知道该怎么做。感觉最安全的选择就是完成应用程序。

德鲁：我发现有时人们对应用程序的概念比对网站的概念更熟悉。

菲尔：是的，我的感觉也是，现在用渐进式网络应用程序将所有鸡蛋放在一个篮子里还为时过早。我确信它会到达那里。我真的希望它能够实现，因为这感觉是一个更好的解决方案，但我认为我们还没有完全实现。

德鲁：您可能会为 Web 构建 React 项目以及 React Native 项目。您是否可以从 React Native 中获取该代码库，并在将来的某个时候将其移动到网络上？

菲尔：过去几年 React Native 的一个有趣的发展是 Nicholas Geiger 构建了一个名为 React Native Web 的包，它……React Native 的工作原理是它是 React，然后你有不同的客户端。传统客户端是 IOS 和 Android，但 Nicholas Geiger 构建了这个软件包，其中客户端之一是 Web。因此，您正在构建一个 React Native 应用程序，但它会输出 HTML 和 JavaScript。事实上，我认为 Twitter 网站是使用 React Native Web 或 Twitter 之一构建的，我认为这是正确的……我很确定 Twitter 网站正在使用 React Native Web。这真的很好。不幸的是，我们使用的包之一无法转换为 React Native Web。

菲尔：然而，我认为我下周的工作将是放弃该软件包，以便我们可以使用 React Native Web。我想使用它的原因是因为该网站目前仍然由 Squarespace 提供支持，但我想使用 Squarespace 进行所有营销工作，但对于实际的抽认卡，我希望使用与移动设备完全相同的代码库应用程序并调用相同的 API，以便我们可以保持全面的一致性。

德鲁：实际上，我想问的是，该网站如何适应这一点。相同的功能可能会或已经通过网站提供？

菲尔：网站上提供了一些功能。这实际上是在 View 中构建的。在网站上，我们只需注入一些 JavaScript，这对于 View 来说要容易得多，因为它只是一堆脚本标签。没有任何传输，没有什么有趣的事情，而且速度非常快。我非常有信心我可以很快让其发挥作用。是的，网站就是这样完成的，但希望下周这个时候我们将使用 React Native Web 构建它。

德鲁：您提到该应用程序需要是多语言的，并且您的抽认卡有不同语言版本。这样做并使其成为可能的过程是怎样的？

菲尔：Squarespace 网站使用了一家名为 Weglot 的公司的插件，实际上，它给我留下了深刻的印象。您本质上是设置大量子域并将这些子域指向 Weglot 服务器，然后获取英文翻译的相应页面并即时进行翻译。它看起来非常可靠，他们表示对于这项服务他们不会收取任何费用。他们拥有 API 以及向 Squarespace 提供的服务。更新卡片后，我们会将所有数据以及有效翻译列表发布到 Weglot，然后 Weglot 会向我们发回翻译。我认为它比谷歌翻译和其他一些服务的包装更大。

菲尔：我们真的希望专业的翻译服务能够承担起这个任务。是的。本周我可能会在我的博客上发布一些相关内容，并且会在 CardMedic 网站上发布。但是，是的，专业翻译服务公司表示他们会这么做，而且会提供 10 种语言。然后我们有很多其他人站出来表示他们真的很高兴将其翻译成他们的语言。因此，我正在构建这个编辑器功能，让那些......很多人从匈牙利站出来，他们可以看到尚未收到匈牙利语翻译的文章列表，他们可以将它们挑选出来，一旦他们“完成后，我们将能够推送这些新语言。

德鲁：您提到的另一个您自己制作的 API 是用于文本转语音的 API。那是如何运作的？

菲尔：该网站使用名为 SiteSpeaker 的服务。再说一次，我认为这可能是谷歌文本到语音服务的包装，但你向他们发送一串文本、文本所用的语言以及你想要的声音，因为你可以有不同的声音，然后它会发回给你一个音频文件。我认为它会将其转储到 S3 或其他东西上，并向您发送回一个 URL。关于特定字符的编码方式，存在一些棘手的问题，尤其是当您接触外语时。这真的很困难。但我认为现在效果很好。

德鲁：您提到的第一版基本要求的一部分是搜索抽认卡的能力。您如何处理应用程序内的搜索？这是发生在客户端还是发生在服务器上？

菲尔：这发生在客户端并且非常简单。我确信有一种比查看一个字符串是否包含在另一个字符串中更好的搜索方法。我再次认为，这可能会得到发展，因为例如，如果您正在寻找呼吸，几乎所有文章都会出现，并且可能需要更复杂一些。但目前，它正在完成这项工作。

德鲁：搜索总是这样开始的。

菲尔：是的。

德鲁：最简单的解决方案，然后当你发现问题时从那里开始解决。

菲尔：是的。

德鲁：

菲尔：那是在数字海洋上。Digital Ocean 再次启动了一项新冠肺炎救助计划，因此他们在我们的账户上存入了大量信用额度来支付这一费用，这非常棒。我认为我们不需要为任何服务付费，而且我们在那里使用了很多服务。该服务器是使用 Forge 构建的，Forge 是 Laravel 创始人 Taylor Otwell 构建的一项服务，它在 S3 和其他一些托管包上启动新的 Digital Ocean Droplet 和服务。在我看来，它可以完成系统管理员会做的所有事情，例如调度和 cron 作业以及升级和部署。它只是让它变得如此简单。没有那个我就会迷路。

德鲁：听起来这个应用程序的架构大量使用了外部服务和 API，这是一种很好的现代方式。如果有更多的时间来研究不同的选项，您认为这是可以使用无服务器方法构建的应用程序吗？

菲尔：本来可以的。它有趣的事情之一是它对服务器的要求不是很高。确实需要完成的工作，例如将文本转换为语音，这是一个密集的过程，但我们实际上并没有做这个过程。我们只是调用API，这是别人的问题。对服务器有相当多的请求，但我们缓存……每个人都获得相同的内容，所以我们只是缓存 API 并每小时刷新一次缓存，我想。所以服务器上实际上并没有太多负载。它不是最便宜的 Droplet，但与最便宜的 Droplet 相差不远，而且表现还不错。它可能是无服务器的，但我再次认为生态系统并不完全......好吧，我对它的了解还不够，无法在这么长的时间内将其生产出来。

德鲁：现在回顾这个项目，关于技术的结合方式，你会采取不同的做法吗？你做出的选择？如果你可以重来一次，你会采取不同的做法吗？

菲尔：我希望我们从一开始就使用 React Native Web。事后我尝试这样做，并意识到实际上这将非常困难。我希望我从一开始就使用 React Native Web，并更加关注它。我不认为我会改变后端方面的任何内容。我希望我有更多的时间来做这件事。我觉得有些地方我可以做得更好。我也许希望能有一位设计师参与其中。其中很多来自 UI 框架、应用程序本身，并且有一些屏幕与其他屏幕相比我不太满意。我最不满意的屏幕是《卫报》周末决定在其主页上展示的屏幕，所以这有点烦人。

德鲁：一旦应用程序准备就绪，您就会考虑将其交付给需要它的人。从Web项目的角度来看，这只是部署到CDN的服务器上。对于本机应用程序来说，情况比这要复杂一些，不是吗？您需要了解应用商店、开发者帐户以及所有此类业务。这是你以前做过很多次的事情吗？这个过程是如何进行的？

菲尔：世博会处理了许多困难的技术方面，世博会网站上的文档令人难以置信。如果您刚刚进入这个领域并且您在想哦，是的，我是一名前端开发人员，我想我可以构建一个应用程序，那么您应该深入研究 Expo 并尝试一下，因为即使您不要发货，它会带您完成整个过程并清楚地解释一切。我不知道他们是如何做到的，但他们的文档总是设法与 Play Store 和 App Store 保持同步。那么当 UI 发生变化时……它叫什么？App Store Connect …然后实际上，Expo 文档已更新，这使一切变得更加容易，因为您只需按照他们的说明操作即可，一切都很好。

菲尔：整个项目最大的压力和困难之一是获得应用商店的批准。我们发货了……我们上周四首先向 Apple App Store 提交了该应用程序。是的，上周四。所以，八天前我们正在录制这个。它很快就被拒绝了，并收到了非常非常严厉的拒绝通知，上面写着“不要再尝试这个”。它向我们指出了他们发布的一份文件，但我没有读到，“我们只会发布来自注册公司的新冠应用程序。” 这一切都在我当时的开发者帐户上。我的心沉了下去，我想：“天哪。我在这件事上花了很多时间，而这个女人，雷切尔，在这件事上花了很多时间，但这不会发生。