无论你基于MVC的模式写过什么，都应该对view controller的身量记忆深刻。甚至可以说，一个真正有用的App，它的view controllers有很大概率充斥着各种既不适合放在model也不适合放在view里的代码。如果你也发现了这个问题，却没有更好的办法，你可以持续关注一下我们的内容。
我们会从零开始编写一个质量达到生产环境级别的天气应用 - Sky。在这个过程里，我们通过“自定义table”、“controllers过渡”、“定义model”、“保存配置”、“网络通信”等几乎一定会在App开发中用到的场景，和大家分享RxSwift/RxCocoa在App开发中的应用、TDD的实践，以及MVVM是如何从机制上改进MVC设计模式的。
首先了解Sky的项目结构和UI构成
我们通过从零开始开发一个完整的天气App - Sky，来理解并掌握MVVM的编程思想。并且，在这个过程中，我们还会引入RxCocoa、单元测试，以及UI测试等内容，尽可能还原一个比较真实的App独立开发场景。
作为整个系列的开始，我们先了解一下这个App的大体构成，并用MVC的方式勾勒出一个轮廓。这样，我们就会很自然的从一些熟悉的场景，过渡到MVVM了。
整理项目目录
首先，还是创建一个Single View Application，这不过这次，记得把Include Unit Tests和Include UI Tests选上，在稍后的内容里，我们会涉及到单元测试以及UI测试的内容：
其次，我们把Xcode默认创建的项目目录结构调整成下面这个样子：
它们的含义大多简单直观，我们就不再一一说明了。这里，有两点要说明下：
- 在大家下载下来的项目初始模板里，Assets.xcassets中已经包含了项目需要的所有图片资源；
- 当我们把Info.plist放在了SupportingFiles目录下之后，如果我们直接编译项目，就会看到下面这样的错误：
frame-the-app-in-mvc-3@2x.png
这时，我们就要在TARGETS中选中Sky，然后，在Build Settings里把Info.plist File的设置修改成对应的位置：
这样，就不会再有错误了。
从设计首页Storyboard开始
接下来，打开Main.storyboard，我们从构建首屏UI开始。在这个界面上，我们先拖两个Container View进来，其中，上半部分用于显示当前的天气信息；下半部分将会设计成一个UITableView，用于显示天气预告：
然后，设置上下两部分容器的位置约束：
完成后，选中上半部分的Container View，按住Ctrl拖拽到下面的Container View上，在弹出的菜单中，选择Vertical Spacing和Equal Heights
最后，在storyboard中选中Equal Heights约束，在Attribute Inspector中，把Multiplier选项设置成2:3。这样，上下两部分在任何屏幕上，就都有固定的比例显示了。
完成后，我们来处理显示当前天气的部分，为了方便整体控制这部分内容的加载，我们先拖一个UIView进来作为这部分所有其他元素的容器，并按下图给它设置约束：
接下来，拖一个UIImageView进来，表示当前天气的图片，按照下图给它添加约束之后，在Attribute Inspector里，把默认的图片设置成clear-day：
完成后，我们拖两个UIButton进来，放在这个区域的左右上角，并按下图设置它们的属性和位置约束：
这里，要注意的是，一定要清空这两个按钮的默认文字内容，否则会影响计算它们的大小。其中，左边的按钮用于切换地区，右边的按钮，用于对App的行为进行一些设置，它们都将是我们在稍后的内容中实现的部分，现在，只是把它们放在这里就好了。
完成后，我们添加一些UILabel。第一个，表示当前所在城市：
第二个，表示当前天气的文字描述：
第三个，表示当前时间：
第四个，表示当前温度：
第五个，表示当前湿度：
这样，表示当前温度信息的UI部分就完成了，直接执行一下，可以在模拟器里，看到下面这样的结果：
What's next?
至此，我们UI的构建工作就可以告一个段落了。因为这些UI以及我们对App整个结构的描述，已经足够开始探索一些MVC的问题，以及MVVM对应的解决方法了。在下一节里，我们将了解一个可以访问到天气的API服务，并以此设计Sky用到的model。
