line bot การปรับขนาด flex bubble

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา line bot การปรับขนาด flex bubble

line bot การปรับขนาด flex bubble
https://www.ninenik.com/899

อนนี้ bubble ปรับขนาดได้แล้ว ต้องเพิ่มโค๊ดในส่วนของ size อย่างไร 

https://medium.com/linedevth/อัพเดท-11-ฟีเจอร์ใหม่ของ-flex-message-ใน-line-messaging-api-ปี-2019-668e92721bc9


Yatanos Masitong 110.169.129.xxx 02-05-2020 11:56:41

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ เข้าใช้งานด้วย Facebook คลิก )
 ความคิดเห็นที่ 1
ถ้าต้องการให้รองรับความสามารถใหม่ทั้งหมด ต้องทำการอัพเดทเวอรั่นของ 
Line Bot Sdk php เป็นเวอร์ชั่นล่าสุด จากนั้นดูว่าเราต้องการปรับค่าอะไร ตอนนี้ไม่มี
รายละเอียดเป็นเนื้อหาชัดเจน ขอแนะนำคร่าวๆ ตามนี้
    ต้องดูว่าค่าที่เราจะใช้งานเป็นการกำหนดค่าจาก parameter ที่เป็น option ใหม่เข้าไปหรือไม่
    หรือเป้นการกำหนดโดยเรียกใช้คำสั่งการทำงาน เช่น การกำหนด style ต่างๆ ที่มีเพิ่มเข้ามา อย่าง
padding backgroundcolor offset เป็นต้น
 
    ถ้าเป็น parameter option ให้เรากำหนดค่าต่อจากค่าเดิม สมมติเช่น การกำหนดขนาดของ bubble
 
https://github.com/line/line-bot-sdk-php/blob/master/src/LINEBot/MessageBuilder/Flex/ContainerBuilder/BubbleContainerBuilder.php
 
ดูในส่วนของ construct
 
    /**
     * BubbleContainerBuilder constructor.
     *
     * @param ContainerDirection|null $direction
     * @param BoxComponentBuilder|null $headerComponentBuilder
     * @param ComponentBuilder|null $heroComponentBuilder
     * @param BoxComponentBuilder|null $bodyComponentBuilder
     * @param BoxComponentBuilder|null $footerComponentBuilder
     * @param BubbleStylesBuilder|null $stylesBuilder
     * @param BubleContainerSize|null $size
     */
    public function __construct(
        $direction = null,
        $headerComponentBuilder = null,
        $heroComponentBuilder = null,
        $bodyComponentBuilder = null,
        $footerComponentBuilder = null,
        $stylesBuilder = null,
        $size = null
    ) {
 
จะเห็นว่า size เป็น parameter ที่เป็น option ไม่กำหนดเป้นค่า null เป็นค่าเริ่มต้น การกำหนด เราจะใช้ค่าเป็น string โดยตรง
หรือใช้ผ่านตัวแปรค่าคงที่จาก class เพิ่มเติมก็ได้ สมมติใช้ตัวแปรค่าคงที่ เราต้องทำการใช้งาน BubleContainerSize class
ที่มีการกำหนดตัวแปรค่าคงที่ไว้ให้ โดยเรียกใช้ class ตามรูปแบบนี้ไว้ด้านบน
 
use LINE\LINEBot\Constant\Flex\BubleContainerSize;
 
ส่วนของการกำหนดค่า ก็เพิ่ม parameter เข้าไปเป็น สมมติตัวอย่าง 
 
$textReplyMessage = new BubbleContainerBuilder(
    "ltr",  // กำหนด NULL หรือ "ltr" หรือ "rtl"
    new BoxComponentBuilder(
        "vertical",
        array(
            new TextComponentBuilder("This is Header")
        )
    ),
    new ImageComponentBuilder(
        "https://www.ninenik.com/images/ninenik_page_logo.png",NULL,NULL,NULL,NULL,"full","20:13","cover"),
    new BoxComponentBuilder(
        "vertical",
        array(
            new TextComponentBuilder("This is Body")
        )
    ),
    new BoxComponentBuilder(
        "vertical",
        array(
            new TextComponentBuilder("This is Footer")
        )
    ),
    new BubbleStylesBuilder( // style ทั้งหมดของ bubble
        new BlockStyleBuilder("#FFC90E"),  // style สำหรับ header block
        new BlockStyleBuilder("#EFE4B0"), // style สำหรับ hero block
        new BlockStyleBuilder("#B5E61D"), // style สำหรับ body block
        new BlockStyleBuilder("#FFF200") // style สำหรับ footer block
    ),
	BubleContainerSize::GIGA
);
$replyData = new FlexMessageBuilder("Flex",$textReplyMessage);	
 
สังเกตว่าเราเพิ่ม paramter option ตัวที่ 7 เข้าไปเป็นตัวแปรค่าคงที่ BubleContainerSize::GIGA 
หรือกรณี เราต้องการกำหนดแบบตายตัว โดยใช้ค่าที่เป็น string ก็ได้ เช่น กำหนดเป็น "giga"
ตัวอย่างโค้ดบางส่วน
 
$textReplyMessage = new BubbleContainerBuilder(
 .......
.......
....,
    new BubbleStylesBuilder( // style ทั้งหมดของ bubble
        new BlockStyleBuilder("#FFC90E"),  // style สำหรับ header block
        new BlockStyleBuilder("#EFE4B0"), // style สำหรับ hero block
        new BlockStyleBuilder("#B5E61D"), // style สำหรับ body block
        new BlockStyleBuilder("#FFF200") // style สำหรับ footer block
    ),
	"giga"
);
$replyData = new FlexMessageBuilder("Flex",$textReplyMessage);	
 
ค่าคงที่จะมีรูปแบบตามที่ไฟล์ class constant หรือตัวแปรกำหนดไว้ เช่นกรณีค่านี้ก็จากไฟล์
https://github.com/line/line-bot-sdk-php/blob/master/src/LINEBot/Constant/Flex/BubleContainerSize.php
 
เวลาเราอ้างอิงไฟล์ของเราก็ดูที่ path ในส่วนของ package ว่ามีไฟล์นี้หรือไม่ 
vendor/linecorp/line-bot-sdk/src/LINEBot/Constant\Flex/BubleContainerSize.php
 
    ต่อไปในส่วนของกรณีที่เป็นการเรียกใช้คำสั่งกำหนดค่าเพิ่มเติม อย่าง boxComponent สมมติเช่นการกำหนด padding
อ้างอิงจากไฟล์ class จาก
https://github.com/line/line-bot-sdk-php/blob/master/src/LINEBot/MessageBuilder/Flex/ComponentBuilder/BoxComponentBuilder.php
 
จะเห็นว่ามีการกำหนดคำสั่งหรือฟังก์ชั่นการกำหนด padding ไว้ให้เราใช้งาน อย่าง
 
    public function setPaddingAll($paddingAll)
    {
        $this->paddingAll = $paddingAll;
        return $this;
    }
 
เวลาเราใช้งานก็จะเรียกใช้งานคำสั่ง หลังจากที่ทำการสร้าง object แล้ว ดังนี้
 
$textReplyMessage = new BubbleContainerBuilder(
    "ltr",  // กำหนด NULL หรือ "ltr" หรือ "rtl"
    new BoxComponentBuilder(
        "vertical",
        array(
            new TextComponentBuilder("This is Header")
        )
    ),
    new ImageComponentBuilder(
        "https://www.ninenik.com/images/ninenik_page_logo.png",NULL,NULL,NULL,NULL,"full","20:13","cover"),
    new BoxComponentBuilder(
        "vertical",
        array(
            new TextComponentBuilder("This is Body")
        )
    ),
    new BoxComponentBuilder(
        "vertical",
        array(
            new TextComponentBuilder("This is Footer")
        )
    ),
    new BubbleStylesBuilder( // style ทั้งหมดของ bubble
        new BlockStyleBuilder("#FFC90E"),  // style สำหรับ header block
        new BlockStyleBuilder("#EFE4B0"), // style สำหรับ hero block
        new BlockStyleBuilder("#B5E61D"), // style สำหรับ body block
        new BlockStyleBuilder("#FFF200") // style สำหรับ footer block
    ),
	BubleContainerSize::GIGA
);
 
ดูส่วนของ box component ที่เป็น header เดิมเราไม่ได้จัดการด้วยคำสั่งใดๆ เพิมเติม เราเลยทำการสร้าง object และ
กำหนดเป้น paramter ทันที ตามตัวอย่าง แต่กรณี้เราต้องการเรียกใช้คำสั่งเพิ่มเติม เราต้องแยกออกมาเป็นตัวแปร ใหม่
โดยทำการสร้าง object ให้เสร็จก่อน แล้วค่อยเรียกใช้งานคำสั่ง เป็นดังนี้
 
$boxSet = new BoxComponentBuilder(
	"vertical",
	array(
		new TextComponentBuilder("This is Header")
	)
);

$textReplyMessage = new BubbleContainerBuilder(
    "ltr",  // กำหนด NULL หรือ "ltr" หรือ "rtl"
    $boxSet->setPaddingAll("10%"),
    new ImageComponentBuilder(
        "https://www.ninenik.com/images/ninenik_page_logo.png",NULL,NULL,NULL,NULL,"full","20:13","cover"),
    new BoxComponentBuilder(
        "vertical",
        array(
            new TextComponentBuilder("This is Body")
        )
    ),
    new BoxComponentBuilder(
        "vertical",
        array(
            new TextComponentBuilder("This is Footer")
        )
    ),
    new BubbleStylesBuilder( // style ทั้งหมดของ bubble
        new BlockStyleBuilder("#FFC90E"),  // style สำหรับ header block
        new BlockStyleBuilder("#EFE4B0"), // style สำหรับ hero block
        new BlockStyleBuilder("#B5E61D"), // style สำหรับ body block
        new BlockStyleBuilder("#FFF200") // style สำหรับ footer block
    ),
	BubleContainerSize::GIGA
);
 
จะเห็นว่าเราสร้างเป็นตัวแปร $boxSet แล้วเรียกใช้งานคำสั่ง พร้อมกำหนดเป็น paramter .ในรูปแบบ
 
$boxSet->setPaddingAll("10%"),
 
กรณีเรียกใช้หรือกำหนดหลายคำสั่งก็สามารถใช้เป็น
 
$boxSet->setPaddingAll("10%")->setBackgroundColor("#144EE8"),
 
หรือจะขึ้นบรรทัดใหม่ก็ได้
 
    $boxSet->setPaddingAll("10%")
	->setBackgroundColor("#144EE8"),
 
เป็นแนวทางเบื้องต้นไปใช้งาน อย่างไรก็ตาม เราต้องเข้าใจในเรี่องการใช้งาน class และ object ใน php เป็นพื้นฐาน
ก็จะสามารถปรับใช้งานเพิ่มเติมได้


บทความแนะนำที่เกี่ยวข้อง
เริ่มต้นการใช้งาน Flex Message ผ่าน LINE Messaging API ตอนที่ 9อ่าน 3,726
Ninenik 27.55.89.xxx 02-05-2020
 ความคิดเห็นที่ 2
แล้วกรณี xml ต้องแทรกโค๊ดอย่างไร ครับ


Yatanos Masitong 171.96.95.xxx 04-05-2020 09:47
 ความคิดเห็นที่ 3
 กรณี XML น่าจะต้องปรับเพิ่มอีก เพราะมีการกำหนดค่า และใช้ตัวแปรใหม่เข้ามา
รอทางเว็บอัพเดทอีกที ถ้ามีการปรับแก้ไขไฟล์สำหรับสร้าง Flex จาก XML 


บทความแนะนำที่เกี่ยวข้อง
สร้าง Flex Message ด้วย XML กับ LINE Messaging API ตอนที่ 10อ่าน 3,804
Ninenik 223.24.62.xxx 04-05-2020
1






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ