构建像Lego这样的应用程序-教程1

创建一个应用模板

1.简介

我们所有人每天都在使用应用来简化和丰富我们的生活，但是构建它们似乎是一项巨大的挑战。 如果您对应用程序有一个想法-甚至是一个非常简单的想法-雇用某人创建它可能会花费数千美元。 实际上，开始并不难。 在本系列中，我将演示您可以像创建乐高积木一样轻松地创建应用程序。

我们将共同努力：

1. 可视地创建真正的工程组件。
2. 像乐高积木一样组装它们。
3. 在iPhone上运行该应用。

LEGO®是LEGO Group of Companies的商标，并不赞助，授权或认可本教程系列。

我们构建的应用程序将真正做到“原生”。 我们将使用Apple的工具集来构建iOS平台“原生”的应用程序。 这将是一个真实的应用程序，而不是使用某些原型工具构建的，也不是设计为看起来像应用程序的网页。

该应用程序将如下所示：

您可以在Tutorial Index上达到顶峰，但是您需要从本教程开始按顺序进行学习。

要继续学习本教程系列，您不需要成为专家。 您只需要：

1. 能够运行最新软件的Mac。
2. Xcode（我们将在第一个教程中一起下载）。
3. 有关如何使用Mac的实用知识，例如如何：启动应用程序，双击，拖动文件，按住Shift键，控制单击，复制和粘贴以及选择多个对象。
4. 渴望学习如何构建应用程序。

如果您是寻找最佳原型和应用程序设计工具的设计师，请先通读： 像Lego一样构建应用程序-设计师简介

2.安装Xcode

首先，您将需要Apple的Xcode软件。 免费。 在本教程中，我将展示Xcode 10.1。 尽管下载量较大（6GB），但这是因为它包含构建iPhone，iPad，Mac和Apple TV应用程序所需的一切。

Mac在Mac上，启动App Store并搜索Xcode 。 下载并安装。

根据您的Internet连接和Mac的速度，这可能需要一两个小时。 因此，您可能想吃午饭或继续吃点别的东西。

👉启动Xcode。

code首次启动Xcode时，可能会要求许可以安装更多组件。 允许它这样做。 准备就绪后，您将看到“欢迎使用Xcode”窗口。

3.创建一个新项目

好。 现在我们准备构建一个应用程序。

👉单击Create a new Xcode project 。

code Xcode显示了一堆模板。 选择iOS ，然后选择Tabbed App 。 确保选择iOS或Xcode不会为您显示本教程的正确组件。

👉单击Next按钮。

code Xcode要求您Choose options for your new project 。

我们将其称为“社交”应用。

👉输入您的应用Product Name为Social 。 输入任何您喜欢的Organization Name 。 对于Organization Identifier ，输入Organization Identifier的反向域名。 例如，如果您的域名是mycompany.com.au，则输入标识符au.com.mycompany 。 如果您没有域名，则可以注册一个域名或输入任何您喜欢的名称。 您可以稍后进行更改，但不能在此处将其留空。

确保：

1. Language设置为Swift 。
2. Include Unit Tests已关闭（复选框中无任何勾号）。
3. Include UI Tests已关闭。

👉单击Next按钮。

code Xcode询问将新项目保存在何处。 打开“ Create Git repository 。 稍后我们将讨论“ Git”。

👉选择将新项目保存在“文档”文件夹中或您认为合适的任何位置。

👉单击Create按钮将其保存。

Xcode将创建一个文件夹（名称与您选择的产品名称相同），其中包含构建我们的应用程序所需的所有文件。

如果您在Finder中查看，它将看起来像这样：

恭喜你！ 您刚刚创建了本机iOS应用程序！

code Xcode现在为您的项目显示了成千上万个选项，这似乎不胜枚举。 不用担心 您可以放心地忽略几乎所有它们。

让我们检查一下我们是否可以运行该应用程序。

👉单击窗口左上方的“ Build and Run按钮（类似于iTunes中的“播放”按钮）。

耐心一点。 Xcode会花费几分钟来构建和运行该应用程序。 Xcode将在类似于iPhone的窗口中启动一个名为“ Simulator”的新Mac应用程序。 它是模拟的iPhone XR（或左上角“ Build and Run按钮旁边出现的任何设备）。

👁首先，iPhone屏幕将显示为黑色。 最终，您将看到该应用程序在模拟iPhone中启动。

在那里-您已经成功构建并运行了一个应用程序！ 这不是假的原型。 这是一个真正的本地应用程序。 您可以在App Store上部署它。 好吧，您可以尝试，但正如您希望的那样，Apple会拒绝它，因为它实际上并没有做任何有用的事情。

4. Xcode面板

👉切换回Xcode。

与Mac上的任何窗口一样，您可以将Xcode窗口放大或全屏显示-您熟悉的一切。

Xcode窗口分为几个面板。 让我们通过一些基本的技巧来介绍如何移动，隐藏和显示这些面板。 现在不用担心这些面板的内容或用途。 我们将在后面讨论。

左侧面板是“导航器”，当前显示“项目导航器”（项目中文件的列表）。 右侧面板是“检查器”。

👉查看“项目浏览器”（左侧面板）。 在Main.storyboard文件上单击一次。 不要双击，否则您将打开一个新窗口（可以轻松关闭）。

👁在中间面板（“画布”）中，您可以查看应用程序的流程和布局。 稍后我们将讨论流程和结构。

尤其是在像笔记本电脑这样的小屏幕上，您可能需要一些额外的画布空间。 幸运的是，您可以使用窗口右上方的“ Show/Hide Navigators and Inspectors按钮隐藏和显示左右面板。

👉单击按钮以熟悉如何隐藏和显示“导航器”和“检查器”面板。

using使用触控板或鼠标在画布上（垂直和水平）滚动。 您可以捏缩放或单击窗口底部的-和+按钮：

👁在左侧“导航器”面板旁边，您可以看到另一个名为“ Document Outline面板，其中包含“场景”列表。 您还可以通过单击下面的按钮和右侧的按钮来隐藏“ Document Outline面板。

5.编辑文字

现在，乐趣开始了。

如您所愿，您可以直接在此画布中编辑项目。

👉双击较大的“ First View文本标签，以便选择其中的文本。

👉现在，为此场景键入您自己的标签文本作为News 。

👉按下Return （在键盘上）或单击其他任何位置以保存此更改。

👁请注意，此场景底部的选项卡栏项当前标题为“ First 。 让我们也改变它。

👉双击第First标题。 您可能需要先放大才能正确选择它。

🐞如果双击标题，标题只是空白，请从“ Edit菜单中选择“ Undo ”。 这似乎是苹果有望修复的Xcode中的错误。

👉将标签栏项的标题更改为News 。 点击“ Return将其保存。

clicking单击Xco​​de窗口左上方的Build and Run按钮，再次运行该应用程序。 如果您已经在运行该应用程序，则Xcode会询问您是否满意退出旧版本以运行新版本。

Stop点击Stop ，新应用可以运行。

该应用程序现在应显示更改后的News标签和标签栏项目标题。

6.提交更改

👉切换回Xcode。

Xcode已经保存了我们的更改，因此我们可以退出Xcode，重新启动并从上次退出的地方接机。 但是，在此过程中，我们将进行很多更改，并且可能想尝试不同的想法，或者返回到几天前创建的项目的版本。 为了使我们能够保存特定的版本或里程碑，我们可以使用“ Git”版本控制系统。 一般而言，Git广泛用于所有程序设计学科和文档控制中。 Xcode提供了一些菜单项来轻松访问一些Git命令。

让我们提交到目前为止所做的更改，并描述更改的内容。 稍后，我们将能够在应用程序开发的历史中看到这一点，并在需要时还原。

X在Xcode中，在“ Source Control菜单中（在屏幕顶部的菜单栏中），选择“ Commit 。

code Xcode显示我们已更改的文件。 在这种情况下，我们只更改了Main.storyboard 。

👉在窗口底部，光标闪烁，输入您所做更改的描述，例如： Changed First to News

👉单击Commit按钮。

7.回顾教程1

这使我们到了教程1的结尾。到目前为止，您已经：

1. 安装了Apple iPhone开发人员工具集（Xcode）。
2. 创建了本机iOS应用。
3. 修改了一下。
4. 在iPhone模拟器上运行该应用程序。
5. 通过Git版本控制提交的更改。

⁉️如果您有任何疑问或意见，请在下面添加回复。

在教程2中，我们将开始自定义应用程序的导航流程。