say hello to azure app service hello to azure app service john mcniel ... for the demo we’re just...
TRANSCRIPT
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
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:
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
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
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.
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
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.
Preparing Visual Studio
Install the Azure SDK
New Project > Cloud >
Get Windows Azure SDK for .NET
Azure SDK for .NET
Provides access to Azure development quick starts, project templates for various app types.
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:
https://tryappservice.azure.com/
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)
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.
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":[
Swagger UI View
View the swagger UI
(Uncomment the EnableSwaggerUI line in ToDoListDataAPISwaggerConfig.cs file)
This is commented out by default for security.
Make sure ToDoListDataAPI is set as the startup project.
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.
App User Interface
The Todo list is a basic app for entering tasks into a database. For the demo we’re just using in-memory 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)
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
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
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
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.
Create App Service
Set your subscription and Resource group, then click ‘New’ to create an App Service
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
Create App Service
• Enter a Service Plan name
• Choose Location near you
• Select size
• Click OK
Create App Service
• Review & Click ‘Create’
• App Service will be created in Azure
• (see progress at lower left)
Publish to Azure
Click ‘Publish’ to publish the app.
Apps can also be created & published from the Azure portal, using Powershell, or the Cross-platform Command-line Interface (Azure CLI)
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:
http://{apiappname}.azurewebsites.net/swagger
View in the Cloud
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:
http://{appname}/swagger/docs/v1
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
Generate API Client Code
We’ll download the metadata from our newly published Azure app
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.
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
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!
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
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.
http://{apiappname}.azurewebsites.net/swagger
Questions about Azure App Service?
Q&A
Azure Everywhere
• Ask about signing up for the workshop
LET’S GET STARTEDWe’re ready as soon as you are.
