返回博客首页
← 所有文章

我的 NativeScript 开发工作流程

2017 年 11 月 30 日 — 作者：TJ VanToll

在这篇文章中，我将分享我构建 NativeScript 应用程序的方式。不过，我需要先说明一点：我的工作流程并不是构建 NativeScript 应用程序的“最佳”方法，也不是唯一的途径。NativeScript 的一大优势在于构建方式的灵活性，您可以找到适合自己的工作流程。

事实上，如果您是 NativeScript 开发人员，您也可以尝试撰写类似的文章并将其分享在评论中 😉 收集不同开发人员构建应用程序的方法将非常有益。

让我们来看看我构建应用程序的方式。

操作系统

我们从最开始说起。我使用的是 Mac。我的 Mac 上贴着重要的贴纸。

laptop

虽然 NativeScript 在 Windows 和 Linux 上的开发体验也还不错，但我更喜欢使用 Mac 进行移动开发。作为一名开发者倡导者，我的需求与一般的 NativeScript 开发人员略有不同。我偶尔需要进行一些原生 iOS 开发，以便将其与 NativeScript 开发进行比较，因此需要能够支持原生 iOS 开发的操作系统。

注意：我更喜欢 macOS 而不是 Windows，原因有很多，但这里就不深入探讨了。如果您对此感兴趣，欢迎在评论中或 推特 上与我交流 😄

选择 Mac 的另一个重要原因是可以直接访问 iOS 模拟器。iOS 模拟器在模拟 iOS 应用程序的外观和行为方面非常出色，我很少遇到模拟器和实际 iOS 设备上应用程序外观不同的情况。

模拟器 

我还大量使用一些其他 macOS 应用程序，从严肃的生产力增强工具到帮助我在推文中添加表情符号的工具，不一而足。

  • Divvy—一个小型实用程序，使 macOS 窗口管理更加合理。我设置了一些快捷键，可以帮助我把窗口固定到屏幕的一侧，或者让窗口占据整个屏幕。
  • OmniDiskSweeper—一个应用程序，可以帮助您轻松找出哪些文件和应用程序占用了 Mac 上的磁盘空间。这对移动开发人员来说尤为有用，因为令人惊讶的是，各种 Android 和 iOS 工具会占用多少 GB 的空间。
  • Rocket—一个小型实用程序，可以轻松地在几乎所有 macOS 应用程序中键入表情符号。如果您经常使用表情符号，那么您需要这个工具。认真地说。

终端

我使用的是 Mac，并且在大多数 NativeScript 开发中都使用 Mac 自带的终端应用程序。

我尝试过其他几个终端客户端，例如 iTerm 2，但我发现我并没有经常使用这些客户端的高级功能，因此没有更换默认的终端。尽管如此，我还是进行了一些终端自定义设置。

下面是我的终端外观。

terminal

我使用的是黑色文本和白色背景，因为我经常做演示，而高对比度在使用糟糕的投影仪进行演示时非常重要。

我使用的自定义提示是我几年前从互联网上找到的，但后来我进行了调整以满足自己的需求。例如，我在每个提示之前添加了一行，因为我喜欢命令间隔开以提高可读性。

如果您想自己尝试使用此提示配置，可以将以下内容添加到 ~/.bash_profile 文件中。

# Change the colors of folders when using ls
export CLICOLOR=1
export LSCOLORS=GxFxCxDxBxegedabagaced

# Define some constants for colors
MAGENTA=$(tput setaf 1)
ORANGE=$(tput setaf 160)
GREEN=$(tput setaf 64)
BLUE=$(tput setaf 61)
WHITE=$(tput setaf 245)
BOLD=$(tput bold)
RESET=$(tput sgr0)

parse_git_branch () {
  git branch --no-color 2> /dev/null | sed -e '/^[^*]/d' -e "s/* \(.*\)/\1/"
}
# Set how prompt looks
PS1="\n\[${BOLD}${MAGENTA}\]\u \[$WHITE\]at \[$ORANGE\]\h \[$WHITE\]in \[$GREEN\]\w\[$WHITE\]\$([[ -n \$(git branch 2> /dev/null) ]] && echo \" on \")\[$BLUE\]\$(parse_git_branch)\[$WHITE\]\n\$ \[$RESET\]"


就像 bash 中的许多东西一样，我复制、粘贴并执行了该代码的原始版本，而不知道其中 90% 的代码实际上是做什么的。我的计算机有 2% 的可能性在过去几年中一直在秘密开采比特币，但只要我继续获得喜欢的 bash 提示，我就不会问太多问题。

我在同一个 ~/.bash_profile 文件中还设置了一些别名，您可能会觉得很有趣。首先，我为 git diff 和 git status 创建了单字母快捷键，因为我经常使用这两个命令。

alias d="git diff"
alias s="git status"


其次，我设置了两个快捷键，可以直接从命令行启动 iOS 模拟器和 Android 虚拟设备。

alias android-avd="emulator -avd Nexus_5X_API_24 &"

alias ios-simulator="open /Applications/Xcode.app/Contents/Developer/Applications/Simulator.app/"

提示：我将在 Telerik 开发者网络上的一篇文章 中详细介绍我用于启动模拟器和模拟器的别名。

现在您已经了解了我的开发环境，让我们进入真正使用 NativeScript 应用程序开发的部分。

工作流程

我以前使用 CLI 中的 tns create 命令创建新的 NativeScript 应用程序，但现在我改用 NativeScript Sidekick，因为它的创建应用程序界面可以帮助我不必记住模板名称。

sidekick

创建应用程序后，我使用 ios-simulator 和 android-avd 别名启动 iOS 模拟器和 Android 虚拟设备。

devices

我认为同时在两个平台上进行测试非常重要，因为如果您编写的代码导致某个平台出现问题，最好立即发现问题，而不是需要回溯才能找出错误所在。NativeScript CLI 在处理多个设备方面非常出色，因此在测试过程中没有理由不运行多个设备。

提示：如果您使用的是 Windows 或 Linux，可以使用 NativeScript Sidekick 的 iOS 云构建功能在实际 iOS 设备上进行测试，同时开发 Android 应用程序。

虽然我主要在模拟器/模拟器上进行开发，但有两种情况下我会专门避免使用模拟器，而坚持使用实际设备。

  1. 性能测试—模拟器在您的开发机器上运行，而开发机器的性能特性与实际的 iOS 和 Android 设备有很大差异。如果您要测试应用程序的性能，则需要在实际设备上进行测试以获得准确的数据。值得拥有几个低端 Android 设备，以了解应用程序在生产环境中的最坏情况。
  2. 准备投入生产—有些事情是无法在模拟设备上测试的。您的按钮是否足够大？您的滑动手势是否可靠？从横向模式切换到纵向模式是否流畅？在应用程序上架之前，值得在一些实际设备上试用一下这些应用程序。我有 Nexus 4、Nexus 6、Pixel、iPhone 5、iPhone 6S 和几个 iPad，专门用于这种情况。将大量设备连接到 USB 集线器，然后观看 {N} CLI 将您的应用程序部署到所有设备上，这实际上很有趣 😄

除了这两个例外，我的大部分早期工作都使用我之前启动的 iOS 模拟器和 Android 虚拟设备在新应用程序上进行。这两个设备启动并运行后，我使用命令行中的 tns run 命令将我的应用程序启动到这两个设备。

apps-running

编辑器

应用程序运行后，我在 Visual Studio Code 中编辑源代码。我最近从 Sublime Text 转移过来，离开 Sublime Text 对我来说非常困难，但是 Visual Studio Code (VS Code) 中有太多优点，我不得不做出改变。这是我目前使用的 VS Code 环境。

vs-code

以下是我的一些配置设置和您可能会感兴趣的扩展。

  • Quiet Light 主题—我最喜欢的内置 VS Code 主题。它在演示时具有良好的对比度，而且我非常喜欢它的配色方案。

提示：您可以使用键盘快捷键 Ctrl/Cmd + K ▶️ Ctrl/Cmd + T 预览不同的 VS Code 主题。使用箭头键在不同的主题之间切换。

  • Material Icon 主题—我最喜欢的图标主题。它控制资源管理器中文件名旁边显示的图标。
  • NativeScript—一个扩展，用于直接在 VS Code 中进行 NativeScript 代码的逐步调试。这个扩展非常好用，尽管我开始使用 NativeScript 的 Chrome 开发者工具集成 来进行调试。
  • SpellChecker—这个扩展与 NativeScript 本身无关，但是当我使用 VS Code 撰写文章和文档时，我非常喜欢使用这个拼写检查器。

现在我已经向您简要介绍了一些我独立使用的工具，让我们将所有这些工具整合在一起，看看全貌。

全貌

我大部分 NativeScript 开发都是在办公室进行的，因为我重视屏幕空间。我有两台大型外接显示器，并将我的 MacBook 与它们对接在一起，这样我就可以使用三台显示器。

这是整个环境的样子。

workflow

  • A：我将笔记本电脑用作我的左侧显示器，并将终端放在这里。我执行 tns run 命令启动我的 NativeScript 应用程序，如果需要查看日志或提交代码，我会返回这里。
  • B：我的中间显示器专门用于我的文本编辑器，我通常会打开两到三列，这样如果需要的话，我可以并排查看文件。
  • C：这是 Litten。Litten 是一只宝可梦。如果你仔细观察，在这张图片中还有一个 Litten。
  • D：我的右侧显示器用于放置我的 iOS 模拟器、我的 Android 模拟器以及我的浏览器，用于查看文档、Stack Overflow 等等。
  • E：一个 10 口 USB 集线器。当我对应用程序进行生产测试时，我会将大量设备插入到这个集线器。
  • F：这是咖啡 ☕
  • G：Microsoft 人体工学键盘 4000。我非常喜欢它。
  • H：Apple Magic Mouse 1，也就是没有 完全奇怪的充电端口 的那个。
  • I：一台任天堂 DS。NativeScript 应用程序无法在这个设备上运行，但《宝可梦究极日月》可以 😄

就是这样。当找到可以提高生产力的工具时，我会不时调整自己的工作流程。在结束之前，我想再提一下几个我经常使用的工具。

  • VectorStock—一个购买廉价图标的好地方。
  • NativeScript 图像构建器—来自 Brosteins 的一个很好的资源，用于为您的应用程序生成正确尺寸的图像，以便放入 App_Resources 文件夹。
  • DaVinci—一个工具，可以帮助您创建看起来专业的应用程序截图。

您呢？

您是否有一些工具或工作流程想与 NativeScript 社区分享？请在评论中分享吧！

听到其他人的观点总是很有趣，特别是在 NativeScript 社区，因为您构建应用程序的方式有很多种。