C# LINE Bot development with Azure Function for cross-platform

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 Smile and host the app on Function App at the end.

Prerequisites

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”.

image

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

image

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

image

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

image

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

image

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

image

8. Click “Configuration not yet complete”.

image

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

image

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

image

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

image

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

image

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.

IMG_1908

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”.

image

3. Click [+ Add].

image

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

image

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

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

image

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

image

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

image

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

image

That’s all for now. But 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.

image

Bot application code

We host C# SDK and sample templates for LINE messaging api at GitHub.com. Let’s grab them all.

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 Smile. 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. First of all, open local.settings.json file. You need to fill values.

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

image

7. Select “Access Keys”.

image

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

image

9. Paste the value to local.settings.json for “AzureWebJobsStorage”

10. For 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.

image

image

11. Now config should look like below.

image

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

image

13. Type “dotnet build” to compile them all. Cross fingers Smile

image

14. 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”.

image

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.

image

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.

image

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

image

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

image

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

image

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

image

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

image

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

image

Debug

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

IMG_1909

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

image

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

image

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.

image

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

image

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.

image

7. Click “Application Settings”

image

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

image

image

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

image

10. Select LINEBOT function from the list.

image

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

image

12. Copy the URL.

image

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

image

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