-
Notifications
You must be signed in to change notification settings - Fork 505
/
sbs-gs-csharp.yml
226 lines (142 loc) · 12.1 KB
/
sbs-gs-csharp.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
### YamlMime:Tutorial
title: Build your first app using C#
metadata:
title: Hello World with C#
description: In this tutorial, you'll learn to build Hello World app with C# by setting up a new project, build and deploy tab, bot and message extension apps.
audience: Developer
level: Beginner
ms.date: 01/07/2024
ms.topic: interactive-tutorial
nextTutorialHref: get-started/get-started-overview.md
nextTutorialTitle: Back to Get started overview
ms.custom: mvc
ms.localizationpriority: high
items:
- durationInMinutes: 1
content: |
Start Microsoft Teams app development by building your first Teams app with a tab, a bot, or a message extension capability.
In this tutorial, you'll learn:
- How to set up a new project.
- How to build apps with tab capability using C# and Microsoft Visual Studio 2022.
This step-by-step guide helps you to build a tab with Teams Toolkit. You'll see the following output after you've completed this guide:
:::image type="content" source="~/assets/images/sbs-csharp/final-output.png" alt-text=" Screenshot shows the final output of the Teams tab app.":::
- title: Prerequisites
durationInMinutes: 1
content: |
Here's a list of tools you need to install for building and deploying a Teams app.
| | Install | For using... |
| --- | --- | --- |
| | [Microsoft Teams](https://www.microsoft.com/microsoft-teams/download-app) | Microsoft Teams to collaborate with everyone you work with through apps for chat, meetings, and call all in one place.|
| | [Visual Studio 2022](https://visualstudio.microsoft.com)<br> | You can install the enterprise version in Visual Studio 2022, and install the ASP.NET and web development workloads. Use the latest version. |
| | [Teams Toolkit](#install-teams-toolkit) | A Visual Studio extension that creates a project scaffolding for your app. Use the latest version.|
## Install Teams Toolkit
Teams Toolkit helps simplify the development process with tools to create a project scaffolding for your app. It creates the necessary directory structure for all selected capabilities with the required files in place, ready to build the project.
You can download the latest [Visual Studio installer](https://visualstudio.microsoft.com). Teams Toolkit is available as an extension in Visual Studio.
After you open the Visual Studio installer, in the pop-up workloads window.
1. Select **ASP.NET and web development**.
1. Under **installation details** > **Optional**, select **Microsoft Teams development tools**.
1. Select **Install**.
:::image type="content" source="~/assets/images/sbs-csharp/visual-studio-install.png" alt-text="Screenshot shows the Visual Studio installation." lightbox="~/assets/images/sbs-csharp/visual-studio-install.png":::
1. Select **Launch**. Visual Studio 2022 app window appears.
:::image type="content" source="~/assets/images/sbs-csharp/visual-studio-launch.png" alt-text="Screenshot shows the selection of Launch in visual studio.":::
1. Go to **Extensions** > **Manage Extensions**.
:::image type="content" source="~/assets/images/sbs-csharp/select-extension.png" alt-text="Screenshot shows the selection of Extensions.":::
The Manage Extension window appears:
:::image type="content" source="~/assets/images/sbs-csharp/manage-ext.png" alt-text="Screenshot shows the Manage Extensions." lightbox="~/assets/images/sbs-csharp/manage-extension.png":::
1. From the left pane, select **Installed**. The **Teams Toolkit** extension is avaialble.
:::image type="content" source="~/assets/images/sbs-csharp/select-ttk.png" alt-text="Screenshot shows the selection of Teams Toolkit." lightbox="~/assets/images/sbs-csharp/select-installed-ttk.png":::
## Set up your Teams development tenant
A **tenant** is like a space or a container for your organization in Teams, where you chat, share files, and run meetings. This space is also where you upload and test your custom app. Let's verify if you're ready to develop with the tenant.
### Check for custom app upload option
After creating the app, you must load your app in Teams without distributing it. This process is known as custom app upload. Sign in to your Microsoft 365 account to view this option.
> [!NOTE]
> Custom app upload is necessary for previewing and testing apps in Teams local environment. If it isn't enabled, you won't be able to preview and test your app in Teams local environment.
Do you already have a tenant, and admin access? Let's check if you do!
Verify if you can upload a custom apps in Teams:
1. Open Microsoft Teams, select the **Apps** icon.
1. Select **Manage your apps**.
1. Select **Upload an app**.
1. Look for the **Upload a custom app** option. If you see the option, custom app upload is enabled.
:::image type="content" source="~/assets/images/sbs-csharp/custom-upload.png" alt-text="Illustration shows the option to upload a custom app in Teams.":::
> [!NOTE]
> If you don't find the option to upload a custom app, contact your Teams administrator.
### Create a free Teams developer tenant (optional)
If you don't have a Teams account, you can get it for free. Join the Microsoft 365 developer program!
1. Go to the [Microsoft 365 developer program](https://developer.microsoft.com/microsoft-365/dev-program).
1. Select **Join Now** and follow the onscreen instructions.
1. In the welcome screen, select **Setup E5 subscription**.
1. Set up your administrator account. After you finish, the following screen appears:
:::image type="content" source="~/assets/images/build-your-first-app/dev-program-subscription.png" alt-text="Screenshot shows the example of what you see after signing up for the Microsoft 365 developer program.":::
1. Sign in to Teams using the administrator account you set up. Verify that you've the **Upload a custom app** option in Teams.
## Get a free Azure account
If you wish to host your app or access resources in Azure, you must have an [Azure subscription](https://azure.microsoft.com/en-in/free/). Create a free account before you begin.
Now you've got all the tools to set up your account. Next, let's set up your development environment and start building! Select the app you want to create first.
- title: Create project workspace for your tab app using C#
durationInMinutes: 1
content: |
Start Microsoft Teams app development by creating your first app. This app uses the tab capability.
If the prerequisites are in place, let's begin!
The following steps help you to create project workspace for your tab app in Visual Studio:
1. Open Visual Studio.
1. Select **New Project**.
:::image type="content" source="~/assets/images/sbs-csharp/visual-studio-welcome.png" alt-text="Screenshot shows the selection of New Project in Visual Studio.":::
1. In the search box, enter **Teams**.
1. Select **Microsoft Teams App** > **Next**.
:::image type="content" source="~/assets/images/sbs-csharp/project-template.png" alt-text="Screenshot shows the selection of Teams." lightbox="~/assets/images/sbs-csharp/new-project-template-vs.png":::
1. Enter the following details to configure your new project.
1. Enter required project name in **Project name**.
1. Select required location to save project files and folders.
1. Select **Create**.
:::image type="content" source="~/assets/images/sbs-csharp/teams-app-project-name.png" alt-text="Screenshot shows the creation of Project name.":::
1. Select **Tab** > **Create**.
:::image type="content" source="~/assets/images/sbs-csharp/select-tab.png" alt-text="Screenshot shows the selection of tab.":::
The Teams tab app is created in few seconds.
:::image type="content" source="~/assets/images/sbs-csharp/get-started.png" alt-text="Screenshot shows the Project Creation." lightbox="~/assets/images/sbs-csharp/get-started-tab-vs.png":::
## Take a tour of tab app source code
Teams Toolkit provides all components for building an app. After creating the project, you can view the project folders and files under **Solution Explorer**.
:::image type="content" source="~/assets/images/sbs-csharp/basic-app-directory.png" alt-text="Screenshot shows the Solution Explorer.":::
<!--
Although you're free to choose any UI framework (or not to use any), this sample template code provides a scaffolding with React components.
Among other items in this directory structure, the Toolkit maintains:
| Folder name | Contents |
| --- | --- |
| `.fx/configs` | Configuration files that user can customize for the Teams app. |
| - `.fx/configs/config.<envName>.json` | Configuration file for every environment. |
| - `.fx/configs/azure.parameters.<envName>.json` | Parameters file for Azure BICEP provision for every environment. |
| - `.fx/configs/projectSettings.json` | Global project settings that apply to all environments. |
| - `.fx/states` | Provision output that is generated by Teams Toolkit. The toolkit creates this folder after you provision resources for your app. |
| - `.fx/states/state.<envName>.json` | Provision output file for every environment. |
| - `.fx/states/<env>.userdata` | Sensitive user data for the provision output for every environment. |
| `templates/appPackage` | App manifest template files, and the app icons: color.png and outline.png. |
| - `templates/appPackage/manifest.template.json` | App manifest for running the app in local or remote environment. |
| `templates/azure` | BICEP template files |
-->
- title: Build and run your first tab app using C#
durationInMinutes: 1
content: |
After you set up your project workspace with Teams Toolkit, build your tab app.
## Sign in to your Microsoft 365 account
Use your Microsoft 365 account to sign in to Teams. If you're using a Microsoft 365 developer program tenant, the admin account you set up while registering is your Microsoft 365 account.
1. In the **Solution Explorer**, under **Solution MyTeamsApp**, right-click on **MyTeamsApp**.
1. Select **Teams Toolkit** > **Prepare Teams App Dependencies**.
:::image type="content" source="~/assets/images/sbs-csharp/app-dependencies.png" alt-text="Screenshot shows the selection of Teams app Dependencies." lightbox="~/assets/images/sbs-csharp/teams-app-dependencies.png":::
1. Select **Microsoft 365 Account** > **Continue**.
:::image type="content" source="~/assets/images/sbs-csharp/select-m365-account.png" alt-text="Screenshot shows the Selection of M365-account.":::
## Build and run your app locally in Visual Studio
To build and run your app locally:
1. Select **Debug** > **Start Debugging** or enter **F5**.
:::image type="content" source="~/assets/images/sbs-csharp/start-debugging.png" alt-text="Screenshot shows the selection of start debugging action.":::
Visual Studio starts the debugging process and opens the Teams web client in a browser. If prompted, sign in with your Microsoft 365 account.
1. Select **Add**.
:::image type="content" source="~/assets/images/sbs-csharp/select-add.png" alt-text="Screenshot shows the selection of Add.":::
Congratulations, your first tab app is running on Teams!
:::image type="content" source="~/assets/images/sbs-csharp/final-output.png" alt-text=" Screenshot shows the final output of the Teams tab app.":::
<details>
<summary>Learn how to troubleshoot if your app doesn't run locally.</summary>
To successfully run your app in Teams, ensure that you've enabled custom app upload in your Teams account. You can learn more about custom app upload in the [Prerequisites](sbs-gs-csharp.yml?tutorial-step=1) section.
</details>
- title: Congratulations!
durationInMinutes: 1
content: |
You have successfully created a tab app using C#. Teams Toolkit has added the necessary scaffolding to your app's directory structure.
The tutorial is now complete.