Create a Sociably App

Let's create our first app and run it up! In this lesson, we'll create a hello-world chatbot and make it available on the chat platform.

Time to accomplish: 15 minutes

Chat Platform

Sociably now supports three chat platforms: messenger, telegram and line. Pick one platform to use in the lessons and run this command in the terminal:

npm init @sociably/app@latest -- -p <platform> --webview my-todo-bot

The command initiates a new project of a hello-world bot. Try cd my-todo-bot and take a look.

tip

To support multiple chat platforms, add more -p <platform> flag.

Platform Setup

Before starting the app, you need to set up the chat platform first. Please follow the guide of the platform you choose:

Messenger

Create a Facebook app

1. Visit https://developers.facebook.com/apps, tap Create App to create a new app.
2. Go to: App Dashboard > Settings > Basic.
3. Copy the value of App ID and App Secret. Paste them in the .env file in the project. Like:

MESSENGER_APP_ID= 1234567890
MESSENGER_APP_SECRET= abcdef123456...

Use Messenger in you app

Go to: App Dashboard > Add a Product > Messenger > Set Up

Create a Facebook page if you don't have one:

Go to: Messenger Setting > Access Tokens > Create New Page. Then follow the instructions to create a page.

Connect your page to the app

1. Go to: Messenger Setting > Access Tokens > Add or Remove Pages.
2. Choose the page you just created. After confirmation, you page should be listed in the Access Tokens area.
3. Copy the id of the page and paste it in the .env file, like:

MESSENGER_PAGE_ID= 1234567890

Get page token

Press Generate Token at the connected page. Copy the generated token and paste it in the .env file, like:

MESSENGER_ACCESS_TOKEN= AaBbCcDdEeFf123456...

Start App

Start Dev Server

Now run this command in the project directory:

npm run dev

Your app should be successfully running if all the required settings are filled.

Run Migrations

There is one more step for the first time starting. Keep the dev server running, and execute this command in another command line tab:

npm run migrate

The command registers some necessary settings to the Messenger platform. Now try messaging your Facebook page, the app should work like this:

Telegram

Create a bot

1. Talk to @BotFather in the Telegram app.
2. Send '/newbot' command to create a bot. Follow the BotFather's instructions.
3. Copy the token of your bot and paste it in the .env file in the project, like:

TELEGRAM_BOT_TOKEN= 654321:AaBbCcDdEdFf123456...

Set domain of the bot

1. Go to the '.env' file in the project and copy the value of DOMAIN field. It should look like xxx-xxx-123.t.machinat.dev.
2. Go back to @BotFather and send /mybot command. Choose the bot you just created.
3. Go to Bot Settings > Domain > Edit Domain. Send the copied domain to BotFather.

Start App

Run Migrations

Before the first time starting, you have to run this command in the project directory:

npm run migrate

The command registers some necessary settings to the Telegram platform.

Start Dev Server

Now we can start app in development mode with this command:

npm run dev

Keep the dev server running while developing. Now try messaging your bot, the app should work like this:

LINE

Create Provider

1. Create a Provider at https://developers.line.biz/console/
2. Under the provider page, go to Settings > Provider ID. Copy the value and paste it in the .env file in the project, like:

LINE_PROVIDER_ID= 1234567890

Create Messaging API Channel

1. Go to the Channels tab at the provider page. Tap '+' and create a new Messaging API channel.
2. Copy the values of Channel ID and Channel secret under Basic settings. Paste them in the .env file, like:

LINE_CHANNEL_ID= 1234567890
LINE_CHANNEL_SECRET = abcdef123456...

3. Go to the Messaging API tab, issue an access token at Channel access token. Copy the token and paste it in the .env file, like:

LINE_ACCESS_TOKEN= AaBbCcDdEeFf123456...

Create a LIFF App

1. Go to the Channels tab at the provider page. Tap '+' and create a new LINE Login channel.
2. Go to the '.env' file in your project and copy the value of DOMAIN field. It should look like xxx-xxx-123.t.machinat.dev.
3. Go to the LIFF tab, create a new LIFF app.
4. Fill the Endpoint URL with https://{DOMAIN}/webview?platform=line
5. Select the profile option of Scopes.
6. Copy the LIFF ID of the created LIFF app. Paste it in the .env file, like:

LINE_LIFF_ID= 1234567890-abcdef123456

Start App

Run Migrations

Before the first time starting, you have to run this command in the project directory:

npm run migrate

The command registers some necessary settings to the LINE platform.

Start Dev Server

Now we can start app in development mode with this command:

npm run dev

Keep the dev server running while developing. Now try messaging your LINE official account, the app should work like:

---

Our first bot is running! Next, you'll learn how to receive messages and make the reply.