ทำ LIFF และ LINE Chatbot ง่ายๆ ด้วย Glitch ในสไตล์ PHP

Published in

LINE Developers Thailand

7 min readApr 2, 2024

สวัสดีเพื่อนๆ ชาว LINE Developers ทุกท่าน วันนี้กวิ้น จะมานำเสนอ วิธีการที่จะทำให้ชีวิต ของเราสะดวกสบายมากยิ่งขึ้นสำหรับเพื่อนๆ ที่เขียนภาษา PHP และ ประสบกับปัญหารุมเล้าที่จะต้องหา server มาคอย deploy วันนี้ กวิ้น มีของดีมานำเสนอซึ่งจะเป็นอย่างไรนั้นเรามาติดตามรับชมกันได้เลย

PART 1 — สร้าง Account สำหรับ Glitch

เอาละครับ ก่อนอื่นเราจะต้องทำการสมัคร Glitch กันซะก่อนโดยให้ทุกคนเข้าไปที่ https://glitch.com เมื่อเข้ามาแล้วจะเจอหน้าจอแบบนี้

ให้เราทำการ Sign up ซะก่อนโดยให้กดที่ปุ่ม Sign up ที่มุมบนขวา

เมื่อเรากดปุ่ม Sign up เข้ามาแล้วเราจะพบกับหน้าสำหรับการ Sign up ซึ่งมีให้เราทำการ Sign up ด้วยกัน 3 วิธี
1. GitHub
2. Google (Gmail)
3. Email Magic Link
ในจุดนี้ให้เราทำการเลือกวิธี Sign up ตามที่เราสะดวกได้เลย ส่วนกวิ้นขอเลือกใช้เป็น Google Account หรือว่า Gmail นั่นเอง

ซึ่งในแต่ละวิธีของการ Sign up นั้นก็จะผ่านกระบวนการ sign up ที่ต่างกันขึ้นกับวิธีการ sign up ของแต่ละคนในส่วนของกวิ้นที่เลือกใช้วิธีการ sign up แบบ Google ก็จะต้องทำการ login ด้วย Google Account หรือว่า Gmail ของเรานั่นเอง เมื่อเราทำการ sign up เรียบร้อยแล้วระบบจะทำการ Log in ให้โดยอัตโนมัติ โดยจะขึ้นหน้าจอแบบนี้

โดยที่ให้สังเกตที่มุมขวาบนจะขึ้นเป็น Account ของเราที่ทำการ Log in ไปนั่นเอง

PART 2— สร้าง Project ใหม่

ในการสร้าง Project ใหม่ให้เรากดไปที่ปุ่ม New project ที่มุมขวาบน

หลังจากนั้น ให้เลือกเป็น glitch-hello-node

เมื่อเราเลือกทำการสร้าง Project มาเป็นตัว Glitch แบบ NodeJS แล้วจะขึ้นหน้าจอแบบนี้

หลายๆคนอาจจะเริ่มสงสัยว่า อ้าว แล้ว Glitch ไม่มีให้เลือกสร้างเป็นแบบ PHP เลยเหรอ แล้วสร้าง Project มาเป็น NodeJS แล้วจะเขียน PHP ได้หรือ มาติดตามต่อกันที่ Part 3 กันต่อได้เลยครับ

PART 3— แก้ไข Package เพื่อให้รองรับการเขียน PHP

เอาละมาถึง Part นี้เราจะมาทำการปรับแก้ Package เพื่อให้รองรับ PHP กันโดยให้เราคลิ๊กไปที่ไฟล์ package.json

ที่บรรทัดที่ 7 ตรงส่วนของ start ให้เราทำการแก้ไขโดยใส่

php -S 0.0.0.0:3000 -t ./public/

เข้าไปแทนที่แบบนี้

หลังจากนั้นให้ทำการลบ Folder src/ ออก

หลังจากนั้นให้เราทำการเพิ่ม File PHP เข้าไปโดยให้เรากดเลือกไปที่ Folder public/ และเลือก Add File to Folder

หลังจากนั้นให้เราทำการตั้งชื่อ File ว่า index.php เพื่อให้ระบบทำการโหลดหน้าเพจนี้เป็นเพจแรก

หลังจากนั้นให้กด Add this File ได้เลย

ต่อมาให้เราทำการทดลองเขียน Code PHP ลงไปโดยกวิ้นจะเขียนคำที่ Classic ที่สุดนั่นก็คือ “Hello World LINE Developers” เข้าไป

<?php
  echo "Hello World LINE Developers";
?>

หลังจากนั้นให้กดที่ปุ่ม PREVIEW เพื่อทดสอบการรันหน้าเว็บ PHP ของเรา

ถ้าใครขึ้นเหมือนของกวิ้นแล้วแปลว่าเราสำเร็จขึ้นตอนแรกแล้วครับ

PART 4— เชื่อมต่อ LIFF

เอาละมาถึงขั้นตอนการเชื่อมต่อ LIFF ของเรากันแล้วโดยที่กวิ้นจะนำ Code จากบทความนี้มาทดสอบกัน โดยที่เพื่อนๆสามารถเข้าไปอ่านเพิ่มเติมได้ที่นี่เลย

ทำระบบจ่ายเงินง่ายๆ ด้วย LIFF X SCB(EP.8)

สวัสดีมิตรรักแฟนคลับทุกท่าน หลังจากที่กวิ้นหายไปร่วมครึ่งปี ตอนนี้กวิ้นกลับมาแล้วววววทุกคนนนน…

medium.com

ก่อนอื่นกวิ้นจะทำการ Copy Code ในส่วนของ LIFF มาใส่ใน File index.php ก่อนแบบนี้

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn-script.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<script src="https://static.line-scdn.net/liff/edge/versions/2.23.2/sdk.js"></script>
<style>
/*********************************************
       Call Bootstrap
*********************************************/
@import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
/*********************************************
          Theme Elements
*********************************************/
.gold{
 color: #FFBF00;
}
/*********************************************
     PRODUCTS
*********************************************/
.product{
 border: 1px solid #dddddd;
 height: 321px;
}
.product>img{
 max-width: 230px;
}
.product-rating{
 font-size: 20px;
 margin-bottom: 25px;
}
.product-title{
 font-size: 20px;
}
.product-desc{
 font-size: 14px;
}
.product-price{
 font-size: 22px;
}
.product-stock{
 color: #74DF00;
 font-size: 20px;
 margin-top: 10px;
}
.product-info{
  margin-top: 50px;
}
/*********************************************
     VIEW
*********************************************/
.content-wrapper {
 max-width: 1140px;
 background: #fff;
 margin: 0 auto;
 margin-top: 25px;
 margin-bottom: 10px;
 border: 0px;
 border-radius: 0px;
}
.container-fluid{
 max-width: 1140px;
 margin: 0 auto;
}
.view-wrapper {
 float: right;
 max-width: 70%;
 margin-top: 25px;
}
.container {
 padding-left: 0px;
 padding-right: 0px;
 max-width: 100%;
}
/*********************************************
    ITEM 
*********************************************/
.service1-items {
 padding: 0px 0 0px 0;
 float: left;
 position: relative;
 overflow: hidden;
 max-width: 100%;
 height: 321px;
 width: 130px;
}
.service1-item {
 height: 107px;
 width: 120px;
 display: block;
 float: left;
 position: relative;
 padding-right: 20px;
 border-right: 1px solid #DDD;
 border-top: 1px solid #DDD;
 border-bottom: 1px solid #DDD;
}
.service1-item > img {
 max-height: 110px;
 max-width: 110px;
 opacity: 0.6;
 transition: all .2s ease-in;
 -o-transition: all .2s ease-in;
 -moz-transition: all .2s ease-in;
 -webkit-transition: all .2s ease-in;
}
.service1-item > img:hover {
 cursor: pointer;
 opacity: 1;
}
.service-image-left {
 padding-right: 50px;
}
.service-image-right {
 padding-left: 50px;
}
.service-image-left > center > img,.service-image-right > center > img{
 max-height: 155px;
}
</style>
<!------ Include the above in your HEAD tag ---------->

<div class="container-fluid">
    <div class="content-wrapper"> 
  <div class="item-container"> 
   <div class="container"> 
    <div class="col-md-12">
     <div class="product col-md-3 service-image-left">
                    
      <center>
       <img id="item-display" src="https://mpics.mgronline.com/pics/Images/564000008846604.JPEG" alt=""></img>
      </center>
     </div>
     
     <div class="container service1-items col-sm-2 col-md-2 pull-left">
      <center>
       <a id="item-1" class="service1-item">
        <img src="https://cf.shopee.co.th/file/572035f0fdc8cec45b19e9f3e560fe0e" alt=""></img>
       </a>
       <a id="item-2" class="service1-item">
        <img src="https://cf.shopee.co.th/file/d3fb3103bf5f63125ccba32fbad79abe" alt=""></img>
       </a>
       <a id="item-3" class="service1-item">
        <img src="https://cf.shopee.co.th/file/31e705f2566f1f77c4f8e614ec5ea035" alt=""></img>
       </a>
      </center>
     </div>
    </div>
     
    <div class="col-md-7">
     <div class="product-title">LINE FRIENDS Official MONITOR FIGURE by LINEFRIENDS</div>
     <!-- <div class="product-desc">The Corsair Gaming Series GS600 is the ideal price/performance choice for mid-spec gaming PC</div> -->
     <div class="product-rating"><i class="fa fa-star gold"></i> <i class="fa fa-star gold"></i> <i class="fa fa-star gold"></i> <i class="fa fa-star gold"></i> <i class="fa fa-star-o"></i> </div>
     <hr>
     <div class="product-price">100.00</div>
     <div class="product-stock">In Stock</div>
     <hr>
     <div class="btn-group cart">
      <button type="button" class="btn btn-success">
       Buy
      </button>
     </div>
    </div>
   </div> 
  </div>
  <div class="container-fluid">  
   <div class="col-md-12 product-info">
    <div id="myTabContent" class="tab-content">
      <div class="tab-pane fade in active" id="service-one">
       
       <section class="container product-info">
        LINE FRIENDS Official MONITOR FIGURE by LINEFRIENDS
        <h3>100% AUTHENTIC ORIGINAL LINE FRIENDS</h3>
        <li>Line Friends X Royche OFFICIA MONITOR FIGURE</li>
        <li>Condition : Brand New & Factory Sealed</li>
        <li>Ship From Korea</li>
        <li>Size : BROWN-27.7x40mm, CONY-26.5x44.3mm, SALLY-21x30.5mm</li>
        <li>Material: PVC(NON-TOXIC)</li>
       </section>
            
      </div>
     <div class="tab-pane fade" id="service-two">
      
      <section class="container">
        
      </section>
      
     </div>
     <div class="tab-pane fade" id="service-three">
            
     </div>
    </div>
    <hr>
   </div>
  </div>
 </div>
</div>
<script>
 $( document ).ready(function() {
  liff.init({
   liffId: "<LIFF ID>"
  })
  .then(() => {
   if (liff.isLoggedIn()) {
    liff.getProfile().then(function(profile) {
      console.log(profile)
    }).catch(function(error) {
     Swal.fire({
      type: 'error',
      title: 'พบข้อผิดพลาด',
      text: 'ไม่สามารถดึงข้อมูล LINE Profile ของท่านได้ กรุณาลองใหม่อีกครั้ง หรือติดต่อแอดมินผ่านทาง Facebook'
     });
    });
   }else{
    liff.login();
   }
  })
  .catch((err) => {
  
  });
 });
</script>

ต่อมาให้เรากลับไปที่ LINE Developers Console เพื่อทำการ Copy Link ของ Web เราเพื่อไปสร้าง LIFF นั่นเองโดยเพื่อนๆสามารถ Copy Link จากตรงนี้ไปได้เลย

เมื่อเรา Copy Link มาแล้วก็ให้เรานำมาใส่ใน Endpoint URL ได้เลย

เมื่อเราทำการสร้าง LIFF เสร็จแล้วเราก็จะได้ LIFF ID มาให้เรานำไปแก้ไขใน File index.php ได้เลย โดยให้เพื่อนๆนำไปแก้ไขที่บรรทัดที่ 201 และเมื่อเราทำการแก้ไข LIFF ID เป็นที่เรียบร้อยแล้วเราก็จะพร้อมใช้งาน LIFF กันแล้ว

ซึ่งหลังจากที่เราทำการใส่ LIFF ID ไปแล้วและลองทดสอบเปิดหน้าเว็บใหม่อีกครั้งระบบจะทำการ LINE Login ให้เราและเมื่อเราทำการ Login เสร็จแล้วจะได้ข้อมูลของ User มาแบบนี้เลย

PART 5— เชื่อมต่อ LINE Webhook

มาถึงในส่วนของการเชื่อมต่อ LINE Webhook กวิ้นได้ทำการ File ใหม่อีก 1 File นั่นก็คือ LINEChatbot.php โดยใช้วิธีการสร้างเหมือนกับ Part 3

หลังจากนั้น กวิ้นจะทำการ Copy Code จากบทความนี้มาใช้ซึ่งเพื่อนๆ สามารถอ่านเพิ่มเติมได้จากบทความนี้

มาเขียน LINE BOT ด้วย PHP กัน EP.1

สวัสดีครับ ผมนาย เพนกวิน วันนี้จะมาแชร์การเขียน LINE BOT แบบบ้านๆ ด้วย PHP

medium.com

<?php 
 /*Get Data From POST Http Request*/
 $datas = file_get_contents('php://input');
 /*Decode Json From LINE Data Body*/
 $deCode = json_decode($datas,true);

 file_put_contents('log.txt', file_get_contents('php://input') . PHP_EOL, FILE_APPEND);

 $replyToken = $deCode['events'][0]['replyToken'];
 $userId = $deCode['events'][0]['source']['userId'];
 $text = $deCode['events'][0]['message']['text'];

 $messages = [];
 $messages['replyToken'] = $replyToken;
 $messages['messages'][0] = getFormatTextMessage("เอ้ย ถามอะไรก็ตอบได้");

 $encodeJson = json_encode($messages);

 $LINEDatas['url'] = "https://api.line.me/v2/bot/message/reply";
   $LINEDatas['token'] = "<YOUR-CHANNEL-ACCESS-TOKEN>";

   $results = sentMessage($encodeJson,$LINEDatas);

 /*Return HTTP Request 200*/
 http_response_code(200);

 function getFormatTextMessage($text)
 {
  $datas = [];
  $datas['type'] = 'text';
  $datas['text'] = $text;

  return $datas;
 }

 function sentMessage($encodeJson,$datas)
 {
  $datasReturn = [];
  $curl = curl_init();
  curl_setopt_array($curl, array(
    CURLOPT_URL => $datas['url'],
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_ENCODING => "",
    CURLOPT_MAXREDIRS => 10,
    CURLOPT_TIMEOUT => 30,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => "POST",
    CURLOPT_POSTFIELDS => $encodeJson,
    CURLOPT_HTTPHEADER => array(
      "authorization: Bearer ".$datas['token'],
      "cache-control: no-cache",
      "content-type: application/json; charset=UTF-8",
    ),
  ));

  $response = curl_exec($curl);
  $err = curl_error($curl);

  curl_close($curl);

  if ($err) {
      $datasReturn['result'] = 'E';
      $datasReturn['message'] = $err;
  } else {
      if($response == "{}"){
   $datasReturn['result'] = 'S';
   $datasReturn['message'] = 'Success';
      }else{
   $datasReturn['result'] = 'E';
   $datasReturn['message'] = $response;
      }
  }

  return $datasReturn;
 }
?>

หลังจากที่เราทำการ Copy Code มาแล้วกวิ้นก็จะทำมาวางใน File LINEChatbot.php แบบนี้

หลังจากนั้นให้เรากลับไปที่ LINE Developers Console เพื่อทำการแก้ไข Webhook โดยที่เราสามารถใส่ Link แบบนี้ได้เลย

หลังจากนั้นให้เราทำการ Copy Channel Access Token มาเปลี่ยนใน Code ของเราโดยให้นำมาเปลี่ยนในบรรทัดที่ 20

เมื่อทำการแก้ไข Channel Access Token ใน Code ของเราเรียบร้อยแล้วเพียงเท่านี้เราก็สามารถเชื่อมต่อ LINE Chatbot ได้แล้วเอาละมาทดลองกันเลย

ว้าวว ตอนนี้ Chatbot ของเราก็ตอบเป็นที่เรียบร้อยแล้ว

เป็นยังไงกันบ้างครับเพื่อนๆ ต่อไปเราก็ไม่ต้องไปหา Server เพื่อมาติดตั้ง PHP อีกต่อชีวิตของเราก็จะสะดวก สบาย มากยิ่งขึ้น ขอให้เพื่อนๆสนุกกับการทำ LINE Chatbot และ หวังว่าบทความนี้จะเป็นประโยชน์กับเพื่อนๆ นะครับ สำหรับวันนี้กวิ้นต้องไปก่อนแล้ว ไว้เจอกันใหม่ บ๊ายบายย

ตอนนี้ LINE Developers เรามีแฟนเพจ และ ช่อง youtube แล้วนะจ๊ะอย่าลืมไปกด LIKE และ กดติดตามกันด้วยน้าาา

https://www.facebook.com/LINEDEVTH

ส่วนใครที่ยังไม่ได้เข้าร่วมกลุ่มกับเรา คลิ๊กที่นี่ได้เลย

https://www.facebook.com/groups/LINEDEVTH

https://www.youtube.com/@LINEDevelopersThailand