Participant Handbook

Transcription

1 Participant Handbook

2 Table of Contents 1. Create a Mobile application using the Azure App Services (Mobile App). a. Introduction to Mobile App, documentation and learning materials. b. Steps for creating an ios app. c. Steps for creating an Android app. 2. Create a Web application using the Azure App Services (Web App). a. Introduction to Web App, documentation and learning materials. b. Steps for creating an ASP.NET web app. 3. Integrate your web/mobile application with different APIs using the Azure API App. 4. Create logic and events for your application using Azure Logic App. 5. References 6. Additional learning material

3 1. Create a Mobile application using the Azure App Services (Mobile App) 1.1. Introduction Mobile Apps in Azure App Service helps in building ios, Android, or Windows apps, or crossplatform apps using Xamarin or Cordova. Detailed Documentation: Create an ios app Overview This tutorial shows how to add Azure App Service Mobile Apps, a cloud backend service, to an ios app. The first step is to create a new mobile backend on Azure. Then, download a simple Todo list ios sample app that stores data in Azure. To complete this tutorial, you need a Mac and an Azure account Step I: Create a new Azure mobile app backend 1. Sign in to the Azure portal. 2. Click Create a resource. 3. In the search box, type Mobile Apps. 4. In the results list, select Mobile Apps Quickstart, and then select Create.

4 5. Choose a unique App name. This will also be part of the domain name for your App Service. 6. Under Resource Group, select an existing resource group or create a new one (using the same name as your app). 7. Click Create. Wait a few minutes for the service to be deployed successfully before proceeding. Watch the Notifications (bell) icon in the portal header for status updates. Step II: Configure the backend project 1. Click the App Services button, select your Mobile Apps back end, select Quickstart, and then select your client platform (ios). 2. If a database connection is not configured, create one by doing the following: a. Create a new SQL database and server. You may need to leave the connection string name field to the default value of MS_TableConnectionString in order to complete step 3 below.

5 b. Wait until the data connection is successfully created. c. Data connection must be successful. 3. Under 2. Create a table API, select Node.js for Backend language. 4. Accept the acknowledgment, and then select Create TodoItem table. This action creates a new to-do item table in your database. Important Switching an existing back end to Node.js overwrites all contents. To create a.net back end instead, see Work with the.net back-end server SDK for Mobile Apps.

6 Step III: Download and run the ios app 1. On your Mac, visit the Azure portal. Click All Services > App Services > the backend that you just created. In the mobile app settings, choose your preferred language: Objective-C Quickstart > ios (Objective-C) Swift Quickstart > ios (Swift) Under 3. Configure your client application, click Download. This downloads a complete Xcode project pre-configured to connect to your backend. Open the project using Xcode. 2. Press the Run button to build the project and start the app in the ios simulator. 3. In the app, click the plus (+) icon, type meaningful text, such as Complete the tutorial, and then click the save button. This sends a POST request to the Azure backend you deployed earlier. The backend inserts data from the request into the TodoItem SQL table, and returns information about the newly stored items back to the mobile app. The mobile app displays this data in the list.

7 1.3. Create an Android app Overview This tutorial shows you how to add a cloud-based backend service to an Android mobile app by using an Azure mobile app backend. You will create both a new mobile app backend and a simple Todo list Android app that stores app data in Azure. Completing this tutorial is a prerequisite for all other Android tutorials about using the Mobile Apps feature in Azure App Service. Prerequisites To complete this tutorial, you need the following: Android Developer Tools, which includes the Android Studio integrated development environment, and the latest Android platform. Azure Mobile Android SDK, which is automatically referenced as part of the quickstart project you download. An active Azure account. Create a new Azure mobile app backend 1. Sign in to the Azure portal. 2. Click Create a resource. 3. In the search box, type Mobile Apps. 4. In the results list, select Mobile Apps Quickstart, and then select Create. 5. Choose a unique App name. This will also be part of the domain name for your App Service.

8 6. Under Resource Group, select an existing resource group or create a new one (using the same name as your app). 7. Click Create. Wait a few minutes for the service to be deployed successfully before proceeding. Watch the Notifications (bell) icon in the portal header for status updates. Configure the server project 1. Click the App Services button, select your Mobile Apps back end, select Quickstart, and then select your client platform (Android). 2. If a database connection is not configured, create one by doing the following: a. Create a new SQL database and server. You may need to leave the connection string name field to the default value of MS_TableConnectionString in order to complete step 3 below.

9 b. Wait until the data connection is successfully created. c. Data connection must be successful. 3. Under 2. Create a table API, select Node.js for Backend language. 4. Accept the acknowledgment, and then select Create TodoItem table. This action creates a new to-do item table in your database. Important Switching an existing back end to Node.js overwrites all contents. To create a.net back end instead, see Work with the.net back-end server SDK for Mobile Apps.

10 Download and run the Android app 1. Visit the Azure Portal. Click Browse All > Mobile Apps > the backend that you just created. In the mobile app settings, click Quickstart > Android. Under Configure your client application, click Download. This downloads a complete Android project for an app pre-configured to connect to your backend. 2. Open the project using Android Studio, using Import project (Eclipse ADT, Gradle, etc.). Make sure you make this import selection to avoid any JDK errors. 3. Press the Run 'app' button to build the project and start the app in the Android simulator. 4. In the app, type meaningful text, such as Complete the tutorial and then click the 'Add' button. This sends a POST request to the Azure backend you deployed earlier. The backend inserts data from the request into the TodoItem SQL table, and returns information about the newly stored items back to the mobile app. The mobile app displays this data in the list.

11 2. Create a website in Microsoft Azure Using Azure App Service 2.1. Introduction Azure App Service is a service for hosting web applications, REST APIs, and mobile back ends. You can develop in your favorite language, be it.net,.net Core, Java, Ruby, Node.js, PHP, or Python. Applications run and scale with ease on both Windows and Linux-based environments. App Service not only adds the power of Microsoft Azure to your application, such as security, load balancing, autoscaling, and automated management Build an ASP.NET app in Azure Azure App Service provides a highly scalable, self-patching web hosting service. This quickstart shows how to deploy your first ASP.NET web app to Azure App Service. When you're finished, you'll have a resource group that consists of an App Service plan and an App Service app with a deployed web application. If you don't have an Azure subscription, create a free account before you begin.

12 Prerequisites To complete this tutorial, install Visual Studio 2017 with the ASP.NET and web development workload. If you've installed Visual Studio 2017 already: Install the latest updates in Visual Studio by clicking Help > Check for Updates. Add the workload by clicking Tools > Get Tools and Features. Create an ASP.NET web app In Visual Studio, create a project by selecting File > New > Project. In the New Project dialog, select Visual C# > Web > ASP.NET Web Application (.NET Framework). Name the application myfirstazurewebapp, and then select OK.

13 You can deploy any type of ASP.NET web app to Azure. For this quickstart, select the MVC template, and make sure authentication is set to No Authentication. Select OK. From the menu, select Debug > Start without Debugging to run the web app locally.

14 Launch the publish wizard In the Solution Explorer, right-click the myfirstazurewebapp project and select Publish.

15 The publish wizard is automatically launched. Select App Service > Publish to open the Create App Service dialog. Sign in to Azure In the Create App Service dialog, select Add an account, and sign in to your Azure subscription. If you're already signed in, select the account containing the desired subscription from the dropdown. Note If you're already signed in, don't select Create yet.

16 Create a resource group A resource group is a logical container into which Azure resources like web apps, databases, and storage accounts are deployed and managed. For example, you can choose to delete the entire resource group in one simple step later. Next to Resource Group, select New. Name the resource group myresourcegroup and select OK. Create an App Service plan An App Service plan specifies the location, size, and features of the web server farm that hosts your app. You can save money when hosting multiple apps by configuring the web apps to share a single App Service plan. App Service plans define: Region: West Europe

17 Instance size: Larger Scale: 3 Instances SKU: Premium Next to Hosting Plan, select New. In the Configure Hosting Plan dialog, use the settings in the table following the screenshot. Setting Suggested Value Description App Service Plan myappserviceplan Name of the App Service plan. Location West Europe The datacenter where the web app is hosted. Size Premium Hosting features. Select OK. Create and publish the web app In App Name, type a unique app name (valid characters are a-z, 0-9, and - ), or accept the automatically generated unique name. The URL of the web app is where <app_name> is your app name. Select Create to start creating the Azure resources.

18 Once the wizard completes, it publishes the ASP.NET web app to Azure, and then launches the app in the default browser.

19 The app name specified in the create and publish step is used as the URL prefix in the format Congratulations, your ASP.NET web app is running live in Azure App Service. Update the app and redeploy From the Solution Explorer, open Views\Home\Index.cshtml. Find the <div class="jumbotron"> HTML tag near the top, and replace the entire element with the following code: HTML Copy <div class="jumbotron"> <h1>asp.net in Azure!</h1> <p class="lead">this is a simple app that we ve built that demonstrates how to deploy a.net app to Azure App Service.</p> </div> To redeploy to Azure, right-click the myfirstazurewebapp project in Solution Explorer and select Publish.

20 On the publish page, select Publish. When publishing completes, Visual Studio launches a browser to the URL of the web app. Manage the Azure app Go to the Azure portal to manage the web app. From the left menu, select App Services, and then select the name of your Azure app.

21 You see your web app's Overview page. Here, you can perform basic management tasks like browse, stop, start, restart, and delete. The left menu provides different pages for configuring your app. For creating a PHP web app: For creating a Java app:

22 3. Creating API Apps Azure App Service enables you to build and host web apps, mobile back ends, and RESTful APIs in the programming language of your choice without managing infrastructure. It offers auto-scaling and high availability, supports both Windows and Linux, and enables automated deployments from GitHub, Azure DevOps, or any Git repo. Learn how to use Azure App Service with our quickstarts, tutorials, and samples. Step-by-Step Tutorials Learn how to deploy, manage, and monitor secure web applications on Azure 1. Create an application using.net with Azure SQL DB or Node.js with MongoDB 2. Map an existing custom domain to your application 3. Bind an existing SSL certificate to your application 4. Add a CDN to your application 4. Creating Logic Apps Azure Logic Apps simplifies how you build automated scalable workflows that integrate apps and data across cloud services and on-premises systems. Learn how to create, design, and deploy logic apps that automate business processes with our quickstarts, tutorials, templates, and APIs. Tutorial to create your first automated workflow with Azure Logic Apps - Azure portal This quickstart introduces how to build your first automated workflow with Azure Logic Apps. In this article, you create a logic app that regularly checks a website's RSS feed for new items. If new items exist, the logic app sends an for each item. When you're done, your logic app looks like this workflow at a high level:

23 To follow this quickstart, you need an account from a provider that's supported by Logic Apps, such as Office 365 Outlook, Outlook.com, or Gmail. For other providers, review the connectors list here. This logic app uses an Office 365 Outlook account. If you use another account, the overall steps are the same, but your UI might slightly differ. Also, if you don't have an Azure subscription, sign up for a free Azure account. Sign in to the Azure portal Sign in to the Azure portal with your Azure account credentials. Create your logic app 1. From the main Azure menu, choose Create a resource > Integration > Logic App.

24 2. Under Create logic app, provide details about your logic app as shown here. After you're done, choose Create.

25 Property Value Description Name MyLogicApp The name for your logic app Subscription <your-azuresubscription-name> The name for your Azure subscription Resource group My-First-LA-RG The name for the Azure resource group used to organize related resources Location West Europe The region where to store your logic app information

26 Property Value Description Log Analytics Off Keep the Off setting for diagnostic logging. 3. After Azure deploys your app, the Logic Apps Designer opens and shows a page with an introduction video and commonly used triggers. Under Templates, choose Blank Logic App. Next, add a trigger that fires when a new RSS feed item appears. Every logic app must start with a trigger, which fires when a specific event happens or when a specific

27 condition is met. Each time the trigger fires, the Logic Apps engine creates a logic app instance that starts and runs your workflow. Check RSS feed with a trigger 1. On the designer, enter "rss" in the search box. Select this trigger: RSS - When a feed item is published 2. Provide this information for your trigger as shown and described:

28 Property Value Description The RSS feed URL The link for the RSS feed that you want to monitor Interval 1 The number of intervals to wait between checks Frequency Minute The unit of time for each interval between checks Together, the interval and frequency define the schedule for your logic app's trigger. This logic app checks the feed every minute. 3. To hide the trigger details for now, click inside the trigger's title bar. 4. Save your logic app. On the designer toolbar, choose Save. Your logic app is now live but doesn't do anything other than check the RSS feed. So, add an action that responds when the trigger fires. Send with an action Now add an action that sends when a new item appears in the RSS feed. 1. Under the When a feed item is published trigger, choose New step.

29 2. Under Choose an action, enter "send an " in the search box. Under the search box, choose All. From the actions list, select the "send an " action for the provider that you want. To filter the actions list to a specific app or service, you can select that app or service first: o o For Azure work or school accounts, select Office 365 Outlook. For personal Microsoft accounts, select Outlook.com.

30 3. If asked for credentials, sign in to your account so that Logic Apps creates a connection to your account. 4. In the Send an action, specify the data that you want the to include. 1. In the To box, enter the recipient's address. For testing purposes, you can use your own address. For now, ignore the Add dynamic content list that appears. When you click inside some edit boxes, this list appears and shows any available parameters from the previous step that you can include as inputs in your workflow. 2. In the Subject box, enter this text with a trailing blank space: New RSS item: 3. From the Add dynamic content list, select Feed title to include the RSS item title.

31 When you're done, the subject looks like this example: If a "For each" loop appears on the designer, then you selected a token for an array, for example, the categories-item token. For these kinds of tokens, the designer automatically adds this loop around the action that references that token. That way, your logic app performs the same action on each array item. To remove the loop, choose the ellipses (...) on the loop's title bar, then choose Delete.

32 4. In the Body box, enter this text, and select these tokens for the body. To add blank lines in an edit box, press Shift + Enter. Property Description Feed title The item's title Feed published on The item's publishing date and time Primary feed link The URL for the item 5. Save your logic app. Next, test your logic app. Run your logic app To manually start your logic app, on the designer toolbar bar, choose Run. Or, wait for your logic app to check the RSS feed based on your specified schedule (every minute).

33 If the RSS feed has new items, your logic app sends an for each new item. Otherwise, your logic app waits until the next interval before checking again. For example, here is a sample that this logic app sends. If you don't get any s, check your junk folder. Technically, when the trigger checks the RSS feed and finds new items, the trigger fires, and the Logic Apps engine creates an instance of your logic app workflow that runs the actions in the workflow. If the trigger doesn't find new items, the trigger doesn't fire and "skips" instantiating the workflow. Congratulations, you've now successfully built and run your first logic app with the Azure portal!

34 5. Reference.NET backend SDK - Node.js backend SDK - Android client SDK - ios client SDK 6. Learning Material Host a web application with Azure App Service: Deploy a website to Azure with Azure App Service: Publish a web app to Azure with Visual Studio