Serverless and bot are buzz words these days. But when you say bot in some countries like Taiwan, Korea, Japan, many people think about LINE as its platform. In this article, I explain how you can jump start developing LINE bot using Microsoft technologies and host the app on Function App at the end.

Prerequisites

Your preferred OS. I use Windows but this works for Mac and Linux too.

• LINE developer account. https://developers.line.me/en/
• Azure Subscription. If you don’t have it yet, free trial here
• Visual Studio Code. Just grab the latest one here
• dotnet core library. Windows, MacOS, Linux
• Node.js. https://nodejs.org/en/
• Git. https://git-scm.com/
• ngrok. https://ngrok.com/

Setup LINE

If you already setup your app, skip this.

1. Go to https://developers.line.me/en/ and signup for developer account. You need LINE account as well, but I guess you already have one anyway.

2. Click “Start using Messaging API”.

3. If you have a provider, select it. Otherwise, click + icon.

4. Enter name and Add. Then click Next page.

5. Provide app icon, name and description. DO NOT use “LINE” as part of app name. You shall see error later.

6. For plan, select “Developer Trial” as we are developers. Pick appropriate category and subcategory. Enter email and click confirm.

7. Then accept terms and condition as you wish, then click Create.

8. Click “Configuration not yet complete”.

9. You have all information needed in the configuration page. Go to “Messaging settings”, and click “Issue” for channel access token.

10. In the popup, read it and click “Issue”. If you set it 0 hours, it won’t expire.

11. Then enable “Use webhooks” and “Allow bot to join group chats”. Leave the Webhook URL for now.

12. For “Using LINE@ feature” section, disable bot “Auto-reply” and “Greeting”.

13. Finally you see QR code in the bottom, which you scan from your LINE application in iOS or Android so that the bot application is added.

That’s it for now.

Provision Azure environment

1. Login to Azure portal https://portal.azure.com

2. For house keeping, lets create resource group first, which host all resources we use later. Click “Resource Group”.

3. Click [+ Add].

4. Enter name and select region, then click “Create” at the bottom of the page.

5. Once created, refresh the list and select the resource group you created.

6. Click [+ Add] so that we can add actual resource.

7. Type “function” and search bar, and select “Function App”. It opens a “blade” on the right, so click “Create”.

8. Enter mandatory fields and create it. I did like following. One key part is that let it create Storage for us.

9. Once completed, back to resource group page, select the resource group and confirm you have three resources now.

Keep the browser open for later use.

Azure Functions app runtime

As we develop function app, we need runtime.

1. Open command prompt or terminal.

2. Run following command to install tools.

npm i -g azure-functions-core-tools@core

For Mac,

sudo npm i -g azure-functions-core-tools@core --unsafe-perm

3. Run func to see if you installed successfully.

Bot application code

There are two ways to get template code. We host C# SDK and sample templates for LINE messaging api at GitHub.com, and yeoman generator template.

Prepare keys

In any case, it needs several keys. So let's get it first.

1. Go to azure portal. Select storage account from the list, in my case “lineserverlessbab7d”.

2. Select “Access Keys”.

3. There are several items listed. We need one of “CONNECTION STRING”. Copy either one. I pick up the first one here.

4. Then get LINE ChannelSecret and ChannelAccessToken. Go to LINE developer portal and grab it from there. Oh I show my keys? No worries, I will re-issue them before you notice.

Get code from Yeoman

1. Run the following code to install yeoman and generator.

npm install -g yo
npm install -g generator-line-bot

for Mac you may need to run with sudo

sudo npm install -g yo
sudo npm install -g generator-line-bot

2. Run yeoman to create project. Following code will create MyBot folder and generate solution by using C# and Azure Function template.

yo line-bot MyBot --csharp --function

3. It will ask you keys. Enter keys which you get in previous steps.

4. Once solution is generated, move to the created folder.

5. Open local.settings.json to confirm all key information is stored correctly.

Get code from GitHub

1. Open command prompt or terminal. Create a directory and go there.

2. Run following command to clone everything.

git clone https://github.com/pierre3/LineMessagingApi

3. Once cloning completed, change directory to LineMessagingApi\FunctionAppSample.v2. Why? Because it contains the functions app we use. Or you wonder difference between v1 and v2? v1 is for Windows only and v2 is for cross-platform based on .NET core technology.

4. Type code . to open the folder via Visual Studio Code.

5. Open local.settings.json file. Fill the keys.

6. From “View” menu, select “Integrated Terminal”.

7. Type “dotnet build” to compile them all.

In both case, Most of the bot logic is in LineBotApp.cs file. Go ahead to modify as you want.

Test it locally

There are several things we need to setup to test it locally.

1. Open new command prompt or terminal and change directory to where you store ngrok.exe. If you already added PATH, then no worries.

2. Run following command to open connection from ngrok server to local. Port 7071 is used by Function app.

ngrok.exe http --host-header=localhost:7071 7071

3. Confirm the ngrok server address. In this case, “7cde9070.ngrok.io”.

4. Go back to LINE developer portal and update “Webhook URL”. Don’t forget to add “/api/linebot” at the end where actually the app waits.

5. Now run the app. In command prompt or terminal, go to application directory/bin/Debug/netstandard2.0. If you don’t see the directory, you forget to run “dotnet build” or something went wrong.

6. Run the following command to start the function app.

func host start

7. If you see “green” line which tells us where the app is waiting, we are ready.

8. Next, let’s attach Visual Studio Code to the process. Go to Visual Studio Code and click “debug” icon.

9. From drop down next to DEBUG, select “Add Configuration”.

10. Type “core” and select .NET Core.

11. Then select “Attach to local .NET Core Console App”.

12. From dropdown, select “.NET Core Attach”. and press F5.

13. From the list, select “dotnet.exe”. Then it attaches to the process.

Debug

1. First of all, send “Hi” from your LINE app. It should return the reply to LINE as template handles all the types.

2. Now put breakpoint anywhere. I put the break point at Run method in run.cs where the message comes in.

3. Send message again from LINE client. And you see breakpoint hit.

Publish the app

Okay, everything went as expect. Finally we can publish the app.

1. Stop the function app first.

2. In command prompt or terminal, type following to login to azure.

func azure login

3. Follow the instruction to complete login.

4. Open browser, go to the URL and put code.

5. Once login completed, run the following command to publish it. You need to replace the Function App name for yours. The i options upload local settings to azure environment, and y does override it if exists.

func azure functionapp publish lineserverlessbot -i -y

6. Once completed, go to Azure Portal and select Function App.

7. Click “Application Settings”

8. Confirm three settings in local.settings.json is copied over to Application settings.

9. Select “Overview” and “Function app settings”. Select “beta” for “Runtime version”. This enables v2 function.

10. Select LINEBOT function from the list.

11. Click “Get function URL” on top right of the page to get endpoint URL.

12. Copy the URL.

13. Go back to LINE developer portal and update Webhook URL.

14. Once you save everything, try from your LINE client to see if it works.

Summary

Phew, everything went well! (at least for me). I know all the development start from here, but you have all the frame up and running.

In the next article, I introduce brand-new simulator so that we can boost our development cycle.

Ken