Inspecting the generated TypeScript code of the Chatbot

Now, after we have successfully generated our Chatbot TypeScript code with Yeoman, we must take a closer look to understand what’s happening.

index.ts

src/index.ts is responsible for setting up the bot and provide a web-server that we can send chat requests to. Our bot logic - and by that I mean instructions what the bot is actually supposed to do - is handled in src/bot.ts instead.

src/index.ts imports the required bot services and bot configuration, loads environment files and sets environment constants.

1
import { config } from 'dotenv';
2
import * as path from 'path';
3
import * as restify from 'restify';
4

5
import { BotFrameworkAdapter } from 'botbuilder';
6
import { BotConfiguration, IEndpointService } from 'botframework-config';
7
import { MyBot } from './bot';
8

9
const ENV_FILE = path.join(__dirname, '..', '.env');
10
config({ path: ENV_FILE });
11

12
const DEV_ENVIRONMENT = 'development';
13
const BOT_CONFIGURATION = (process.env.NODE_ENV || DEV_ENVIRONMENT);

It creates a web server (using the package restify) by default on port 3978

1
const server = restify.createServer();
2
server.listen(process.env.port || process.env.PORT || 3978, () => {
3
    console.log(`\n${server.name} listening to ${server.url}`);
4
    console.log(`\nGet Bot Framework Emulator: https://aka.ms/botframework-emulator`);
5
    console.log(`\nTo talk to your bot, open bothe-bot.bot file in the Emulator.`);
6
});

tries to load bot configuration

1
const BOT_FILE = path.join(__dirname, '..', (process.env.botFilePath || ''));
2

3
let botConfig;
4
try {
5
    botConfig = BotConfiguration.loadSync(BOT_FILE, process.env.botFileSecret);
6
} catch (err) {
7
    console.error(`\nError reading bot file. Please ensure you have valid botFilePath and botFileSecret set for your environment.`);
8
    console.error(`\n - The botFileSecret is available under appsettings for your Azure Bot Service bot.`);
9
    console.error(`\n - If you are running this bot locally, consider adding a .env file with botFilePath and botFileSecret.`);
10
    console.error(`\n - See https://aka.ms/about-bot-file to learn more about .bot file its use and bot configuration.\n\n`);
11
    process.exit();
12
}
13

14
const endpointConfig = botConfig.findServiceByNameOrId(BOT_CONFIGURATION) as IEndpointService;

The file also creates an adapter from the bot configuration:

1
const endpointConfig = botConfig.findServiceByNameOrId(BOT_CONFIGURATION) as IEndpointService;
2

3
const adapter = new BotFrameworkAdapter({
4
    appId: endpointConfig.appId || process.env.microsoftAppID,
5
    appPassword: endpointConfig.appPassword || process.env.microsoftAppPassword,
6
});

Then it creates a catch-all error handler:

1
adapter.onTurnError = async (context, error) => {
2
    console.error(`\n [onTurnError]: ${ error }`);
3
    await context.sendActivity(`Oops. Something went wrong!`);
4
};

Finally it calls our bot logic whenever there is a request to /api/messages

1
const myBot = new MyBot();
2

3
server.post('/api/messages', (req, res) => {
4
    adapter.processActivity(req, res, async (context) => {
5
        await myBot.onTurn(context);
6
    });
7
});

src/bot.ts

1
import { ActivityTypes, TurnContext } from 'botbuilder';
2

3
export class MyBot {
4
    /**
5
     * Use onTurn to handle an incoming activity, received from a user, process it, and reply as needed
6
     *
7
     * @param {TurnContext} context on turn context object.
8
     */
9
    public onTurn = async (turnContext: TurnContext) => {
10
        if (turnContext.activity.type === ActivityTypes.Message) {
11
            await turnContext.sendActivity(`You said '${ turnContext.activity.text }'`);
12
        } else {
13
            await turnContext.sendActivity(`[${ turnContext.activity.type } event detected]`);
14
        }
15
    }
16
}

As you can see we use the TurnContext to get information and also to send an activity back to the user. Very powerful, that’s why is worth having a closer look at TurnContext in the next post.