zoukankan      html  css  js  c++  java
  • 如何用 Parse 和 Swift 搭建一个像 Instagram 那样的应用?

    【编者按】本篇文章作者是Reinder de Vries,既是一名企业家,也是优秀的程序员,发表多篇应用程序的博客。本篇文章中,作者主要介绍了如何基于Parse特点,打造一款类似Instagram的应用,完整而清晰的步骤,为开发者提供一次绝佳的学习体验。本文系 OneAPM 工程师编译整理。

    Parse 是一个移动应用开发平台,旗下有个很有意思的产品:Parse Core。它的特色之一是允许应用开发者直接将数据存储在云端,而无需担心设置服务器或重新设计一个 REST API。Parse Core 是本地备份(比如核心数据),这使得它能轻松解决线上线下等后端问题。

    如何用 Parse 和 Swift 搭建一个像 Instagram 那样的应用?

    本篇教程主要介绍如何创建一个基于 Parse 的应用。我们将打造一个类似 Instagram 的应用,它包括以下特征:

    1. 从 Parse 加载数据,存储在本地;
    2. 保存数据到 Parse,并写回云端;
    3. 为 Cat 的图片点赞。

    这款应用将完全使用 Swift 语言开发,Swift 是苹果最新的编程语言,用于打造 iOS 应用。Parse 并不用完全重写 Swift,所以我们需要创建一个桥接头来处理它俩的兼容性。

    通过这篇文章你将学到以下技能:

    • 用 Parse 实现检索,存储数据到云端;
    • Cocoapods 整合一个调用 Objective-C 框架的 Swfit 程序;
    • 建立视图和有接口的自定义表视图单元;
    • 从零开始,用 Swift 编写一个完整的 App;
    • 使用自动布局和约束;
    • 使用手势识别、可选类型、条件、闭包、属性、出口和动作。

    那开始吧!

    首先,你得有一个 Parse 帐户。这可以通过你的 Facebook、Google+、GitHub 帐号或邮件在 Parse.com 注册。
    然后,登录 Parse,通过 https://www.parse.com/apps 可以到你的 apps Dashboard。

    通过点击「创建新应用」 按钮,创建一个新的应用程序,输入「Paws」作为应用名。接着,打开新应用,确保你能看到下图的的核心选项卡。

    如何用 Parse 和 Swift 搭建一个像 Instagram 那样的应用?

    创建数据存储区

    从技术上说,Parse 只是在线数据库。数据被存储为具有一个名称和多个字段的对象,如电子表格。这样的对象被称为一个类,它的功能是数据结构的蓝图。我们将要使用的类名为 Cat。

    在核心选项卡单击该按钮添加一个类。在下拉框中选择自定义,然后键入类的名称:Cat。然后,单击创建类。

    Imgur

    这样,我们就创建了新的类,接着我们还可以添加一系列的标准字段,如 ObjectId、createdAt、updatedat和ACL。

    +Col按钮翻到最上,添加下列字段,名称和类型:

    • Name: name, type: String.
    • votes, type Number.
    • url, type String.
    • cc_by, type String.

    这些字段将为 Cat 数据库提供基本信息。

    导入数据

    现在我们已经设置好基础结构,可以导入数据了!将该文件保存到:cat.json。
    然后,回到核心选项卡和数据库,左键点击「导入」按钮。选中你刚保存的文件并上传。确保类别集是「自定义」 ,并重命名为 Cat(而不是rs1_cat)。再单击「完成导入」。如果导入是完整的,Parse 会及时提示。点击「Got it」并重新加载页面。
    如果一切顺利,你现在应该能看到数据库中有10个 Cat。它们都有一个名字、一个 URL、一些得票数和一些为原则这预留的空间。

    如何用 Parse 和 Swift 搭建一个像 Instagram 那样的应用?

    至此,我们在 Parse 中的全部工作已经完成。下面开始构建 Swift Xcode 程序。

    构建 Xcode

    打开 Xcode 并创建一个新项目,从开始界面选择「菜单→新建→工程」。
    选择类别「iOS→应用模板」的单一视图的应用。在下一屏上输入以下字段:

    • 产品名称:Paws
    • 结构名称:随意
    • 结构标识符:随意,比如com.appcoda
    • 语言:Swift
    • 设备:通用

    单击「下一步」 ,选择工程目录文件夹,再单击「创建」 。

    我们不打算使用 Storyboards,所以单击左上的 Paws、2 targets、 iOS SDK,打开工程设置。在左侧的列表中单击 Target 下方的 Paws,然后找到屏幕中主区域的主界面设置。将 textMain 从框中移除。

    如何用 Parse 和 Swift 搭建一个像 Instagram 那样的应用?

    用 Cocoapods 将 Parse 库添加到 Xcode 项目

    在程序代码中使用 Parse 之前,我们必须将其添加依赖关系。因此我们选择 Cocoapods,它是一个软件包管理器。许多应用项目依赖于第三方库,比如 Parse。CocoaPods 是方便加载库的工具,并确保其实时更新。
    在终端执行以下命令安装 Cocoapods。它会要求你输入你的 Mac 用户密码。但不允许包含「$」符号。这标志意味着 shell 命令!

    $ sudo gem install cocoapods
    

    中途如果一两分钟没有进展也无需担心,那是因为 Cocoapods 正在安装中。安装完成后你可以看到一堆线条,最终...安装完成。

    如何用 Parse 和 Swift 搭建一个像 Instagram 那样的应用?

    接下来,在 Xcode 项目的根目录下创建一个空文件,并调用 Podfile 文件。用你喜欢的文本编辑器打开,并粘贴下面代码到该文件:

    pod ‘Parse’, ‘~> 1.7.1′
    pod ‘ParseUI’, ‘~> 1.1.3′
    

    Podfile 会告知 Cocoapods 哪些库是我们需要的。这样的话,Parse 的版本是1.7.1,而ParseUI版本是1.1.3。
    现在,关闭 Xcode,并使用终端找到程序项目的根目录。写入终端 cd,然后在 Paws 目录中查找,并将其拖至终端。

    接下来,在命令行输入以下代码:

    $ pod install
    

    CocoaPods 会查找 Podfile,并尝试安装我们设置的依赖关系。这个步骤大概会花上几分钟。结果应该是这样:

    如何用 Parse 和 Swift 搭建一个像 Instagram 那样的应用?

    CocoaPods 已经下载并编译 Parse,并把它添加到一个新的工作区。从现在开始,我们不再使用原来的应用项目,而会使用 CocoaPods 创建的工作区。它包含了我们的原始项目和 CocoaPods 项目。

    这里要注意的是:通过搜索浏览找到程序的根目录,打开 Xcode 中的新工作区,再打开其中的 Paws.xcworkspace。验证下左侧的导航项目,会看到:Pods 和 Paws。

    在我们直接编写应用前,需要建立 Parse 和项目之间的连接。Parse 是用 Objective-C 搭建的,而我们的项目则是用 Swift 语言,两者之间需要适当的设置才能兼容。

    在 Swift 项目中使用 Objective-C

    任何 Objective-C 库、项目或类都可以通过设置桥接头才能与 Swift 兼容。从技术上讲,这样的桥接将 Objective-C 的头文件转换成 Swift 语言。

    创建一个桥接头需要执行以下操作:

    1.在 Paws 目录添加一个新文件,选择 Paws 工程下的 Paws 目录,单击右键,然后单击「新建文件」。
    2.从「iOS→源」类别中选择Objective-C文件模板并单击「下一步」。
    3.将类命名为「Paws」(或其它你喜欢的名字),然后继续进行并保存文件。出现提示时,单击「是」来配置 Objective-C 桥接头。

    如何用 Parse 和 Swift 搭建一个像 Instagram 那样的应用?

    Xcode 创建两个新文件:Paws.m 和 Paws-Bridging-Header.h。Paws.m 文件没什么用,你可以直接将它删除。在 Paws-Bridging-Header.h 文件中写入以下代码:

    #import <Parse/Parse.h>
    #import <ParseUI/ParseUI.h>
    #import <Bolts/Bolts.h>
    

    看到这里,你不禁会问难道这一大堆工作只是为了建立一个编程项目么?别担心,我们接下来就来搞点有趣的。请记住:Parse 提供一个现成的在线后端,能节省大量时间!

    验证 Parse 是如何工作的

    通过 https://parse.com/apps,返回 Parse 的 Dashboard。将鼠标悬停在你帐户名的右上角,单击帐户,再单击应用键标签最上面一栏。你还可以直接访问 https://parse.com/account/keys。
    确定应用的 Parse 网络服务后,该页面将显示你的应用键。应用键由一串字母数字或字符组成,基本上这就是应用的密码,要注意保密。
    接下来,在 Xcode 中打开文件 AppDelegate.swift。找到应用程序的 didFinishLaunchingWithOptions 方法。
    添加以下代码到方法中,确保它在该方法的首行。完整的是这样:

    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool  
    {
    	Parse.setApplicationId("...", clientKey: "...")
    
    return true  
    }
    

    用 Parse 的应用键分别替换「...」

    1. 第一个,应用 ID
    2. 第二个,客户端密钥

    之后,尝试运行应用程序:

    1.确保选择正确的设备,通过确认PLAY按钮的右上方,确保设备选择,比如 iPhone 或 iPhone6。
    2.然后,点击Play按钮或按下 Command-R 运行程序。

    项目在构造、运行过程中没有错误。一旦运行,你可以看到 iPhone 会出现有一个黑色的窗口,但窗口上却什么都没有——这是因为我们移除了主页面脚本,还没有替换。
    值得高兴的是:你已经成功用 Parse 和 CocoaPods 配置好你的项目了!

    创建表视图控制器

    为了显示出 Paws 应用中的 Cat 图片,我们需要使用一个表视图控制器。这是非常常见的 iOS 接口元件,能在垂直列表中展示各行数据。显而易见的例子就是 iPhone 上的联系人应用中人和号码的垂直列表。在 Objective-C 和 Swift 中,一个表视图控制器本身就是 UITableViewController 类。

    注:陌生的术语类?把它当作原型,也就是你在铁铸件时用的模具。你把铁倒入模具,就出来一个副本。这种复制被称作该类的一个实例。

    Parse 有个很棒的对应叫 ParseUI,是 UI 元素集合,能与 Parse 产品紧密结合。我们即将使用 PFQueryTableViewController 类。它用 Parse 数据扩展 UITableViewController 类的功能。这简直是完美的结合。
    创建一个名为 catstableviewcontroller 的 Swift 新类。在项目浏览器中,右键单击 Paws 目录并选择新文件。从「iOS→源」,选择 Cocoa Touch 类模板。输入以下设置:

    • 类:CatsTableViewController
    • 继承:PFQueryTableViewControlle
    • 语言:Swift
    • 确保创建 XIB 文件处于未选中状态

    如何用 Parse 和 Swift 搭建一个像 Instagram 那样的应用?

    保存文件到 Paws 目录。选择目录时,请确保 Paws 作为目标被选中。

    打开新类文件,可以看到的基本结构:一个名为 viewDidLoad;另一个名为 didReceiveMemoryWarning。需要注意的是,CatsTableViewController 扩展 PFQueryTableViewController,是它的子类。反过来,PFQueryTableViewController 类是 UITableViewController 的扩展,所以我们的表视图控制器将继承所有表视图功能,同时可用 ParseUI 添加代码和功能。

    编码表视图控制器

    首先,我们必须重写类的构造方法来配置基础设置。

    将以下两种方法添加到类的顶部,在文件的第一个大括号之后:

    override init(style: UITableViewStyle, className: String!)  
    {
    	super.init(style: style, className: className)
    
    	self.pullToRefreshEnabled = true 
    	self.paginationEnabled = false  
    	self.objectsPerPage = 25
    
    	self.parseClassName = className  
    }
    
    required init(coder aDecoder:NSCoder)  
    {
    	fatalError("NSCoding not supported")  
    }
    

    你刚添加了两个方法:

    • 指定初始化的 init,这需要两个参数:表视图的风格和我们要使用的 Parse 类名(在这里是 C)
    • 必需的初始化,需要一个参数:NSCoder 的一个实例。现在为止,它的内容是不相关的,坚持做下去,但不要求你创造性地使用该方法。

    在最初的初始化中,完成了下列事项:

    1.当 super.init()调用时,初始化父类 PFQueryTableViewController,从而完成自身初始化。
    2.接着,pullToRefreshEnabled 设置为 true,继承 PFQueryTableViewController 类。特殊变量 self 指当前作用域,为该类的实例。
    3.随后,我们禁用分页,并设置表对象的最大数目为25。
    4.最后,在实例属性 parseClassName 中存储参数 className。
    之后,当我们创建 CatsTableViewController 类的实例,这个构造(或指定初始化)将是表示图控制器被调用和设置的基础。

    用 queryForTable 编码数据检索

    通过 PFQueryTableViewController 实现 Parse 表视图的核心是方法 queryForTable。我们继承该方法时,继承的实际上是 PFQueryTableViewController,所以需要对其进行重写:需要连接表视图控制器到 Parse 数据存储区时,PFQueryTableViewController 会调用它。它从表中查询数据,因此该方法名为 queryForTable。在该方法中,我们可以自定义检索。
    添加此方法到 CatsTableViewController 类(在 viewDidLoad 方法下)。注意这些括号匹配!

    override func queryForTable() -> PFQuery {
        var query:PFQuery = PFQuery(className:self.parseClassName!)
    
        if(objects?.count == 0)
    	{
    	    query.cachePolicy = PFCachePolicy.CacheThenNetwork
        }
    
        query.orderByAscending("name")
    
        return query
    }
    

    来看看这个新方法:

    override func queryForTable() -> PFQuery
    

    其中包含了什么?编写新方法 queryForTable,告知编译器以下事项:

    1.用相同的名字覆盖父类方法(识别标志),使用语句覆盖。
    用 func 和名字声明该方法,queryfortable。
    2.声明 methsignatureod 之间的参数。本例中没有参数。
    3.最后选择「Write→ PFQuery」,返回方法类型。

    在方法内发生了下列变化:

    1.声明一个新变量调用查询,需要一个命名参数的类名,用于实例化构造函数的方法,被分配的 self.parseclassname 值。换句话说,表的类名是 Cat,利用 Cat 实例创建查询。
    2.然后,如果查询是空,在查询中设置 CachePolicy 属性。它的值是连续的 PFCachePolicy.CacheThenNetwork,这意味着该查询,首先在脱机缓存中寻找对象,如果没有找到,它会从在线 Parse 数据存储中下载对象。当表视图终于显示在应用界面上,这时 if 语句便成功执行。
    3.然后,我们以「名称」列为查询对象。

    最后,返回查询结果。(未完待续...)

    敬请持续关注:《如何用 Parse 和 Swift 搭建一个像 Instagram 那样的应用》系列(2)(3).

    原文地址:Building an Instagram-Like App with Parse and Swift

    本文由OneAPM工程师编译 ,想阅读更多技术文章,请访问OneAPM官方技术博客

  • 相关阅读:
    es5预览本地文件、es6练习代码演示案例
    Java实现 LeetCode 838 推多米诺(暴力模拟)
    Java实现 LeetCode 838 推多米诺(暴力模拟)
    Java实现 LeetCode 838 推多米诺(暴力模拟)
    Java实现 LeetCode 837 新21点(DP)
    Java实现 LeetCode 837 新21点(DP)
    Java实现 LeetCode 837 新21点(DP)
    Java实现 LeetCode 836 矩形重叠(暴力)
    Subversion under Linux [Reprint]
    Subversion how[Reprint]
  • 原文地址:https://www.cnblogs.com/oneapm/p/4687219.html
Copyright © 2011-2022 走看看