John Gallaugher教授的挑战,使用开发API和JSON解析

权力应用挑战

John Gallaugher教授的挑战,使用dev API和JSON解析。

截图

挑战:设置

  • 创建一个名为“Thrones”的新 Xcode 项目
  • 将内容视图重命名为导航堆栈
  • 创建一个名为房屋的字符串数组,该数组将(暂时)容纳维斯特洛房屋。您可以使用任何您想要的名称。例如:“坦格利安”、“兰尼斯特”、“史塔克”、“马爹利”、“葛雷乔伊”
  • 将列表添加到导航堆栈并在列表中显示名称。字体大小标题2。列表样式应为纯
  • 在导航堆栈中添加一个标题,说明“维斯特洛之家”。

挑战:结构设置

  • 我们将使用此 URL 中的“冰与火 API ”访问 JSON。它将返回 50 个权力的游戏房屋:https://www.anapioficeandfire.com/api/houses?page=1&pageSize=50
  • 创建一个名为 House 的结构,作为我们 Thrones 应用的模型。它应该能够用于解码我们的JSON,并且也是可识别的。除了符合可识别属性外,还应包含: name:一个字符串,它将保存房子的名字 url:包含带有房屋详细信息的网址的字符串 单词:字符串。房子的座右铭或“文字”

挑战:房屋视图模型

  • 创建一个类以用作 Thrones 应用程序的视图模型。称之为房屋视图模型。
  • 解码 House 结构数组。它应该最终出现在 HouseViewModel 类中名为 house 的 @Published 属性中,这是一个 House 结构数组。
  • 使用 URL: 向类中添加 urlString 属性: https://www.anapioficeandfire.com/api/houses?page=1&pageSize=50
  • 创建类的 getData 函数。
  • 将 HousesViewModel 实例化为名为 housesVM 的对象。
  • 在列表视图中调用 getData。现在,只需将房屋结构的结果打印到控制台即可。

挑战:加载时添加进度视图

  • 将视图模型更新为具有在加载数据时为 true 的 isLoad 值,否则为 false。
  • 使用它来显示或隐藏位于 ZStack 顶部的进度视图,其中包含一个列表视图

比同龄人更快地得到这个?

  • 然后尝试在幻灯片上的挑战,以添加一个 .status 工具栏项,显示下载的房屋的 #

挑战:添加状态工具栏项

  • 向视图添加工具栏
  • 它最初应包括一个具有中心位置 (.status) 的工具栏项,该项显示为底部工具栏。
  • 让状态显示到目前为止已下载的房屋的#,如下所示:#返回的房屋

挑战:滚动时对 JSON 进行页面处理

  • 如果需要,在滚动时加载 JSON 的新页面,直到加载所有页面。
  • 当我们的 JSON 中没有“下一个”键时,我们如何对 JSON 进行分页?
  • 网址为:https://www.anapioficeandfire.com/api/houses?page=1&pageSize=50
  • 请注意,“页面”指示加载了 JSON 的哪个页面。请注意,pageSize 为 50,这是每页的 # 个房屋
  • 创建一个名为 pageNumber 的变量并将其初始化为 1
  • 在getData的顶部,在getData中为urlString的更新添加一行,以便它使用pageNumber。使用此“更新”的 urlString 转换为 URL。
  • 返回数据时,检查返回的房屋数。如果为 == 50,则将 pageNumber 递增 50,以便下次调用 getData 时,我们使用它来获取下一页 JSON 数据。 如果房屋返回< 0,则将页码设置为 <>
  • 不要检查 http 的字符串前缀(在 CatchEmAll 中完成),请检查以确保 pageNumber != 0。如果 pageNumber 为 == 0,则不要调用 JSON 的新页面。
  • 请记住:分页 JSON 时,您需要将新返回的房屋页面添加到现有房屋中。我看到很多学生在文本/项目中忘记了这一点。

挑战:全部加载

  • 在工具栏的左下角添加一个“全部加载”按钮 按下时,这应该加载 JSON 的所有页面

挑战:创建详细信息视图

  • 将详细信息视图添加到王座应用程序
  • 它应该看起来像右侧的演示。注意:
  • 房屋名称和单词:标题用填充分隔
  • 如果房子有单词,它们用双引号括起来 如果房子没有单词,则显示“n/a” 单词是斜体的
  • 详细信息视图上的元素显示在屏幕左上角对齐。
  • 详细信息视图上的元素采用标题字体

作者:约翰·加劳克

https://bit.ly/prof-g-swiftui

GitHub

查看 Github