Day17-Webhook 实作（六）LINEBot 之 MessageBuilder（IV）

大家好～
今天来实作如何用 Flex Message 回覆讯息吧！
那麽关於 Flex Message 样式设计，
官方推出的 FLEX MESSAGE SIMULATOR 就是个还满好用的工具啦～

可以在右侧的画面选择 Component 并指定 Property，
画面左侧则可以预览目前的设计。
另外右上角的四个按钮：

用来新增 Carousel 或 Bubble。

点开後可以看到官方提供的范例模板，
共有12种：

只要将加入官方的 Flex Message Sim 帐号加入好友，
就可以用该功能传送设计好的模板到 Line 电脑端或手机端，
看看实际的效果如何～

可以将设计好的模板转成 JSON。

Flex Message 回传讯息的部分，
将用下面这个范例模板为例。

Flex Message

use LINE\LINEBot\HTTPClient\CurlHTTPClient;
use LINE\LINEBot;
use LINE\LINEBot\MessageBuilder\FlexMessageBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ContainerBuilder\CarouselContainerBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ContainerBuilder\BubbleContainerBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\BoxComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\FillerComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\IconComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\ImageComponentBuilder;
use LINE\LINEBot\MessageBuilder\Flex\ComponentBuilder\TextComponentBuilder;

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'];

    $imageComponent = new ImageComponentBuilder('https://scdn.line-apps.com/n/channel_devcenter/img/flexsnapshot/clip/clip1.jpg');
    $imageComponent->setSize('full')
        ->setAspectMode('cover')
        ->setAspectRatio('2:3')
        ->setGravity('top');

    $titleText = new TextComponentBuilder("Brown's T-shirts");
    $titleText->setSize('xl')
        ->setColor('#ffffff')
        ->setWeight('bold');
    $titleTextBox = new BoxComponentBuilder('vertical', [$titleText]);

    $priceText = new TextComponentBuilder('¥75,000');
    $priceText->setColor('#ffffffcc')
        ->setDecoration('line-through')
        ->setGravity('bottom')
        ->setFlex(0)
        ->setSize('sm');
    $discountText = new TextComponentBuilder('¥35,800');
    $discountText->setColor('#ebebeb')
        ->setSize('sm')
        ->setFlex(0);
    $priceTextBox = new BoxComponentBuilder('baseline', [$discountText, $priceText]);
    $priceTextBox->setSpacing('lg');

    $fillerComponentBuilder = new FillerComponentBuilder();
    $cartIcon = new IconComponentBuilder('https://scdn.line-apps.com/n/channel_devcenter/img/flexsnapshot/clip/clip14.png');
    $cartText = new TextComponentBuilder('Add to cart');
    $cartText->setColor('#ffffff')
        ->setFlex(0)
        ->setOffsetTop('-2px');
    $cartButtonTextBox = new BoxComponentBuilder(
        'baseline',
        [
            $fillerComponentBuilder,
            $cartIcon,
            $cartText,
            $fillerComponentBuilder
        ]
    );
    $cartButtonTextBox->setSpacing('sm');
    $buttonBox = new BoxComponentBuilder(
        'vertical',
        [
            $fillerComponentBuilder,
            $cartButtonTextBox,
            $fillerComponentBuilder
        ]
    );
    $buttonBox->setBorderWidth('1px')
        ->setCornerRadius('4px')
        ->setSpacing('sm')
        ->setBorderColor('#ffffff')
        ->setMargin('xxl')
        ->setHeight('40px');

    $contentBox = new BoxComponentBuilder(
        'vertical',
        [
            $titleTextBox,
            $priceTextBox,
            $buttonBox
        ]
    );
    $contentBox->setPosition('absolute')
        ->setOffsetBottom('0px')
        ->setOffsetStart('0px')
        ->setOffsetEnd('0px')
        ->setBackgroundColor('#03303Acc')
        ->setPaddingAll('20px')
        ->setPaddingTop('20px');

    $boxComponentBuilder = new BoxComponentBuilder(
        'vertical',
        [
            $imageComponent,
            $contentBox
        ],
    );
    $boxComponentBuilder->setPaddingAll('0px');

    $bubbleContainerBuilder = new BubbleContainerBuilder(
        'ltr',
        null,
        null,
        $boxComponentBuilder,
        null,
        null,
        null
    );

    $carouselContainerBuilder = new CarouselContainerBuilder([
        $bubbleContainerBuilder,
        $bubbleContainerBuilder,
        $bubbleContainerBuilder,
        $bubbleContainerBuilder,
        $bubbleContainerBuilder
    ]);

    $flexMessageBuilder = new FlexMessageBuilder(
        'Alternative text',
        $carouselContainerBuilder
    );

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

成果预览：

Flex Message 虽然需要自己设计模板，
跟 Template message 比起来使用方法复杂很多，
但可以有更弹性的模板设计，
而且 Flex Message 在手机端与电脑端都能正常显示讯息。

那麽我们已经实作过每种 MessageBuilder 啦～
今天就先这样吧，
大家明天见！
若文章有任何问题，
还请大家不吝赐教！