DEV Community: Anak Mirasing

Common types of bugs - บั๊กทั่วๆไป มีอะไรบ้างหนอ?

Anak Mirasing — Mon, 06 Jul 2020 16:50:30 +0000

บั๊ก คือ อะไร?

Introduction 🙋‍♂️

ในโลกของซอฟท์แวร์ ไม่ว่าจะโปรแกรมเมอร์มือใหม่ มือเก่า มือเก๋า หรือแม้แต่สุดยอดโปรแกรมเมอร์ ต่างก็เคยสร้างข้อผิดพลาดทางโปรแกรมกันทั้งนั้น เราๆเองก็มักจะเรียกข้อผิดพลาดเหล่านั้นว่า "Bug(บั๊ก)".

Common types of bugs 🐞

โดยทั่วไปแล้ว เรามักจะแบ่งชนิดของบั๊กเป็นกลุ่มใหญ่ๆ 3 กลุ่มหลักๆ

Syntax errors
Logic errors
Runtime errors

Syntax errors 🙊

น้องเล็ก... Syntax errors ถือว่าเป็นน้องเล็กของวงการละกัน เพราะเค้าจะง่ายในการตามหาอย่างเช่น การสะกดชื่อตัวแปร, ชื่อฟังก์ชั่น, ชื่อคลาสผิด หรือการใช้สัญลักษณ์พิเศษหรืออาจเผลอไปเอา Reserved word(คำสงวน) มาใช้เป็นชื่อตัวแปร หรือคลาส โดยส่วนใหญ่แล้ว Compiler หรือ IDE ที่เหล่านักพัฒนาใช้ในปัจจุบัน มักจะช่วยตรวจสอบ Syntax errors ได้ดีพอสมควร อย่างเช่น แจ้งให้เราทราบว่า เราเรียกใช้ตัวแปรที่ยังไม่ได้ประกาศ ฟังก์ชั่นนี้ยังไม่ได้สร้างนะ หรือถึงขั้นแนะนำได้ว่า เราอยากจะเรียกใช้ตัวแปรหรือฟังก์ชั่นนี้ใช่หรือไม่ อาจมีทั้งไฮไลท์หรือ pop-up menu ให้เราใช้อย่างเสร็จสรรพ ทำให้เราตามหาเจ้าน้องเล็กได้ง่ายขึ้นนั่นเอง

Logic errors 🙉

พี่คนกลาง... Logic errors นี่เก๋าขึ้นมาหน่อย เพราะส่วนใหญ่มักรอดจากการเป็นน้องเล็กมาแล้ว โค้ดตรงนี้ก็พิมพ์ถูกนี่นา รันโปรแกรมก็ได้ปกติ แต่ทำไมค่าตรงนี้มันคำนวณคำตอบมาผิดซะงั้น? เพราะปัญหาของ Logic errors เครื่องมือส่วนใหญ่ที่เราใช้เขียนโปรแกรมมันแทบจะหาไม่เจอเลยก็ว่าได้ แต่ยังโชคดีที่แทบจะ 100% ของ Logic errors นั้น เราสามารถที่จะหามันเจอได้จากโค้ดที่เราเขียนขึ้นมาเองนี่แหละ เพราะเค้าเกิดจากการทำงานที่ไม่ตรงกับความต้องการของเรานั่นเอง อย่างเช่น เราต้องการที่จะให้คำนวณส่วนลด 10% ให้ลูกค้าเมื่อมีการซื้อสินค้าครบ 1,000 บาท แต่เมื่อลูกค้าซื้อครบ 1,000 แล้วโปรแกรมกลับไม่คำนวณส่วนลดให้ซะงั้น ตรงนี้เอง เราจะสามารถ "เดา" หรือ "คาดการ" ได้ว่า มันเกิดขึ้นที่ตัวแปร, ฟังก์ชั่นหรือส่วนไหนของโปรแกรมที่เราเขียน เราค่อยเข้าไปแก้ไขและทดสอบในส่วนนั้นๆของโปรแกรมได้

Runtime errors 🙈

พี่ใหญ่... Runtime errors คนนี้เค้าเก๋าสุด เข้มสุดเลยก็ว่าได้บางที นักพัฒนาหลายๆคนอาจเคยเจอปัญหาแบบ เอ๊ะ รันใน iPhone ก็ได้ปกตินี่หว่า ทำไมรันใน iPad เปิดหน้านี้ทีไร Crash หรือเด้งออกทุกที หรือบางคนอาจเคยได้ยินคำว่า

"It works on my machine"

ก็มันรันบนเครื่องฉันได้ปกติหนิ ทำไมไปรันบนเครื่องอื่นแล้วมันเจ๊ง มันเจ๊งได้ไงฟร๊ะ นั่นจึงเป็นสาเหตุว่าทำไม พี่ใหญ่เขาถึงเก๋าสุดเข้มสุด เพราะเหล่านักพัฒนาอาจต้องมองกว้างขึ้น ลึกขึ้นหรือลงรายละเอียดเข้าไปถึงหลายๆอย่าง เช่นสภาพแวดล้อมของระบบที่ใช้รันโปรแกรม ขนาดของเมมโมรี, เวอร์ชั่นของระบบปฏิบัติการ, ความเสถียรของอินเตอร์เน็ต, ฮาร์ดแวร์ของเครื่องที่ใช้และอื่นๆอีกมากมาย หลายต่อหลายครั้งในเหตุการณ์ของ Runtime errors จึงต้องอาศัยประสบการณ์ในการแก้ปัญหาพอสมควร ถึงจะหาสาเหตุที่มาของปัญหาและจัดการกับมันได้ในที่สุด

Conclusion 🌾

แม้ในบางครั้ง เราจะจัดการกับน้องเล็ก(Syntax errors) พี่คนกลาง(Logic errors) ได้อย่างอยู่หมัด แต่มันไม่ง่ายเลยจริงๆที่จะกล้าพูดว่าฉันจัดการพี่ใหญ่(Runtime errors) ได้ 100%!! เรียบร้อยแล้ว
ซึ่งทางที่ดีที่สุดสำหรับนักพัฒนาอย่างเราๆแล้ว ก็ควรสละเวลาอันมีค่าไปเขียน "Test" ดีกว่าเอาเวลามาไล่หา "Bug" เพื่อให้เกิดคำว่า error-free มีอยู่จริง ต่อให้ไม่ 100% ก็ขอให้เป็น 99% ก็ยังดีครับ

ที่ใดมี "โค้ด" ที่นั่นมี "บั๊ก"

ก่อนจากกัน...ฝากกดไลท์ กดแชร์เพจโปรแกรมมิ่งสนุกๆไว้ให้ติดตามผ่านทาง Facebook ไว้เรียนรู้ไปด้วยกันครับ
https://www.facebook.com/igroomgrimonthefloor/

อยากให้ทุกคนสนุกกับการเขียนโค้ด
Be lazy & Happy Coding 🤤🖥🤗

Simply Sneaker Bot with Playwright - มาลองเขียนบอทง่ายๆตามสไตล์คนขี้เกียจกันเถอะ

Anak Mirasing — Wed, 01 Jul 2020 13:23:38 +0000

เพราะฉัน "ขี้เกียจ" ฉันเลย "เขียนโค้ด"

Introduction 😇

หากเล่าถึงความขี้เกียจนั้น หลายๆคนคงเข้าใจความรู้สึกนี้ดีโดยไม่ต้องอธิบายอะไรเลยแม้แต่น้อย เราเกิดมาในยุคที่บางครั้งผู้ใหญ่จะสอนเราว่า "อย่าขี้เกียจนะ มันไม่ดี" ทั้งๆที่บางครั้งก็ควรจะปล่อยให้เป็นตามธรรมชาติบ้าง คือบางทีเราเหนื่อยมาทั้งวันละ พรุ่งนี้ขอขี้เกียจหน่อย ตื่นสายๆ นอนกลิ้งไปมาเพลินๆ ไม่มีอะไรเสียหายหนิ ถ้าทุกอย่างจบที่คำว่า "ขี้เกียจ...แต่พอดี" ซึ่งบทความนี้ มันก็เกิดจากความขี้เกียจนี่แหละ ที่ทำให้เราต้องสร้างเครื่องทุ่นแรง เราจะได้มีเวลาไปขี้เกียจ.

Idea 👟

ในโลกของ Sneaker นั้น รองเท้าสวยๆถือเป็นไอเท็มที่เหล่านักสะสมต้องแย่งกันมีไว้ครอบครอง รุ่นนี้จะออกวันไหน รุ่นนั้น collab กับใคร ตัวนี้อย่างเด็ด ซึ่งความต้องการเหล่านี้ทำให้ราคารีเซลรองเท้าบางรุ่นนั้น วิ่งพรวดขึ้นไปถึง 10 - 20 เท่า!ของราคาเดิมในวันเปิดตัว เลยเป็นที่มาของโจทย์ที่ว่า จะทำยังไงดีน้า ขี้เกียจลุกขึ้นมากดแข่งกับชาวบ้านตอน 9 โมงเช้าจริงๆ กดก็ได้บ้างไม่ได้บ้าง นก(วืด)นี่คือประจำ กว่าจะเลื่อนเม้าส์ไปกด, กรอกนู่นนี่, ใส่รหัสบัตรเครดิต, กดยืนยัน หมดพลังงานไปไม่น้อยเลยทีเดียว.

Finding solution 🤔

มีอะไรบ้างที่ จะมากดซื้อรองเท้าให้เราได้ในตอนเช้าๆ

จ้างคนอื่นกด
ให้คนที่บ้านช่วยกด
เขียนบอทมากด
ไม่กด รวยแล้วรอซื้อราคารีเซลแม่มม

แน่นอน เรายังไม่รวยพอ เราเป็นโปรแกรมเมอร์เราก็ต้องเขียนบอทมาช่วยกดสิ เราก็หาๆ Solution ซึ่งมันก็มีเยอะมากเลย แต่ในบทความนี้ผมขอเลือกเล่าวิธีน่ารักๆ ง่ายๆ โดยเราจะใช้พวก Browser Automation Framework มาช่วยเราสร้าง Bot ในการช๊อปปิ้งครั้งนี้

Note: บทความนี้ขอไม่เล่าถึงการเอา Proxy มาช่วย, การเจาะ iframe หน้าจ่ายเงิน, การหาที่ตั้ง server รองเท้า, การ Gen Cookies, การสู้กับ Captcha, Bot Protection และอื่นๆ บลาๆ นะครับ

และแล้วก็เจอ Playwright
Playwright คือ Browser Automation Framework ตัวนึง มีความสามารถทำ Automate testing, Web Scraping, Automating tasks, Take Screenshot, and more. ซึ่ง Playwright เนี่ย จริงๆมันก็ถูกสร้างขึ้นด้วยทีมลีดเดียวกับที่สร้าง Puppeteer นะ เพียงแต่ย้ายมาอยู่ฝั่ง Microsoft จากเดิมที่อยู่กับ Puppeteer ที่เป็นของ Google ตัว Playwright เองมันมีความได้เปรียบกว่าตรงที่มันมี cross-browser support คือมันรองรับทั้ง WebKit, Firefox และ Chromium

Playwright เองมันก็เหมาะกับการเอามาทำ automate กับพวก Single Page Apps, Progressive Web Apps เพราะความสามารถจำพวก Auto-wait for element, Intercept network activity, Native input events แบบเม้าคลิก, พิมพ์นู่นนี่, หรือกดปุ่มต่างๆบนคีย์บอร์ดได้รวมทั้งอีกหลายอย่างครับ แต่จากพลังที่กล่าวมาน่าจะเพียงพอสำหรับการสร้าง Bot มากด & กรอก แทนเราในตอนเช้าตรู่ได้แล้ว

Prerequisites 🧰

Knowledge of Javascript(Node.js)
Web Scraping Skill
Web Elements Digging Skill (Can I call "Debugging?")
Lazy Skill

Automation steps 🤖

Login
Go to item page
Wait for shoe size displayed
Select shoe size (by Click)
Click Buy item ---- Example End Here ----
Wait for the Payment page (Checkout page)
Input CVV & Credit card detail
Click Continue button
Click Checkout button
Wish me luck!

Coding 💻

มาลุยยยยยกันเลยยย!
1.มาสร้าง folder ไว้เก็บโค้ดกันก่อน เปิด Terminal เอาตั้งแต่ต้นเลยละกัน

mkdir lazy_shopping_bot
cd lazy_shopping_bot

2.สร้าง package.json file ต่อเลย ตรงนี้ก็ใส่รายละเอียดของโปรเจคตามใจเราได้เลยนะ

npm init

3.ทำการ install Playwright ลงในโปรเจคของเรา ตรงนี้รอนิดนึง เพราะมันจะโหลดพวก Chromium, Firefox, WebKit engine รอแป๊บบ แต่ไม่นาน

npm install playwright

4.เสร็จจากข้างบนก็มาสร้างไฟล์สำหรับเขียน Bot กัน, ได้ไฟล์แล้วก็เปิดด้วย IDE ที่ตัวเองถนัดได้เลยครับ

touch bot.js

5.ต่อด้วย Import Playwright แล้วก็สร้าง async ฟังชั่นก์เปล่าๆ ไว้รอลงรายละเอียด ตรงนี้ตัว Browser ผมจะใช้เป็นตัว Chromium นะครับ ถ้าอยากใช้อย่างอื่นก็ได้เหมือนกัน

const { chromium } = require('playwright');

(async () => {
// Coding here
})();

6.รัน Browser, สร้าง Context แล้วก็ Page

const browser = await chromium.launch({ headless: false });
const context = await browser.newContext({
    viewport: { 
        width: 1280, 
        height: 1140 
    }
});
const page = await context.newPage();

ตอนที่เรารัน Browser เราสามารถ run แบบ headless ได้ คือแบบไม่ได้แสดง UI ให้เราเห็น แต่กรณีนี้เผื่อเราอยากลุ้น Bot เราไปด้วย เราสามารถ set headless mode = false ได้ พอเราสร้าง browser เสร็จเราต่อด้วยการสร้าง context เอาไว้เก็บ page ของเราต่อ ซึ่ง 1 context ก็สามารถสร้างได้หลาย page เลย แต่ในตัวอย่างนี้เราสร้างหน้าเดียวพอครับ

7.มาแกะ Elements กัน
ตรงนี้จะสำคัญหน่อย เพราะจะมีเทคนิคของการทำ Web Scraping เข้ามาเสริม คือเราต้องหา "ที่อยู่" ของปุ่มหรือกล่องข้อความที่จะให้ Bot ทำในสิ่งที่เราต้องทำแทนเรา เช่นการ Click หรือ Typing อะไรลงไป

Playwright จะสามารถหา element หรือ node พวกนั้นได้ผ่านทาง Selector engine เช่น CSS selectors, XPath, Full XPath selectors, HTML Attributes ต่างๆ เช่นพวก id, class, text, placeholder and etc. พร้อมทั้งยังมีความสามารถ Auto-wait ที่ช่วยให้รอ element นั้นปรากฎขึ้นมาก่อน ถึงจะเรียกคำสั่งที่กระทำกับ element นั้นให้.
เราสามารถหา element ที่เราต้องการผ่านทาง Developer tool -> Inspect Element ของ Browser ที่เราใช้ โดยการเปิดจาก

จากรูปด้านล่าง สมมติว่าเราหา Element ที่เราต้องการจนเจอแล้ว เราสามารถใช้ตัวช่วย ที่จะหา path ของ element หรือ node ที่เราต้องการ

พอเราเจอปุ่มหรือกล่องข้อความที่ต้องการ เราก็ทำการ Copy path ที่เราได้จากข้างบน มาเก็บไว้ในโค้ดเราได้เลยครับ (ตัวอย่างจะเก็บในแบบของ Full XPath)

// Login elements full XPath
const loginToSystemButtonPath = '//html/body/div[2]/div/div/div[1]/div/header/div[1]/section/ul/li[1]/button';
const loginEmailBoxPath = '//html/body/div[2]/div/div/div[2]/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div[2]/form/div[2]/input';
const loginPasswordBoxPath = '//html/body/div[2]/div/div/div[2]/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div[2]/form/div[3]/input';
const loginSubmitButtonPath = '//html/body/div[2]/div/div/div[2]/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div[2]/form/div[6]/input';

// Submit to buy element
const submitToBuyButtonPath = '//html/body/div[2]/div/div/div[1]/div/div[3]/div[2]/div/section[1]/div[2]/aside/div/div[2]/div/button';

หรือเราจะทำท่านี้ก็ได้ เช่น อยากให้ Click element ที่มี Text ที่เราต้องการ

const shoeSize = '44';
await page.click('text=EU '+shoeSize);

ตัวอย่างข้างบนก็จะเป็น "รอ" แล้ว Click ที่ element นั้นทันที ถ้าเจอ Text ที่มีคำว่า EU 44

8.ประกอบร่าง
เมื่อเราได้เหล่า elements ที่เราต้องการครบเรียบร้อยแล้ว เราก็มาเรียง action ตามแพลนที่เราวางไว้ จะเห็นว่าฟังก์ชั่นส่วนใหญ่ ก็จะใช้อย่างตรงไปตรงมา ส่วนตัวผมคิดว่าอ่านง่ายพอสมควรครับ

const { selectors, chromium } = require('playwright');

(async () => {
    const browser = await chromium.launch({ headless: false });
    const context = await browser.newContext({
        viewport: { 
            width: 1280, 
            height: 1140 
        }
    });
    const page = await context.newPage();

    const itemLink = 'Let you guess :P';
    const user = {
        email: '',
        password: ''
    };

    // Go to an item and login
    await page.goto(itemLink);

    // Login elements
    const loginToSystemButtonPath = '//html/body/div[2]/div/div/div[1]/div/header/div[1]/section/ul/li[1]/button';
    const loginEmailBoxPath = '//html/body/div[2]/div/div/div[2]/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div[2]/form/div[2]/input';
    const loginPasswordBoxPath = '//html/body/div[2]/div/div/div[2]/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div[2]/form/div[3]/input';
    const loginSubmitButtonPath = '//html/body/div[2]/div/div/div[2]/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div[2]/form/div[6]/input';

    // Login into the system action
    await page.click(loginToSystemButtonPath);
    await page.type(loginEmailBoxPath, user.email);
    await page.type(loginPasswordBoxPath, user.password);
    await page.click(loginSubmitButtonPath);

    // Wait and select shoe size
    const shoeSize = '44';
    await page.click('text=EU '+shoeSize);

    // Submit to buy element
    const submitToBuyButtonPath = '//html/body/div[2]/div/div/div[1]/div/div[3]/div[2]/div/section[1]/div[2]/aside/div/div[2]/div/button';
    await page.click(submitToBuyButtonPath);

    // Do the next steps
    /*
    6. Wait for the Payment page (Checkout page)
    7. Input CVV & Credit card detail
    8. Click Continue button
    9. Click Checkout button
    10. Which me luck
    */
})();

TESTING 💊

จาก Code ด้านบนเราก็มาลองรันดูได้เลยครับ ด้วยคำสั่ง

node bot.js

พอรันแล้วก็จะพบกับหน้าที่ว่างเปล่า พร้อม error log ผ่ามๆๆ
เพราะเราไม่มี itemLink ของสินค้าจริงๆมาแปะให้ลองครับ

SUMMARY 🔮

สุดท้ายแล้ว มันเป็นแค่การทำอะไรสนุกๆ เพราะความขี้เกียจ เลยแค่อยากลองทำดู พร้อมทั้งเป็นไกด์ให้กับคนที่สนใจ อยากลองทำ Automation หรือ Testing อะไรสักอย่างกับเว็บของตัวเองดู เพราะการทำพวก Bot หรือ Web Scraping แนวนี้ ผมรู้สึกว่ามันไม่ค่อยขาวสะอาดมากเท่าไหร่ครับ มันเลยมีทั้งเทคนิค, ความยากและซับซ้อนกว่าที่ผมเล่าไว้ข้างบนเยอะเลย

ส่วนสำหรับคนที่สนใจการทำ Web Automation กับ Playwright หรือ Web Scraping ก็ลองเข้าไปอ่านได้ที่ลิ้งที่ผมแปะไว้ให้ด้านล่างนี้ได้เลยครับ

ก่อนจากกัน...ฝาก page สนุกๆไว้ให้ติดตามผ่านทาง Facebook กันอีกทางครับ
https://www.facebook.com/igroomgrimonthefloor/

อยากให้ทุกคนสนุกกับการเขียนโค้ดครับ
Be lazy & Happy Coding 🤤🖥🤗