สร้างแอพขายของออนไลน์ ง่ายเกิ๊น

เนื้อหาคอนเท้นในวันนี้ เราจะมาหัดเรียนรู้การเขียนแอพพลิเคชั่น บนเวปอย่าง Thunkable ซึ่งเป็นการเขียนแอพพลิเคชั่นด้วย CodeBOX ซึ่งจะง่ายกว่าภาษาการเขียนโปรแกรมอื่นๆ เพียงอาศัยความเข้าใจ ก็สามารถสร้างสรรแอพพลิเคชั่นได้มากมายเลยทีเดียว และวันนี้ที่เราจะมาหัดเรียนรู้กันคือ "แอพขายสินค้าออนไลน์" จ้าาา

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

จากภาพด้านบน เราจะใช้แค่

Botton - ไว้ประมวลผล

Label - ทำกล่องข้อความ หรือ แสดงผลข้อมูล

Rich Text - จัดตกแต่งตัวกลุ่มตัวอักษร

Image - ใส่ภาพ

Group - จัดกลุ่มงาน

Checkbox - ไว้ติ๊กเลือกรูปสินค้า

ขั้นตอนการออกแบบ

1. ลาก Group ออกมาก่อน 1 ชุด แล้วก็ลาก Image / Rich Text / CheckBox / Label มาวางไว้ตามแบบ (หรือจะดีไซด์ใหม่ก็ได้นะ)

2. ในส่วนของรูปภาพ ก็อัพโหลดรูปลงมาใส่ได้เลย (อยู่บริเวณขวาของจอ เลือกคำว่า Background แล้วก็ Image แล้วโหลดรูปได้เลย) ส่วนของ Rich Text ผมไว้ใส่ชื่อสินค้า ราคาสินค้า จัดกึ่งกลาง จัดขนาดตัวอักษรและสีให้เรียบร้อย

3. เอา Checkbox และ Label มาวางไว้ต่อจาก Rich Text ใส่ข้อมูลว่าสั่งซื้อ เลือกซื้อ ฯลฯ ตามต้องการ

4. ด้านล่าง เอา Button มาวางไว้ พร้อม Label อีก 2 อันด้านข้าง แล้วก็ใส่ 0 ไป ด้านท้ายก็ใส่ ฿  และอีกปุ่มด้านล่าง สำหรับสั่งซื้อ เปลี่ยนสีปุ่มให้แตกต่างกันก็ดีครับ 

การเขียโค๊ด (Blocks)

เข้าไปตั้งค่าตัวแปรที่ Variables ถ้าไม่รู้อยู่ตรงไหน สังเกตตรงสีที่ด้านซ้ายนะครับ บล็อคแต่ละตัวคนละสีอยู่แล้ว ก็หาตามสีได้เลย โดยเริ่มต้น ตั้งค่าตัวแปรไว้ 5 ตัว 2 ตัวทางด้านซ้าย เอาไว้เช็คราคาสินค้า ว่าสินค้าตัวที่ 1 ราคา 390 บาท ตัวที่ 2 ก็ 550 บาท เป็นราคาตายตัว ส่วนตัวแปรด้านขวา ซื้อ1-2 และ Total เอาไว้ตั้งเงื่อนไข ว่าถ้าลูกค้าซื้อ ให้อิงตัวแปรด้านซ้าย ถ้าไม่ซื้อ ก็อิงตัวแปรด้านขวา แล้ว Total คือผลรวมของการขายสินค้าประมาณนี้

โค๊ดชุด Checkbox ลากออกมา แล้วไปที่คอนโทรน เอา if / do / else มาต่อด้านใน แล้วก็ลากนิวแวลู่เขียวๆ  มาใส่ช่องอีฟ แล้ว do ก็ไปกด "วาริเอเบิล" ในส่วนของตัวแปร 1 มาวาง แล้วไปเลือก text เอาช่องว่างๆ มาต่อ พิมพ์ว่าซื้อ ส่วน else ก็ลากหรือก๊อปข้างบนมาวางต่อได้เลย แล้วเอา NewValue มาต่อด้านท้าย ... ทำแบบนี้ทั้ง 2 โปรดักซ์ ..

โค๊ตชุดนี้ จะอ่านว่า "เมื่อปุ่ม Checkbox มีการเปลี่ยนแปรง (จากปุ่มที่ไม่ได้ติ๊ก กลายเป็นติ๊กถูก) ให้ค่าตัวแปรกำหนดให้ซื้อ แต่ถ้ากดติ๊กถูกออก หรือมีการเปลี่ยนแปลงของปุ่ม Checkbox อีกครั้ง ก็จะกลับไปในตอนเงื่อนไขบนอีกครั้ง

โค๊คชุดที่ 2 เลือกบล๊อกสีมาใส่ตามในรูปได้เลยนะครับ น่าจะรู้ที่มาที่ไปของแต่ละปุ่มล่ะ โดยโค๊ตชุดนี้ จะอ่านว่า (ไล่ไปตามบรรทัดเลยนะครับ)

"เมื่อปุ่มรวมราคาถูกกด  (Sum Click) ถ้า (if) สินค้าชิ้นแรก มีการติ๊กถูกจริง ให้ราคาสินค้า มีราคา 390 บาท แต่ถ้าไม่ (else) ให้สินค้ามีมูลค่า 0 บาท" / " ถ้า (if) สินค้าชิ้นที่สอง มีการติ๊กถูกจริง ให้ราคาสินค้า มีราคา 550 บาท แต่ถ้าไม่ (else) ให้สินค้ามีมูลค่า 0 บาท" / " ให้ตั้งค่าผลรวม Total คำนวนด้วยการเอาสินค้า 1 มาบวกกับสินค้า 2 เพื่อแสดงผล"

ดังนั้นในบรรทัดล่างสุด มันก็จะเกิดอีเว้นใดอีเว้นหนึ่ง ระหว่าง "390+550" / "390+0" / "0+550" / "0+0" ดังนั้น ก็จะเกิดผลลัพธ์ไม่อย่างใดก็อย่างหนึ่ง ใน 4 อีเว้นนี้

โค๊คชุดสุดท้าย เป็นการแชร์ข้อมูลไปที่ อีเมล ปลายทาง โดยจะอ่านโค๊ดได้ดังต่อไปนี้

เมื่อปุ่มสั่งซื้อถูกกด เช็คค่าตัวแปรสินค้า 1 และ 2 โดยให้แชร์ (สีม่วงๆ ตรงนี้ ไปหาได้ตรงคำว่า Share นะครับ) ข้อมูลไปที่ อีเมลขอผู้ขาย หัวข้อจดหมาย (อยากใส่อะไรก็ใส่ไป) โดยเนื้อหาข้อความ ให้แสดงดังนี้ (โดยลากมาหนแรก มันจะมีคำว่า Hello และ wolrd เท่านั้น ช่องจะไม่พอครับ ให้ไปเลือกคำว่า join อยู่ในแถบสีชมพู ลากมาต่อแล้วกด + เพิ่มช่องเอา) โดยการแสดงผลในส่วของ join นั้น ถ้าเราไม่เอา newline มาขั้นแต่ละช่วง การแสดงผลมันจะยาวเป็นปรี๊ดบรรทัดเดียวกันหมด ดังนั้น เราก็กะเอาเองว่า อยากให้ตัดบรรทัดขึ้นตรงไหน ก็เอา Newline มาวาง ซึ่งจากภาพ จะอ่านได้ว่า

"รายการสินค้า (ขึ้นบรรทัดใหม่) รายการสินค้า ราคา 390 บาท (ไปที่คอนโทรน เอา Test if true if fale มาวางต่อ) เช็กเงื่อนไขว่า ถ้าสินค้าตัวที่ 1 มีการติ๊กถูกจริง ให้ขึ้นคำว่า "สั่งซื้อ" แต่ถ้าไม่มีการติ๊กถูก ไม่ต้องแสดงข้อความใดๆ ขึ้นบรรทัดใหม่ เช็กเงื่อนไขว่า ถ้าสินค้าตัวที่ 2 มีการติ๊กถูกจริง ให้ขึ้นคำว่า "สั่งซื้อ" แต่ถ้าไม่มีการติ๊กถูก ไม่ต้องแสดงข้อความใดๆ ขึ้นบรรทัดใหม่ แสดงข้อความว่า รวมเป็นเงิน แล้วไปเช็คเงื่อนไขว่า สินค้าตัวที่ 1+กับสินค้าตัวที่ 2 ในเงือนไขใด ก็แสดงเงื่อนไขนั้น ( "390+550" / "390+0" / "0+550" / "0+0" )

อ่ะ ลองรันดูครับ

ติ๊กสินค้า 1 ชิ้น กดรวมราคา ก็ขึ้นเลยว่า 390 บาท ถ้าถูกต้อง กดสั่งซื้อเลย

ข้อมูลจะไปที่อีเมลการสั่งออเดอร์ เช็คความถูกต้อง แล้วกดส่ง

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

มีออเดอร์เข้ามาแล้ว...เย้!!

ถ้าใครไม่เข้าใจ อยากดูแบบละเอียด ก็เข้าไปดูในคลิปได้เลยนะครับ

ฝากกดติดตามช่องเพื่อเป็นกำลังใจให้ด้วยนะครับ