Say Hello to Azure App Service John McNiel

Transcription

1 Say Hello to Azure App Service John McNiel Consultant

2 What We ll Cover: Create To Do List Web App Explore each project Publish to Azure as an API App Connect to App in the cloud & consume data

3 Azure App Service Multi-Platform Development using Azure App Service Does your organization use multi-platform web and mobile applications? Are you worried about maintaining platform-specific code bases? Worry no more, Azure App Service is a fully integrated solution designed to address these very concerns. In this presentation, we will look at the tools Azure offers and review how these can benefit your own organization. Some world class companies using Azure:

4 Quick Azure Overview PaaS, IaaS, SaaS and other acronyms Platform as a service Infrastructure as a service Software as a service Scale environments as needed, pay as you go Large selection of resources available Scale to meet business requirements, growth Faster implementations rapid provisioning of systems Simplify management & maintenance of infrastructure

5 The New Azure App Service App Services combines the Web App and Mobile App capabilities (previously offered separately as Azure Websites and Azure Mobile Services). Web + Mobile + Logic + API Apps Run multiple apps within a single App Service deployment Run on managed, isolated VM s with autoscaling based on resource consumption. Connect apps across multiple scenarios, including on-premises resources, cloud resources, mobile and desktop, social media

6 Why Azure App Service? Multi-Platform Development Web & Mobile apps using single back-end API s, Connectors, Logic Apps Connect to Saas with built-in connectors (50+) like Office365, Salesforce, Facebook, Twitter, Quickbooks, Dropbox, OneDrive Integrate mobile and web app systems using REST API s, Enterprise apps with BizTalk For Developers continuous integration support with VS Team Services and GitHub. Deploy updates with built-in staging, roll-back and in-production testing capabilities.

7 What Can You Do? Azure App Services allows developers to combine app types into a single solution that targets multiple platforms while sharing a common back-end. Multiple platforms (Desktop, Mobile Device, REST API) Traditional dev or no-code solutions Work with offline data, synch to back-end API Add/change business logic with VS Online Hybrid connections & VPN support Authorization /Authentication Azure AD

8 Familiar Tools Build apps using the tools & platforms you are familiar with..net MS SQL Java PHP MySQL Node.js Python GitHub Visual Studio Team Services Azure App Service supports multiple development platforms with rapid provisioning of infrastructure.

9 Preparing Visual Studio Install the Azure SDK New Project > Cloud > Get Windows Azure SDK for.net

10 Azure SDK for.net Provides access to Azure development quick starts, project templates for various app types.

11 To-Do List App Walkthrough What s covered: How to work with API and Web app projects How to deploy an API to Azure app service How to make API discoverable using Swashbuckle NuGet pkg. to generate Swagger API definition JSON Consume API from.net API Client Try Azure App Service for Free:

12 Solution Architecture The three projects in this solution ToDoListAngular Front end: AngularJS that talks to the middle-tier. ToDoListAPI Middle tier: ASP.NET Web API project that talks to data tier. ToDoListDataAPI Data tier: Web API project that performs the CRUD operations on To-do items. (we ll take a more in-depth look in a bit)

13 Swashbuckle & Swagger Huh? Funny names, but they add important functionality for your API. Swashbuckle is a NuGet package that provides an easy way to add Swagger to Web API s. It comes pre-installed on the Azure API App template. Swagger is a specification for documenting REST API. It specifies the format (URL, method, and representation) to describe REST web services. It provides also tools to generate/compute the documentation from application code.

14 More Swagger... Swagger produces metadata that describes and documents your API to systems that want to consume it. It s like Interactive Documentation. One reason so many API s are hard to work with is lack of good documentation. Language agnostic Removes guesswork in calling an API Offers a UI to test drive functions Free! { "swagger":"2.0", "info":{ "version":"v1", "title":"todolistdataapi" }, "host":"localhost:45914", "schemes":[ "http" ], "paths":{ "/api/todolist":{ "get":{ "tags":[ "ToDoList" ], "operationid":"todolist_getbyowner", "consumes":[

15 Swagger UI View View the swagger UI (Uncomment the EnableSwaggerUI line in ToDoListDataAPI SwaggerConfig.cs file) This is commented out by default for security. Make sure ToDoListDataAPI is set as the startup project.

16 Running the Projects First, we ll setup the projects in the right startup order Then set the AngularJS project as the startup project so we can view the UI and see how it works.

17 App User Interface The Todo list is a basic app for entering tasks into a database. For the demo we re just using inmemory data, but the back-end could use SQL, MySQL, NoSQL DocumentDB (for json), etc... AngularJS handles the UI functionality, calling the middle tier (ToDoListAPI) which interacts with the data tier (ToDoListDataAPI)

18 Exploring the Pieces Front End ToDoListAngular Highlights: This project handles the UI, data entry AngularJS provides concise code for working with json/ajax AngularJS directives extend HTML elements for app functions. AngularJS Routes allow for single page app w/views (injected into ng-view element) Bootstrap for styling/mobile compatibility Uses CSHTML (Razor view engine), which integrates seamlessly with AngularJS

19 Exploring the Pieces Middle Tier ToDoListAPI Highlights: This project handles the communication between the UI and the database (middle tier) Contains Business logic, ActionFilters ToDoListController has main functions Contains Web API routes Contains the Swagger config file ToDoListDataAPI folder contains the generated client classes Controller uses generated client to call the data tier

20 Exploring the Pieces Data Tier ToDoListDataAPI Highlights: This project serves as the data tier For demo, sets up mock data (in controller) Controller contains functions for retrieving data Get, GetById, Post, Put (update), Delete Model for ToDoItem

21 Publishing in Azure Create API App in Azure and publish the ToDoListDataAPI project to it. We ll use the built-in publishing tools in Visual Studio to create the app and deploy our API. Once published, accessing the API from our client will pull data from the cloud.

22 Create App Service Set your subscription and Resource group, then click New to create an App Service

23 Create App Service Enter a unique name for the App Create a resource group or use existing one Click New to create App Service Plan

24 Create App Service Enter a Service Plan name Choose Location near you Select size Click OK

25 Create App Service Review & Click Create App Service will be created in Azure (see progress at lower left)

26 Publish to Azure Click Publish to publish the app. Apps can also be created & published from the Azure portal, using Powershell, or the Crossplatform Command-line Interface (Azure CLI)

27 App Successfully Created The App has been published! Now we can connect to it in the cloud using Swagger to view the API definition. Use the following URL to view:

28 View in the Cloud

29 Manage in Azure Portal View In the Azure Portal Under App Services, you can view info about your app, start/stop, delete, adjust settings. To view or change the URL for the API definition, Click API Definition in App settings. Add the URL:

30 Generate API Client Code Now we will create the client code to consume the API. Delete the ToDoListDataAPI folder in the ToDoListAPI project (this was already in the project) Select the ToDoListAPI project, right-click and select Add, then REST API Client

31 Generate API Client Code We ll download the metadata from our newly published Azure app

32 Generate API Client Code The app service we created will appear in the dialog box select it and click OK. The URL for the Swagger API definition now appears in the metadata line.

33 Generate API Client Code In the constructor method, we need to adjust the type name of the API client to the name we used for the app. Controllers/ToDoListController.cs

34 Next Steps - Publish the Middle Tier to Azure In Solution Explorer, right-click the ToDoListAPI project, and then click Publish. In the Profile tab of the Publish Web wizard, click Microsoft Azure App Service. In the App Service dialog box, click New. In the Hosting tab of the Create App Service dialog box, click Change Type, and change the type to API App. Enter an API App Name that is unique in the azurewebsites.net domain. Choose the Azure Subscription you want to work with. In the Resource Group drop-down, choose the same resource group you created earlier. Important! In the App Service Plan drop-down, choose the same plan you created earlier. Click Create. Before publishing, go to next step!

35 Add App Settings In Azure Portal, navigate to the newly created middle tier app, then to Settings > Application Settings Create an App Settings Key/Value entry Key: todolistdataapiurl Value: (URL to the Data tier app) Be sure to keep the same key name that s in the ToDoListAPI project s app.config! Click save This sets the Data tier URL in the Middle tier s app settings

36 Successfully published Once everything processes, the Successfully created page appears. Now you can view the API app s Swagger definition and see that it pulls data from the cloud-based data tier.

37 Q&A Questions about Azure App Service?

38 Azure Everywhere Ask about signing up for the workshop

39 LET S GET STARTED We re ready as soon as you are.

40 THANK YOU John McNiel Consultant