From 5fc1d0c0330def814d288e65a0a0161d77d756c9 Mon Sep 17 00:00:00 2001 From: Charles Prakash Dasari Date: Fri, 2 Feb 2018 22:58:59 -0800 Subject: [PATCH 1/8] Getting started for dotnet intermediate --- .gitignore | 1 + .../get-started/get-started-dotnet.md | 294 +++++++++++++++++- 2 files changed, 291 insertions(+), 4 deletions(-) diff --git a/.gitignore b/.gitignore index 6f69f9d595c..67446fe56bc 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,7 @@ log/ obj/ _site/ .optemp/ +.vscode/ _themes*/ _repo.*/ _dependentPackages/ diff --git a/msteams-platform/get-started/get-started-dotnet.md b/msteams-platform/get-started/get-started-dotnet.md index 9713366cfd8..6469c8f07b8 100644 --- a/msteams-platform/get-started/get-started-dotnet.md +++ b/msteams-platform/get-started/get-started-dotnet.md @@ -1,12 +1,298 @@ --- -title: Get started with .NET and C# -description: Get started building great apps in Microsoft Teams using the .NET Framework and C# +title: Get started with C#.NET +description: Get started building great apps in Microsoft Teams using C#.NET +description: Get started building great apps in Microsoft Teams using Node.js keywords: getting started .net c# csharp +ms.date: 01/02/2018 --- -# Get started on the Microsoft Teams platform with .NET and C# +# Get started on the Microsoft Teams platform with C#.NET > [!div class="op_single_selector"] > - [.NET](~/get-started/get-started-dotnet) > - [Node.js](~/get-started/get-started-nodejs) -Coming soon ... +[!include[Step 1 Intro](~/includes/get-started/step1-intro.md)] + +This tutorial helps you get started creating a Microsoft Teams app using C#.NET. You can test the app by loading it into a Team that you have permissions for, or into a test tenant created using the Office Developer Program. This topic is written to be platform independent. + +To create your app: + +> [!div class="checklist"] +> * [Prepare your Office 365 tenant](~/get-started/get-started-tenant) +> * [Prepare Microsoft Teams for development](#PrepareMicrosoftTeams) +> * [Get prerequisites](#GetPrerequisites) +> * [Download the sample](#DownloadSample) +> * [Build and run the sample](#BuildRun) +> * [Host the sample](#HostSample) +> * [Deploy your app into Microsoft Teams](#DeployToTeams) +> * [Configure the app tab](#ConfigureTheAppTab) + +Once you have your app running in the Teams platform, you can enhance it further by adding the following capabilities. Follow along this tutorial to learn how to add these capabilities to your app. + +> [!div class="checklist"] +> * [Add a bot to your app](#AddBot) +> * [Compose rich messages](#ComposeRichMessages) + + + +[!include[Get teams](~/includes/get-started/step1-prepare-for-dev.md)] + + + +## Get prerequisites + +To complete this tutorial, you need to get the following tools: + +* [Install Git](https://git-scm.com/downloads) +* [Install Node.js and NPM](https://nodejs.org/) +* Get any text editor. You can install and use [Visual Studio Code](https://code.visualstudio.com/download) for free. + +If you see options to add `git`, `node`, `npm`, and `code` to the PATH during installation, choose to do so. It will be handy. + +Verify your installation by running the following in a terminal window: +> [!NOTE] +> Use the terminal window that you are most comfortable with on your platform. These examples use Bash, but will run on most platforms. + +```bash +$ git --version +git version 2.15.0.windows.1 + +$ node -v +v6.11.4 + +$ npm -v +5.5.1 + +$ gulp -v +CLI version 1.4.0 +Local version 3.9.1 +``` + +You may have a different version of these applications. This should not be a problem. +If you don't have gulp installed, do so now by running `npm install gulp -g` in your terminal window. + +If you have installed Visual Studio Code, you can verify the installation by running: + +```bash +code --version +1.18.1 +929bacba01ef658b873545e26034d1a8067445e9 +``` + +You can continue to use this terminal window to run the commands that follow in this tutorial. + + + +## Download the sample + +We have provided a [simple 'Hello, World!' sample](https://github.com/OfficeDev/msteams-samples-hello-world-nodejs) to get you started. In a terminal window, run the following command to clone the sample repository to your local machine: + +```bash +git clone https://github.com/OfficeDev/msteams-samples-hello-world-nodejs +``` + +> [!TIP] +> You can [fork](https://help.github.com/articles/fork-a-repo/) this [repo](https://github.com/OfficeDev/msteams-samples-hello-world-nodejs) if you want to modify and check in your changes to GitHub for future reference. + + + +## Build and run the sample + +Once the repo is cloned, change to the directory that holds the sample: + +```bash +cd msteams-samples-hello-world-nodejs +``` + +In order to build the sample, you need to install all its dependencies. Run the following command to do this: + +```bash +npm install +``` + +You should see a bunch of dependencies getting installed. Once they are finished, you can run the app: + +```bash +npm start +``` + +When the hello-world app starts, it displays `App started listening on port 3333` in the terminal window. + +> [!NOTE] +> If you see a different port number displayed in the message above, it is because you have a PORT environment variable set. You can continue to use that port or +> change your environment variable to 3333. + +At this point, you can open a browser window and navigate to the following URLs to verify that all the app URLs are loading: + +* [http://localhost:3333](http://localhost:3333) +* [http://localhost:3333/hello](http://localhost:3333/hello) +* [http://localhost:3333/first](http://localhost:3333/first) +* [http://localhost:3333/second](http://localhost:3333/second) + + + +## Host the sample app + +Remember that apps in Microsoft Teams are web applications exposing one or more capabilities. For the Teams platform to load your app, your app must be reachable from the internet. To make your app reachable from the internet, you need to host your app. You can either host it in Microsoft Azure for free or create a tunnel to the local process on your development machine using `ngrok`. When you finish hosting your app make a note of its root URL. It will look something like: `https://yourteamsapp.ngrok.io` or `https://yourteamsapp.azurewebsites.net`. + +### Tunnel using ngrok + +For quick testing you can run the app on your local machine and create a tunnel to it through a web endpoint. [ngrok](https://ngrok.com) is a free tool that lets you do just that. With ngrok you can get a web address such as `https://d0ac14a5.ngrok.io` (this URL is just an example). You can [download and install](https://ngrok.com/download) ngrok for your environment. Make sure you add it to a location in your `PATH`. + +Once you install it, you can open a new terminal window and run the following command to create a tunnel. The sample uses port 3333, so be sure to specify it here. + +```bash +ngrok http 3333 +``` + +Ngrok will listen to requests from the internet and will route them to your app running on port 3333. You can verify by opening your browser and going to `https://d0ac14a5.ngrok.io/hello` to load your app's hello page. Please be sure to use the forwarding address displayed by ngrok in your console session instead of this URL. + +> [!NOTE] +> If you have used a different port in the [build and run](#build-and-run-the-sample) step above, make sure you use the same port number to setup the `ngrok` tunnel. +> [!TIP] +> It is a good idea to run `ngrok` in a different terminal window to keep it running without interfering with the node app which you might later have to stop, rebuild and rerun. The `ngrok` session will return useful debugging information in this window. + +The app will only be available during the current session on your development machine. If the machine is shut down or goes to sleep the service will no longer be available. Remember this when sharing the app for testing by other users. If you have to restart the service it will return a new address and you will have to update every place that uses that address. + +### Host in Azure + +Microsoft Azure lets you host your Node.js web application on a free tier using shared infrastructure. This will be sufficient to run this Hello-world sample. + +If you have never used Azure before, you can get started by creating a new free account. + +Follow this guide to help you get started: [Azure developer guide](https://docs.microsoft.com/en-us/azure/guides/developer/azure-developer-guide?toc=/microsoftteams/platform/toc.json&bc=/microsoftteams/platform/breadcrumb/toc.json#understanding-accounts-subscriptions-and-billing). + +To get your Node.js app hosted in Azure, you can follow the guide here: [Create a Node.js web app in Azure](/azure/app-service/app-service-web-get-started-nodejs?toc=/microsoftteams/platform/toc.json&bc=/microsoftteams/platform/breadcrumb/toc.json#launch-azure-cloud-shell). + +> [!NOTE] +> You would skip the steps to clone the repo from the guide above, because we already are working with a Node.js sample app for Microsoft Teams. +> For your convenience, the link above takes you directly to the location where you should start from, to host your app in Azure. + +Once you host your app in Azure, you can verify by opening your browser and going to `https://yourteamsapp.azurewebsites.net` (please be sure to use the right endpoint from your Azure App Service instead of this URL) to load your app's hello page. + + + +## Deploy your app to Microsoft Teams + +After hosting your app, you need to do a few updates to your app before it is ready to be deployed to your Microsoft Teams environment. + +### The app manifest + +The app manifest is a file that tells the Microsoft Teams platform all about your app and the capabilities it provides your users. You will learn more about apps and their capabilities later [here](~/concepts/apps/apps-overview), but for now focus on the modifications to the manifest needed to load the hello-world app in Microsoft Teams. + +You can find the manifest file at `src/manifest.json` within the hello-world sample. Please follow these steps to make the appropriate changes: + +#### Step 1: Change the APP ID in the manifest + +You need a unique **ID** to distinguish your app from others on the Microsoft Teams platform. This **APP ID** is a `GUID` and is set in the app manifest file. + +To get a unique value for your app follow the instructions in [Create a bot for Microsoft Teams](~/concepts/bots/bots-create). You will use the App Framework website to register your app. Use your app URL for the Messaging endpoint, followed by `"/api/messages"`. This should look something like: `https://d0ac14a5.ngrok.io/api/messages`. + +Make a note of the **APP ID** and at least one password generated by the Bot Framework. You will need this information later. + +Now edit the manifest file and set the value of the `"id"` property to the AppID returned by BotFramework. + +[!code-json[Manifest file](~/../_msteams-samples-hello-world-nodejs/src/manifest.json#L1-L12)] + +You will also need to change the botID value in the bots and the composeExtensions sections later in the manifest. + +[!code-json[Manifest file](~/../_msteams-samples-hello-world-nodejs/src/manifest.json#L41-L49)] + +[!code-json[Manifest file](~/../_msteams-samples-hello-world-nodejs/src/manifest.json#L50-L67)] + +You will learn more about Bots later in this guide. + +#### Step 2: Change the URLs in the manifest + +Change the URLs that point to `yourteamsapp.ngrok.io` to the URLs where the app is hosted. Microsoft Teams will load your app from this location. + +[!code-json[Manifest file](~/../_msteams-samples-hello-world-nodejs/src/manifest.json#L26-L40)] + +### Upload the app + +Once you update the manifest, you can rebuild the sample. To rebuild run the following command in the app terminal window, stopping the app if needed: + +```bash +gulp +``` + +This will generate a file `helloworldapp.zip` in the `manifest` directory within the root of the project directory. + +Use the **Upload a custom app** link in Teams to upload this zip file and install your app into one of the teams you own. See **Load your package into a team** in [Upload your app in Microsoft Teams](~/concepts/apps/apps-upload) for more information on how to do this. + +> [!NOTE] +> You might have stopped the node process in order to rebuild the app. If so, you will need to rerun the node process using the `npm start` command described in [Build and run the sample](#BuildRun). + + + +## Configure the app tab + +Once you install the app into a team, you will need to configure it to show content. Go to a channel in the team and click on the **'+'** button to add a new tab. You can then choose `Hello World` from the **Add a tab** list. You will then be presented with a configuration dialog. This dialog will let you choose which tab to display in this channel. Once you select the tab and click on `Save` then you can see the `Hello World` tab loaded with the tab you chose. + + + + + +## Add a bot to your app + +The sample already comes with a bot. The bot is defined in the manifest and looks like this: + +[!code-json[Manifest file](~/../_msteams-samples-hello-world-nodejs/src/manifest.json#L41-L49)] + +You need a bot definition for each bot contained in your app. In this case you already have a bot and have given it a registered **bot ID**, so all you will do is add credentials for the bot and test it. + +### Add credentials for the bot +In the hello-world project navigate to a folder named config. In this folder you will find a json file called default. This file contains the following code: + +[!code-json[Manifest file](~/../_msteams-samples-hello-world-nodejs/config/default.json#L1-L6)] + +Earlier you made note of the **APP ID** from the bot framework as well as a password. Use those vales for "microsoftAppId" and "microsoftAppPassword" in the config.js file. This is not a particularly safe location to store credentials, but it will work for this example. + +After these values are changed the app must be stopped, built using 'gulp', and run again using 'npm start'. Reload the app using the newly built zip file in Microsoft Teams. + +Do NOT stop your ngrok session or you will have to update all the ngrok urls associated with your app. + +### Test the bot with the bot emulator + +Before you run the bot in Teams, confirm that the bot works as expected using the [Bot Framework Emulator](/bot-framework/debug-bots-emulator?toc=/microsoftteams/platform/toc.json&bc=/microsoftteams/platform/breadcrumb/toc.json), a desktop application that allows bot developers to test and debug their bots. + +Once you have the emulator running, you will need three things to set up a connection: + +* The endpoint URL, which is the address where your bot is exposed. It can be the local address 'http://localhost:3333/api/messages', or an external address using the ngrok tunnel you set up earlier like `https://d0ac14a5.ngrok.io/api/messages`. +* The Microsoft App ID, which is the **ID** you used earlier. +* The Microsoft App Password from the Bot Framework which you made a note of earlier. + +> [!TIP] +> To verify your bot is working, just verify that it is echoing back whatever you say to it. + +If the bot is not working, check to see if your app is running, and check ngrok if you are using it. + +### Test your bot in Teams + +You can now interact with the bot in Teams. Choose a channel in the team where you registered your app, and type `@your-bot-name`. This is called an **@mention**. Whatever message you send to the bot will be sent back to you as a reply. + + + + + +## Compose rich messages + +The Microsoft Teams developer platform allows users to compose custom rich messages in their conversations through a feature called **Messaging Extensions**. Messaging extensions are used when you want to insert smart content into conversations, typically triggered by a search like action. For example you can use messaging extensions to insert a specific work item with its summary details such as title, assigned to, due dates, and links to access it directly on your planning application while starting a conversation about it. Messaging extensions are built over bots through special APIs and commands. Once you have a bot in the app, it is very easy to extend the bot to also handle **messaging extensions**. + +### Update the app manifest and reload the app in teams again + +The hello-world sample comes with a built in messaging extension, which looks something like this: + +[!code-json[Manifest file](~/../_msteams-samples-hello-world-nodejs/src/manifest.json#L50-L67)] + +You have already updated the botId used by the compose extension so there is no need to do that again. + +### Test your messaging extension + +To test your messaging extension, you can click on the three dots below the input box in your conversation view. A menu will pop up with the **'Hello World'** app in it. When you click it, you will see a bunch of random texts showing up. You can choose any one of them and it will be inserted it into your conversation. + + + + + + From 32721ed8795b76c6752543bd16f196616f2ea4c2 Mon Sep 17 00:00:00 2001 From: Charles Prakash Dasari Date: Fri, 2 Feb 2018 23:11:25 -0800 Subject: [PATCH 2/8] Intermediate checkin --- msteams-platform/get-started/get-started-dotnet.md | 1 - 1 file changed, 1 deletion(-) diff --git a/msteams-platform/get-started/get-started-dotnet.md b/msteams-platform/get-started/get-started-dotnet.md index 6469c8f07b8..eba1058f4e1 100644 --- a/msteams-platform/get-started/get-started-dotnet.md +++ b/msteams-platform/get-started/get-started-dotnet.md @@ -1,7 +1,6 @@ --- title: Get started with C#.NET description: Get started building great apps in Microsoft Teams using C#.NET -description: Get started building great apps in Microsoft Teams using Node.js keywords: getting started .net c# csharp ms.date: 01/02/2018 --- From 260346a748be2ca9302ff1afea24a1051d570b70 Mon Sep 17 00:00:00 2001 From: Charles Prakash Dasari Date: Sat, 3 Feb 2018 02:04:28 -0800 Subject: [PATCH 3/8] Adding csharp specific getting started instructions --- .gitignore | 1 + .openpublishing.publish.config.json | 5 + .../get-started/get-started-dotnet.md | 103 +++++------------- 3 files changed, 36 insertions(+), 73 deletions(-) diff --git a/.gitignore b/.gitignore index 67446fe56bc..2b413740657 100644 --- a/.gitignore +++ b/.gitignore @@ -11,3 +11,4 @@ _dependentPackages/ # Dependent repos _msteams-samples-hello-world-nodejs/ +_msteams-samples-hello-world-csharp/ diff --git a/.openpublishing.publish.config.json b/.openpublishing.publish.config.json index 3f16ab2ea2f..140656c539d 100644 --- a/.openpublishing.publish.config.json +++ b/.openpublishing.publish.config.json @@ -39,6 +39,11 @@ "path_to_root": "_msteams-samples-hello-world-nodejs", "url": "https://github.com/OfficeDev/msteams-samples-hello-world-nodejs", "branch": "master" + }, + { + "path_to_root": "_msteams-samples-hello-world-csharp", + "url": "https://github.com/OfficeDev/msteams-samples-hello-world-charp", + "branch": "prakash-getStarted" } ], "dependent_packages": [{ diff --git a/msteams-platform/get-started/get-started-dotnet.md b/msteams-platform/get-started/get-started-dotnet.md index eba1058f4e1..be408dbf3ea 100644 --- a/msteams-platform/get-started/get-started-dotnet.md +++ b/msteams-platform/get-started/get-started-dotnet.md @@ -43,12 +43,11 @@ Once you have your app running in the Teams platform, you can enhance it further To complete this tutorial, you need to get the following tools: * [Install Git](https://git-scm.com/downloads) -* [Install Node.js and NPM](https://nodejs.org/) -* Get any text editor. You can install and use [Visual Studio Code](https://code.visualstudio.com/download) for free. +* [Install Visual Studio 2017](https://www.visualstudio.com/downloads/). You can install the free community edition. -If you see options to add `git`, `node`, `npm`, and `code` to the PATH during installation, choose to do so. It will be handy. +If you see an option to add `git` to the PATH during installation, choose to do so. It will be handy. -Verify your installation by running the following in a terminal window: +Verify your `git` installation by running the following in a terminal window: > [!NOTE] > Use the terminal window that you are most comfortable with on your platform. These examples use Bash, but will run on most platforms. @@ -56,27 +55,9 @@ Verify your installation by running the following in a terminal window: $ git --version git version 2.15.0.windows.1 -$ node -v -v6.11.4 - -$ npm -v -5.5.1 - -$ gulp -v -CLI version 1.4.0 -Local version 3.9.1 ``` -You may have a different version of these applications. This should not be a problem. -If you don't have gulp installed, do so now by running `npm install gulp -g` in your terminal window. - -If you have installed Visual Studio Code, you can verify the installation by running: - -```bash -code --version -1.18.1 -929bacba01ef658b873545e26034d1a8067445e9 -``` +Make sure to launch Visual Studio 2017 and install any updates if shown. You can continue to use this terminal window to run the commands that follow in this tutorial. @@ -84,44 +65,22 @@ You can continue to use this terminal window to run the commands that follow in ## Download the sample -We have provided a [simple 'Hello, World!' sample](https://github.com/OfficeDev/msteams-samples-hello-world-nodejs) to get you started. In a terminal window, run the following command to clone the sample repository to your local machine: +We have provided a [simple 'Hello, World!' sample](https://github.com/OfficeDev/msteams-samples-hello-world-csharp) to get you started. In a terminal window, run the following command to clone the sample repository to your local machine: ```bash -git clone https://github.com/OfficeDev/msteams-samples-hello-world-nodejs +git clone https://github.com/OfficeDev/msteams-samples-hello-world-csharp ``` > [!TIP] -> You can [fork](https://help.github.com/articles/fork-a-repo/) this [repo](https://github.com/OfficeDev/msteams-samples-hello-world-nodejs) if you want to modify and check in your changes to GitHub for future reference. +> You can [fork](https://help.github.com/articles/fork-a-repo/) this [repo](https://github.com/OfficeDev/msteams-samples-hello-world-csharp) if you want to modify and check in your changes to GitHub for future reference. ## Build and run the sample -Once the repo is cloned, change to the directory that holds the sample: - -```bash -cd msteams-samples-hello-world-nodejs -``` - -In order to build the sample, you need to install all its dependencies. Run the following command to do this: - -```bash -npm install -``` - -You should see a bunch of dependencies getting installed. Once they are finished, you can run the app: - -```bash -npm start -``` - -When the hello-world app starts, it displays `App started listening on port 3333` in the terminal window. - -> [!NOTE] -> If you see a different port number displayed in the message above, it is because you have a PORT environment variable set. You can continue to use that port or -> change your environment variable to 3333. +Once the repo is cloned, open the solution file `Microsoft.Teams.Samples.HelloWorld.sln` from the root directory of the sample and click `Build Solution` from the `Build` menu. You can run the sample by pressing `F5` or choosing `Start Debugging` from the `Debug` menu. -At this point, you can open a browser window and navigate to the following URLs to verify that all the app URLs are loading: +When the app starts, you will see a browser window open with the root of the app launched. You can navigate to the following URLs to verify that all the app URLs are loading: * [http://localhost:3333](http://localhost:3333) * [http://localhost:3333/hello](http://localhost:3333/hello) @@ -155,7 +114,10 @@ The app will only be available during the current session on your development ma ### Host in Azure -Microsoft Azure lets you host your Node.js web application on a free tier using shared infrastructure. This will be sufficient to run this Hello-world sample. +> [!WARN] +> Update the following section to host .NET app in Azure using App Service. + +Microsoft Azure lets you host your Node.js web application on a free tier using shared infrastructure. This will be sufficient to run this `Hello World` sample. If you have never used Azure before, you can get started by creating a new free account. @@ -177,9 +139,9 @@ After hosting your app, you need to do a few updates to your app before it is re ### The app manifest -The app manifest is a file that tells the Microsoft Teams platform all about your app and the capabilities it provides your users. You will learn more about apps and their capabilities later [here](~/concepts/apps/apps-overview), but for now focus on the modifications to the manifest needed to load the hello-world app in Microsoft Teams. +The app manifest is a file that tells the Microsoft Teams platform all about your app and the capabilities it provides your users. You will learn more about apps and their capabilities later [here](~/concepts/apps/apps-overview), but for now focus on the modifications to the manifest needed to load the `Hello World` app in Microsoft Teams. -You can find the manifest file at `src/manifest.json` within the hello-world sample. Please follow these steps to make the appropriate changes: +You can find the manifest file at `Manifest/manifest.json` within the root directory of the project `Microsoft.Teams.Samples.HelloWorld.Web`. Please follow these steps to make the appropriate changes: #### Step 1: Change the APP ID in the manifest @@ -191,13 +153,13 @@ Make a note of the **APP ID** and at least one password generated by the Bot Fra Now edit the manifest file and set the value of the `"id"` property to the AppID returned by BotFramework. -[!code-json[Manifest file](~/../_msteams-samples-hello-world-nodejs/src/manifest.json#L1-L12)] +[!code-json[Manifest file](~/../_msteams-samples-hello-world-csharp/Microsoft.Teams.Samples.HelloWorld.Web/Manifest/manifest.json#L1-L12)] You will also need to change the botID value in the bots and the composeExtensions sections later in the manifest. -[!code-json[Manifest file](~/../_msteams-samples-hello-world-nodejs/src/manifest.json#L41-L49)] +[!code-json[Manifest file](~/../_msteams-samples-hello-world-csharp/Microsoft.Teams.Samples.HelloWorld.Web/Manifest/manifest.json#L45-L55)] -[!code-json[Manifest file](~/../_msteams-samples-hello-world-nodejs/src/manifest.json#L50-L67)] +[!code-json[Manifest file](~/../_msteams-samples-hello-world-csharp/Microsoft.Teams.Samples.HelloWorld.Web/Manifest/manifest.json#L56-L79)] You will learn more about Bots later in this guide. @@ -205,22 +167,16 @@ You will learn more about Bots later in this guide. Change the URLs that point to `yourteamsapp.ngrok.io` to the URLs where the app is hosted. Microsoft Teams will load your app from this location. -[!code-json[Manifest file](~/../_msteams-samples-hello-world-nodejs/src/manifest.json#L26-L40)] +[!code-json[Manifest file](~/../_msteams-samples-hello-world-csharp/Microsoft.Teams.Samples.HelloWorld.Web/Manifest/manifest.json#L26-L44)] ### Upload the app -Once you update the manifest, you can rebuild the sample. To rebuild run the following command in the app terminal window, stopping the app if needed: - -```bash -gulp -``` - -This will generate a file `helloworldapp.zip` in the `manifest` directory within the root of the project directory. +Once you update the manifest, you can rebuild the sample using `Build Solution` command from the `Build` menu. This will generate a file `helloworldapp.zip` in the `bin` directory within the root of the project directory `Microsoft.Teams.Samples.HelloWorld.Web`. Use the **Upload a custom app** link in Teams to upload this zip file and install your app into one of the teams you own. See **Load your package into a team** in [Upload your app in Microsoft Teams](~/concepts/apps/apps-upload) for more information on how to do this. > [!NOTE] -> You might have stopped the node process in order to rebuild the app. If so, you will need to rerun the node process using the `npm start` command described in [Build and run the sample](#BuildRun). +> You need to make sure the app is running while you upload it into Teams and use it within it. @@ -236,20 +192,21 @@ Once you install the app into a team, you will need to configure it to show cont The sample already comes with a bot. The bot is defined in the manifest and looks like this: -[!code-json[Manifest file](~/../_msteams-samples-hello-world-nodejs/src/manifest.json#L41-L49)] +[!code-json[Manifest file](~/../_msteams-samples-hello-world-csharp/Microsoft.Teams.Samples.HelloWorld.Web/Manifest/manifest.json#L45-L55)] You need a bot definition for each bot contained in your app. In this case you already have a bot and have given it a registered **bot ID**, so all you will do is add credentials for the bot and test it. ### Add credentials for the bot -In the hello-world project navigate to a folder named config. In this folder you will find a json file called default. This file contains the following code: +In the `Microsoft.Teams.Samples.HelloWorld.Web` project you will find a config file called `Web.config`. This file contains the following code: -[!code-json[Manifest file](~/../_msteams-samples-hello-world-nodejs/config/default.json#L1-L6)] +[!code-xml[Web.config file](~/../_msteams-samples-hello-world-csharp/Microsoft.Teams.Samples.HelloWorld.Web/Web.config#L7-L14)] -Earlier you made note of the **APP ID** from the bot framework as well as a password. Use those vales for "microsoftAppId" and "microsoftAppPassword" in the config.js file. This is not a particularly safe location to store credentials, but it will work for this example. +Earlier you made note of the **APP ID** from the bot framework as well as a password. Use those vales for "MicrosoftAppId" and "MicrosoftAppPassword" in the `Web.config` file. This is not a particularly safe location to store credentials, but it will work for this example. -After these values are changed the app must be stopped, built using 'gulp', and run again using 'npm start'. Reload the app using the newly built zip file in Microsoft Teams. +After these values are changed the app must be rebuilt using `Build Solution` command, and should be started again using `Start Debugging` from the `Debug` menu. Reload the app using the newly built zip file in Microsoft Teams. -Do NOT stop your ngrok session or you will have to update all the ngrok urls associated with your app. +> [!NOTE] +> Do NOT stop your ngrok session or you will have to update all the ngrok urls associated with your app. ### Test the bot with the bot emulator @@ -280,9 +237,9 @@ The Microsoft Teams developer platform allows users to compose custom rich messa ### Update the app manifest and reload the app in teams again -The hello-world sample comes with a built in messaging extension, which looks something like this: +The `Hello World` sample comes with a built in messaging extension, which looks something like this: -[!code-json[Manifest file](~/../_msteams-samples-hello-world-nodejs/src/manifest.json#L50-L67)] +[!code-json[Manifest file](~/../_msteams-samples-hello-world-csharp/Microsoft.Teams.Samples.HelloWorld.Web/Manifest/manifest.json#L56-L79)] You have already updated the botId used by the compose extension so there is no need to do that again. From 1146224055e9c0fdea9b2a195e0df095146693d3 Mon Sep 17 00:00:00 2001 From: Charles Prakash Dasari Date: Sat, 3 Feb 2018 02:09:42 -0800 Subject: [PATCH 4/8] Fixing a typo --- .openpublishing.publish.config.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.openpublishing.publish.config.json b/.openpublishing.publish.config.json index 140656c539d..f5db19126a0 100644 --- a/.openpublishing.publish.config.json +++ b/.openpublishing.publish.config.json @@ -42,7 +42,7 @@ }, { "path_to_root": "_msteams-samples-hello-world-csharp", - "url": "https://github.com/OfficeDev/msteams-samples-hello-world-charp", + "url": "https://github.com/OfficeDev/msteams-samples-hello-world-csharp", "branch": "prakash-getStarted" } ], From fdfed5b69f92866b4a2c384d7b7ab2fbe39d190b Mon Sep 17 00:00:00 2001 From: Charles Prakash Dasari Date: Sat, 3 Feb 2018 02:29:19 -0800 Subject: [PATCH 5/8] Adding the TOC entry --- msteams-platform/TOC.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/msteams-platform/TOC.yml b/msteams-platform/TOC.yml index 60011dc3299..85d5326588a 100644 --- a/msteams-platform/TOC.yml +++ b/msteams-platform/TOC.yml @@ -10,6 +10,8 @@ href: ./get-started/get-started-app-studio - name: Get started with Node.js href: ./get-started/get-started-nodejs + - name: Get started with C#.NET + href: ./get-started/get-started-dotnet expanded: true - name: Concepts href: ./concepts/concepts-overview From 4e0450e48c8e9e771007f2f518f043e9e49de5e0 Mon Sep 17 00:00:00 2001 From: Norm Sohl Date: Mon, 5 Feb 2018 18:11:47 -0800 Subject: [PATCH 6/8] Norm get started edits (#75) * Added azure links * Edits * Capitalize .NET * Changed to Node.js * Added space between C# and .NET * One more .Net -> .NET --- .../get-started/get-started-dotnet.md | 19 ++++++------------- msteams-platform/get-started/get-started.md | 16 +++++++++++++++- 2 files changed, 21 insertions(+), 14 deletions(-) diff --git a/msteams-platform/get-started/get-started-dotnet.md b/msteams-platform/get-started/get-started-dotnet.md index be408dbf3ea..7cfe30813be 100644 --- a/msteams-platform/get-started/get-started-dotnet.md +++ b/msteams-platform/get-started/get-started-dotnet.md @@ -1,6 +1,6 @@ --- title: Get started with C#.NET -description: Get started building great apps in Microsoft Teams using C#.NET +description: Get started building great apps in Microsoft Teams using C# .NET keywords: getting started .net c# csharp ms.date: 01/02/2018 --- @@ -12,7 +12,7 @@ ms.date: 01/02/2018 [!include[Step 1 Intro](~/includes/get-started/step1-intro.md)] -This tutorial helps you get started creating a Microsoft Teams app using C#.NET. You can test the app by loading it into a Team that you have permissions for, or into a test tenant created using the Office Developer Program. This topic is written to be platform independent. +This tutorial helps you get started creating a Microsoft Teams app using C# on .NET. You can test the app by loading it into a Team that you have permissions for, or into a test tenant created using the Office Developer Program. This topic is written to be platform independent. To create your app: @@ -78,7 +78,7 @@ git clone https://github.com/OfficeDev/msteams-samples-hello-world-csharp ## Build and run the sample -Once the repo is cloned, open the solution file `Microsoft.Teams.Samples.HelloWorld.sln` from the root directory of the sample and click `Build Solution` from the `Build` menu. You can run the sample by pressing `F5` or choosing `Start Debugging` from the `Debug` menu. +Once the repo is cloned, use Visual Studio to open the solution file `Microsoft.Teams.Samples.HelloWorld.sln` from the root directory of the sample and click `Build Solution` from the `Build` menu. You can run the sample by pressing `F5` or choosing `Start Debugging` from the `Debug` menu. When the app starts, you will see a browser window open with the root of the app launched. You can navigate to the following URLs to verify that all the app URLs are loading: @@ -114,20 +114,13 @@ The app will only be available during the current session on your development ma ### Host in Azure -> [!WARN] -> Update the following section to host .NET app in Azure using App Service. - -Microsoft Azure lets you host your Node.js web application on a free tier using shared infrastructure. This will be sufficient to run this `Hello World` sample. +Microsoft Azure lets you host your .NET application on a free tier using shared infrastructure. This will be sufficient to run this `Hello World` sample. If you have never used Azure before, you can get started by creating a new free account. Follow this guide to help you get started: [Azure developer guide](https://docs.microsoft.com/en-us/azure/guides/developer/azure-developer-guide?toc=/microsoftteams/platform/toc.json&bc=/microsoftteams/platform/breadcrumb/toc.json#understanding-accounts-subscriptions-and-billing). -To get your Node.js app hosted in Azure, you can follow the guide here: [Create a Node.js web app in Azure](/azure/app-service/app-service-web-get-started-nodejs?toc=/microsoftteams/platform/toc.json&bc=/microsoftteams/platform/breadcrumb/toc.json#launch-azure-cloud-shell). - -> [!NOTE] -> You would skip the steps to clone the repo from the guide above, because we already are working with a Node.js sample app for Microsoft Teams. -> For your convenience, the link above takes you directly to the location where you should start from, to host your app in Azure. +To get your .NET app hosted as an App Service in Azure, you can follow the guide here: [Create a .NET core app in Azure](https://docs.microsoft.com/en-us/azure/app-service/app-service-web-get-started-dotnet). Once you host your app in Azure, you can verify by opening your browser and going to `https://yourteamsapp.azurewebsites.net` (please be sure to use the right endpoint from your Azure App Service instead of this URL) to load your app's hello page. @@ -176,7 +169,7 @@ Once you update the manifest, you can rebuild the sample using `Build Solution` Use the **Upload a custom app** link in Teams to upload this zip file and install your app into one of the teams you own. See **Load your package into a team** in [Upload your app in Microsoft Teams](~/concepts/apps/apps-upload) for more information on how to do this. > [!NOTE] -> You need to make sure the app is running while you upload it into Teams and use it within it. +> You need to make sure the app is running while you upload it into Teams and use it. diff --git a/msteams-platform/get-started/get-started.md b/msteams-platform/get-started/get-started.md index b4947cfdbcd..5ba7adba6d7 100644 --- a/msteams-platform/get-started/get-started.md +++ b/msteams-platform/get-started/get-started.md @@ -18,7 +18,7 @@ Because of this, it easy to publish and update apps, but it adds additional step These options will be discussed in more detail later. -Here are some simple steps to create a Teams app and test it in Teams. +Here are some simple steps to create a Node.js Teams app and test it in Teams. > [!div class="checklist"] > * [Prepare your Office 365 tenant](~/get-started/get-started-tenant) @@ -31,3 +31,17 @@ Here are some simple steps to create a Teams app and test it in Teams. > * [Configure the app tab](~/get-started/get-started-nodejs#ConfigureTheAppTab) > * [Add a bot to your app](~/get-started/get-started-nodejs#AddBot) > * [Compose rich messages](~/get-started/get-started-nodejs#ComposeRichMessages) + +Here are the steps to create a.NET Teams app and test it in Teams. + +> [!div class="checklist"] +> * [Prepare your Office 365 tenant](~/get-started/get-started-tenant) +> * [Get started with Teams App Studio](~/get-started/get-started-app-studio) +> * [Get prerequisites](~/get-started/get-started-dotnet#GetPrerequisites) +> * [Download the sample](~/get-started/get-started-dotnet#DownloadSample) +> * [Build and run the sample](~/get-started/get-started-dotnet#BuildRun) +> * [Host the sample](~/get-started/get-started-dotnet#HostSample) +> * [Deploy your app into Microsoft Teams](~/get-started/get-started-dotnet#DeployToTeams) +> * [Configure the app tab](~/get-started/get-started-dotnet#ConfigureTheAppTab) +> * [Add a bot to your app](~/get-started/get-started-dotnet#AddBot) +> * [Compose rich messages](~/get-started/get-started-dotnet#ComposeRichMessages) From 578203fbd4e8cc95ed0a1bece9bf4720bced7855 Mon Sep 17 00:00:00 2001 From: Norm Sohl Date: Tue, 6 Feb 2018 10:25:34 -0800 Subject: [PATCH 7/8] Norm get started edits (#80) * Added azure links * Edits * Capitalize .NET * Changed to Node.js * Added space between C# and .NET * One more .Net -> .NET * Updated docs date and C#/.NET title * C#.NET -> C#/.NET * changed date --- msteams-platform/TOC.yml | 2 +- msteams-platform/get-started/get-started-dotnet.md | 8 ++++---- msteams-platform/get-started/get-started.md | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/msteams-platform/TOC.yml b/msteams-platform/TOC.yml index 85d5326588a..c71c667680e 100644 --- a/msteams-platform/TOC.yml +++ b/msteams-platform/TOC.yml @@ -10,7 +10,7 @@ href: ./get-started/get-started-app-studio - name: Get started with Node.js href: ./get-started/get-started-nodejs - - name: Get started with C#.NET + - name: Get started with C#/.NET href: ./get-started/get-started-dotnet expanded: true - name: Concepts diff --git a/msteams-platform/get-started/get-started-dotnet.md b/msteams-platform/get-started/get-started-dotnet.md index 7cfe30813be..a4b242461ad 100644 --- a/msteams-platform/get-started/get-started-dotnet.md +++ b/msteams-platform/get-started/get-started-dotnet.md @@ -1,10 +1,10 @@ --- -title: Get started with C#.NET -description: Get started building great apps in Microsoft Teams using C# .NET +title: Get started with C#/.NET +description: Get started building great apps in Microsoft Teams using C#/.NET keywords: getting started .net c# csharp -ms.date: 01/02/2018 +ms.date: 02/06/2018 --- -# Get started on the Microsoft Teams platform with C#.NET +# Get started on the Microsoft Teams platform with C#/.NET > [!div class="op_single_selector"] > - [.NET](~/get-started/get-started-dotnet) diff --git a/msteams-platform/get-started/get-started.md b/msteams-platform/get-started/get-started.md index 5ba7adba6d7..4a94bbf1aef 100644 --- a/msteams-platform/get-started/get-started.md +++ b/msteams-platform/get-started/get-started.md @@ -2,7 +2,7 @@ title: Get started description: Get started building great apps in Microsoft Teams keywords: getting started Microsoft teams -ms.date: 01/02/2018 +ms.date: 02/06/2018 --- # Get started developing apps for Microsoft Teams From 0becb903d17141dbef14f3fa205f8704b8151087 Mon Sep 17 00:00:00 2001 From: Norm Sohl Date: Tue, 6 Feb 2018 10:42:51 -0800 Subject: [PATCH 8/8] Update .openpublishing.publish.config.json --- .openpublishing.publish.config.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.openpublishing.publish.config.json b/.openpublishing.publish.config.json index f5db19126a0..66aec71eede 100644 --- a/.openpublishing.publish.config.json +++ b/.openpublishing.publish.config.json @@ -43,7 +43,7 @@ { "path_to_root": "_msteams-samples-hello-world-csharp", "url": "https://github.com/OfficeDev/msteams-samples-hello-world-csharp", - "branch": "prakash-getStarted" + "branch": "master" } ], "dependent_packages": [{ @@ -64,4 +64,4 @@ ] }, "need_generate_pdf_url_template": false -} \ No newline at end of file +}