+ > [!NOTE]

+ # [csharp](#tab/cs2)

+ # [JavaScript](#tab/js2)

+ :::image type="content" source="../../assets/images/tdp/dev-app-portal.png" alt-text="Screenshot shows you the analytics page of your app in Developer Portal."lightbox="../../assets/images/tdp/dev-app-portal.png":::

+ :::image type="content" source="../../assets/images/tdp/dev-analytics-filter.png" alt-text="Screenshot shows you the analytics page filter in Developer Portal.":::

+ :::image type="content" source="../../assets/images/tdp/usage-by-time-period.png" alt-text="Screenshot shows you the usage by time period chart for your published app.":::

+ :::image type="content" source="../../assets/images/tdp/usage-by-platform-OS.png" alt-text="Screenshot shows you the usage by platform and OS chart for your published app.":::

+ :::image type="content" source="../../assets/images/tdp/usage-intensity.png" alt-text="Screenshot shows you the usage intensity chart for your published app.":::

+ :::image type="content" source="../../assets/images/tdp/app-dashboard.png" alt-text="Screenshots shows you app dashboard chart for your published app in Developer Portal.":::

+description: In this article, learn how to create a brand new app and import an existing app in Teams Developer Portal. Also, learn about the Changelog for Developer Portal.

+> * Developer Portal isn't available for Government Community Cloud (GCC)-High or Department of Defense (DOD) tenants.

+Developer Portal allows you to create a brand new app:

+1. Sign in to [Developer Portal](https://dev.teams.microsoft.com) and select **Apps** from the left pane.

+ :::image type="content" source="../../assets/images/tdp/home-page.png" alt-text="Screenshot shows the home page of Developer Portal for Teams with the Apps option highlighted in red." lightbox="../../assets/images/tdp/home-page.png":::

+ :::image type="content" source="../../assets/images/tdp/enter-app-name-tdp.png" alt-text="Screenshot shows how to create a brand new app in Developer Portal for Teams." lightbox="../../assets/images/tdp/create-new-app-in-tdp.png":::

+1. In Developer Portal, select **Apps** from the left pane.

+1. Select **Import app**.

+ :::image type="content" source="../../assets/images/tdp/import-app.png" alt-text="Screenshot shows how to import your existing app in Developer Portal for Teams to manage your apps." lightbox="../../assets/images/tdp/import-app.png":::

+## Changelog for Developer Portal

+Changelog for Developer Portal allows you to stay engaged with the latest updates in Teams. You can view the updates about features, recent changes in APIs, and important bug fixes.

+To view **Changelog**, sign in to [Developer Portal](https://dev.teams.microsoft.com) and select **Changelog** from the left pane.

+The updates for Changelog in Developer Portal are categorized based on the following:

+* **Added**: Updates on a service or feature that's a new feature or capability.

+* **Changed**: Updates on a service or API that's modified.

+* **Removed**: Updates on a service or API that's removed and may be replaced with a new and updated service.

+* **Fixed**: Updates on a service or API that was previously identified as a high-priority or breaking-change issue that's fixed or mitigated.

+* **Deprecated**: Updates on a service or API at the end of its life and deprecated.

+* **Security**: Updates on important and critical security patch.

+<summary>Featured placements in AppSource and the Teams in-product app store</summary>

+ # [csharp](#tab/cs1)

+ Add the following code snippet to `AdapterWithErrorHandler.cs` (or the equivalent class in your app's code):

+ ```csharp

+ # [JavaScript](#tab/js1)

+ Add the following code snippet to `index.js` (or the equivalent class in your app's code):

+ ```JavaScript

+ const {TeamsSSOTokenExchangeMiddleware} = require('botbuilder');

+ const tokenExchangeMiddleware = new TeamsSSOTokenExchangeMiddleware(memoryStorage, env.connectionName);

+ adapter.use(tokenExchangeMiddleware);

+ # [csharp](#tab/cs2)

+ After you add the `AdapterWithErrorHandler.cs`, your code should be as shown below:

+ ```csharp

+ public class AdapterWithErrorHandler : CloudAdapter

+ {

+ public AdapterWithErrorHandler(

+ IConfiguration configuration,

+ IHttpClientFactory httpClientFactory,

+ ILogger<IBotFrameworkHttpAdapter> logger,

+ IStorage storage,

+ ConversationState conversationState)

+ : base(configuration, httpClientFactory, logger)

+ {

+ base.Use(new TeamsSSOTokenExchangeMiddleware(storage, configuration["ConnectionName"]));

+ OnTurnError = async (turnContext, exception) =>

+ {

+ // Log any leaked exception from the application.

+ // NOTE: In production environment, you should consider logging this to

+ // Azure Application Insights. Visit https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-telemetry?view=azure-bot-service-4.0&tabs=csharp to see how

+ // to add telemetry capture to your bot.

+ logger.LogError(exception, $"[OnTurnError] unhandled error : {exception.Message}");

+ // Send a message to the user.

+ await turnContext.SendActivityAsync("The bot encountered an error or bug.");

+ await turnContext.SendActivityAsync("To continue to run this bot, please fix the bot source code.");

+ if (conversationState != null)

+ {

+ try

+ {

+ // Delete the conversationState for the current conversation to prevent the

+ // bot from getting stuck in an error-loop caused by being in a bad state.

+ // ConversationState should be thought of as similar to "cookie-state" in a Web pages.

+ await conversationState.DeleteAsync(turnContext);

+ }

+ catch (Exception e)

+ {

+ logger.LogError(e, $"Exception caught on attempting to Delete ConversationState : {e.Message}");

+ }

+ }

+ // Send a trace activity, which will be displayed in the Bot Framework Emulator.

+ await turnContext.TraceActivityAsync(

+ "OnTurnError Trace",

+ exception.Message,

+ "https://www.botframework.com/schemas/error",

+ "TurnError");

+ };

+ }

+ }

+ ```

+ # [JavaScript](#tab/js2)

+ After you add the code to `index.js`, your code should be as shown below:

+ ```JavaScript

+ // index.js is used to setup and configure your bot.

+ // Import required packages.

+ const path = require('path');

+ // Read botFilePath and botFileSecret from .env file.

+ const ENV_FILE = path.join(__dirname, '.env');

+ require('dotenv').config({ path: ENV_FILE });

+ const restify = require('restify');

+ // Import required bot services.

+ // See https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0 to learn more about the different parts of a bot.

+ const {

+ CloudAdapter,

+ ConversationState,

+ MemoryStorage,

+ UserState,

+ ConfigurationBotFrameworkAuthentication,

+ TeamsSSOTokenExchangeMiddleware

+ } = require('botbuilder');

+ const { TeamsBot } = require('./bots/teamsBot');

+ const { MainDialog } = require('./dialogs/mainDialog');

+ const { env } = require('process');

+ const botFrameworkAuthentication = new ConfigurationBotFrameworkAuthentication(process.env);

+ var conname = env.connectionName;

+ console.log(`\n${ conname } is the con name`);

+ // Create adapter.

+ // See https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0 to learn more about how bots work.

+ const adapter = new CloudAdapter(botFrameworkAuthentication);

+ const memoryStorage = new MemoryStorage();

+ const tokenExchangeMiddleware = new TeamsSSOTokenExchangeMiddleware(memoryStorage, env.connectionName);

+ adapter.use(tokenExchangeMiddleware);

+ adapter.onTurnError = async (context, error) => {

+ // This check writes out errors to console log .vs. app insights.

+ // NOTE: In production environment, you should consider logging this to Azure application insights. See https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-telemetry?view=azure-bot-service-4.0&tabs=csharp for telemetry configuration instructions.

+ console.error(`\n [onTurnError] unhandled error: ${ error }`);

+ // Send a trace activity, which will be displayed in Bot Framework Emulator.

+ await context.sendTraceActivity(

+ 'OnTurnError Trace',

+ `${ error }`,

+ 'https://www.botframework.com/schemas/error',

+ 'TurnError'

+ );

+ // Send a message to the user.

+ await context.sendActivity('The bot encountered an error or bug.');

+ await context.sendActivity('To continue to run this bot, please fix the bot source code.');

+ // Clear out state.

+ await conversationState.delete(context);

+ };

+ // Define the state store for your bot.

+ // See https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-howto-v4-state?view=azure-bot-service-4.0&branch=live&tabs=csharp to learn more about using MemoryStorage.

+ // A bot requires a state storage system to persist the dialog and user state between messages.

+ // Create conversation and user state with in-memory storage provider.

+ const conversationState = new ConversationState(memoryStorage);

+ const userState = new UserState(memoryStorage);

+ // Create the main dialog.

+ const dialog = new MainDialog();

+ // Create the bot that will handle incoming messages.

+ const bot = new TeamsBot(conversationState, userState, dialog);

+ // Create HTTP server.

+ const server = restify.createServer();

+ server.use(restify.plugins.bodyParser());

+ server.listen(process.env.port || process.env.PORT || 3978, function() {

+ console.log(`\n${ server.name } listening to ${ server.url }`);

+ console.log('\nGet Bot Framework Emulator: https://aka.ms/botframework-emulator');

+ console.log('\nTo talk to your bot, open the emulator select "Open Bot"');

+ });

+ // Listen for incoming requests.

+ server.post('/api/messages', async (req, res) => {

+ // Route received a request to adapter for processing.

+ await adapter.process(req, res, (context) => bot.run(context));

+ });

+ ```

+

+ ```JavaScript

+ class MainDailog {

+

+ this.addDialog(new OAuthPrompt(OAUTH_PROMPT, {

+ connectionName: process.env.connectionName,

+ text: 'Please Sign In',

+ Title: 'Sign In',

+ timeout: 300000

+ }));

+

+ this.addDialog(new ConfirmPrompt(CONFIRM_PROMPT));

+

+ this.addDialog(new WaterfallDialog(MAIN_WATERFALL_DIALOG, [

+ this.promptStep.bind(this),

+ this.loginStep.bind(this),

+ ]));

+

+ this.initialDialogId = MAIN_WATERFALL_DIALOG;

+

+

+ async promptStep(stepContext) {

+ try {

+ return await stepContext.beginDialog(OAUTH_PROMPT);

+ } catch (err) {

+ console.error(err);

+ }

+

+ async loginStep(stepContext) {

+ // Get the token from the previous step. Note that we could also have gotten the

+ // token directly from the prompt itself. There is an example of this in the next method.

+ const tokenResponse = stepContext.result;

+ if (!tokenResponse || !tokenResponse.token) {

+ await stepContext.context.sendActivity('Login was not successful please try again.');

+ } else {

+ const token = tokenResponse.token;

+ // On successful login, the token contains sign in token.

+ }

+ return await stepContext.endDialog();

+ }

+ ```

+

+* ***February 27, 2022***: [Changelog for Developer Portal.](concepts/build-and-test/teams-developer-portal.md#changelog-for-developer-portal)

+* ***February 17, 2023***: [Build a dashboard tab app.](tabs/how-to/build-a-dashboard-tab-app.md#build-a-dashboard-tab-app)