介绍"Napa"-Office 365 开发工具

[原文发表地址]  Introducing “Napa” - Office 365 Development Tools

[原文发表时间] 2012-07-17 6:00

昨天是Office和 SharePoint令人非常兴奋的一天 !小组在记者会上公布了新的Office计划,并发布了一个Office和 SharePoint 2013 的公共预览版。您可以在微软新闻中心上找到可用的新闻发布会,并观看首席执行官Steve Ballmer的视频网络广播。您也可以在office.com/preview下载发布.

但令人兴奋的事情并不只有这些— — 如果您是一个开发者,您会很高兴听到有关开发Office和 SharePoint 的新方法。

Office和 SharePoint 2013 以新的云应用程序模型为特色,使用web 标准,并让您可以在Office和 SharePoint内生成一类新的合并了 web 技术和云服务的应用程序。对于Office和 SharePoint 2013 的主要投资之一是云启用。应用程序可寄宿在云端,这使您能够更快地部署、 更新和维护您的应用程序。您也能够发布您的应用程序以及通过一个新的Office存储销售它, 或通过您的组织内部的App Catalog分发IT核准的应用程序。若要了解更多有关新的云应用程序模型和Office存储,我推荐阅读Ludovic Hauduc 的公告和在新的Office和 SharePoint 应用程序的博客观看视频。

介绍 "Napa"

与昨天的Office和 SharePoint 同步发行版本中,我很高兴地分享我们发布了一个新的工具集,称为"Napa",它是着手构建新的云应用程序模型应用程序的最简单方法。当我们着手为新的云应用程序模型创建开发工具时,我们重新思考了我们想要为客户提供的总体解决方案。我们想要提供一个轻量级的、浏览器中的体验,那样您可以在一个浏览器中快速构建您的 SharePoint 或Office web 应用程序,而该应用程序也将在同一浏览器中运行。因此,我们创建了一个称为“Napa”的一流开发环境,作为 Visual Studio 的在线联合。

"Napa"是一个针对SharePoint的免费应用。由于"Napa"是基于 web 的,因此您不需要在您的机器上安装任何东西来开始开发Office和 SharePoint。只需打开您的浏览器来开始编码。随着您的应用程序的成熟,您需要更高级的工具,您可以无缝地切换到更强大、功能全面的Visual Studio IDE,并继续在那里开发。若要了解有关在Visual Studio 2012中针对SharePoint 工具的最新改进的详细信息,请访问MSDN.

当然,在与"Napa"并行的同时,您仍可以继续使用Office和 SharePoint的现有的可扩展性模型,像 VBA、 COM、 VSTO和 SharePoint 解决方案。(不过,请注意这些不能提交到新的Office存储。)

入门教程

让我们偷窥一下所有的内容。若要尝试一下"Napa",首先在https://dev.office.com注册 Microsoft Office 365 开发者预览.

当您注册时,将为您创建一个开发者网站。此网站为您提供您自己的Office 365实例,那里您可以开发、 部署和测试您的Office 365 应用程序。

下一步,您会想要安装"Napa"来将工具添加到您的开发者网站中。

(请访问MSDN来了解关于这些"入门"步骤的完整说明。)

创建项目

下一步 (已经将"Napa"安装在您的开发者网站上了),请单击" Get tools to build apps "来启动"Napa"。

image

"Napa"支持构建Office 和SharePoint的所有类型的应用程序,并使您可以在 web 应用程序和Office 应用程序的丰富的客户端版本上(如 Excel、 Word)运行。

让我们由构建SharePoint应用程序来开始。

image

选择" App for SharePoint ",然后点击" Create ",您可以在浏览器中为您的应用程序编写代码。

作为 一名web 开发人员,您首先会注意到的一件事是新的云应用程序模型是基于 web 标准的。您将花些时间来编码HTML,客户端ASPX、 CSS 和 JavaScript。

image

即使"Napa"是基于浏览器的应用程序 (适用于所有的现代浏览器),我们想要确保您拥有一个作为一名开发人员您所希望的丰富编辑体验。让我们深入到几项编辑器的关键功能,而您可能不会从基于浏览器的开发人员工具中期望到这些功能。

读取和编写代码

我们希望您能更高效地阅读和编写代码,所以我们在您键入时添加了语法着色、 实例突出、 缩进、 括号匹配和完成。

例如,当您滚动代码时,您会注意到当您点击一个标识符时,所有实例将在编辑器中突出显示。

clip_image007

针对JavaScript 和 CSS的简单、 基于文本的自动完成包括一套丰富的代码片段 (CTRL + 空格键)。例如,我们可以使用for循环片段:

clip_image008

使用代码段添加for 循环之后,可以通过这些标识符来浏览,并更改它们的名称,如果需要的话。

clip_image009

我们也可以简单地选择常见值,例如JavaScript 和 CSS 中的true/false、 文字等。

clip_image010

代码清理

为了帮助您整理您的代码,确保其正确性,我们已经为JavaScript 和 CSS添加了查看错误和警告的功能。通过按 (CTRL +,) 来在错误之间导航。

clip_image011

我们也根据需要对JavaScript 和 CSS 设置了(CTRL + ALT + F)格式,这允许您选择一个代码块,并整理它。

代码导航

为了帮助您找到您的代码,我们已经添加了查找 (CTRL + F)、 查找/替换 (CTRL + H) 和快速查看代码大纲(CTRL + ALT + O)的功能,如下图所示。

clip_image012

至于键盘绑定的完整列表,按 (CTRL +.)。这将会出现一个显示了所有的键盘快捷方式的列表页面。

应用程序属性

"Napa"为最常用的设置使用轻量级的设计器,这允许您直观地编辑您的应用程序清单和属性。点击左下角" Properties "图标来打开设计器。

image

运行

当您查看 Default.aspx 和 app.js ,您会看到此应用程序是一个简单的页面,字符串显示" initializing….”,在为当前用户信息成功调用一个SharePoint查询之后,更改为了"Hello <username>",这显示应用程序与 SharePoint结合起来了。

在左下角,单击run按钮来运行 SharePoint 应用程序。这将打包该应用程序,将它添加到您的开发人员网站中,并在浏览器中打开它。

image

也就是说,不必在客户端机器上安装任何软件,"Napa"也能够让您创建一个项目,编辑该项目,并在 SharePoint Online 上运行它。由于代码都是客户端的,您可以使用您的浏览器的调试工具来调试代码。(例如 Internet Explorer 中的 f12 键)

我们认为这是在简化开发者的入门上的一个极大飞跃。您不再需要在开发机器上安装软件来创建您的第一个应用程序,尤其是 SharePoint 服务器。

Visual Studio 2012中打开一个副本

有些时候,您会想要使用针对Visual Studio 2012的 Microsoft Office 开发人员工具的完整的强大功能。例如,云应用程序模型中关键的新功能之一是应用程序可以由SharePoint、 Windows Azure Web 站点或您自己的 web 服务器承载。Visual Studio 将使您能够修改在"Napa"中启动的项目或从头创建新的应用程序,那样它们可以面向所有的承载选项。您还可以利用Visual Studio 2012中强大的 web 开发功能,如DOM 资源管理器或 JavaScript 调试器。

为了无缝过渡到Visual Studio,"Napa"将让您不仅可以下载您的项目,而且它还将帮助安装为开发Office和 SharePoint应用程序而所需要的任何软件。

点击左下角的" Open in VS "按钮。

clip_image017

首次使用此功能时,如果您将服务器代码元素添加到您的项目中,您将被要求选择 Visual Studio使用的语言首选项。

clip_image018

当您点击" Continue "时,系统会提示您运行 exe 文件,这将会检查您是否安装Visual Studio 2012、针对 Visual Studio 2012 的Microsoft Office 开发人员工具-预览插件和所有依赖项。如果您不这样做,它将启动 Microsoft Web 平台安装程序来安装所需的软件。它将下载它们,然后在 Visual Studio 2012 中打开该项目。

image

您会注意到的事情是当您从 Visual Studio 中运行时,该项目将已被设为开发和远程调试到您的开发人员网站中。

image

至于那些想要由 Visual Studio开始的人来说,直接下载针对Visual Studio 2012 RC的Microsoft Office 开发人员工具—预览版可在这里下载。

Office 应用程序

既然,我们已经构建了一个SharePoint应用程序,让我们回到"Napa",然后为Office构建一个应用程序。这一次,当您创建新的项目时,让我们为 Excel选择一个Content应用程序。

image

默认情况下,Office 应用程序包含 HTML,CSS 和 JavaScript文件,这就强化了Office云应用程序模型是标准的 web 开发的概念。

这一次,当我们运行应用程序时,我们在Excel Web 应用程序中运行它 — — 无需安装 Microsoft Office 2013 预览版来构建首个Office应用程序。

image

安装它们之后,您可以在 Office 客户端应用程序中运行,这是属性设计器中的一个选项。

最后,除了SharePoint 应用程序和Excel 应用程序之外,"Napa"还支持创建任务窗格和邮件应用程序。

了解更多信息

本文中我们只是覆盖到了Office和 SharePoint应用程序的皮毛。我建议访问新的Office应用程序和 SharePoint 开发人员中心来了解更多。别忘了注册Microsoft Office 365 开发者预览来尝试一下"Napa"

https://twitter.com/jlzander 上追随我的脚步。