Day15-Webhook 实作（四）LINEBot 之 MessageBuilder（II）

大家好～
今天来实作 Imagemap message 与 Template message 吧！

Imagemap message

use LINE\LINEBot\HTTPClient\CurlHTTPClient;
use LINE\LINEBot;
use LINE\LINEBot\MessageBuilder\ImagemapMessageBuilder;
use LINE\LINEBot\MessageBuilder\Imagemap\BaseSizeBuilder;
use LINE\LINEBot\ImagemapActionBuilder\AreaBuilder;
use LINE\LINEBot\ImagemapActionBuilder\ImagemapMessageActionBuilder;
use LINE\LINEBot\ImagemapActionBuilder\ImagemapUriActionBuilder;
use LINE\LINEBot\MessageBuilder\Imagemap\VideoBuilder;
use LINE\LINEBot\MessageBuilder\Imagemap\ExternalLinkBuilder;

public function reply(Request $request)
{
    $httpClient = new CurlHTTPClient(env('LINE_BOT_CHANNEL_ACCESS_TOKEN'));
    $bot = new LINEBot($httpClient, ['channelSecret' => env('LINE_BOT_CHANNEL_SECRET')]);
    $replyToken = $request['events'][0]['replyToken'];

    $videoArea = new AreaBuilder(0, 0, 1040, 780);
    $externalLinkBuilder = new ExternalLinkBuilder(
        'https://img-9gag-fun.9cache.com/photo/aQowgv2_460svav1.mp4',
        'Label!'
    );
    $videoBuilder = new VideoBuilder(
        'https://img-9gag-fun.9cache.com/photo/aQowgv2_460svav1.mp4',
        'https://img-9gag-fun.9cache.com/photo/aP3Nxwg_700bwp.png',
        $videoArea,
        $externalLinkBuilder
    );

    $messageActionArea = new AreaBuilder(520, 780, 520, 260);
    $imagemapMessageActionBuilder = new ImagemapMessageActionBuilder(
        'imagemapMessageActionBuilder1',
        $messageActionArea
    );

    $uriActionArea = new AreaBuilder(0, 780, 520, 260);
    $imagemapUriActionBuilder = new ImagemapUriActionBuilder(
        'https://ithelp.ithome.com.tw/',
        $uriActionArea
    );


    $baseSizeBuilder = new BaseSizeBuilder(1040,1040);
    $imagemap = new ImagemapMessageBuilder(
        'https://6cf8-2001-b400-e7ac-2d2e-4c5c-37fc-485a-fd5a.ngrok.io/storage/Imagemap',
        'This is an imagemap',
        $baseSizeBuilder,
        [
            $imagemapMessageActionBuilder,
            $imagemapUriActionBuilder
        ],
        null,
        $videoBuilder
    );

    $bot->replyMessage($replyToken, $imagemap);
}

Imagemap 使用的背板图片必须满足以下要求：

• 图片格式：JPEG 或 PNG
• 图片宽度：240px、300px、460px、700px、1040px
  • 请准备好这五种解析度的图片并把副档名移除喔～
    
• 档案容量限制：10 MB

VideoBuilder

• 
• originalContentUrl
  • Max length: No limit
  • Max file size: 200 MB
  • 格式限制：mp4
• previewImageUrl
  • Max image size: No limits
  • Max file size: 1 MB
  • 格式限制：JPEG or PNG
• externalLink
  • 使用者点击 label 时会用 Line 预设的浏览器开启指定的 URI。

ImagemapMessageActionBuilder

• 
• 使用者点击後会传送设置好的文字讯息

ImagemapUriActionBuilder

• 
• 使用者点击後会用 Line 预设的浏览器开启指定的 URI。

成果预览：

背板图片有点跑版了ＱＱ
不过 Imagemap 有的功能上面的范例基本上都有实作到罗～

Template message

Template message 有提供四种模板：

• Buttons template
• Confirm template
• Carousel template
• Image carousel template

七种 Action：

• Postback action
• Message action
• URI action
• Datetime picker action
• Camera action
• Camera roll action
• Location action

Buttons template

use LINE\LINEBot\HTTPClient\CurlHTTPClient;
use LINE\LINEBot;
use LINE\LINEBot\MessageBuilder\TemplateBuilder\ButtonTemplateBuilder;
use LINE\LINEBot\TemplateActionBuilder\CameraRollTemplateActionBuilder;
use LINE\LINEBot\TemplateActionBuilder\CameraTemplateActionBuilder;
use LINE\LINEBot\TemplateActionBuilder\DatetimePickerTemplateActionBuilder;
use LINE\LINEBot\TemplateActionBuilder\LocationTemplateActionBuilder;

public function reply(Request $request)
{
    $httpClient = new CurlHTTPClient(env('LINE_BOT_CHANNEL_ACCESS_TOKEN'));
    $bot = new LINEBot($httpClient, ['channelSecret' => env('LINE_BOT_CHANNEL_SECRET')]);
    $replyToken = $request['events'][0]['replyToken'];
    
    $cameraRollTemplateActionBuilder = new CameraRollTemplateActionBuilder('CameraRoll');
    
    $cameraTemplateActionBuilder = new CameraTemplateActionBuilder('CameraTemplate');
    
    $datetimePickerTemplateActionBuilder = new DatetimePickerTemplateActionBuilder(
        'DatetimePicker',
        'storeId=12345',
        'datetime',
        Carbon::now()->format('Y-m-d\th:i'),
        '2099-12-31t00:00',
        '1900-01-01t00:00'
    );
    
    $locationTemplateActionBuilder = new LocationTemplateActionBuilder('LocationTemplate');

    $buttonTemplateBuilder = new ButtonTemplateBuilder(
        'Test Title',
        'Test Text',
        'https://cdn-icons-png.flaticon.com/512/1581/1581884.png',
        [
            $cameraRollTemplateActionBuilder,
            $cameraTemplateActionBuilder,
            $datetimePickerTemplateActionBuilder,
            $locationTemplateActionBuilder
        ]
    );

    $templateMessageBuilder = new TemplateMessageBuilder(
        'This is a buttons template',
        $buttonTemplateBuilder
    );

    $bot->replyMessage($replyToken, $templateMessageBuilder);
}

Buttons template 最多可以使用四种 TemplateActionBuilder，
这个范例使用了以下四种：

• Camera roll action
  • 使用者触发後，会开启 Line 的 Camera roll
• Camera action
  • 使用者触发後，会开启 Line 的 Camera
• Datetime picker action
  • 使用者触发後，会出现一个 Datetime picker 供使用者选择日期。使用者传送後我们收到的 Request 如下图：
    
• Location action
  • 使用者触发後，会开启 Line 的位置资讯功能。使用者传送後我们收到的 Request 如下图：
    

成果预览：

Confirm template

use LINE\LINEBot\HTTPClient\CurlHTTPClient;
use LINE\LINEBot;
use LINE\LINEBot\MessageBuilder\TemplateMessageBuilder;
use LINE\LINEBot\MessageBuilder\TemplateBuilder\ConfirmTemplateBuilder;
use LINE\LINEBot\TemplateActionBuilder\MessageTemplateActionBuilder;

public function reply(Request $request)
{
    $httpClient = new CurlHTTPClient(env('LINE_BOT_CHANNEL_ACCESS_TOKEN'));
    $bot = new LINEBot($httpClient, ['channelSecret' => env('LINE_BOT_CHANNEL_SECRET')]);
    $replyToken = $request['events'][0]['replyToken'];

    $messageTemplateActionBuilder1 = new MessageTemplateActionBuilder(
        'YES',
        'Say Yes!'
    );

    $messageTemplateActionBuilder2 = new MessageTemplateActionBuilder(
        'NO',
        'Say No!'
    );

    $confirmTemplateBuilder = new ConfirmTemplateBuilder(
        'YES or NO',
        [
            $messageTemplateActionBuilder1,
            $messageTemplateActionBuilder2
        ]
    );

    $templateMessageBuilder = new TemplateMessageBuilder(
        'This is a buttons template',
        $confirmTemplateBuilder
    );

    $bot->replyMessage($replyToken, $templateMessageBuilder);
}

Confirm template 会传送一个固定有两个按钮的模板，
然後这边我们实作的是 Message action，
所以使用者点击按钮後会回传一段文字讯息给我喔～

成果预览：

Carousel template

use LINE\LINEBot\HTTPClient\CurlHTTPClient;
use LINE\LINEBot;
use LINE\LINEBot\MessageBuilder\TemplateMessageBuilder;
use LINE\LINEBot\MessageBuilder\TemplateBuilder\CarouselTemplateBuilder;
use LINE\LINEBot\MessageBuilder\TemplateBuilder\CarouselColumnTemplateBuilder;
use LINE\LINEBot\TemplateActionBuilder\PostbackTemplateActionBuilder;

public function reply(Request $request)
{
    $httpClient = new CurlHTTPClient(env('LINE_BOT_CHANNEL_ACCESS_TOKEN'));
    $bot = new LINEBot($httpClient, ['channelSecret' => env('LINE_BOT_CHANNEL_SECRET')]);
    $replyToken = $request['events'][0]['replyToken'];

    $postbackTemplateActionBuilder1 = new PostbackTemplateActionBuilder(
        'Postback 1',
        'storeId=12345',
        'Postback 1'
    );

    $carouselColumnTemplateBuilder1 = new CarouselColumnTemplateBuilder(
        'Title 1',
        'CarouselColumnTemplateBuilder 1',
        'https://cdn-icons-png.flaticon.com/512/3522/3522248.png',
        [
            $postbackTemplateActionBuilder1
        ]
    );

    $postbackTemplateActionBuilder2 = new PostbackTemplateActionBuilder(
        'Postback 2',
        'storeId=67890',
        'Postback 2'
    );

    $carouselColumnTemplateBuilder2 = new CarouselColumnTemplateBuilder(
        'Title 2',
        'CarouselColumnTemplateBuilder 2',
        'https://cdn-icons-png.flaticon.com/512/3522/3522266.png',
        [
            $postbackTemplateActionBuilder2
        ]
    );

    $carouselTemplateBuilder = new CarouselTemplateBuilder([
        $carouselColumnTemplateBuilder1,
        $carouselColumnTemplateBuilder2
    ]);

    $templateMessageBuilder = new TemplateMessageBuilder(
        'This is a buttons template',
        $carouselTemplateBuilder
    );

    $bot->replyMessage($replyToken, $templateMessageBuilder);
}

Carousel template

• Max columns: 10

每个 columns 最多可以有三个 Action。
这边范例我们使用的是 Postback action，
使用者触发後，
回传的讯息属於 Postback event，
如下图：

成果预览：

Image carousel template

use LINE\LINEBot\HTTPClient\CurlHTTPClient;
use LINE\LINEBot;
use LINE\LINEBot\MessageBuilder\TemplateMessageBuilder;


public function reply(Request $request)
{
    $httpClient = new CurlHTTPClient(env('LINE_BOT_CHANNEL_ACCESS_TOKEN'));
    $bot = new LINEBot($httpClient, ['channelSecret' => env('LINE_BOT_CHANNEL_SECRET')]);
    $replyToken = $request['events'][0]['replyToken'];

    $uriTemplateActionBuilder1 = new UriTemplateActionBuilder(
        'Label 1',
        'https://ithelp.ithome.com.tw/'
    );

    $imageCarouselColumnTemplateBuilder1 = new ImageCarouselColumnTemplateBuilder(
        'https://cdn-icons-png.flaticon.com/512/3522/3522248.png',
        $uriTemplateActionBuilder1
    );

    $uriTemplateActionBuilder2 = new UriTemplateActionBuilder(
        'Label 2',
        'https://developers.line.biz/en/'
    );

    $imageCarouselColumnTemplateBuilder2 = new ImageCarouselColumnTemplateBuilder(
        'https://cdn-icons-png.flaticon.com/512/3522/3522266.png',
        $uriTemplateActionBuilder2
    );

    $imageCarouselTemplateBuilder = new ImageCarouselTemplateBuilder([
        $imageCarouselColumnTemplateBuilder1,
        $imageCarouselColumnTemplateBuilder2
    ]);

    $templateMessageBuilder = new TemplateMessageBuilder(
        'This is a buttons template',
        $imageCarouselTemplateBuilder
    );

    $bot->replyMessage($replyToken, $templateMessageBuilder);
}

Image carousel template

• Max columns: 10

每个 columns 只能有一个 Action。
这边范例我们使用的是 URI action，
使用者触发後，
会用 Line 预设的浏览器开启指定的 URI。

成果预览：

今天就这样啦～
还剩下一种 Flex Message 还没实作到，
明天再继续吧～
大家明天见！
若文章有任何问题，
还请大家不吝赐教！