การทำ Hybrid application ด้วย framework7 ดึง api จาก feed wordpress

WordPress เป็นหนึ่งใน cms ที่นิยมที่สุดในโลก และคนทำเว็บอย่างผมก็หนีไม่พ้นที่จะต้องใช้ทำงานให้ลูกค้าในบางครั้ง เช่นกันงานด้าน application สำหรับโทรศัพท์ก็มีมาซึ่งผมชอบ Framework 7 มากกว่อันอื่นเนื่องจาก ui ดูดีและวิธีการเขียนที่ไม่ค่อยซับซ้อนเท่าไหร่  เลยมีความคิดว่าจะลองทำ Blog feed application โดยใช้ทั้งสองมารวมกัน สามารถ download code ไปลองเล่นดูได้ครับ

เรามาเริ่มกันจากตัวอย่างครับ หรือ click https://webunique.in.th/blog/simple/wpapi/index.html

จากตัวอย่าง ผมจะดึงบทความจาก blog ของผมมาแสดงครับ

เรามาเริ่มกันเลยครับ

อย่างแรกที่ต้องเตรียม คือ api ของ WP ซึ่งผมก็ไปเจอ Plugin มาชื่อ  https://github.com/WP-API/WP-API เข้าไป Donwload และ Install ตามคู่มือเขาได้เลยครับ

หลังจากเรา Active Plugin ตัวนี้แล้วเราจะสามารถเรียก API ของ Blog เราได้ตัวอย่างเว็บผมคือ

https://webunique.in.th/blog/wp-json/wp/v2/posts  นั่นคือ Domain +  wp-json/wp/v2/posts

ถ้าเราเรียกถูกต้องจะต้องมี json กลับมาตามรูปครับ

หลังจากนั้นแล้วเราจะมาทำ ui เพื่อเรียกข้อมูลจาก api กันครับ

เรื่ม Download Framework 7 จากเว็บผู้พัฒนาได้เลยครับ https://framework7.io/

ซึ่ง ส่วนประกอบสำคัญจะมีอยู่แค่ 3 folder คือ    js,img,css และ html ที่อยู่ root

มาเริ่ม code ใน project นี้กันครับ
index.html
– Link CSS และ JS ที่ต้องใช้ ที่สำคัญจะมี main.js ที่เป็น logic ของเราครับ

<link rel="stylesheet" href="css/framework7.material.min.css"> 
<link rel="stylesheet" href="css/framework7.material.colors.min.css">
<link rel="stylesheet" href="css/framework7-icons.css">
<script type="text/javascript" src="js/framework7.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

– HTML ที่สำคัญของ Framework 7

   <div data-page="startpage" class="page">

ทำไม่ div ที่มี attribute  data-page ถึงสำคัญเนื่องจากตัวนี้จะเป็นเหมือน content เมื่อมีการเรียกหน้าอื่น html หน้าอื่นจะเข้ามาแทนที่ส่วนนี้ทั้งหมด พูดง่ายๆคือจุดที่มีการเปลี่ยน view และ ใช้เป็นตัวในการอ้างอิงการทำ control ขึ้นมาด้วย สังเกตุได้จาก ไฟล์ des.html ที่มีแค่ส่วน page เท่านั้นและผมตั้งชื่อว่า des

ที่นี้มาในส่วน js ที่ใช้ควบคุมและเรียก page ต่างๆ

main.js คือส่วนที่เป็น control ของโปรแกรมทั้งหมด

var webuniqueapp = new Framework7();  // สร้าง app ขึ้นมา
var $$ = Dom7; 
var mainView = webuniqueapp.addView('.view-main',{  // add view เข้า class และใส่ config
     cache:false,
     modalTitle: 'WEB UNIQUE BLOG',
});

var urlpost = 'https://webunique.in.th/blog//wp-json/wp/v2/';  // ผมสร้างไว้เรียก url จะได้เปลี่ยนที่เดียว

   
initfeed();

// init event zone
webuniqueapp.onPageInit('startpage', function (page) {  // ส่วนที่ผมบอกว่าต้องใช้ init page ที่มีการเรียก จะทำตาม logic ด้านในครับ อันนี้เป็ฯส่วน Startsite หรือ Index.html
    
   
 initfeed();      
        
        
        
});   


webuniqueapp.onPageInit('des', function (page) { // ส่วนนี้เป็น logic control ของ des หรือ des.html ครับ


      var datapost = [];     
         
           $$.get(urlpost+'posts/'+page.query.id, datapost, function (data) { // ่ajax เรียกข้อมูลขาม id ของ post
 
                 $$("#mytitle").html(data.title.rendered);   // set title
                 $$("#mycontent").html(data.content.rendered); // set content
          
          });
        
        
});    

function initfeed(){  // function สำหรับเรียก feed จาก wp
                
var datapost = [];                
                   
     $$.get(urlpost+'posts', datapost, function (data) {  // ajax ไปที่ url
 
          data = JSON.parse(data);    // แปลง data เป็น json
          var feedcontent = '';
          $$.each( data, function( key, value ) {  // loop object เพื่อนำไปแสดงผลใช้การต่อ string แบบบ้านๆเอาครับ
          
           feedcontent +='<li>';
           feedcontent +='<a href="des.html?id='+data[key].id+'"  class="item-link item-content">';
           feedcontent +='<div class="item-inner">';
           feedcontent +='<div class="item-title-row">';
           feedcontent +='<div class="item-title">'+data[key].title.rendered+'</div>';
           feedcontent +='<div class="item-after"></div>';
           feedcontent +='</div>';
           feedcontent +='<div class="item-subtitle"></div>';
           feedcontent +='<div class="item-text" ">'+data[key].excerpt.rendered+'</div>';
           feedcontent +='</div>';
           feedcontent +='</a>';
           feedcontent +='</li>';                                  
      });
      
      $$("#feedlist").html(feedcontent);
              
    });

}

    
จริงๆยังมีอีกหลายอย่างที่ต้องอธิบายใน project นี้แต่เวลาเขียนอาจจะไม่พอรวมถึงการ bulid เป็น app ขึ้น store
ลองเอา source ไปศึกษาเพิ่มเติมได้ครับ
(ในการพัฒนาพวก hybrid app และใช้ ajax ถ้าทดสอบใน Browser จะเจอปัญหา ajax cross domain คือ ถ้าอยู่เว็บ a ไปเรียก ajax url จากเว็บ b ไม่ได้เป็น browser security ถ้าอยากทดสอบลองหา plugin หรือ addon ของ broswer ดู
ก็จะสามารถเรียกข้อมูลได้ chrome ผมใช้ https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi )
DOWNLOAD