Office 365 / SharePoint Online开发人员入门– part 2: Developing SharePoint 加-ins (apps)

这是有关Office 365 / SharePoint Online开发入门的第二篇文章。在这两对文章中，我讨论了一个过程，在该过程中，不熟悉该领域的开发人员可以使用试用环境和Azure虚拟机来入门。这个想法是你不’不需要MSDN订阅，现有的Office 365环境甚至开发机器即可运行–在上一篇文章中，我们创建了所有这些东西。现在它’是时候使用它们了。具体来说，我们’将获得一些在Azure VM中运行的加载项代码，这些代码可与SharePoint Online进行交流-我们’为此，请获取示例应用程序并配置我们的开发环境以运行该应用程序。我认为，这是学习使用现代SharePoint开发的好方法“provider-hosted” remote code –当然，它们可以在本地或云中使用。在开始之前，提醒一下这两篇文章的内容：

1. 开始吧– part 1: 创造 trial environments and a VM
2. 开始吧– part 2: Developing SharePoint 加-ins/apps (this post)

Deploying a 提供者托管 SharePoint 加-in in your VM

这里’概述了我们’ll cover here:

• 创造 a Developer Site in Office 365
• 在SharePoint Online的用户配置文件中完成一些信息（因为我们的实验演示将使用它）
• 准备开发环境以在本地托管应用程序：
  • 创造 a local IIS website to run 应用
  • 创造 a self-signed SSL certificate and bind it to the site
• Register the SharePoint 加-in using AppRegNew.aspx
• 下载“app script part” SharePoint 加-in sample from from Github (from the Microsoft OfficeDev Patterns and Practices library), and run it locally in the VM
• 查看解决方案的工作方式

这里 are the step to go through..

创造 a developer site collection in Office 365

导航到Office 365的SharePoint管理区域，然后转到“Site Collections” page. 请点击“New”创建一个新的网站集：

Use 设定 like the below:

创建网站后，检查是否可以在浏览器中访问它：

在Office 365 / SharePoint Online中的用户配置文件中输入一些详细信息

在Office 365租户的任何SharePoint页面中，单击右上角的用户照片，然后单击“About me”链接转到个人资料页面：

请点击the “Edit profile” link:

在字段中输入一些详细信息，例如“About me” and “Ask Me About”. Also use the “Change your photo”链接以更改您的照片：

完成后，点击“Save all and close”.

创造 a new site in IIS for app hosting

打开IIS管理器，然后创建一个新的网站。使用以下设置：

配置项	值
名称	site
路径	C：\ inetpub \ wwwroot \ site（N.B.“spsites”文件夹将需要创建）
主机名	site

The 加 网页site dialog should look like this:

请点击“OK”完成创建IIS站点。

加 the site to your hosts file:

创造 a self-signed SSL certificate and apply it to the site

Open a PowerShell window as an administrator. 创造 a self-signed cert using the following command:

新-SelfSignedCertificate -DnsName site -CertStoreLocation cert:\LocalMachine\My

现在，我们需要将证书作为受信任的根证书安装在商店中，并将其应用于“spsites”IIS网站。使用以下步骤：

1. 证书已导出到文件。
2. 证书从文件系统上的文件安装到“受信任的根证书颁发机构” cert store.
3. 证书已应用于IIS网站。

去“Server Certificates”在IIS中，找到您刚刚创建的证书。请按照以下步骤中的顺序将证书导出到文件中：

证书现在应导出为 spsite.cer.

现在在文件系统上找到文件，然后右键单击> “Install Certificate”:

请按照以下图像中的过程将证书安装到“受信任的根”证书存储中：

IIS和SSL证书的最后一步是将其应用于站点。在IIS中找到网站，右键单击并选择“Edit bindings..”:

加 a new site binding on port 443 – select the “spsites” certificate:

请点击“OK”, and the certificate should now be applied to the site. 您 should be able to browse it on http：// _ site （尽管请注意，您将获得一个默认的IIS页面，因为此时没有站点在运行）。

获得“app script part”Microsoft OfficeDev模式和实践库中的示例

导航 //github.com/OfficeDev/PnP - 点击“Download zip” link:

将压缩文件保存到虚拟机上的C：\ Code（创建文件夹，因为它赢得了’t已经存在），然后解压缩：

现在以管理员身份运行Visual Studio 2015。请注意，在Azure虚拟机中打开可能需要一些时间。

在Visual Studio中，使用“File > Open > Project/Solution…” to open the “App Script”Visual Studio中的zip示例–可以在以下位置找到：

C：\ Code \ PnP-master \ PnP-master \ Samples \ Core.AppScriptPart \ Core.AppScriptPart.sln

打开项目后，在Visual Studio的主项目的“站点URL”属性中输入Office 365开发人员站点的URL：

应出现一个对话框–输入您的Office 365身份凭证：

现在，Visual Studio应该已登录到Office 365中的开发人员站点。

配置Web项目以匹配您的托管环境

转到属性页面“Core.AppScriptPartWeb”项目，然后进入“Web”区。更改设置以匹配我们创建的IIS站点，然后单击“创建虚拟目录”按钮可将文件托管在其开发位置：

保存Visual Studio项目。

还编辑项目中的userprofileinformation.webpart文件–在示例中找到用于设置要通过Web部件链接的JavaScript文件的URL的行，并将其设置为http：//_spsites/Core.AppScriptPartWeb/scripts/userprofileinformation.js：

创造 the registration for your 加-in in SharePoint Online

在开发人员站点的浏览器窗口中，导航到以下URL：

[site] / _ layouts / 15 / AppRegNew.aspx

..so就我而言，这是：

//chrisob1.sharepoint.com/sites/Dev/_layouts/15/AppRegNew.aspx

请点击the “Generate”按钮为“客户端ID”和“客户端密钥”字段生成新值，然后完成以下其他信息：

在下一个屏幕上，请确保 在安全的地方复制客户端ID和密钥 – you’ll need these later:

现在返回Visual Studio并执行以下步骤：

在Web项目中打开web.config文件，然后更新ClientId和ClientSecret应用程序设置值：

在应用程序项目中打开AppManifest.xml文件，并更新ClientId属性：

现在应将您的加载项配置为在开发中运行–在下一步中，我们将运行该应用程序进行测试。

运行加载项

在Visual Studio中按F5键运行该项目。如果出现提示，请输入您的Office 365身份凭证：

您 should be prompted to trust the app:

请点击“Trust It”，然后您将被带到该加载项的默认页面。请注意，此页面不是外接程序的关键部分–它只是以自动方式上传Web部件以使其可用。

为此，请点击“Run scenario” button:

现在点击“Back to Site” link:

Edit the page, and add the web part deployed by the add-in to the page. 去add a web part, and you’ll find it in the “Add-in Script Part” category:

将Web部件添加到页面后，它应该显示您的用户个人资料中的详细信息（如果有，则包括一张照片）– I don’t in this case!):

如果您能做到这一点，那就做得好！现在让’考虑一下我们刚刚开始的工作。

重要要点

• 我们实现了真正对云友好的Web部件–它没有服务器端代码，因为它不是旧版Web部件。
• 实际上，’只是现成的Script Editor Web部件–指向特定的JavaScript文件，该文件已实现了实际功能
• JavaScript文件包含一些CSOM代码以获取用户个人资料详细信息
• 实际上，JavaScript文件是从SharePoint远程托管的。就我们的开发方案而言，它正在IIS中运行–但我们可以将其发布到Azure或类似产品以用于生产（请记住， ’d需要使用适当的URL等进行新的应用注册）。

该代码的关键部分实质上是一些简单的JSOM代码，用于提取用户个人资料详细信息并输出到HTML：

以便’介绍了SharePoint中的远程代码和云友好开发领域。希望有人发现它有用！

使用Azure VM入门Office 365 / SharePoint Online开发– part 1: 创造 trial environments and a VM

I’对于大型组织的开发人员必须面对的障碍，我总是感到惊讶。无论’锁定的台式机，缺少虚拟机（或规格非常低的虚拟机），开发人员工具的许可不足或其他众多问题，尝试使用新技术可能会令人沮丧。我经常与这类公司的开发人员交谈，并且经常看到有些不愿意做的事情，而我发现自己经常做一些测试工作–创建试用版Office 365环境，在Azure中启动虚拟机，下载/测试Office 365或SharePoint应用程序等。最近，我整理了有关这些步骤的指南（适用于在英国的Microsoft开发人员大会参加者），我认为将指南重新用于其他新手开发人员可能会很不错。’有用。这分为两篇文章：

1. 开始吧– part 1: 创造 trial environments and a VM (this post)
2. 开始吧– part 2: 开始吧with developing SharePoint 加-ins (apps)

我猜想针对的SharePoint开发人员的类型是：

• 不’无法访问Office 365环境以进行播放–甚至可能以前没有接触过SharePoint Online
• Isn’无法快速获得新的虚拟机
• 不’没有MSDN许可证
• 可能以前没有接触过Azure
• 需要使用最新版本的Visual Studio的开发人员环境才能在本地查看/运行代码（即在以下位置托管应用程序） http：// _ localhost）。也许他们现有的台式机或虚拟机不是’不适合这个

如果有一个或多个适用于您，那么您可能会发现这很有用。我们’ll go from creating the Office 365 and Azure dev environments, to downloading and running a sample app (a 提供者托管 SharePoint 加-in) from Microsoft’的OfficeDev模式和实践示例。这可以帮助某人初次体验添加/加载项开发，但是这可能只是一组通用的步骤，在某些情况下非常方便。

免责声明！

尽管我已经采取了这些步骤，但我不能保证它们是100％准确的/将在所有地区/在任何时间都有效，并且恐怕不能花太多时间来支持该主题！希望它们足以让您启动并运行。

这里’s what is covered:

这个帖子：

• 创造 trial Office 365 E3 tenant
• 创造 a trial Azure订阅
  • 注意–很遗憾，您需要使用信用卡进行此步骤。但它’可以避免花钱，因为您收到的信用额为£125，默认情况下，Azure订阅为“locked”以防止进一步收费。这将使您至少开始使用
• 为应用程序准备SharePoint Online租约–创建应用目录等
• 创造 a development VM in Azure with Visual Studio 2015
• 准备Azure VM以进行开发（例如启用IIS和ASP.NET，安装Visual Studio的OfficeDev工具等）

下一页 post:

• Walkthrough of deploying a 提供者托管 SharePoint add-in in your VM (next post)
• 创造 a self-signed SSL certificate
• 创造 a local website in IIS to run 应用
• 下载SharePoint 加-in from Github and run locally

创造 a trial Office 365 environment (E3)

在这一步，我们’将创建一个试用版Office 365环境，以使我们能够进行一些开发。请注意，这里的另一种选择是注册 Office 365开发人员计划 –这将为您提供一个租户，租户将持续365天，但只包含一个用户。如果我’我只是在纺我不穿的东西’为了关心耐用性，我通常更喜欢创建E3试用版–这只会持续30天，但有25位使用者。这两个选项都很有用（取决于您’重新做），但在这种情况下，我们’将介绍创建E3试用版的过程。

为此，请导航至Office 365企业版E3产品页面（此页面的英国版本位于以下链接，但如果您在另一个国家/地区，则只需使用页面底部的选择器即可更改市场- //products.office.com/en-GB/business/office-365-enterprise-e3-business-software?omkt=en-GB). 请点击the “Free trial” link on this page:

在表单中输入一些详细信息，然后单击“Next”:

在下一个屏幕上，提供用户名，然后选择“.onmicrosoft.com” domain –注意，此名称在Office 365中必须是唯一的，因此您可能需要尝试一些名称，直到找到唯一的名称为止：

请点击“Next”完成时。在下一个屏幕上，提供您的手机号码以接收短信验证。输入后，点击“Text me”:

在提供的框中输入代码，然后单击“Create my account”:

在下一个屏幕上，记下您提供的用户ID，然后单击“You’re ready to go…” link:

您r Office 365 environment is now creating –这大约需要20分钟：

准备Office 365租户进行开发

租户完成预配后，转到管理中心并导航到SharePoint区域。如果您的租户正在使用当前的管理中心体验（而不是新的预览体验），则此链接位于：

进入SharePoint区域后，导航至“settings” page:

在此页面上，滚动到“Custom Script”部分。将两个单选按钮都更改为“allow”选项以启用自定义脚本执行。单选按钮应如下所示：

请点击“OK” to save the 设定.

现在进入“apps” area, and select “App Catalog”:

确保选择了创建新的应用程序目录网站的选项，然后单击“OK”:

使用与以下类似的设置完成表格–确保在管理员字段中输入您的用户名：

请点击“OK”完成时。现在将创建App Catalog网站。

提供付款明细以启用“full” Azure订阅

在Office 365管理区域中，单击“Azure AD” link:

在下一页上，单击“Azure subscription”链接以开始注册Azure的过程：

在接下来显示的注册页面上完成详细信息。您’需要提供一个电话号码以接收短信或电话来验证您的身份，并且’s here that you’需要提供信用卡详细信息。提醒您，您赢了’除非您明确更改为付费订阅，否则将向您收取任何费用–就像页面告诉你的那样：

一旦您’重新完成该过程，单击“Sign-up”:

您的Azure订阅现在正在创建。您’会看到类似以下的屏幕（尽管某些消息可能有所不同）-等待此过程完成：

该过程完成后，请点击“开始管理我的服务”按钮，如下所示：

您r Azure订阅 should now be ready, and you should then be taken into the Azure Portal:

创造 a development VM in Azure

在此步骤中，我们将使用Visual Studio Community 2015模板在Azure中创建一个新的虚拟机。进入“虚拟机（经典）”门户区域，然后单击“Add” button:

在里面Virtual Machines area in the Azure portal, filter for ‘Visual Studio专业版2015’然后从结果中选择生成的VM。

在里面filter box, type “视觉工作室社区2015” and hit enter. 在里面list of VM templates which appears, locate the item we want:

从列表中选择此项。在下一个屏幕上，选择“Resource Manager”在下拉框中，然后单击“Create”:

在下一页上，输入虚拟机的一些详细信息。请务必记下您使用的用户名和密码：此外，请注意“Resource Group” setting – you’ll need to create a new 资源组 here (any name is OK). Make sure it then becomes selected in the dropdown:

在下一页上，选择尺寸“A2 - Standard”虚拟机大小：

在里面next area, leave the default 设定 and click “OK”:

请点击“OK”在确认页面上：

虚拟机现在将开始创建–这可能需要20分钟左右。

创建虚拟机后，在门户中选择它，然后单击‘Connect’:

这将实例化RDP连接。在RDP盒子中保重– you’ll need to select “use another account”并确保以以下形式输入用户名：

[计算机名] \ [用户名]

如下所示：

请点击“OK”输入详细信息后。安全提示后，您的RDP会话应该打开，并且您现在应该可以控制虚拟机了。现在，我们需要在VM中执行一些配置步骤，以便能够开发SharePoint加载项和Office 365应用程序。

设置IIS

我们需要做的第一件事就是使应用程序能够在其上开发/托管 http：//本地主机 在VM中。第一步是启用IIS。

在虚拟机中，右键单击开始按钮，然后选择‘程序和特点’

选择“打开或关闭Windows功能”:

在里面“添加角色和功能向导”出现，单击“Next”直到你到达“Server Roles”对话框的页面。在这里，选中复选框“Web Server (IIS”) and click “OK”出现的任何提示：

然后，点击“Next”直到你到达“Role Services”IIS的页面。在此对话框中，展开“应用开发”并检查框“ASP.NET 3.5” and “ASP.NET 4.5”:

请点击“OK”出现的任何提示。在确认屏幕上，选中自动重启复选框，然后单击“Install”:

等待过程完成。完成后，您现在已在启用ASP.Net的VM上运行IIS。

此时，重新启动机器。

安装 Office Development tools

启动Visual Studio 2015–确保右键单击并以管理员身份运行：

在里面dialog出现，单击the “Sign in” button:

输入用于Office 365订阅和Azure身份的详细信息：

接受在Visual Studio启动之前出现的所有提示。

VS启动后，再次关闭它。打开浏览器窗口，然后导航到 http://aka.ms/OfficeDevToolsForVS2015 -在提示符处保存文件，然后从下载位置运行以运行安装程序：

接受出现的提示，然后等待安装完成。

您r virtual machine is now broadly ready for SharePoint 加-in and Office 365 development. Some other steps you may perform are:

• 创造 a self-signed certificate to run 应用 on HTTPS
• 配置一个新的IIS网站以在本地托管应用程序（与运行IIS Express相比，我更喜欢这样做）

We’在下一篇文章中将介绍这些步骤，“Get started with developing SharePoint 加-ins (apps)”。在那之前，开心的成长！