2016年2月25日星期四

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:

    SNAGHTML3dc70b5

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

    2016年2月17日星期三

    使用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:

    clip_image002_thumb2 [10]

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

    clip_image004_thumb2 [4]

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

    clip_image006_thumb2 [4]

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

    clip_image008_thumb2 [4]

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

    clip_image010_thumb2 [4]

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

    clip_image012_thumb2 [4]

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

    clip_image014_thumb2 [4]

    准备Office 365租户进行开发

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

    clip_image016_thumb2 [4]

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

    clip_image017_thumb2 [4]

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

    clip_image019_thumb2 [4]

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

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

    clip_image020_thumb2 [4]

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

    clip_image022_thumb2 [4]

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

    clip_image024_thumb2 [4]

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

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

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

    clip_image025_thumb2 [4]

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

    clip_image027_thumb2 [4]

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

    clip_image029_thumb2 [4]

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

    clip_image031_thumb2 [4]

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

    clip_image033_thumb2 [4]

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

    clip_image035_thumb2 [4]

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

    clip_image037_thumb2 [4]

    创造 a development VM in Azure

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

    clip_image039_thumb2 [4]

    在里面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:

    clip_image041_thumb2 [4]

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

    clip_image042_thumb2 [4]

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

    clip_image043_thumb2 [4]

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

    clip_image044_thumb2 [4]

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

    clip_image045_thumb2 [4]

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

    clip_image046_thumb2 [4]

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

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

    clip_image047_thumb2 [4]

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

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

    如下所示:

    clip_image048_thumb2 [4]

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

    设置IIS

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

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

    clip_image049_thumb2 [4]

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

    clip_image051_thumb2 [4]

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

    clip_image053_thumb2 [4]

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

    clip_image055_thumb2 [4]

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

    clip_image057_thumb [4]

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

    此时,重新启动机器。

    安装 Office Development tools

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

    clip_image058_thumb2 [4]

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

    clip_image059_thumb2 [4]

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

    clip_image060_thumb2 [4]

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

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

    clip_image062_thumb2 [4]

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

    您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)”。在那之前,开心的成长!