-->
หน้าแรก
สอนเขียน Imacro
imacro

แจกฟรี Imacros เก็บสินค้าทุกร้าน

แจกฟรี Imacros เก็บสินค้าทุกร้าน
แจกฟรี Imacros เก็บสินค้าทุกร้าน

สิ่งที่ผมจะแจกคือ สคริบ Imacros เก็บสินค้า ที่เป็น JS ที่ สามารถนำไปแก้ไขได้ แบบ opensource เลยครับ เอาไปแก้ไขและใช้งานร้านอื่นๆกันได้สบาย

ทำไมต้องแจก Imacros ฟรี ผมแจกความรู้ ให้ทุกคนสามารถไปต่อยอดได้ (แต่อย่าเอาของผมไปขายนะครับ) เขียนเก็บไว้ใช้เองเลย มาเริ่มกันเลยดีกว่าครับ

หลังจากที่เคยลงบทความ เก็บสินค้าด้วย imacro ในปี 57 ซึ่งนานมากแล้วครับ ตอนนั้นผมได้เขียน Imacros ที่เก็บและบันทึกกันง่ายๆเลย จัดว่าลูกทุ่งๆเลยครับ Version ใหม่ยังคงคอนเซ็ปในการทำงานยังคล้ายเดิมอยู่ เพียงแต่ปรับให้ใช้งานและนำไปต่อยอดได้ง่ายกว่าต่อมาจึงได้เขียนใหม่ จึงได้มีการ แจก imacro js เก็บสินค้าร้าน nordstrom ตั้งแต่วันคล้ายวันเกิดผมปี 58 โดยพัฒนาเพิ่มให้อยู่ในรูปแบบ JS สามารถระบุข้อมูลต่างๆได้ในจุดเดียว และใช้ตัวแปรโยนไปบรรทัดอื่นๆ

จนล่าสุดปี 61 ผมได้ แจก imacro เก็บสินค้า Lazada ซึ่งได้เขียนและปรับปรุงให้การทำงานง่ายยิ่งขึ้น ส่วนใน Version ที่จะกล่าวในบทความนี้นั้น ไม่ต่างจากเดิมเท่าไรนักครับ แต่จะมาขยายความ และปรับให้ใช้งานได้ง่ายเข้าไปอีกนิดหน่อยครับ เพราะว่าบทความเดิมๆ ผมไม่เคยขยายความในส่วน Imacros เก็บสินค้าที่แจกเลย อยากแจกก็โพสลิงค์ให้ดาวโหลดกัน ซึ่งทำให้บางคนไม่สามารถต่อยอดได้นั่นเอง

แนวคิดและการทำงานของ Imacros เก็บสินค้า

สำหรับการทำงานของ Imacros ตัวนี้ เราต้องคำนึงและต้องมีอะไรบ้างถึงจะเริ่มใช้งานได้
  1. Firefox หรือโปรแกรมที่สามารถใช้งานในส่วน Imacro ได้ครับ ผมได้แนะนำโปรแกรมรัน Imacros ไว้ที่บทความก่อนๆแล้วครับผม บางท่านอาจจะใช้ Pale Moon (ทำงานไวกว่า Firefox) ส่วนท่านที่ยังไม่ทราบว่าใช้ เวอร์ชั่นไหนรันหรือว่าใช้งานดี แนะนำให้ดูที่บท แนะนำ Firefox ที่สามารถรัน Imacro ได้ ครับผม
  2. โปรแกรม Add ons Imacro สามารถติดตั้งได้จากตัวโปรแกรม Firefox ได้เลยครับผม
  3. เว็บไซต์สินค้าเป้าหมาย ต้องเป็นหน้าสินค้าที่เป็นรูปแบบ ซ้ำๆ เหมือนกับหน้าหมวดหมู่ ที่แบ่งสินค้าเป็นชิ้น อย่างเห็นได้ชัดเจน หากท่านมีความรู้ด้าน HTML เล็กน้อย สามารถ View Source ได้เลยครับ บางเว็บจะเป็น DIV ซ้ำๆกัน แต่ใส้ในจะเป็นข้อมูลต่างกัน 
เครื่องมือตอนนี้เราพร้อมแล้ว แต่ขาด Imacros ไปรันเท่านั้นเอง หลักการทำงาน ไม่ได้มีอะไรมากเลยครับ Imacros จะเก็นสินค้าหรือว่าข้อมูลจากแท็กของหน้าเว็บนั้นๆ เช่น เก็บจากแท็ก DIV, LI เป็นต้น แล้วแต่ละเว็บว่ารูปแบบจะเป็นอย่างไรครับ สิ่งสำคัญตรงนี้คือ ทุกแท็กจะมีค่า ID หรือ Class ที่เป็นชื่อเดียวกันครับ

ตัวอย่างชื่อ class ในเว็บ Nordstrom

ตัวอย่างเว็บ Nordstrom ครับ จะมี Class block_19rjgc topRowGalleryItem_CtHuu ที่เหมือนกันอยู่ อย่างนี้ครับ Imacros ก็จะทำงานง่ายเลยครับ ผมก็จะเอาชื่อ Class หรือ ID ที่เหมือนกันนี่แหละครับไปเก็บ ไปเขียน Imacro ได้เลย

แบ่งส่วน Imacros เก็บสินค้าเป็นส่วนๆ เพื่อง่ายต่อการแก้ไข

ผมพยายามแบ่งส่วน Code ที่เขียนเวลาเขียน Imacros ไว้ครับ คล้ายๆกับเขียน Code PHP ให้สวยๆ เพื่อง่ายต่อการแก้และการทำความเข้าใจ เวลาอีก 3-4 เดือน ต้องกลับมาแก้ ก็จะแก้ง่ายขึ้น 

ผมจะเขียน Comment ไว้ที่ Code บ้าง เขียนเป็น Functions ไว้บ้าง และเขียนเป็นตัวแปรไว้เลย ให้สามารถแทนตัวแปรได้ง่ายขึ้น 

ตัวอย่างการเขียนแยก code ของ imacro

ที่ผมเขียนไว้ก็จะประมาณนี้ครับ อย่างกดหน้าถัดไป ก็ต้องแยกออกมาไว้ เพราะว่าทุกเว็บจะใช้ชื่อ Class ID ไม่เหมือนกันอยู่แล้ว แต่เจตนาของผมคือ เขียนครั้งเดียว แต่เอาไว้แก้และใช้งานได้ทุกเว็บเลย โดยไม่ต้องมานั่งไล่เขียนใหม่ทั้งหมด 

เริ่มแบ่งส่วน Imacros
  • ส่วนตัวแปร ไว้สำหรับระบุค่าต่างๆ ที่แต่ละเว็บอาจจะไม่เหมือนกัน เช่น จำนวนสินค้าต่อหน้า โฟลเดอร์ที่จะเก็บไฟล์ CSV ที่เก็บข้อมูลมา
  • ส่วน Functions เป็นส่วนขยายขึ้นมาเพื่อเรียกใช้งานได้
  • ส่วนเก็บข้อมูล เป็นส่วนที่เก็บข้อมูลแต่ละชิ้นมาแยกข้อมูลที่เราต้องการ หลังๆพยายามจะเก็บ 1 ชิ้น เก็บ 1 ครั้งแล้วเอาข้อมูลที่ได้ มาแยกว่าจะเอาอะไรบ้างจากสินค้าที่เราเก็บมา
  • ส่วนบันทึกข้อมูล จะแยกออกมาว่าจะเก็บแบบรูปแบบไหน บางคนอาจจะต้องเก็บรูปแบบที่ไม่เหมือนกัน เรียงอะไรขึ้นก่อนหลัง หรือจะเอาอะไรขั้นไว้

ทำความเข้าใจกับการเก็บไฟล์ CSV ที่จะบันทึก

ในสวนของการบันทึกข้อมูลลงไฟล์ CSV นั้น เมื่อ Imacro ได้เก็บสินค้ามาให้เราแล้วทุกอย่าง สิ่งที่เราต้องกำหนดต่อไปคือ เราจะเก็บไฟล์ไว้ที่ไหน เราจะเก็บไฟล์รูปแบบไหน เรียงข้อมูลอย่างไง เพราะว่า บางท่านเอาไปใช้งานในรูปแบบที่แตกต่างกันครับผม

รูปแบบการบันทึกไฟล์ CSV ของ Imacro
ผมได้เขียนไว้เป็น 2 รูปแบบด้วยกันครับ 
  1. รูปแบบ "No","Link","Title","IMG","Price","Category"
  2. รูปแบบ No|Link|Title|Price|Category
เขียนไว้เผื่อๆไว้เลย 2 รูปแบบ แต่ว่าไฟล์ที่แจกไปปิดไว้ จะใช้อันไหนก็เปิดใช้งานตัวนั้นครับ 

และเรียกใช้งาน SAVES ในส่วน {{folder}} ผมก็เรียกค่าที่ตั้งค่าไว้ในส่วนตัวแปรมาใช้งาน เช่นกันครับในส่วนของ {{savefile}} ผมเก็บค่า Title ใน Tag <title></title> ของหน้าเว็บที่เราเก็บมาใช้งานเลย เป็นชื่อไฟล์เลย

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

เริ่มเก็บจากกล่องแต่ละชิ้นก่อน

เริ่มการทำงานของ Imacro เก็บสินค้า กันเลยครับ ผมจะยกตัวอย่างของ Imacro ที่จะแจกเป็นไฟล์ตัวอย่างนะครับ จากเว็บ wayfair.com ครับ

  1. เข้าหน้าเว็บที่เป็นหมวดหมู่สินค้า เช่น หน้า Bedding Sets https://www.wayfair.com/bed-bath/sb0/bedding-sets-c481592.html ครับ จะสังเกตว่า สินค้าจะเรียงข้อมูลเป็นช่องๆสวยงาม
  2. เช็คสภาพหน้าเว็บว่า สินค้าที่เรียงๆกันอยู่นี้ มีรูปแบบการจัดเรียงด้วยอะไร คลิกขวา Inspect Element (firefox) เลยครับ ที่รูปของสินค้าที่เรียงๆกันก็ได้ครับ


    จะเห็นว่า ข้อมูลจะอยู่ใน Tag DIV และมีชื่อ Class ที่เหมือนกัน คือ 
     u-size6of12 u-md-size4of12 Grid-item Grid-item--row Grid-item--wrap
  3. แก้ไฟล์ Imacro เก็บสินค้า ในส่วนของ //Keep Product Html Box ครับ

    ในส่วนของ TAG TYPE ผมได้ระบุ เป็น DIV เพราะว่า ข้อมูลในละช่อง เราอยู่ใน Tag DIV (ตามข้อ 2) แล้วผมเอาชื่อ Class มาลงเลยครับ ช่องว่างให้ใส่ <SP> นะครับ ทุกช่องว่าของชื่อ Class

    หาก ชื่อต่างจากนี้ละ ชื่อที่มีส่วนต่างกัน อย่าง AAA-P01 AAA-P02

    ผมแนะนำว่า
    +"TAG POS="+i+" TYPE=DIV ATTR=CLASS:AAA-P* EXTRACT=HTM" + "\n");

    ใช้เครื่องหมาย * เป็นตัวกำหนดค่าที่ต่างกันครับ
  4. สำเร็จ แล้วจะรู้ได้อย่างไรว่าเก็บแล้ว อาจจะใช้คำสั่ง iimDisplay() เพื่อประกาศค่าที่เก็บได้ โชว์ตรงกล่องเล็กๆสีเหลืองๆ 

แยกส่วน ลิงค์ ชื่อสินค้า รูป โดยใช้ Functions

หลังจากที่เก็บข้อมูลรวมๆเป็นแบบ HTML มาแล้ว ทีนี้มาสู้การคัดแยกครับ ผมได้เขียน Functions แยกไว้แล้ว แล้วเรียกใช้งาน ซึ่งแต่ละเว็บต้องมาแก้ในส่วนนี้ เนื่องจากการใช้ชื่อ Class ID และการใช้ Tag ที่ไม่เหมือนกันนั่นเองครับ


ดังภาพจะเห็นว่า ผมจะเรยีกใช้งานอยู่ 4 Functions คือเก็บ 

Title : FindTitle
//***Title***  
      function FindTitle(str) {  
           //หา productdesigner  
           var rx = /<p data-codeception-id="ProductCard-manufacturer" class="ProductCard-manufacturer">([\S\s]*?)<\/p>/ig;  
           var arr = rx.exec(str);  
           if( arr != null ){  
                var productdesigner = arr[1];  
                productdesigner = productdesigner.replace('<!-- -->&nbsp;<!-- -->',' ');  
           }else{  
                var productdesigner = '';  
           }  
           //หา productname  
           var rxb = /<h2 class="ProductCard-name">([\S\s]*?)<\/h2>/ig;  
           var arrb = rxb.exec(str);  
           if( arrb != null ){  
                var productname = arrb[1]+' ';  
           }else{  
                var productname = '';  
           }  
           return productname+productdesigner;  
      }
ด้วยเว็บ มีทั้งชื่อสินค้าและเจ้าของสินค้า เลยหาสองรอบมารวบกันเลย ทั้งนี้ ใครอยากได้ชื่อสินค้าอย่างเดียวก็ตัดออกได้ครับ

Link : FindLink
 //***Link***  
      function FindLink(str) {  
           var rx = /<a class="ProductCard" href="([\S\s]*?)".*>/ig;  
           var arr = rx.exec(str);  
           if( arr != null ){  
                return http(arr[1]);  
           }else{  
                return null;  
           }  
      }

IMG : FindIMG
 //***IMG***  
      function FindIMG(str) {  
           var rx = /<img.*src="([\S\s]*?)".*>/ig;  
           var arr = rx.exec(str);  
           if( arr != null ){  
                //return http(arr[1]);  
                var kimg = http(arr[1]);  
                kimg = kimg.replace('resize-h30-w30','resize-h310-w310');  
                return kimg;  
           }else{  
                return null;  
           }  
      }

Price : FindPrice
 //***Price***  
      function FindPrice(str) {  
           var rx = /<div class="ProductCard-pricing">([\S\s]*?)<\/div>/ig  
           var arr = rx.exec(str);  
           if( arr != null ){  
                //return arr[1];  
                var rxb = /(\d+\.\d{1,2})/ig  
                var arrb = rxb.exec(arr[1]);  
                if( arrb != null ){  
                     return arrb[1];  
                }else{  
                     return null;  
                }  
           }else{  
                return null;  
           }  
      }

สิ่งที่ ต้องทำคือ ต้องดูว่า สิ่งที่เราอยากได้นั้น อยู่ใน Tag ชื่อว่าอะไรทำนองนี้ครับ ก็ต้องไปดูใน HTML ที่เราเก็บมาก่อนหน้าว่า เก็บอะไรมา และ สิ่งที่เราต้องการนั้นอยู่ตรงไหนบ้างยังไง จะตัดอะไรออก

ดาวโหลดไฟล์ Imacros เก็บสินค้า ตัวอย่าง

ตัวอย่าง Imacros เก็บสินค้าที่ผมจะแจกคือ เว็บ Wayfair นี่แหละครับ และให้ทุกท่านลองเอาไปต่อยอดที่เว็บอื่นๆดูก่อนว่า สามารถตัดต่อของผมได้ไหมยังไง 

ดาวโหลด Imacros เก็บสินค้า ร้าน Wayfair

ข้อควรระวังในการใช้งาน

Imacros เก็บสินค้าชิ้นนี้มีข้อจำกัด บางครั้งอาจจะใช้งานไม่ได้ 
  • หากเว็บไซต์มีการแก้ไขรูปแบบหน้าตาเว็บ หรือว่าเปลี่ยนชื่อ Tag Class ID เราจะต้องแก้ไขข้อมูลใหม่อีกครั้ง
  • เว็บไซต์ที่มี 2 ภาษา ต้องระวัง เนื่องจากบางเว็บนั้นออกแบบเว็บต่างกัน เราเขียนตัวเก็บเสร็จ แต่จะใช้เก็บหน้า Eng ดันใช้คนละหน้าตา เราเหนื่อยเลย (ผมเคยโดนไง)
  • ก่อนที่จะระบุที่เก็บอย่าลืมไปสร้างโฟลเดอร์ให้เรียบร้อยครับ เพราะว่า Script ไม่ได้ เขียนให้สร้างโฟลเดอร์ไว้ครับ

5 ความคิดเห็น

  1. ผมได้ลองใช้ Imacros บน firefox แต่ผม load script java ลง imacros ไม่ได้ครับ ไม่ทราบว่าแก้อย่างไรครับ
    • โดยปกติแล้ว ให้นำไฟล์ไปใส่ไว้ที่ Documents\iMacros\Macros ครับ
      และให้ทำการเปิด-ปิด imacros อีกครั้ง ไฟล์ js ที่ใส่ไปก็สามารถทำงานได้แล้วครับผม
    • ขอบคุณครับ
  2. รายละเอียดสินค้านี้ ไม่สามารถดึงได้จากข้างในลิ้งของแต่ละสินค้าหรอครับ ขอบคุณครับ
    • เวอร์ชั่นที่แจก ไม่ได้เขียนให้เข้าไปเก็บสินค้าข้อมูล รายละเอียดสินค้า ในหน้าย่อยครับ ผมยังไม่ได้พัฒนาเพิ่มเติมครับผม