程序 （在 上可用，等待 批准的时间太长了）于 2023 年第四季度发布，目的是增加对整个 HackerNoon 库的访问。该移动应用程序方便了读者，因为这是该应用程序的主要动机之一。我们在网络上所做的几乎所有事情在移动设备上都更加简单，因为它提供了个性化体验，并且您可以随时随地享受该应用程序的主要功能。今天发布的 1.9 版是我们迄今为止最大的改进，最引人注目的是提供了 12 种语言和我们的应用内写作体验。为世界作家加油！ HackerNoon 移动应用 Apple Google 主要特点： 阅读 - 整个 100k+ 故事 HackerNoon 库均可用。 音频播放器播放列表 - 收听文章并使用您最喜欢的故事创建播放列表。 写作（新！）- 能够编写故事并将其提交给人类编辑。 民意调查和评论 - 投票并讨论最新的技术趋势。 在移动应用程序上，您还可以看到诸如包含当天热门故事的 、包含按您喜欢的主题策划的文章的策展页面、也按主题策划文章的 / 页面等页面。在 1.9 版本中，我们很快就在应用程序上添加了 和 ，因此它会变得越来越好。 TechBeat 页面 类别 标记 翻译 写作功能 从开发人员的角度来看，移动应用程序是非常需要的。在发布之前，几乎每次 HackerNoon 产品会议上都会提到它。由于某种原因，许多对话导致： 如果我们有一个移动应用程序来执行 xy 或 z 操作，那就太好了。 作为一名 和热爱挑战的人，我总是问自己为什么构建一个移动应用程序如此困难。事后看来，答案比我想象的要简单。 开发人员 这是怎么发生的？ 事实证明，我几年前遇到了 ，并认为它很有趣，但从未真正编写过任何代码来测试它。当时，该框架仅适用于 Angular，这可能影响了我尝试它的决定，考虑到我更多的是 React 开发人员。当时，Ionic 还没有那么流行，创建混合应用程序的想法并不符合很多人的想法。不管怎样，有一次在一次产品会议上，他们正在谈论移动应用程序，我决定回顾一下 Ionic，猜猜看，他们已经将框架扩展到了 Vue 和 React，我对此非常满意。 Ionic 框架 我做的第一件事是安装框架并创建一个快速的 Android 应用程序。过程的简单和理解给我留下了深刻的印象。只需删除几个组件就可以拥有一个移动应用程序，这真是令人疯狂的想法，但 Ionic 使得只需运行一些命令即可在包括 iOS 和 Android 在内的多个平台上构建应用程序成为可能。我对这个框架感觉非常舒服，在那一刻我感觉自己已经准备好迎接挑战了。巧合发生了，因为我看到了一个关于创建第一个 HackerNoon 移动应用程序的新项目。我很快就开始了工作。 过程 我首先在我的 Linux 机器上安装 Ionic，创建了一个全新的应用程序，并研究了他们的一些文档。运行这些神奇的命令来开始开发： npm install -g @ionic/cli ionic start // create ionicserve // run local 在使用它之后，我开始将组件从 HackerNoon Web 版本移动到这个新项目中。几个小时内我创建了几个页面。 HackerNoon 设计师（ ）确实非常出色地匹配了所有内容，并为应用程序提供了良好的本质和外观。其中大部分的开发方式与在 React 中开发的方式相同，除了 Ionic 使用 Typescript，这对它们有好处。我的 Linux 机器是一个很好的起点，我开发了几乎 50% 的应用程序基于 Android，但测试 iOS 版本却遇到了困难。 Linux 上有一个解决办法，那就是在虚拟机上安装 Mac OS，然后安装 XCode，然后在 IOS 上测试该应用程序，但我无法处理滞后和缓慢的问题。一旦我对应用程序的进展充满信心，我最终决定升级我的 MacBook Pro，以便开始 iOS 开发。到目前为止，这是一个很好的决定，因为它在很多层面上向我展示了为所有平台进行开发的重要性，尽管我仍然喜欢 Linux。因此，在我的新 MacBook Pro 上开发这个应用程序真是令人大开眼界。 @Devans 和 @Kien 挑战 这是一次充满挑战的学习经历。即使是最简单的错误也需要几个小时才能弄清楚。很高兴，每次遇到困难时我都会记录下来，这样下次就不会再发生这种情况了。作为这个项目的首席开发人员，我必须在应用程序的基础设施方面做出一些艰难的选择，构建整个 api，同时学习 Ionic 并习惯它。以下是一些主要挑战： 所有开发人员都知道在开发任何级别的应用程序时测试的重要性。在开发移动应用程序时，我首先开始在网络上进行开发。实际上，我认为每次都必须进行部署才能在移动设备上进行测试。我花了一点时间只是因为我不知道 Ionic 有一种在移动设备上进行本地测试的方法。所以大多数时候，我的 CSS 或一些事件处理程序会因为不同的实现而中断。在本地移动设备上进行测试后，该过程更加流畅。 调试/测试： ：当我第一次开始开发移动应用程序时，我看到了两个有趣的插件，我可以将它们用于通知，即本地通知和推送通知。本地通知是在应用程序上本地管理的通知，无需与后端服务器交互。我自然而然地认为本地通知是实现选择的正确且更快的选择，因此我实现它非常简单。然而，这并不是我们想要的。推送通知是可行的方法，但实施起来有点困难，并且需要额外的设置和后端服务器。为了保持简单，我们只在每天中午山区时间发送一个通知，尽管我们可能想发送更多一些。如果您有移动应用程序并接受了通知，您应该会收到有关 HackerNoon 当天头条新闻的此类通知。 通知 ：这是该应用程序的主要功能之一。构建起来很快乐，但调试起来却很痛苦，因为它有很多功能。在测试时，确保每个按钮都能完成其预期的功能是非常耗时的。构建故事音频播放器很奇怪，因为我尝试了多个音频插件在移动设备上工作。我遇到的主要问题是我构建了播放器，但音频无法播放或音频质量非常糟糕。有时音频可以在开发模式下工作，但不能在生产模式下工作。真正起作用的是本机音频 API。之后就很简单了，只需传递源 URL 并添加操作按钮即可。 播放列表不那么具有挑战性，因为只需将故事保存在数据库中即可创建播放列表。排序播放列表、改变声音、重新排序以及将整组故事添加到播放列表的功能等功能实现起来非常酷。也许将来我们可以拥有公共播放列表，您可以在其中看到其他人正在听的内容，当然还有他们关心的内容。这是我的播放列表现在的样子： 播放列表/播放器 我认为这是最令人沮丧的部分，当你有一个非常好的版本 100% 工作，然后突然它不工作，或者不加载，或者不记录我记得输入表单在 Ionic 上工作，但后来升级了 Ionic 版本，并且输入事件不起作用，因此让我认为错误出现在后端。或者测试该应用程序，然后意识到我无法再看到 safari 上的日志，因为我更新了手机，并且苹果不再支持该功能。或者尝试构建应用程序的新版本但失败，因为 xcode 已更新并且我的代码需要更改一些内容。这些确实是令人沮丧和耗时的时刻。至少它只在开发过程中发生过。 Ionic 更新 vs iOS 更新 vs Xcode 更新： 这是该应用程序的错误之一，Android 用户实际上无法使用 google 方法登录。这是一个疯狂的错误，因为它发生在生产中。虽然很简单，但这也是移动开发学习过程的一部分。事实证明，google 登录需要两种类型的密钥，一种用于在 firebase 上设置的开发密钥，另一种用于生产也需要在 firebase 中设置。这里的问题是谷歌游戏商店实际上生成了一个需要替换开发密钥的生产密钥。我无法知道这一点，因此花了几个小时试图找出问题所在。当我发现所需要的只是更换钥匙后，花了不到 30 秒的时间就修复了。 Android 上的 Google 登录： ……这确实是一次过山车。主要问题是找到适用于移动设备和 Ionic 的编辑器。我尝试了大约 20 种不同的编辑器，大多数在移动设备上都失败了，但在网络上却完美地工作了。有些没有加载键盘，有些写了与按下的字母不同的字母，有些只是无法安装。当我终于找到一个有效的方法时，打字时非常缓慢，所以真的很乏味。值得庆幸的是，我在另一个编辑器 QuillJS（！） 上尝试了一下，它的效果似乎比预期的要好。这实际上是我用来写这个故事的编辑器。此功能基本上阻止了新更新的发布，因为我们确实希望允许用户在移动应用程序上编写。 写作： 我喜欢什么？ 整个开发过程非常酷，我绝对推荐其他开发人员尝试一下。我使用该应用程序的次数越多，我就越习惯它并且对开发过程变得更加舒适。在我的手机上看到该应用程序并浏览所有页面真的很令人满意。对我来说最令人印象深刻的功能是播放列表/播放器，它是 HackerNoon 的有机产品，也是该应用程序的主要功能之一。推送通知可能是我学到最多的功能，因为它是全新的东西，我了解了移动通知是如何工作的，这些知识将来肯定可以应用到其他功能。 如果您还没有， 并在评论中分享您的想法⬇️。 ✌️ 请下载该应用程序 这是苹果版本： https://apps.apple.com/us/app/hackernoon/id6447998105?embedable=true 这是安卓版本： https://play.google.com/store/apps/details?id=com.hackernoon.mobile&embedable=true
![featured image - HackerNoon Mobile：开发者的视角和 World Wide Writer 版本 [1.9 版]](https://hackernoon.imgix.net/images/X56tdd0IHOROIv2OuEHgZdRNUc52_f90dphpo.jpeg?auto=format&fit=max&w=3840)
