百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

如何用 Parse 和 Swift 搭建一个像 Instag

itomcoil 2024-12-19 13:42 45 浏览

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

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

本篇教程主要介绍如何创建一个基于 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 只是在线数据库。数据被存储为具有一个名称和多个字段的对象,如电子表格。这样的对象被称为一个类,它的功能是数据结构的蓝图。我们将要使用的类名为 Cat。

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

这样,我们就创建了新的类,接着我们还可以添加一系列的标准字段,如 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 Xcode 程序。

构建 Xcode

打开 Xcode 并创建一个新项目,从开始界面选择「菜单→新建→工程」。

选择类别「iOS→应用模板」的单一视图的应用。在下一屏上输入以下字段:

  • 产品名称:Paws

  • 结构名称:随意

  • 结构标识符:随意,比如com.appcoda

  • 语言:Swift

  • 设备:通用

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

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

用 Cocoapods 将 Parse 库添加到 Xcode 项目

在程序代码中使用 Parse 之前,我们必须将其添加依赖关系。因此我们选择 Cocoapods,它是一个软件包管理器。许多应用项目依赖于第三方库,比如 Parse。CocoaPods 是方便加载库的工具,并确保其实时更新。

在终端执行以下命令安装 Cocoapods。它会要求你输入你的 Mac 用户密码。但不允许包含「$」符号。这标志意味着 shell 命令!

$ sudo gem install cocoapods

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

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

  1. pod‘Parse’,‘~>1.7.1′

  2. pod‘ParseUI’,‘~>1.1.3′

Podfile 会告知 Cocoapods 哪些库是我们需要的。这样的话,Parse 的版本是1.7.1,而ParseUI版本是1.1.3。

现在,关闭 Xcode,并使用终端找到程序项目的根目录。写入终端 cd,然后在 Paws 目录中查找,并将其拖至终端。

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

  1. $ pod install

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

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 桥接头。

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

  1. #import <Parse/Parse.h>

  2. #import <ParseUI/ParseUI.h>

  3. #import <Bolts/Bolts.h>

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

验证 Parse 是如何工作的

通过https://parse.com/apps,返回 Parse 的 Dashboard。将鼠标悬停在你帐户名的右上角,单击帐户,再单击应用键标签最上面一栏。你还可以直接访问https://parse.com/account/keys。

确定应用的 Parse 网络服务后,该页面将显示你的应用键。应用键由一串字母数字或字符组成,基本上这就是应用的密码,要注意保密。

接下来,在 Xcode 中打开文件 AppDelegate.swift。找到应用程序的 didFinishLaunchingWithOptions 方法。

添加以下代码到方法中,确保它在该方法的首行。完整的是这样:

  1. func application(application:UIApplication,didFinishLaunchingWithOptions launchOptions:[NSObject:AnyObject]?)->Bool

  2. {

  3. Parse.setApplicationId("...",clientKey:"...")

  4. returntrue

  5. }

用 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 文件处于未选中状态

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

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

编码表视图控制器

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

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

  1. overrideinit(style:UITableViewStyle,className:String!)

  2. {

  3. super.init(style:style,className:className)

  4. self.pullToRefreshEnabled=true

  5. self.paginationEnabled=false

  6. self.objectsPerPage=25

  7. self.parseClassName=className

  8. }

  9. required init(coder aDecoder:NSCoder)

  10. {

  11. fatalError("NSCoding not supported")

  12. }

你刚添加了两个方法:

  • 指定初始化的 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 方法下)。注意这些括号匹配!

  1. overridefunc queryForTable()->PFQuery{

  2. varquery:PFQuery=PFQuery(className:self.parseClassName!)

  3. if(objects?.count==0)

  4. {

  5. query.cachePolicy=PFCachePolicy.CacheThenNetwork

  6. }

  7. query.orderByAscending("name")

  8. returnquery

  9. }

来看看这个新方法:

  1. overridefunc queryForTable()->PFQuery

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

1.用相同的名字覆盖父类方法(识别标志),使用语句覆盖。

用 func 和名字声明该方法,queryfortable。

2.声明 methsignatureod 之间的参数。本例中没有参数。

3.最后选择「Write→ PFQuery」,返回方法类型。

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

1.声明一个新变量调用查询,需要一个命名参数的类名,用于实例化构造函数的方法,被分配的 self.parseclassname 值。换句话说,表的类名是 Cat,利用 Cat 实例创建查询。

2.然后,如果查询是空,在查询中设置 CachePolicy 属性。它的值是连续的 PFCachePolicy.CacheThenNetwork,这意味着该查询,首先在脱机缓存中寻找对象,如果没有找到,它会从在线 Parse 数据存储中下载对象。当表视图终于显示在应用界面上,这时 if 语句便成功执行。

3.然后,我们以「名称」列为查询对象。

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

原文链接:http://www.gbtags.com/gb/share/5949.htm

相关推荐

《Queendom》宣布冠军!女团MAMAMOO四人激动落泪

网易娱乐11月1日报道据台湾媒体报道,南韩女团竞争回归的生死斗《Queendom》昨(10/31)晚播出大决赛,并以直播方式进行,6组女团、女歌手皆演唱新歌,并加总前三轮的赛前赛、音源成绩与直播现场投...

正确复制、重写别人的代码,不算抄袭

我最近在一篇文章提到,工程师应该怎样避免使用大量的库、包以及其他依赖关系。我建议的另一种方案是,如果你没有达到重用第三方代码的阈值时,那么你就可以自己编写代码。在本文中,我将讨论一个在重用和从头开始编...

HTML DOM tr 对象_html event对象

tr对象tr对象代表了HTML表格的行。HTML文档中出现一个<tr>标签,就会创建一个tr对象。tr对象集合W3C:W3C标签。集合描述W3Ccells返回...

JS 打造动态表格_js如何动态改变表格内容

后台列表页最常见的需求:点击表头排序+一键全选。本文用原生js代码实现零依赖方案,涵盖DOM查询、排序算法、事件代理三大核心技能。效果速览一、核心思路事件入口:为每个<th>绑...

连肝7个晚上,总结了66条计算机网络的知识点

作者|哪吒来源|程序员小灰(ID:chengxuyuanxiaohui)计算机网络知识是面试常考的内容,在实际工作中经常涉及。最近,我总结了66条计算机网络相关的知识点。1、比较http0....

Vue 中 强制组件重新渲染的正确方法

作者:MichaelThiessen译者:前端小智来源:hackernoon有时候,依赖Vue响应方式来更新数据是不够的,相反,我们需要手动重新渲染组件来更新数据。或者,我们可能只想抛开当前的...

为什么100个前端只有1人能说清?浏览器重排/重绘深度解析

面试现场的"致命拷问""你的项目里做过哪些性能优化?能具体讲讲重排和重绘的区别吗?"作为面试官,我在秋招季连续面试过100多位前端候选人,这句提问几乎成了必考题。但令...

HTML DOM 介绍_dom4j html

HTMLDOM(文档对象模型)是一种基于文档的编程接口,它是HTML和XML文档的编程接口。它可以让开发人员通过JavaScript或其他脚本语言来访问和操作HTML和XML文档...

JavaScript 事件——“事件流和事件处理程序”的注意要点

事件流事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流,而NetscapeCommunicator的事件流是事件捕获流。事件冒泡即事件开始时由最具体的元素接收,然后逐级向上传播到较为不...

探秘 Web 水印技术_水印制作网页

作者:fransli,腾讯PCG前端开发工程师Web水印技术在信息安全和版权保护等领域有着广泛的应用,对防止信息泄露或知识产品被侵犯有重要意义。水印根据可见性可分为可见水印和不可见水印(盲水印)...

国外顶流网红为流量拍摄性侵女学生?仅被封杀三月,回归仍爆火

曾经的油管之王,顶流网红DavidDobrik复出了。一切似乎都跟他因和成员灌酒性侵女学生被骂到退网之前一样:住在950万美元的豪宅,开着20万美元的阿斯顿马丁,每条视频都有数百万观看...人们仿佛...

JavaScript 内存泄漏排查方法_js内存泄漏及解决方法

一、概述本文主要介绍了如何通过Devtools的Memory内存工具排查JavaScript内存泄漏问题。先介绍了一些相关概念,说明了Memory内存工具的使用方式,然后介绍了堆快照的...

外贸独立站,网站优化的具体内容_外贸独立站,网站优化的具体内容有哪些

Wordpress网站优化,是通过优化代码、数据库、缓存、CSS/JS等内容,提升网站加载速度、交互性和稳定性。网站加载速度,是Google搜索引擎的第一权重,也是SEO优化的前提。1.优化渲染阻塞。...

这8个CSS工具可以提升编程速度_css用什么编译器

下面为大家推荐的这8个CSS工具,有提供函数的,有提供类的,有提取代码的,还有收集CSS的统计数据的……请花费两分钟的时间看完这篇文章,或许你会找到意外的惊喜,并且为你的编程之路打开了一扇新的大门。1...

vue的理解-vue源码 历史 简介 核心特性 和jquery区别 和 react对比

一、从历史说起Web是WorldWideWeb的简称,中文译为万维网我们可以将它规划成如下的几个时代来进行理解石器时代文明时代工业革命时代百花齐放时代石器时代石器时代指的就是我们的静态网页,可以欣...