[音乐播放] ROGER ZURAWICKI:嗨,我 名字是罗杰Zurawicki, 我将涵盖 在CS50流星研讨会。 流星是一个新的框架 致力于新种类的网络的, 不是PHP发出请求 来回种类 网络,我们在PHPP集看到, 但更多的动态JavaScript 份纤维网的。 流星的事情可以做 包括现场更新 并立即沟通 同一个网站的用户之间。 对于本次研讨会,我们有 代码托管在GitHub上我。 你可以去这个网址并下载。 如果你知道如何使用Git的, 您可以克隆存储库。 如果你不知道如何使用 Git的或没有使用GitHub上, 这是完全没问题。 我真的会迅速告诉你 我们如何可以去GitHub上, 并有一个选项 下载一个ZIP就在那里。 一旦你下载这个目录,你 可以开始使用我们的代码打。 有关流星的更多信息 可以在meteor.com找到。 在研讨会的文件夹,其实我 有一些流星的项目,我们可以使用。 一个我们在文件夹我们 研讨会项目是待办事项应用程序。 所以,如果我走了进去我, 已安装流星。 因此,要运行它,我只需要键入 流星,流星和将安装。 正如你所看到的,我们必须要 确保我们安装流星。 所以我只是要 运行一次 确保流星 正确安装。 虽然我有流星 安装,我可以告诉你 流星网站的一些现场演示 去住,现在在互联网上。 我有我们的应用程序的演示。 您可以在以下网址访问它。 这是做应用程序,我们 在我们的讲座目录。 该网址是 rozu-rabbit.meteor.com。 你会看到流星居然会 承载您的流星项目是免费的。 并在研讨会结束时, 你就可以做到这一点。 这是一个待办事项应用程序。 你可以登录,创建 帐户,并添加任务。 您可以创建一个帐户,像这样。 而现在,一旦你有一个 帐户,您可以添加任务。 例如,其中一项任务我 可能需要去拿起我的衣服。 如果你对这个 网站在线,你会 其实看到这个任务 您的计算机实时的。 我可以告诉你一个快速演示 这种通过打开rozu兔 在相同的URL另一个选项卡。 而且我们看到,同样的数据出现。 我们也可以在运行它 不同的浏览器。 说我在Safari浏览器中运行它。 这样,我们没有登录。 因此,我们有相同的流星 应用程序,一旦它加载, 我们将看到同样的数据 我们做的第一个。 正如你所看到的,我不记录在这里了。 并且当观众的检查数据, 它更新的所有浏览器 同时。 这是真的1 很酷的功能有关流星。 几乎没有工作,你 有一个实时更新的应用程序 这对所有的变化 您的设备一次。 如果我在这里选中的复选框 在我做的名单,我们都会有, 我的其他的Chrome浏览器, 该项目勾掉。 而这种情况在瞬间。 行。 所以它看起来像流星 安装已准备就绪。 所以,现在让我们回到 待办事项应用程序在本地运行此。 如果你有一个流星的项目,你可以 只是用命令流星运行它。 一旦你这样做,流星 会做一些准备工作 以确保所有的 你的代码是在检查。 然后它会告诉你, 项目准备送达。 您可能需要让你的 防火墙,如果你的电脑,你的块。 那么,什么流星告诉我 现在的问题是,在这个网站 本地到我的电脑,我可以看到 这是什么流星项目。 需要注意的是,现在,我的应用程序是 不能访问到互联网。 我们将讨论如何把你的流星 应用到直播现场有点以后。 所以我只是要复制此 URL现在进入谷歌Chrome浏览器。 这就是做 从这个例子列出。 你可以看到他们实施 一些更多的功能在这里。 我们有不同的选项卡中,我们 具有相同的帐户功能, 我们可以添加新的列表。 现在,一个真正的 关于流星很酷的功能 是,这不仅可以 在您的网页浏览器中, 但你也可以创建 原生iPhone和Android 通过一个名为PhoneGap的应用程序的工具。 因此,一些项目会 预先配置为运行 在iOS上,这样的待办事项应用程序。 因此,所有我需要做的iOS中运行 类型是流星,运行,然后的iOS。 当我这样做,流星 将再次准备包。 然后,一旦它准备好,它会 加载在我的命令的iOS模拟器。 注意你只能运行iOS应用 如果你有一台Mac电脑。 你可以运行你的应用程序 Android的所有平台上。 所以,现在你可以看到我的iPhone 模拟器来到了我的屏幕上。 并在短短的一瞬间, 它会加载的应用程序。 如果我们只是有点 小以适应屏幕上, 我们可以看到,我们有我们的iPhone应用程序。 而只是让我们不这样做 感到困惑,让我们 相信大家都在同一个 网站,本地主机3000。 所以这里有一个例子 流星的应用程序我有, 在待办事项应用程序,无论是运行 电话和网络浏览器。 当我改变的东西 在网络浏览器, 立刻去了电话。 我可以删除手机上的东西, 和它的变化,在网络浏览器。 现在,常以创建本地 手机应用程序适用于iOS或Android, 你需要知道Java或 客观C.技术流星用途 要允许JavaScript作为运行 您的应用程序被称为PhoneGap的。 你有什么本质上的应用程序 是一个网页浏览器。 和流星处理所有 所涉及的棘手的部分 用于使该Web浏览器来 你的iPhone或Android设备。 你可以看到, 用户界面是光滑的, 和它的外观和感觉很 很像一个本机应用程序。 请注意,如果我去家里 屏幕现在,我也得到一个图标。 这并不像一个网站 你会发现在Safari浏览器。 这是它自己的应用程序。 您可以安装和 删除它,如果你愿意的话。 我们可以简单地告诉你什么码 对于这种待办事项应用程序看起来像。 如果你看一下在待办事项文件夹中, 你会看到有很多的文件夹。 但过度的过程中 在研讨会中,我们将 了解每个文件夹的用途。 让我们去到终端,所以我们 可以看到文件的好一点。 我要按下Control C停止服务器, 现在我回到了待办事项应用程序。 我有不同的文件夹位置,如 客户端文件夹,服务器文件夹。 这些文件夹只是意味着 一切都在客户端文件夹 在Web浏览器中被执行。 在服务器文件夹中的一切 在服务器上被执行。 我想点 的是,我们有什么 当我们有我们的电话和运行 我们的网络浏览器,这些都是客户。 但是,什么是在运行中 终端,这就是服务器。 我们还有其他的文件夹,如 lib中,这是库代码, 喜欢你的帮手 功能,您可以 使用客户端和服务器上。 然后你有一个公共 文件夹和资源 需要获取文件夹 您的图像和其他CSS加载。 如果您已经安装了流星,我们将 继续教程流星。 你可以去这个网址, meteor.com/install, 获取命令行,我 表明您安装流星。 我们将通过第一 几个步骤,以获得更好 感觉如何安装流星。 但首先,我认为这是非常重要的 我们回顾了JavaScript的一点点。 向您展示如何一些例子 我们的C知识,可以翻译 JavaScript的,我已经 创建了几个例子。 它们是在js目录。 因此,如果在研讨会文件夹,你 你看,有一个名为JS的文件夹。 并且在这里,我们有几个例子。 让我们打开了第一 例如,看到非常快。 我们看到的是你的标准 世界您好命令。 您会注意到在C中,你 有不少行。 而作为CS50的学生都知道, 我们需要一个主要功能, 我们必须包括标准 I / O,以调用printf库。 让我们来看看如何JavaScript的比较。 我要开ex1.js. 注释掉是什么 C代码会是什么样子, 和下方的线是所有 需要在节点中运行。 你并不需要一个main函数,你 不需要包括任何文件, 你不需要返回。 您只要致电的console.log。 这是你的printf的等价物。 它采用相同的 争论的printf会。 而为了运行它, 而不是运行使EX1, 你只需要调用节点ex1.js. 你写的节点,然后 该文件,它就会被运行。 它不会编译。 JavaScript是一种解释型语言。 所以它并不需要是 它的运行之前编译。 如果我想跑ex1.c中, 我要让它首先, 然后我可以运行可执行文件 以得到相同的输出。 让我们迅速覆盖了一些 其他JavaScript概念。 让我们来看看例子2。 在ex2.js,在ex2.c,我们可以 看到我们有一些代码。 让我赶快去 一个更好的文本编辑器 这将显示这些 新的生产线会好一点。 行。 在这里,我们有例如2.C. 在这里,我们有不同类型的 我们要打印出来。 正如我们所知,printf的需要 不同的参数百分比 访问不同的数据片段。 如果我们想打印 一个字符串,我们称之为%S。 如果我们要调用一个浮动 点编号,我们叫做%F。 有没有简单的方法来调用 其真或假值布尔值。 但是如果你使用%D,就可以得到 0或1的虚假和真实的。 JavaScript是我们的一个位更好。 在JavaScript中,让我们来看看几个 差异,我们在这个文件中。 首先,您会注意到,在C,我们必须 初始化一个类型的每个变量。 S是一个char明星。 这是一个字符串,它 不能是任何其它类型。 N是一个浮动。 B是一个布尔值。 但在JavaScript中, 也有动态的类型。 这意味着,你不这样做 需要告诉的JavaScript 什么类型的变量会。 你刚才说VAR的变量名 的变量,然后将其值的。 所以无功真的可以什么。 它可以是一个字符串。 它可以是一个浮点数。 它可以是一个字符。 它可以是一个布尔值。 和控制台日志作品有点不同。 如果你要打印 一个数字,你叫%D。 但大多数值可以 打印字符串就好了。 让我们在节点运行此 看看会发生什么。 我可以打电话节点ex2.js, 我们得到的printf 与价值观CS50,N为 浮点数, 然后B作为布尔 转换为字符串真。 怎么样,如果我们做了榜样2.C? 好了,我们还是有一定的 更多的烦恼与printf的。 注意,浮点 一些必须正确格式化, 和布尔不能简单 显示为真或假。 行。 现在,让我们来看看例子3。 在例3中,我们展示 你将如何使用for循环。 事实上,这是非常简单的。 一对好东西 JavaScript是它是基于C的。 这意味着,你的很多 代码看起来非常相似 感觉大同小异。 在fo​​r循环中,唯一 已真的在这里改变 是不是int我,我们有变种我。 我们仍然可以将它的价值 零,检查它的不足五, 并加一 与++运算符。 我们呼吁我的console.log,而且 将打印我们许多与每一行。 让我们快速运行它真的 看看它输出。 我们得到每行一个新的号码。 另一件事,我想你 用的console.log注意 是你没有写 反斜杠n表示新的生产线。 CONSOLE.LOG将打印 一切都在自己的路线。 这是一个不错的功能 的JavaScript给了我们。 现在,让我们打开了榜样4。 在例4,先在C, 我们要求的一些功能。 请注意,我们要声明 功能之前,我们使用他们在主。 如果我们有主要的第一和 再加入再高,制作, 铿锵,或将​​GCC 给我们一个错误说 它不知道什么是高。 它不知道什么补充的是。 因此,在C,你必须要挑剔 为了在你打电话的功能。 让我们来看看你怎么能 在JavaScript中做到这一点。 我们有不同的文件,因为有 有几种不同的方式来做到这一点。 一种方法是非常 直接翻译。 因为在C函数 返回类型和JavaScript 并不知道也不关心 关于什么类型的返回, 你不写一个类型。 相反,你只需要 写功能, 一切是相当 很多以前一样。 当你有一个变量,像 加上,我们只需要编写x和y。 我们不需要说x是一个int。 我们不需要说y是一个int。 我们返回与相同的语法。 对于高,我们与它声明 函数而不是无效。 请注意,无论是 它是无效或不空, 它仍然是所有相同的功能。 我们根本不把 在括号什么, 它看起来非常像C代码。 以下,我们可以在下面调用它。 如果我们看一下例子4b中,我们注意到 我已经改变了一些东西。 我唯一​​改变的 真的,虽然是订单。 我们有相同的 的功能,但现在他们 他们在使用后宣布 的console.log和高上线18,19。 如果您在C中这样做, 使会抛出一个错误。 在这里,这工作得很好。 我可以展示给你 调用节点上的4B的例子。 我们可以调用函数的另一种方式 是通过保存作为变量。 就像我说的,一个变量 可以具有任何类型。 一种类型的可变 可以有一个函数。 所以,如果你看一下例子 4C,我已经改变了 这里是VAR增加而不是函数添加。 现在等于增加功能。 此功能在这里是匿名的。 它没有名字,所以它只是 功能,然后在括号中。 之后,该语法 不改变,但你 确实要记住, 你有你的变量 存储所述函数到添加,和一个 那你存储成高变量。 由于添加高现在变量 而不是功能,就有点变味了。 这是我看到了一个共同的错误 很多人的JavaScript的, 有什么东西要牢记。 当我运行这一点,让我们看看会发生什么。 我得到一个错误。 它说未定义在这一点上。 所以它说它 不知道什么补充的是。 因为现在加的是不是一个 功能中,添加是一个变量。 而你还没有真正给 添加一个值然而,当你使用它。 这给我们带来了例如4D,如果在那里 要使用变量的函数, 你只需要确保他们 获得的价值,他们正在使用之前。 让我们继续以例五则。 在这里,我们谈论 在结构C.在C,结构 有这样的固定结构,它们 因为你必须声明它们 你使用它之前,和 你说我有一个学生, 和每一个学生都有完全相同 一个名字,一年一种性别。 它有让所有的人。 它不能有任何其他的价值, 并且他们必须是特定类型。 然后,我们可以初始化 结构在这个漂亮的语法 因为它知道的顺序。 所以它知道罗杰是一个名字。 它知道,2016年是一个 年和M是性别 因为我们告诉它这 列表是一个结构的学生。 然后你就可以打印 它,访问s.name。 让我们来看看我们将如何 将其转换为JavaScript。 请注意,s是现在 可变的,而且也没有类型。 这只是一个变种了。 因为它并不重要,如果这件事 这个变量的类型是一个指针, 它是一个结构,或其他任何东西。 我们有一个稍微不同的语法。 这个语法是对象语法。 你可能已经看到它在JSON。 JSON实际上代表的 JavaScript对象符号。 这是你如何定义 在JavaScript对象。 我们有一个密钥,它是 值,如姓名。 我们给它的值 结肠的另一侧。 还有一件事要记住的就是你 不需要有一个名字和一个年 和性别的对象。 一个对象可以没有价值。 它可以有很多,只要你愿意。 我们可以在刚刚使用这些对象 同样的方法,我们会用一个结构,s.name。 我们可以快速运行真的 这样做节点例如5.c. 我们不能真正运行节点C文件。 它不知道什么C是。 它只知道的JavaScript。 当我们运行ex5.js,我们得到 的价值,这是我们的预期。 让我们转移到例如6。 在这里,我只想谈一点 更多一点关于JavaScript数组 因为他们是有点 比你有什么不同 用于在C数组的记谱, 不与支架像C, 用大括号,括号内却。 你可以有一个空数组, 喜欢改编四线。 你可以有数组 有多个值。 你访问它们 只是在C以同样的方式 截至七号线,一切 似乎很简单。 一个微小的差别就在这里,在第10行。 途中你得到的长度 阵列仅仅是通过调用.length。 一个数组其实是可以 就像一个对象处理, 而这个对象有一个length属性 你打电话来获得它的长度。 注意,这是不同的 在C,因为在C中你 必须知道的长度 提前你的对象。 有关阵列使另一个好处 是,你可以有不同的类型。 如果您在C数组,有 是一个特定的值的阵列, 无论是结构指针 或浮或[听不清]。 在这里,你可以有不同的价值观。 我第一次有一个浮点数, 再一个布尔值,然后又整数。 而实际上,他们可以改变的类型了。 看16行。 阵列二是被改变 数,为整数,为字符串。 有关阵列的另一个好处是这里 在第19行,它们具有无限的大小。 你可以说我想要的百 元件为字符串合法的。 而这似乎并没有使 有道理的,因为该数组只 有空间三个要素, 所以到底应该是两个。 但是,当你做到这一点,让我们 看到三个变成什么阵。 我们将很快运行这个 与节点例如six.js. 我们得到这个很长 数组,会发生什么 在我们最初的几个要素 然后一堆空白 直到我们得到我们的字符串。 JavaScript的填写 数组作为它的需要。 让我们终于进入我们的最后一个例子。 在这里,我们有一个列表 不同的学生。 我想谈一点 一些好的方面位 对在JavaScript中循环。 在C语言中,for循环是一种限制。 他们有一个固定的结构,在那里你 有一个变量,你有一个条件, 然后你做什么 在循环的结束。 当然还有这部作品在JavaScript中, 正如我们在前面的例子中看到的。 但我们也有更好的方法 对这样做在JavaScript中。 这就是所谓的foreach循环。 对不起,让我们回到 例7这里。 我们也可以说部分是一个列表。 所以给我的每i或 各项指标在该列表中。 然后,我们可以得到学生 通过只调用了我部分。 因此,所有的设置我的代码 等于零,并确保我 小于长度和 每次添加一个到我,这是 照顾你,而 很好地与这个foreach循环。 不仅foreach循环 在列表或阵列工作, 他们还工作的对象, 这也是很好的。 你可以得到的名称 每个属性,只需服用 字典或一个对象,像学生, 然后只是说给我的每一个关键。 一个关键是这些 性质,名称或房子。 那么什么会发生在这里的是, 我们打​​印出第一名称,然后 每个学生的家。 我可以在节点运行此 真的很快给你看。 我们得到的第一个C风格的for循环,其中 我们得到的每一个对象被打印出来。 然后,我们有JavaScript的 风格,在那里你可以 打印出的每个关键 和独立的价值。 行。 现在,我们已经介绍了Node.js的,我觉得 我们已经准备好开始使用流星。 就像我说的,流星的表现非常出色 中写一些现成的例子 对你,你可以探索通过 本教程或研讨会文件夹。 但在这里,我想 开始从头越。 让我们创建一个简单的做​​应用。 这是什么样的的作为碱的 做应用程序,我刚才向您展示的。 在本教程中, 会看到有 命令流星创建到 创建一个新的流星的项目。 你需要调用这个以 运行流星的项目,因为它 将运行命令 创建流星 为您的项目文件的必要。 如果你去到终端,我们可以 进入所谓的第一步的文件夹。 并加强人会对应 在本教程的第一步。 注意事项有文件夹,一步 1,步骤2,一路5。 而且每一个对应 在本教程中的一个步骤。 我要打开它 在这里我的文本编辑器 所以我们可以看到一点点被创造的。 我们注意到,有 有四个主要部分。 有一个流星目录,.meteor。 那你平时 不需要触摸。 流星需要照顾 该文件夹,它只是 确保你的 项目将正常工作。 我们也有三个文件,HTML文件, JavaScript文件和CSS文件。 让我们先开始与HTML文件。 乍一看,这看起来 象正常的HTML文档。 但是请注意,有 有一些不同之处。 之一,这是不实际 一个完整的HTML文档。 我们缺少的HTML标签。 这是正常的。 在流星,你不期望 创造这些HTML标签。 这样做了你。 你想,如果你begin-- 要创建一个网站, 你只需要启动 用头标签, 定义,然后 定义body标签。 但是,如果你在这个通知 HTML文件中,我们有一个新的标签。 我们有模板标签。 这是不正常的HTML。 这是HTML的一个特殊版本 该流星向您提供。 这就是所谓的空间吧。 您可以定义模板少 模块,有点像辅助功能, 在C或JavaScript代码。 这个模板会 有一个叫任务的名称。 你可以看到这里就行 13,你可以调用这些模板。 什么流星会做的就是 填写这些任务给你。 你可能会注意到的另一件事是一个 有点不同的是这每一个功能。 每次将变量 种任务,并通过它去 在fo​​reach循环我们 例如7中看到的。 这个每个人都可以拿一本字典 或列表,对象或列表, 它会只是去通过所有的 就像一个foreach循环值会。 因此,如果我们有一大堆的任务,这 将调用每个任务的模板。 让我们运行的流星项目 刚看到这种情况的发生。 我运行流星项目 只是流星或流星运行。 现在流星只是需要 迅速准备项目, 启动数据库如必要, 然后在本地发布的应用程序。 我们可以到我们的网页浏览器了。 我们会看到,我们 有一个很简单的应用程序。 所以,我们看到出现了竟是 在步骤1,步骤1的文件。 让我们继续前进到第二步,只是因为 我认为它会达到同样的目的。 我只是要改变 到步骤2的目录 并再次运行流星,所以我们可以看到 模板,我们只是工作与。 是的,一个问题吗? 观众:如果我们要得到许可 否认是that--什么是它 要求是什么? ROGER ZURAWICKI:如果 你正在运行的流星跑, 你有权限 否认,某些文件 可能没有合适的权限集。 所以,你必须要检查的地方 权限关闭。 他们可以被关闭 您流星的项目, 或者也可以在离开 流星文件本身。 听众:如果我下载刚才 从GitHub上,那么我该怎么办 [听不清]? ROGER ZURAWICKI:如果你想 以确保您可以访问它, 还有,你可以运行一个命令。 让我赶紧写出来 所以其他人可以看到它。 我要在这里打开一个新标签 并进入我的研讨会文件夹。 CHMOD就是命令 更改权限, 你可以说r表示做 递归地为每个文件。 和权限,你可以尝试0755 为确保您有充分的机会, 和其他人可以阅读。 如果你只是运行 这个命令,它会令 确保权限是在 检查整个目录。 运行LS-L可以告诉你的 更详细的权限。 这看起来OK。 什么是最重要的 你有三个 RWX中的所有文件 研讨会目录。 这是否解决了问题吗? 观众:它说失踪 操作性[听不清]。 [听不清] ROGER ZURAWICKI:您 要确保你 有一个点在你的命令的末尾。 观众:[听不清]。 ROGER ZURAWICKI:好的。 让我们赶紧回去 本地主机,应用程序,我们有。 你会看到,我们有一个 这里几个任务,符合市场预期。 我们有一大堆的CSS,这 你不必担心。 流星教程 只是给这个给你 让你的待办事项清单一看 位比普通的HTML更好。 我们有JavaScript文件,其中 我会更详细一点后, 但它只是提供了这些任务。 这是任务之一。 这是任务二。 这是任务三种。 因此,这是该数据流星的获得。 凉爽的事情之一是流星 该变化可以自动发生。 如果我想改变 第一个任务的名称, 所以它会说这是不是 任务之一,我保存它, 然后当我去到Web 浏览器,你可以刷新它, 它会自动说 这不是任务之一。 你可以做同样的事情 在这些文件中。 做出改变,而不是做 列表中,我将是我做的名单。 还有一件事你刚才注意到, 我甚至没有刷新。 令人耳目一新的想法是怎么样 的帮你解决了与流星。 当它检测到文件的变化, 它会加载改变你。 这适用于所有的文件,无论是 它的HTML,CSS或JavaScript。 给大家展示一下这个程序会是什么样 就像没有CSS,我可以将其删除所有。 而当它重新加载,你现在有 一个没有好看的待办事项清单。 让我们把这些内容背。 ,肯定不够, 刷新,我们的CSS又回来了。 大。 现在,我们可以用教程继续前进。 让我们来谈谈第二步,模板。 这就是我们刚才看到 与不同的任务。 流星会向你解释什么 模板和如何逻辑的工作。 但是,让我们只是看代码 看看我们是否能有意义出来。 在非常简单的应用程序, 像我们在简单 这样做,第一步,第二步,一步 3,第四步,第五步, 我们没有任何文件夹。 我们没有足够的服务器 文件夹中我提到。 我们没有客户端 提到该文件夹​​。 所以流星将运行中的所有文件。 它会在运行它既 客户端,服务器上。 如果你想你的JavaScript的部分 代码只在客户端上运行, 他们需要确保你有 if语句,有点像什么 我们有我们的JavaScript文件在这里。 所以流星,只有当 它的客户端,那么我 要定义一个模板 所谓辅助性任务。 这是什么代码真的 所做的就是它说有 一个叫做对象模板 该流星提供。 我们要添加一个帮手。 佣工这些任务, 这些东西就像任务。 你会看到,如果我们回到 HTML文件,我们叫上各自的任务。 任务未在HTML中定义。 它是在JavaScript中定义的。 和流星需要知道哪些任务是 当我们进入此处的JavaScript。 任务是这样的帮手。 帮手,你能想到的 它作为模板变量。 又是什么任务呢? 嗯,它返回值的列表。 因为它是一个列表, 我们可以在它调用每个。 所以这就是为什么我们呼吁每一个任务上。 现在我们有任务。 是什么任务呢? 那么,它有这个箭头 在此之后的花括号。 该装置的任务是一个模板。 这不是一个帮手, 像我们刚才看到的。 这是我们定义的模板。 哪里有我们定义它? 我们定义它下面的就在这里。 所有这些模板所做的是使 列表项,并且调用文本。 现在,文本似乎是一个 帮手,但我会告诉你 这其实还是 任务的数据成员。 当你调用每一个,它进入 数据结构一点点。 像foreach循环,现在只是看起来 在我们的对象的第一个元素。 我们看到,文字 这里定义我们的对象。 因此,流星是聪明,知道 我们谈论这段文字, 不叫文字的帮手。 它只是让这种价值 文字在这里,它显示为HTML, 这就是如何将数据变 从JavaScript来的HTML。 上移动,虽然,在本实施例 我们硬编码这些值。 流星做两真 好东西给我们。 除了现场的刷新,我们 结果显示,它也负责管理我们的数据库。 如果你有使用PHP工作, 你不得不配置的phpMyAdmin。 你必须确保你的 表都在检查。 你不得不做大量的工作,使 确保您的数据格式正确, 和PHP可以与它进行通信。 现在,流星采用了新的范例。 这是一个更现代的方式 处理的数据库。 这是一个名为MongoDB的技术。 就像在JavaScript中,我们看到了它 没有关系是什么类型的数据了。 一切都是一个变种。 这不是一个charstar。 这不是一个int。 这不是一个结构。 这只是这个变种,该变种。 MongoDB的作品种方式相同。 你不必定义你的表。 你不必多说表 有一个名字,它有一个int。 它有,我不知道,一 元,这是一个小数。 这只是这些JavaScript对象, 所有这些增值经销商,从根本上。 这是一个真正强大 办法原型您的应用程序。 这就是为什么流星 利用了这一优势。 如果我们去到第三步, 让我们来看看发生了什么变化。 如果我们看一下待办事项HTML,没有太大的。 CSS并没有任何变化。 但小的变化,我们在看到HTML 是我们改变了任务的定义。 任务现在是一个函数。 这意味着,每 一次,我们想要得到的任务, 我们要运行这个功能。 它不返回 函数为一个值。 流星是明智的实际运行 函数来看看我们出去。 并返回这个东西叫做任务。 我们已经在行一个定义的任务, 这是一个蒙戈集合。 蒙戈是指 数据库流星使用, 而这个新的意思只是让我们做 一个新的集合,称之为任务。 在MySQL中,这将相当于 找表称为任务。 蒙戈具有收藏,不表。 因此,这只是看起来的任务。 现在,模板中我们 助手在模板中,所有的 我们要做的,让所有的 任务是此功能,找到 而这个空括号。 这是更特别蒙戈语法。 有大量的 在线文档如何 你可以高效, 真正有用的蒙戈查询。 但是,这样的事情是好的 足以让刚刚找到的所有数据。 现在,其中一个问题,你可能会看到 是,我们从来没有真正添加数据。 所以会发生什么,当我们 实际运行第三步? 让我们快速进入 步骤3和运行流星。 请注意,我有另外的流星 项目运行别的地方, 所以流星不喜欢这一点。 我只是要迅速接近 其他流星与控制C, 进入第三步, 并再次运行流星。 请注意它的开始 MongoDB的,因为MongoDB的 是每一个流星的项目的一部分。 所以说,我的申请有错误。 这是一个不错的功能流星了。 它确保您的 HTML是很好的验证。 让我们赶紧来看看这可能是为什么。 看来我得小心 抄错HTML代码。 如果我保存它,现在,流星 自动重启服务器, 现在的应用程序正在运行预期。 请注意,以解决这个问题,你可以运行 步骤2相同的HTML文件, 它复制到第三步。 我们可以回到我们的本地主机。 现在我们看到,我们有我们做的名单。 伟大的,但它是空的。 我们实际上没有任何 在我们的数据库中蒙哥任务。 因此,让我们来谈谈一个 几个方面,我们可以做到这一点。 如果我们回到码头,我们 可以将其关闭并运行流星蒙戈。 如果你熟悉 与流星是如何工作的, 这实际上给你访问 充分的MongoDB的流星。 请注意,您必须运行 第一次流星这个工作。 所以,如果我跑这一个新的标签,我 可以回到同一目录中。 现在流星工作得很好。 这是一个提示。 让我有点 更大,所以我们可以看到。 这看起来比有点不同 你可能会用于向您 并不真正需要使用蒙戈。 我的整点这里 这样您就可以使用JavaScript。 但是,如果你很好奇, 蒙戈API不 使用SQL,结构化查询语言。 它使用自己的语言 看起来很像的JavaScript。 很快,我们就可以找到 经由db.tasks表。 它在告诉我 事实证明,如果我们运行发现, 一种类似于我们曾与 流星,我们可以加载所有的元素。 问题是,我们不 实际上有定义的任何任务。 所以不能让他们。 我们可以插入,但。 因此,我们可以运行插入 使用命令插入。 我们只是给它 一个对象,我们只是 确保格式是我们所期望的。 如果我们看第二步, 我们看到,每一个任务 为一个对象与文本 作为密钥和任何 你做的项目是作为一个变量。 所以,我们可以做的东西在这里。 我们可以把它插入任务 叫我来自蒙戈。 我们按Enter键,它运行。 我们可以再次运行发现,我们 看到,有一个对象在这里。 蒙戈它分配一个ID,你 并不需要担心。 数据什么是重要的是你是 你把,是你出的数据。 让我们回到我们的网站, 哎,我们的任务加载。 你可以看到, 由于流星是非常聪明的 始终刷新你,我 没有触及页面。 它会自动加载。 让我们来运行一些代码 虽然JavaScript的做到这一点。 像我们有节点在后面 最终执行了JavaScript的, 我们也可以运行JavaScript 直接在我们的浏览器。 您可以通过一个功能做到这一点 所谓的检查元素。 如果我右键点击一个 页面的部分中, 还有一个选项 所谓的检查元素。 如果你正在运行的 浏览器Safari浏览器一样,你 可能需要启用您的开发 之前,你的工具得到这个功能。 我们关心的是控制台。 所以,我们只是去了 控制台在底部。 现在,我们可以运行任何JavaScript 这里,如JavaScript的 文件显示,我在js的例子。 但是,现在让我们来看看任务。 我们可以运行我们的命令。 并希望我能做出 它有点大,所以我们都可以看到。 如果我们运行tasks.find,你会 看,这是完全一样的代码 该JavaScript文件的用途 在第三步,这task.find。 我们可以运行同样的事情, 现在我们得到了一些奇怪的东西。 我们如何真正得到的数据? 好了,我们要运行这个 命令称取。 这对于调试是非常有用的。 你这里是什么 一个光标,而这是 一个很好的方式,有流星 优化取数据。 此光标拥有所有的功能 现场更新和刷新页面 当事情发生了变化。 但它不会让我们的数据。 我们可以通过获取数据。 你看,我们有一个对象, 这就像我们曾在蒙戈, 有ID和文字,我们把英寸 那么,如何才能插入流星的项目? 好了,我们只是有任务。 然后我们就可以运行 同样的插入命令, 给一个字典或对象 具有相同的格式,文本 然后我来自控制台。 拿上面看看,因为当我 做到这一点,它显示了在网站上 自动。 注意,你可以把任何东西 你想在这些项目。 它不必 有一个固定的结构。 我可以有一个等于所述 排名第三和b等于假。 而这一切的作品。 我甚至可以选择不 包括所有的文本。 这仅仅是不推荐 但因为那时流星 不知道要显示的内容。 但是在每一种情况下,我们 获得一个ID,这是 可以使用对象的ID。 随着我们继续 第四步和第五步, 本教程将告诉你如何说 您可以通过创建UI元素 你知道的HTML 创建不同的任务。 让我们来看看第四步真的很快。 我们会看到,我们增加 一节有关的事件。 模板可以具有 帮手,这让我们的数据。 但它也可以称之为事件。 而这正是东西 变得很有用,因为事件 当您点击会发生什么 在您的网站不同的事情。 在这里,我们的代码是告诉 我们添加这个事件。 添加它,当你已经提交 一些与一流的新任务。 你在这里是一个CSS选择器。 因此,这只是寻找一个HTML 元素具有一流的新任务。 它看起来的事件,如提交。 其他活动包括: 点击,悬停,双击, 类似于您在普通HTML搞定。 现在你给它在这里是一个函数。 你可以有你 在该功能的代码。 这个功能是什么最终得到 所谓当您提交这项新任务。 让我们来看看HTML只是让我们 明白这是什么新的任务。 我们在这里增加了一个表格 与一流的新任务。 并且它有一个输入端,取文本。 而这正是我们 将增加我们的新任务。 让我们在运行第四步 网站上看到是什么样子。 我们可以退出先出 在MongoDB中,我们有 从我们以往的 例如与控制C. 让我们把它变成 步骤4目录。 我们将再次运行流星 启动服务器。 不幸的是,我有流星 在另一个终端上运行。 所以我只是要 确保这一关。 让我们离开这一点,并改变 第四部分,第四步。 好不好。 现在我们的流星代码运行。 你可以看到,它更新,而不 我们甚至无需刷新页面。 现在这里有什么改变的是 我们没有任何任务, 但我们有一个表格在这里,这 文本框,增加我们的新任务。 我们可以在这里键入我们的任务。 我来自HTML页面。 当我按下Enter键,它得到了提交。 我们可以看到发生了什么的 由JavaScript代码中定义。 这是什么功能做的是 从形式上采取文字, 然后就被称为tasks.insert, 像我们一样在控制台中。 他们也选择了加createdAt日期。 这是你会如何 指定当前时刻。 之后,它通过使清除的形式 确保值是空字符串。 然后调用返回false来 确保没有什么事情发生。 当您从返回false 活动的形式,即停止执行。 说形式有一个动作, 就像提交到PHP页面。 如果你还没有回来 假的,你会返回true。 这将最终使这一请求。 假拦截它, 它停在那里。 所以这是关于一个小演示 流星是如何工作的,我们已经 一直跟随本教程一段时间。 你可以请随时 自由地继续这样做。 有丰富的资源, 和教程实际上只是 很不错的关于解释 这是怎么回事。 我现在要告诉你,在 我们已经离开了几分钟, 什么是一些 流星冷却器的特点, 什么是一些 更有用的包。 一个关于流星的伟大的事情 是,你有一个包系统。 您可以轻松地将代码 许多成千上万的开发者 采写全球 到流星的项目。 这方面的一个例子是,你可能 做的教程,其中第九步 您要添加帐户 您流星的项目。 如果我们有一个CS50 PHP 项目中,我们将有 依靠框架 或者我们自己的代码,以使 确保我们安全地处理 密码和用户名 并存储在数据库 和所有的这一点。 原来,流星有一些 包为你做的, 而做到这一点很容易。 我们所能做的就是添加了几包。 因此,让我们做正确的 现在在我们的控制台。 我要退出该项目, 现在进入简单待办事项。 现在,简单待办事项是 该项目你 将正在做后 与步骤11或步骤12中, 在本教程结束。 让我们再看一下,看看 有哪些不同的特点,我们有。 我们只是要确保它的运行。 有时,它需要一段时间 刷新,但在这里它是。 我们有选择隐藏 完成任务,我们可以登录。 这是与完成 流星包。 这很棒。 现在,我们已经用户名 和密码请登录。 但是,如果我们想添加 另一种登录机制? 比方说,我想记录 在我的流星账户。 我要运行流星加,而这 是语法加包。 我可以说的帐户,并accounts.meteor。 这将现在发现 包并加载它。 你可以看到,我没有 找到了合适的包名。 那么,你如何了解包? 那么有一个伟大的网站,做 可用的流星人, 所谓atmospherejs.com。 Atmospherejs,一个字,点 COM,是一个伟大的库 寻找所有的流星 包存储库中。 我可以搜索帐户,然后 它会告诉我所有的东西有关, 所有包与该帐户的名称。 而加载,我们可以尝试 加入一些其他的包。 也许流星包不工作 现在,我可以添加Facebook的。 我可以添加的帐户,然后 再次运行流星项目。 一旦开始,让我们来看看 什么网站上发生变化。 您可以see--我可能 要在这里刷新。 我有一个按钮, 配置Facebook登录。 在这里,我把所有 说明流星 已经为你准备的 建立一个Facebook应用程序。 你可以使用 信息的添加您的ID。 一旦这样做了,你就会有 Facebook登录在你的应用程序工作。 我只是要得到 一个应用程序ID和秘密, 只是为了显示你如何可能会奏效。 您将需要一个Facebook帐户 使用Facebook开发者选项。 让我很快找到 流星密钥所必需。 我还有一个流星的项目 我要去使用, 而我只是要带 钥匙从该文件。 一旦我找到它,我就可以 这些键复制到我的Facebook。 因此,这里是一个关键。 这是秘密。 你不应该 与人分享这些。 然后你给它您的应用程序的秘密。 这是如此的Facebook 知道你是你。 你保存配置。 我觉得在这个过程中我 已经停止我的流星应用程序。 所以,我只是想 确保它仍然存在。 OK,让我们确保我们的流星服务器 运行,以便该网页正在运行。 请注意,如果我们停止流星 服务器,页面仍然存在。 它只是不会再更新。 流星服务器是必要的 为确保该页面是活的。 OK,我已经提交了,现在 我可以签署旅游。 现在它只是一个问题 有一个Facebook的弹出 并把您的帐户 在信息和记录。 一旦你做到这一点,Facebook的可能 老马你一些更安全。 所以,我们就就此打住。 问题是,当你完成 就这样,你就会有Facebook登录。 流星有一堆 其他包为好。 您可以通过Google+登录。 您可以GitHub上登录。 您可以与Twitter登录。 或者,如果你搜索,你会 发现很多其他的事情 像Meetup网站,LinkedIn, 和流星开发。 所以流星开发是 包我一直在寻找。 流星添加帐户,流星开发商。 在此期间,我 也想推荐 一些其他的包为您的项目。 它可能证明是有益的 包括jQuery的包。 这使您可以使用 jQuery的在你的客户。 你可能只是做一个路线, 流星会确保你最新的 jQuery的。 我还建议休斯顿:管理员。 这有点像一个phpMyAdmin的 这种工具为您的MongoDB。 这使您可以编辑 您的数据很容易 而不必去到蒙戈外壳, 就像我早先在研讨会上做了。 所以,现在说的运行,让我们运行 再次流星,看看我们能做些什么。 您会注意到添加一些包 可能有他们提出了一些警告。 您将不必担心 关于与休斯敦。 所以,我们现在可以有选择 配置流星管理。 他们给你方向 如果你想设置了起来。 我们也可以现在去/管理。 这是赞助商 由休斯顿包。 这是流星管理界面。 你只需创建一个 管理员帐户,像这样。 如果你刷新页面,则可能 有一些收藏品显示出来。 这是一个非常有用的工具, 我强烈推荐它。 你可以看到,因为 休斯顿是给一些错误, 我们没有任何收藏 显示了现在。 你会用火箭的方式是 确保这一功能得到 叫你简单待办事项。 所以火箭不 知道我的任务。 我们建立了一个蒙戈 收集所谓的任务。 让我们进入简单待办事项和公正 确保在JavaScript中, 我们增加了任务,我们的产品系列。 现在,我们已经保存,它的建设 该应用程序,令人耳目一新。 让我们来看看。 现在我们有一些任务。 我们可以添加一些新的任务。 但是,如果我们想要添加的任务, 让我们做它的应用程序本身。 现在,我们可以添加一些数据。 嗨,这是一个任务。 这似乎有点怪 我们没有看到任何任务。 我们可能要检查,如果我们有任何 这里的错误,或者其他地方。 如果我们去管理,这似乎有些奇怪。 如果你拉库 本次研讨会后, 我会确保 简单待办事项工程与休斯敦。 不幸的是,它似乎并没有 是在这个非常时刻的工作。 是否有任何其他的问题吗? 休斯顿通常是 工具,工作得非常好。 休斯顿特别是有点 比其他的buggier, 但我推荐它时,它的工作原理。 是啊。 听众:你能做些什么 与Facebook包 一旦用户已登录 在他们的Facebook? ROGER ZURAWICKI:一旦 用户的登录, 您可以拨打电话到Facebook的API。 很多摆在更加 如何Facebook的开放他们的API。 流星,请确保您 有连接。 但在那之后一切问题 学习如何使用Facebook的API。 观众:[听不清]。 ROGER ZURAWICKI:好的。 非常感谢您的 这CS50研讨会流星。 如果你有任何问题, 你可以给我发电子邮件 我的电子邮件地址 下面列出了研讨会。 我会很高兴的 回答你的问题。 我也可以在 CS50黑客马拉松应 你需要与你的流星的项目提供帮助。 感谢您的收看。