GAB2017 - Azure function to build serverless SharePoint apps
•Download as PPTX, PDF•
1 like•262 views
Presentation how to create serverless SharePoint apps using Azure function. In this presentation, audience will be guided to create fully functional app. Source code for this presentation is available in GitHub, and the steps is available in YouTube.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to GAB2017 - Azure function to build serverless SharePoint apps
Similar to GAB2017 - Azure function to build serverless SharePoint apps (20)
More from Riwut Libinuko
More from Riwut Libinuko (8)
Recently uploaded
Recently uploaded (20)
GAB2017 - Azure function to build serverless SharePoint apps
- 1. Using Azure Function to Build Serverless SharePoint App Riwut Libinuko
- 2. Survey Office Developer • Complete this survey and collect limited Office DeveloperT-Shirt http://bit.ly/office-dev
- 3. Riwut Libinuko Office Server and Services MVP, a Master degree holder in Computer System Engineering. Principal Architect in large system integrator MNC. Active contributor to MSDN Forum, Github, Nuget and PowerShell Gallery. http://blog.libinuko.com @cakriwut http://www.youtube.com/user/cakriwut/
- 4. Agenda • Introduction to SharePoint Framework (SPFx) • Walkthrough SPFx development • Create Azure Function • Azure Function Continuous Deployment Build fully functional serverless “SPFile compress app” using SharePoint Framework and Azure Function DEMO + GITHUB
- 5. Do you know this add-ins? https://store.office.com/en-us/app.aspx?assetid=WA104214002
- 6. We will learn to create Serverless App Compress SPFile into a ZIP Azure FunctionSharePoint Framework
- 8. What just happened? - Create web part solution using Yeoman - It works as in create solution in Visual Studio - Start the local Workbench server - It works as if we use IIS Express & .NET Framework - Run build toolchain such as JSLint, launch workbench - It works as if using MSBuild - Packages repository , just like Nuget - Programming language, a superset of JavaScript IIS Express MSBuild C#
- 9. UI and JS Frameworks
- 10. Demo 1 Creates web part using SharePoint Framework Running in local workbench and SharePoint Online workbench
- 11. Handy commands .. yo @microsoft/sharepoint create new project or add new web part gulp trust-dev-cert register self-signed SSL certificate in local computer gulp serve bundle project and start workbench gulp bundle build and bundle the project gulp package-solution build solution package (.spapp) file --ship command argument to execute release build
- 12. Let’s complete our webpart!
- 13. Demo 2 Adding web part properties Consume SharePoint REST API Render list of files and download as Zip link
- 14. What just happened? • Add JavaScript components in web webpart (Jquery) • Define UI model for rendering • Add mockup data • Query SharePoint REST API • Map REST API result to UI model • Test in local/SPO workbench
- 15. Let’s create Azure Function!
- 16. Demo 3 Create & modify Azure function Configure continuous deployment
- 17. What just happened? • Add system reference using “#r” statement • Define external dependencies in project.json • Use Azure AD application to execute REST call to SharePoint • Use private key certificate to consume Azure AD application • Return compressed SPFile in response stream
- 18. Serverless App is Ready! Azure Function SPFx SharePoint Online Azure AD
- 19. Survey Office Developer • Complete this survey and collect limited Office DeveloperT-Shirt http://bit.ly/office-dev
- 20. Survey • Participate with us and win exciting prizes http://bit.ly/mygab TweetTags: #GlobalAzure #GABSG
- 22. Stay till end SWAGs, PRIZES,TAKE-AWAYS Xbox One System Microsoft Azure IoT Starter Kit with Raspberry Pi 3 Raspberry Pi 3 Software Licenses and more...
- 23. Get Started with Office Development • Source code, CompressSPFile - https://github.com/cakriwut/Azure-Function-SPOL • Source code, SPZip - https://github.com/cakriwut/SpZip-Webpart • Free Office 365 dev tenant – https://dev.office.com/blogs/office-developer-program • Sample 40 SPFx webparts – https://github.com/OlivierCC/spfx-40-fantastics • Getting started with SPFx - https://dev.office.com/blogs/getting-started-with- sharepoint-framework-development • Office Dev Center - https://dev.office.com/ • Channel 9 SPFx webcast - https://channel9.msdn.com/blogs/OfficeDevPnP/PnP- Web-Cast-Getting-started-with-SharePoint-Framework • SharePoint Framework Developer - https://github.com/SharePoint/sp-dev-docs/wiki
- 24. GetStartedwithMicrosoftAzure Get theSDKs and command-line tools you need http://azure.microsoft.com/en-us/downloads/ Learn more http://azure.microsoft.com/ Likeusour Facebook page Joinus@ meetup group
Editor's Notes
- Introduction My name is Riwut Libinuko, I am Office Server and Services MVP. I am working as principal architect in large system integrator in Singapore. Our company provides end-to-end services for different business domain vertical such as Public Sector, Bank Finance and Insurance, Logistic, Manufacturing and many more. We are offering application design and development, shared services and infrastructure services. I am active contributor to MSDN Forum, Github. There are many of tools that I publish in Nuget, PowerShell Gallery, Office Store, or Visual Studio Marketplace. Many of them are free and the source is openly available in Github. Please feel free to connect to my social media twitter, blog or youtube channel. Just take a not the url or public id for your reference. By the way, this picture was taken in Malang , East Java, Indonesia. I am wearing traditional costume, and besides me there are masks depicting our traditions in Indonesia. You may want to visit Malang for your next holiday! Just book a ticket to Surabaya, and rent car to drive you to Malang. The city is cold because it’s on the highland area.
- Agenda Our agenda today is to build server less SharePoint apps. So by end of this session, you can bring a fully functional server less SharePoint apps. The apps will compress a SharePoint file from document library upon click. So instead of getting the file *.pdf, *.doc, *.vsx etc. , we will getting a zip file. I will make it very basic, but it is fully functional and you can continue to improve it. The UI or web part will be developed using SharePoint Framework (SPFx). For you who just starts to learn SharePoint don’t worry, it’s a JavaScript modern app development framework for SharePoint. The web part will display list of file from selected document library, with link to download original file and link to download the zip file. Then we will create Azure Function to provide business service to the apps. The Azure Function will handle compressing SharePoint file to zip. If the time permits, I will continue to show to to publish and package the app to CDN. However you can also google the process, or shoot me an email.
- I know by this time, most of you have been using SharePoint 2013 or SharePoint Online? Is anybody here still not familiar with SharePoint? Do you know, one of the feature that is missing from Document Library is the capability to compress or create a zip file from one or more files in document library on the fly. For example when we want to download one folder from document library, or when we want to download multiple files as a zip. So this application SPZip Lib will do just that, it is provider hosted SharePoint Add-Ins that will create a zip file from the selected files or folder. It gives the real-time progress update during the process. When we talk about the feature, it simply takes an input and create a zip file. But on the reality, the implementation is more complex than that. Because the publisher must create MVC application as a back-end, and it is a full blown application. The backend application also contains instructions, contact etc. But essentially, those extra content are not necessarily needed. And I know this problem, because this is my add-ins. When I built this app, I started to think why I have to add CMS like while I just want to build a simple feature? From the operational cost perspective, it will be very efficient if I will only pay per execution call of my function – and not during the operational of my application.
- Then here we come Azure Function. Azure Function allow us to build just a function and publish to the cloud to get all elasticity and scalability and offering from the cloud. To build the same apps just like SPZip Lib does without a server or Serverless, we will need a web part as UI layer and Azure Function as the Business layer. And Microsoft provides us just the right tools at the right time - a development framework name SharePoint Framework. Soon, I will show you how to create serverless app to compress SharePoint File using SharePoint Framework for the UI presentation and Azure Function as the processing Business layer. Before we continue, let me open my console and trigger a command. I create a folder SPZip-Webpart I go to the folder and type yo @Microsoft/sharepoint I complete the wizard , specifying the web part name SPZipLib , I don’t need to repeat Webpart since the scaffold will add web part in the name. I choose no Javascript framework and let it run in the background. Lets continue to the next slide
- I am using yo generator for SharePoint. Yo is a yeoman command. And Yeoman is web scaffolding tools for modern apps. It is similar with selecting and creating project using project template in Visual Studio. The different is Yeoman can generate any time of project type, regardless the editor or language we are using. Basically it is just scaffolding tools, and the plugin owner decide what artifacts that they want in the project. Next we will see NodeJS work in the background to provide hosting for the workbench. Node.js is a platform built on Chrome's JavaScript runtime for easily building fast and scalable network applications. Workbench is a working area to visualize our webpart. In this case NodeJS works similar with IIS Express and .NET framework. Both provide hosting and base runtime service for the application. We will launch the application using Gulp. Gulp is Javascript task runner, that let’s us automate one or more tasks into a single continuous workflow. In this case we will use gulp to run jslint, package, and launch the workbench. Later we also see how to use gulp to publish the webpart to Azure storage. Then we have NPM to download packages, library just like Nuget. We can download jQuery, jQueryUI, office fabric and many more packages in NPM. There are thousands of packages in NPM and you should search before starting your own – because someone might already build it before. And finally, the whole application is Javascript written using TypeScript. TypeScript is typed superset of Javascript. It compiles the code into plain Javascript. C# developer will love it because they can reuse the same knowledge in C# and to bring as TypeScript development.
- AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology. Office UI Fabric is front-end framework for building experiences for Office and Office 365. Fabricis a responsive, mobile-first collection of styles and tools designed to make it quick and simple for you to create web experiences using the Office Design Language. Its available in ReactJS as well as AngularJS. React is a declarative, efficient, and flexible JavaScriptlibrary for building user interfaces. ... Your components tell React what you want to render – then React will efficiently update and render just the right components when your data changes. jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. .. So I hope our scaffold is ready, lets continue the demo
- In this first demo, we will launch the web part in local workbench and then we also run the same in SharePoint Online workbench. /_layouts/15/workbench.aspx
- We will continue and complete our web part now. I am going to add 2 properties – Document Library name, and Azure Function URL. At this moment, we still don’t have our Azure function, so it will be just blank. Then, I am going to consume SharePoint REST API. I will use the Document Library name as parameter for the REST API. Finally, I will render the list of the files, and provide a link to download the file as ZIP. The link will actually trigger Azure Function HTTP endpoint and return zip file.