2017年4月26日,星期三

从SharePoint Framework Web部件(SPFx)调用Azure函数–第1部分:PnP Core,CORS和连续部署的使用

如今,Azure函数是一件很酷的事情,主要是因为它们’真是太有用了。它们可以比其他托管代码(例如WebJobs)便宜一些,但是它们’重新也很灵活。您可以定义一个在计时器上运行或在将项目添加到队列时运行的函数(就像WebJob),也可以定义一个在命中HTTP端点时执行的函数。在这方面’与Web API相似,但更简单且基础设施更少。如果页面或Web部件中的按钮需要执行某些操作’在服务器端更简单(也许使用OfficeDev PnP库中的方法),我真的很喜欢将按钮连接到Azure函数的想法。然后,我的点击处理程序将发布到函数’在端点上,将执行服务器端代码,然后客户端代码将接收响应。

我认为最好在SPFx Web部件中显示此内容–并演示如何在客户端和服务器之间传递数据。我们’我们将以让我们的Azure功能利用OfficeDev PnP核心库为例。具体来说,我的Web部件在网站中提供了一个现代页面,并添加了SPFx Web部件。–纯粹在客户端很难做到的两件事。一世’我将其分为两篇文章,但总的来说,’我试图在这里展示一些东西:

第1部分–设置,PnP Core的使用,CORS和连续部署(本文):
  • Initial creation of 功能
  • 部署功能代码(使用来自GitHub的持续部署)
  • 允许在Azure函数上使用CORS,以便可以从JavaScript调用它(包括SPFx工作台的特殊条目)
  • Use of SharePoint PnP Core library - via Azure 功能s NuGet support
  • Use of App Settings (environment variables) in an Azure 功能
第2部分–从SPFx调用并传递数据(下一篇文章):
  • Azure函数方面的代码(即,根据一些传递的参数创建现代页面的工作)
  • SPFx端的代码
  • 将数据传递给函数和设置正确的标题
  • 从函数返回数据,并在我们的SPFx Web部件中显示成功/失败

总的来说,我们’有一个解决方案,可通过单击按钮创建现代的SharePoint页面–但是该模式可以用于任何您想要的。

Azure 功能s –.NET代码的不同类型和使用

提醒一下,在定义函数时,请指定触发器– these include:

  • HTTPTrigger(我们’ll use here)
  • 定时器触发–像执行WebJob一样,按计划执行一些操作
  • 队列触发–将某些内容添加到队列时执行
  • 其他很多–包括BlobTrigger和“Generic webhooks”(N.B.目前还不是你’d用于SharePoint webhooks)

当然,使用HTTPTrigger不会’无需响应按钮单击–您可以随时将某些内容发布到服务器端。但是,单击按钮就是我们’我会在这里使用。了解Azure 功能s的定价是一个好主意,尤其是在消费计划和App Service计划之间的区别。在大多数情况下,您的消费计划’除了可能需要大规模运行的生产实现和/或在App Service计划上运行现有资源时,我会更喜欢(您的成本将是小菜一碟)。反正’主题略有不同,您可以在以下网址阅读更多内容 Choose the correct service plan for Azure 功能s.

Developing Azure 功能s code with .NET
 
更新–如今,您可以使用Visual Studio 2017创建具有完全IntelliSense支持和本地调试功能的功能。我强烈建议您采用这种方法’re writing in C#. 您’ll need Azure 功能s Tools for Visual Studio 2017,但这会为您提供.cs文件和典型的VS体验,而不是.csx文件(且支持较少)。
 
本文的其余部分继续使用.csx方法,但重要的事情适用于这两种情况(例如,可以选择从Github同步,配置CORS,使用NuGet的PnP代码等)。
 
如果您不熟悉Azure 功能s,请注意.NET的开发模型在几个地方有所不同:
  • 没有Visual Studio解决方案-它只是目录中文件的集合
  • 主文件是csx文件,在这里您不会获得IntelliSense支持
  • 您 can deploy other assemblies and make use of NuGet packages, but this is done in a different way
总的来说,我发现开发更复杂事物的一种好方法是使用Visual Studio为我的大多数逻辑创建一个DLL /库项目,并附带一个控制台应用程序以帮助进行本地测试。 DLL被部署到Azure 功能的BIN目录,您可以从函数代码(CSX文件)对其进行调用。那’这不是唯一的方法,但我喜欢它。但是,在此处显示的示例中,我们’通过将我们的实现保存在.csx文件中,可以使事情变得简单。

让’开始创建函数。

Create the Azure 功能 app

  1. Open the Azure portal, and find the option to create a new 功能 App.
  2. 指定应用名称以及您可能拥有的任何现有资源组和存储帐户(如果没有,则您’需要创建以下必备容器):

    SNAGHTMLf8d5e49
  3. 应用创建完成后,请在门户中找到它(例如,通过访问“recent”部分),然后点击进入。
  4. 请点击the “New 功能” button: 

    SNAGHTMLc1a9b2
  5. 然后,我更喜欢使用“custom function” path:

    SNAGHTMLc42e0b
  6. 找出“HttpTrigger-CSharp”模板(您可能只想使用下拉列表过滤到C#模板):

    SNAGHTMLc603f4
  7. 给函数起个名字– we’ll also leave the “Authorization level” as the default of “Function”: 

    SNAGHTMLc6a17c
  8. 请点击Create –您现在应该看到集成的编辑器:  

    SNAGHTMLc79300
  9. 您 can now play around with running the function –例如,考虑如何将数据传递给函数并返回。

您’我会发现集成编辑器非常适合进行一些初始播放。但是,随着您变得更加认真,我个人发现从源代码管理中进行一些连续部署非常困难,无论是否’的GitHub或Visual Studio Online。是的,您每次要测试更新的代码时都必须提交/签入–但这比a)使用集成编辑器和b)使用Kudu界面手动复制文件更好。如果源代码控制集成对您的需求有点沉重,请考虑同步选项’从OneDrive或Dropbox导入–我想很酷的东西,至少如果你不这样做的话’确实需要真正的源代码控制。

Deploying files to an Azure 功能 via GitHub integration (optional)

所以这是一个可选步骤,但是由于我们’re here let’经历高层次。唯一的复杂性是按正确的顺序执行操作,并确保您的文件夹“at the right level”关于Azure函数如何期望它’的文件。这个过程是’顺便说一下,与其他系统(例如Visual Studio Online)有很大的不同。完整的文档位于 //docs.microsoft.com/en-us/azure/azure-functions/functions-continuous-deployment, 但在这里’我的截图摘要:

  1. 首先创建一个自己的存储库:

    SNAGHTML128454d7
  2. 然后将其克隆到您要在计算机上使用的目录:

    SNAGHTML554aec3

    SNAGHTML555fdb9
  3. 现在,在VS Code中打开目录,并为您的函数添加文件– you need to obtain these by copying 从 the 功能 you created earlier. It’仅包含几个文件,因此我只在Azure门户和我在VS Code中创建的文件之间复制内容。在这一点上’只是这些文件的默认内容– 所以我建议做一个简单的代码更改 以帮助我们稍后检查部署是否正确进行(例如,对其中一个日志记录语句进行简单更改):

    SNAGHTML55e7b7e
  4. 准备好文件后,返回Azure门户并找到“Deployment options”配置连续部署的链接:

    SNAGHTML55fbe5e

  5. 请点击that link, then click the “Setup”按钮,然后选择GitHub:

    SNAGHTML56094e8
    SNAGHTML5615bd2
  6. 现在完成指向GitHub存储库并提供身份验证详细信息的过程:

    SNAGHTML56233f2
  7. 现在我们需要将文件提交到GitHub–您可以根据需要从命令行执行此操作,也可以使用VS Code进行如下操作:

    SNAGHTML5637423
    SNAGHTML5656a84
  8. 签入代码后,检查门户中的文件应显示您的代码更改:

    SNAGHTMLba69a24

所以,我们’现在可以很好地开发我们的代码了。我们’不再局限于基于Web的编辑器 –相反,我们可以使用任何喜欢的编辑器,并将我们的Azure 功能文件正确存储在源代码管理中。

Enable CORS on the Azure 功能

下一步是确保可以从网页中的JavaScript调用我们的Function–这意味着必须添加CORS支持。即使对于能够使用SPFx工作台进行测试,这也至关重要,并且我们需要指定将使用的任何URL(包括本地工作台URL)。为此,请找到“CORS” setting in the “Platform features”您的职能领域:

SNAGHTML7350bc9

进入该目录后,指定将托管JS代码的任何URL域,这些JS代码将调用您的Function–如下图所示,这通常是您的Office 365租户域,也是本地SPFx工作台URL(http:// _ localhost:4321):

SNAGHTML73c8aab

请点击“Save” to store the settings. 您r Azure 功能 can now be called 从 SPFx.

通过NuGet添加SharePoint PnP Core组件

若要调用SharePoint PnP方法,最好的选择是对NuGet使用Azure 功能s支持–作为替代 可以 获取PnP DLL并将其上传到您的函数’s bin目录,但是NuGet方法更简单。第一次运行代码时,您指定为依赖项的任何NuGet软件包都会下载并安装到Function中’s directory.

This is done by adding a project.json file in the directory of your Azure 功能:

SNAGHTML7417101

像这样添加内容以指定“SharePointPnPCoreOnline” NuGet package:

如果您之前配置了源代码管理集成,请记住’我将需要立即签入以便构建代码:

SNAGHTMLad0d181

为SharePoint凭据配置应用程序设置

作为最后的准备步骤,我们’将添加一些“应用程序设置”变量以存储用于调用SharePoint(以创建现代页面)的用户名/密码。我们’之所以这样做,是因为我们 ’将使用SharePointOnlineCredentials(即简单的用户名和密码)向SharePoint进行身份验证。对于现实生活中的用途,您应该考虑使用应用程序身份验证,无论是SharePoint加载项种类还是Office 365 / Azure AD应用程序种类–在后一种情况下,您’d当然需要使用adal.js或类似的获取访问令牌来传递给您的函数 (更新– no longer. 您 can now use the AadHttpClient or MSGraphClient objects built into SPFx v 1.4.1 or later –这些可用于调用受AAD保护的Web API。看到 在SharePoint Framework中使用Azure AD保护的消费API)。 在这种情况下,我们’我要做两件事 一些 事物的安全性和可管理性:

  • 确保我们的Azure功能需要以以下形式进行简单身份验证“API key” –调用代码必须提供此
  • 将凭据存储为Azure功能的App设置以调用SharePoint– that way they’不要在任何地方进行硬编码或以明文形式存储在任何特定文件中

Configuring App Settings for a 功能 is just like doing it for any Azure web app:

  1. 转到“Application Settings” area within “Platform Features” in your 功能 app:

    SNAGHTMLaebf4f4
  2. 在那里,输入您要使用以下方式连接到SharePoint的用户名和密码的键/值:

    SNAGHTMLaed6414
  3. 请点击“Save”。这些值现在将可用于您的代码。

The corresponding C# code to use in your 功能 to fetch these values is this:

字符串ADMIN_USER_CONFIG_KEY ="SharePointAdminUser";
字符串ADMIN_PASSWORD_CONFIG_KEY ="SharePointAdmin密码";
字符串adminUserName = System.Environment.GetEnvironmentVariable(ADMIN_USER_CONFIG_KEY,EnvironmentVariableTarget.Process);
字符串adminPassword = System.Environment.GetEnvironmentVariable(ADMIN_PASSWORD_CONFIG_KEY,EnvironmentVariableTarget.Process);

 

概要

We’现在,完成设置步骤。我们的Azure功能已配置有CORS,可以调用SharePoint PnP Core库,具有一些用于凭据的应用程序设置,并已从GitHub进行了持续部署配置。在下一篇文章中,我们讨论双方使用的代码–TypeScript / SPFx代码来调用该函数,以及起作用的函数内部的代码-请参见 第2部分- calling 从 SPFx and passing data.

2017年4月11日,星期二

在SUGUK伦敦发表关于SPFx开发人员的演讲– 四月 20, 2017

下周 英国SharePoint用户组(SUGUK) 在Microsoft Paddington举行开发人员之夜。一世’我很期待参与,并将给予我“SharePoint Framework(SPFx)开发中的陷阱”谈论。让开发人员专注于活动将是一件很棒的事– there’目前,Azure功能,团队可扩展性,现代网站和页面之间的开发环境发生了许多变化,到SharePoint框架带来的整体转变’重点介绍npm,gulp,TypeScript等。我尊敬的北方人比尔·艾尔斯(Bill Ayers)正在另一场会议上– he will open with “欢迎来到SharePoint和Office 365开发的新世界”。这应该是SharePoint框架总体主题的一个很好的介绍,它将使我更深入地了解现实世界中的陷阱以及如何避免它们。

晚上的详细信息是:

SUGUK开发人员之夜

什么时候: 20/04/2017从6:30 pm-9:00 pm
哪里: 微软,帕丁顿(//www.microsoft.com/en-gb/about/ukoffices/london-paddington/)
议程:

  • 下午6:00–欢迎/注册等
  • 下午6点30分– Bill Ayers : “欢迎来到SharePoint和Office 365开发的新世界”
  • 晚上7:30– break
  • 8:00 PM– 克里斯·奥’Brien : “SharePoint Framework(SPFx)开发中的陷阱”
  • 9:00 PM– finish/SharePint

您 can sign up here – http://uk.communities.tech/events/sharepoint-user-group-london-developer-night/

主题一’内容包括npm,依赖项,使用模块的现有JS代码重用,SPFx安全性,捆绑等等。

图片

不幸的是,事件没有’没有录制或流媒体设施,但是如果您’重返该地区,很高兴见到你!

2017年4月5日,星期三

Office 365开发人员Power BI简介– slide deck

I’最近与Power BI进行了一些合作,’从开发人员的角度来看,这是一个非常有趣的世界。您可以快速完成需要很多代码的事情,而且’这样给人留下了深刻的印象。很长一段时间以来,我对与Power BI的技能差距感到内gui(“称自己为Office 365架构师,您可以’甚至没有配置切片器!”), but happily I’我现在已经获得了一些知识,现在在那方面睡得更好了;)我认为’很容易忽略Power BI,并假设您需要进行自定义开发工作才能满足围绕呈现数据的某些客户端要求– but often it’可以翻转周围的东西并说“如果我们给您这样的东西,它会带来X,Y和Z收益,该怎么办?”

对我来说,主要亮点是:

  • 体面的网格控件,具有排序/过滤,移动支持等功能。–无需获取数据并绑定到网格的代码
  • 简易图表–还有很多可供选择
  • 简易地图
  • 强大的移动支持
  • 可以嵌入网页中(例如通过SPFx Power BI Web部件)

为了确定Power BI是否适合您的需求,我用这张幻灯片对其进行总结:

图片

您学习的课程–视觉效果,滤镜,切片器…并发布到SharePoint页面

开始时,我觉得自己学到了一些教训。在下载错误的内容后,我什至设法烧掉了2或3个小时的错误位(提示– it’s Power BI桌面 您需要的不是Windows商店中的应用程序!)我还花了一些时间来掌握将可视化添加到报表中以及使控件相互配合的基本过程(例如,在饼图中选择一个项目)图表以从我的数据中过滤行)。我试图捕捉其中的一些知识“lunch and learn”与我的团队聊天,但希望幻灯片对从Power BI开始的其他人可能有用。

It’现在它也特别有趣’将Power BI报表嵌入SharePoint页面非常容易。万一你没有’不知道,Microsoft有一个新的Web部件支持此功能,尽管它只能在现代页面上使用:

图片

请记住,所有用户都需要获得适当的许可才能查看报告(即,当前情况下,他们需要E5许可证或Power BI Pro附加许可证)。如果没有’为你工作’s always the “publish to web” option if you’可以匿名访问“每个人都可以看到我的数据” approach:

图片 

简报

反正这里’s滑座,以防’s of use:

 
快乐的数据呈现!