สร้างเว็บอย่าง Wongnai กับโจทย์ล้านแปดที่ต้องแก้ (ตอนที่ 1)

ไม่ได้เขียนไปหลายเดือน คิดขึ้นมาได้ว่ามีเนื้อหาที่เตรียมไว้ซักพักแล้วแต่ยังไม่ได้แชร์ เลยขอแทรกก่อนเรื่องประวัติโปรแกรมฝึกงานใน Wongnai ที่ครั้งที่แล้วบอกว่าจะเขียนถึงก่อนแล้วกัน 😛

เป็นหัวข้อที่สองเดือนก่อนเตรียมไว้ให้ทางสมาคมโปรแกรมเมอร์ไทย (ThaiProgrammer.org) แล้วก็ได้ใช้แชร์ใน BarCamp Bangkhen 6 ด้วย ใจความสำคัญคือพูดให้เห็นว่าเวลาสร้างเว็บอย่าง Wongnai ขึ้นมามันมีโจทย์ปัญหาที่ต้องแก้หลายอย่างที่ถ้าไม่ได้ลงมือทำจริงก็อาจจะไม่ได้คิดถึง อีกเหตุผลที่นำเรื่องนี้ขึ้นมาพูดก็เพื่อตอบคำถามที่ผมโดนถามบ่อยๆ เวลาเจอเพื่อนแล้วคุยกันถึงงานที่ทีมผมทำอยู่ว่า

“พวก Dev ยังต้องทำอะไรอีกหรอ? ไม่ได้ทำเสร็จหมดแล้วหรอ”

ถ้าคำถามนี้ถามโดยคนที่ไม่ได้เรียนเกี่ยวกับ Computer Science มาก็คงไม่แปลกใจครับ แต่พอถูกถามโดยคนที่เรียนมาโดยตรงก็แปลกใจเหมือนกัน (เดาได้ว่าทีม Dev อีกหลายเว็บก็คงเจอคำถามนี้บ่อยเหมือนกัน)  entry นี้เลยจะอธิบายให้เห็นว่ามันมีอะไรบ้างที่ทำให้ต้องวุ่นกับการพัฒนาและเป็นสิ่งที่ท้าทายเราอยู่ตลอดเวลา จนเป็นที่มาว่าทำไม Wongnai จึงมองหา software engineer เก่งๆ มาร่วมทีมอยู่เรื่อยๆ

(เนื่องจากเนื้อหาค่อนข้างเยอะมาก เลยจะแบ่งเขียนเป็น 2 ตอนครับ)

 

ทำความรู้จัก Wongnai

ก่อนอื่นเลยต้องทำความรู้จักอย่างลึกซึ้งก่อนว่า Wongnai มีลักษณะยังไงก่อน เนื่องจากมันค่อนข้างที่จะแตกต่างจากเว็บไทยอีกหลายเว็บ ถ้าให้สรุปเป็นข้อๆ ว่า Wongnai มีส่วนผสมของอะไรบ้างก็จะได้เป็น 3 อย่างต่อไปนี้

  • Location-based service เป็นบริการไว้ค้นหาข้อมูลสถานที่และที่เกี่ยวข้องกับสถานที่
  • User-Generated Content Website เป็นเว็บที่เนื้อหาข้อมูลในเว็บเป็นข้อมูลที่ร่วมกันสร้างโดยผู้ใช้
  • Social Network เป็นเครือข่ายสังคม ที่ผู้ใช้สามารถติดตามผู้ใช้คนอื่น สร้าง profile ของตัวเองได้ และมี Feed ของตนเองทุกคน

ถ้าลองนึกถึงเว็บดังๆ ในไทย จะสังเกตว่าจะไม่ค่อยมีส่วนผสมแบบนี้ (ถ้าผมไม่ลืมเว็บไหนไปนะครับ) คือถ้าไม่ใช่เว็บซื้อขายของ ก็มักจะไม่เน้นการ search  แต่ถ้าเน้นเรื่อง search ก็มักจะไม่มีความเป็น Social Network ไม่มีการ Follow ผู้ใช้กันเอง, ผู้ใช้เห็นเนื้อหาเหมือนกันหมด, ไม่มีทางเลือกในการ customize​ หรือไม่มี feed ของตัวเอง และสุดท้ายคือไม่ค่อยมีข้อมูลเชิงตัวเลขจากผู้ใช้ ส่วนมากจะเป็น text จากการตอบคอมเม้นท์ในเว็บบอร์ด

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

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

นอกเหนือจาก 3 ส่วนผสมที่บอกไป จริงๆ ยังมีส่วนของ commerce ที่เพิ่งเพิ่มมาใหม่ ซึ่งส่วนผสมทั้งหมดนี้ทำให้มันมีจุดที่ให้คิดเยอะเวลาสร้าง จุดที่สามารถปรับปรุงให้ดีขึ้นกว่าปัจจุบันได้อีกมาก ผมจะพยายามยกตัวอย่างกับอธิบายสิ่งที่เข้าใจได้ง่ายๆ ทีละอย่างให้เข้าใจครับ

 

Search เป็นเรื่องใหญ่

การใช้งานหลักอย่างนึงของผู้ใช้ Wongnai ก็คือ การค้นหาร้านด้วย 2 วิธีหลักๆ คือ ค้นหาด้วย keyword (keyword search) กับค้นหาร้านรอบๆ ตัว (nearby search)  การค้นหาแต่ละวิธีก็มีความยากของมัน ผมขอแยกสิ่งที่ต้องคำนึงถึงเรื่องการค้นหาออกเป็น 2 ส่วนคือ ส่วนรับ Input และส่วนการแสดงผล (Output)

1) ส่วนรับ Input

Keyword-based search

Keyword-based search เป็นสิ่งที่ทีม dev ปรับแต่งระบบอยู่เรื่อยๆ ให้มันดีขึ้น ซึ่งก็ต้องยอมรับครับว่าเรายังค้นหาไม่เก่งมาก หลายครั้งก็ได้ผลลัพธ์ที่ตัวผมเองก็ยังหงุดหงิดใจบ้าง (แต่มันก็เก่งขึ้นกว่าช่วง 1-2 ปีแรกมากพอสมควรนะ :D)

ขอเล่าย้อนไปยาวนิดนึงครับ ในตอนแรกเริ่มเว็บ Wongnai เรามีกล่อง search ให้ 1 กล่อง กับ dropdown อีก 1 อัน สำหรับพิมพ์ชื่อร้านแล้วก็สำหรับเลือกสถานที่(พื้นที่ค้นหา)ตามลำดับ เรียกได้ว่าตามเว็บต้นแบบ Yelp.com นั่นแหละ ซึ่งมันก็ง่ายดีกับระบบที่จะตีความได้ชัดเจนว่า user ต้องการค้นหาอะไรในพื้นที่ไหน

มีทั้งกล่องสำหรับใส่ keyword และระบุสถานที่

มีทั้งกล่องสำหรับใส่ keyword และระบุสถานที่

แต่ต่อมาเรารู้สึกว่ามันใช้ยาก แล้วก็มีข้อเสียพอสมควร เช่น

  • คนไทยคุ้นเคยกับการค้นหาด้วย Google ที่มีกล่อง search กล่องเดียว พิมพ์ในกล่อง search แล้วกด Enter ทันที หาได้ทุกอย่าง การเพิ่ม dropdown มาอันนึง เราต้องมั่นใจว่า user เห็นหรือรับรู้ว่า dropdown นั้นมันมีอยู่และมีผลกับผลลัพธ์การค้นหา ก่อนที่จะกด Enter เพื่อเริ่มการค้นหา
  • พอมี Dropdown ให้เลือก Location เราก็ต้องมาคิดอีกว่า
    • ถ้าไม่มีค่า default ให้ก่อน ก็จะเกิดกรณีที่ user พิมพ์คำค้นหาเสร็จแล้วกด Enter ทันที (ไม่สนใจ dropdown)  การค้นหาก็จะกว้างมากๆ กลายเป็นค้นหาร้านทั้งหมดในระบบแทนที่จะรู้ scope การค้นหาที่แคบลง
    • ถ้ามีค่า default — สมมติค่า default เป็น “กรุงเทพฯ” ก็ต้องมาดูกันว่า user ในจังหวัดอื่นๆ จะเห็น dropdown อันนี้แล้วกดเปลี่ยนมั้ย
    • ถ้าใช้ Location Services ของ Web Browser ในการ detect location และให้อัพเดทค่าทุกครั้งที่เข้าใช้งาน ก็ดูจะเข้าท่ามากกว่าแบบอื่น แต่ถ้าเกิดวันนึงผู้ใช้ต้องการค้นหาร้านในจังหวัดที่ตัวเองไม่ได้อยู่ ก็อาจจะเกิดปัญหา เพราะไม่เคยสัมผัส dropdown ที่ไว้เลือกจังหวัดด้วยตัวเองมาก่อน

สังเกตว่าการมี dropdown ไม่ว่าจะกรณีไหนก็ตาม มันจะเจอปัญหาเดียวกันหมดคือ ผู้ใช้อาจจะไม่เคยแตะ dropdown ที่อยู่ข้างๆ มาก่อนเลย ไม่เคยเลือกค่าใน dropdown ให้ตรงกับสิ่งที่ต้องการค้นหา ทำให้กลายเป็นใช้ค่า location ที่ผิดๆ   ผลลัพธ์การค้นหาก็พลาดไป เพราะมันผิดตั้งแต่ input แล้ว

บางคนอาจจะบอกว่าปัญหาแบบนี้มันสามารถแก้ได้ด้วยการปรับปรุง UI/UX ให้ดี เพื่อทำให้ผู้ใช้ใส่ input ไม่ผิด (ไม่ลืมว่าต้องใส่, ไม่ลืมว่าเคยใส่แล้ว, ไม่ลืมที่จะเปลี่ยนใหม่) ได้  ซึ่งผมว่าก็เป็นไปได้นะ  แต่สุดท้ายแล้ว เราเลือกที่จะเปลี่ยนมาเป็นกล่อง Search กล่องเดียว ด้วยเหตุผลเรื่องความง่ายในการใช้งานของผู้ใช้ (ด้วยความคุ้นเคยกับการใช้ Google)

 

Single search box

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

ต้องยอมรับครับว่าช่วงแรกที่เปลี่ยนมาเป็นกล่อง search กล่องเดียว เราลืมคิดไปเหมือนกันว่าผู้ใช้จะพิมพ์ทุกอย่าง (ทั้งที่ช่วงแรกๆ เราใส่ hint เพื่อบอกว่าให้ใส่ชื่อร้านก็ตาม) จนกระทั่งเราได้เข้าไปดูใน analytics เพื่อดูว่า keyword อะไรบ้างที่ถูกค้นหาบ่อย ก็เลยเจอว่าผู้ใช้พิมพ์กันแบบอิสระมาก

Single search box

กล่อง Search กล่องเดียวต้องค้นให้ได้หมดทุกอย่าง

ยกตัวอย่างคำค้นหาที่เราควรจะต้องวิเคราะห์ให้ดีว่าผู้ใช้กำลังค้นหาอะไร

  • พิมพ์ “บ้านไอซ์” น่าจะอยากค้นหาร้านที่ชื่อว่า บ้านไอซ์
  • พิมพ์ “พารากอน” ก็น่าจะหาร้านใน Siam Paragon
  • พิมพ์ “ภูเก็ต” น่าจะหมายถึงค้นหาร้านในภูเก็ต ไม่ใช่ค้นหาร้านที่ชื่อภูเก็ต
  • พิมพ์ “ซีฟู้ด” น่าจะหมายถึงค้นหาร้านอาหารทะเล
  • พิมพ์ “คั่วกลิ้ง” ก็อาจจะหมายถึงค้นหาร้านที่มีเมนูคั่วกลิ้งก็ได้
  • พิมพ์ “Spa” ก็น่าจะหมายถึงค้นหาร้านที่เป็นร้านประเภท Spa

คำที่ยกตัวอย่างข้างบนนี้น่าจะตรงไปตรงมาครับ แต่ลองดูตัวอย่างคำต่อไปนี้ครับ

  • พิมพ์ “ภูเก็ตซีฟู้ด”  อ้าวๆ ชัวร์สิครับว่าเค้าต้องหาร้านซีฟู้ดในจังหวัดภูเก็ต แค่ filter ร้านอาหารทะเลที่อยู่ในภูเก็ตก่อนเลยก็น่าจะโอเคแล้ว  แต่! ปรากฎว่าในไทยเรามีร้านที่ชื่อว่า “ภูเก็ตซีฟู้ด” ที่ไม่ได้อยู่ในภูเก็ตเนี่ยสิ ฮ่าๆ
  • พิมพ์ “Spa Food” คำนี้อาจจะไม่ยาก ถ้าข้อมูลในระบบมีแค่ร้านอาหารอย่างเดียว แต่ใน Wongnai เรามีร้านที่เกี่ยวกับ Beauty อยู่ด้วย  ถ้าวิเคราะห์จาก keyword เราอาจจะคิดว่าผู้ใช้กำลังค้นหาร้าน Spa ที่มีคำว่า Food ด้วย แต่! ความจริงคือ มีร้านที่ชื่อ Spa Food ที่เป็นร้านอาหารอยู่ครับ  ถ้าเราไป filter ร้าน Spa ก็อาจจะร้านไม่เจอทันที

การ index คำเหล่านี้ให้ครบคงไม่ยากอะไร แต่การควบคุมการ weight คำแต่ละคำเพื่อให้ได้ผลลัพธ์ที่เราพอใจเป็นสิ่งที่นักพัฒนาต้องทำความเข้าใจกับการทำงานของตัวจัดการ index อย่างจริงจัง

 

ภาษาไทยกับคำทับศัพท์

ลองนึกถึงสถานการณ์ต่อไปนี้ครับ

A: คุยโทรศัพท์กับเพื่อน แล้วเพื่อนพูดถึงร้านอาหารร้านนึงขึ้นมา ชื่อร้านฟังดูไม่ใช่ภาษาไทย แต่ก็พอจำวิธีออกเสียงได้ แล้วกะว่าตอนวางหูเสร็จจะพิมพ์ค้นหาร้านดู

B: เดินผ่านร้านชื่อ “Calin” อ่านในใจว่า “คาลิน” (จริงๆ แล้วต้องอ่านว่า “กาแล็ง”) แล้วเกิดอยากอ่านรีวิวร้านนี้

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

สิ่งที่ต้องการจะสื่อก็คือ ผู้ใช้ค้นหาทั้งภาษาอังกฤษและภาษาไทย และมีโอกาสเป็นภาษาไทยเยอะด้วย ดังนั้นระบบค้นหาก็ควรจะเก่งพอจะค้นหาผลลัพธ์ได้แม้ว่า user จะสะกดชื่อร้านผิดพลาดบ้างนิดๆ หน่อยๆ หรืออาจจะใช้ suggestion มาช่วยไกด์ให้ user เดินไปถูกทางว่าควรจะพิมพ์ตัวอักษรอะไรเป็นตัวต่อไป

 

Nearby search

การพิมพ์คำค้นหาร้านก็ว่ายากแล้วที่จะหาคำตอบให้ตรงใจ การค้นหาร้านโดยไม่ป้อนคำอะไรเลยก็ไม่ใช่เรื่องง่ายครับ  ผมกำลังจะพูดถึงการค้นหาอีกวิธีนึงที่บอกไว้ก่อนหน้านี้ นั่นก็คือ ค้นหาร้านรอบตัว (nearby search) ครับ

การค้นหาร้านใกล้ตัว เป็นหนึ่งในฟีเจอร์ที่ผู้ใช้แอพ Wongnai ใช้กันเยอะมาก เพราะมีโอกาสได้ใช้ค่อนข้างบ่อยเวลาไปในพื้นที่ที่ไม่รู้จัก เนื่องจากเราสามารถใช้ GPS ที่มากับ Smart Phone เป็นตัวช่วยค้นหาร้านรอบตัวได้

ค้นหาร้านอาหารรอบๆ ตัว

ค้นหาร้านอาหารรอบๆ ตัว

การค้นหาร้านรอบตัวนั้นแน่นอนว่าเราต้องพิจารณาถึงระยะทางและ/หรือขอบเขต ถ้าให้คิดวิธีค้นหาร้านใกล้ตัวอย่างตรงไปตรงมาสุดๆ ก็คือวาดรัศมีออกไป X เมตร แล้วก็หาร้านในฐานข้อมูลเราว่ามีร้านไหนบ้างที่อยู่ภายในวงกลมก็เป็นอันจบ แต่ความจริงมันไม่ง่ายอย่างงั้น ด้วยเหตุผลที่ว่า

  • “ร้านใกล้ตัว” ที่ผู้ใช้ต้องการ จริงๆ แล้วต้องบอกว่า “ร้านดีๆ ใกล้ตัว” มากกว่า
  • แล้วเราจะรู้ได้ไงว่าร้านดีๆ อยู่ห่างออกไปเท่าไหร่
  • แล้วอะไรคือเรียกว่าใกล้?

“ใกล้”

จริงๆ ร้านดีๆ มันพอจะมีตัวชี้วัดระดับนึง (เช่นจาก average rating) แต่คำว่าใกล้นี่ก็ยากไม่ใช่เล่น เพราะนิยามของคำว่า “ใกล้” มันขึ้นกับ context ด้วย โดยเฉพาะสถานที่ ยกตัวอย่างเช่น

  • ถ้าเรายืนอยู่แถวสยามสแควร์  ร้านที่อยู่แถวชิดลมที่ห่างออกไปประมาณ 1 กิโลเมตร (มั้ง) ก็คงไม่เรียกว่าใกล้
  • ถ้าเราอยู่ต่างจังหวัด ถ้าร้านดีๆ อยู่ห่างออกไปซัก 5 กิโลเมตร ก็ถือว่าใกล้ได้ เพราะในต่างจังหวัด รถไม่ติดมากเท่า เรายินดีที่จะขับรถออกไปเพื่อให้ได้เจอร้านดีๆ

จะเห็นว่านิยามคำว่า “ใกล้” มันต่างกันไปในแต่ละ location มันมีเรื่องความลำบากในการเดินทางมาเกี่ยวข้องด้วย (ไม่ว่าจะเป็นจราจร, สภาพภูมิประเทศ ฯลฯ)

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

 

2) ส่วนการแสดงผล

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

สำหรับเรื่อง UI ผมคงไม่พูดถึงครับ แต่จะขอพูดในส่วนของการเรียงลำดับผล search ซึ่งมาจากการให้คะแนนว่าของสิ่งไหนได้คะแนนความใกล้เคียงกับสิ่งที่ผู้ใช้กำลังค้นหามากที่สุด ซึ่งไอ้การคิดคะแนนนี่แหละที่ยุ่งยากสุดยอด คำถามจะเกิดในหัวมากมายครับ ยกตัวอย่างเช่น

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

สุดท้ายแล้วเราก็จะได้สูตรการคำนวณ หรือ algorithm ในการคิดคะแนนที่ค่อนข้างซับซ้อน และก็ต้องคอยปรับจูนอยู่เรื่อยๆ เมื่อเจอว่าผลการค้นหายังไม่ถูกใจ หรือยังมีจุดบอดที่ทำให้ได้ผลลัพธ์ไม่ดี   (สำหรับ Wongnai ก็มีการปรับ algorithm อยู่เรื่อยๆ ครับ)

 

Web Performance

เว็บช้า ผู้ใช้คงไม่ปลื้มแน่   performance ของเว็บเป็นสิ่งที่เว็บทุกเว็บให้ความสำคัญมาก เทคนิคในการ optimize เว็บมีเยอะแยะเต็มไปหมด แต่เทคนิคยอดฮิตขั้นพื้นฐานเลยก็คงจะเป็นเรื่องการ cache ข้อมูลที่มีการเปลี่ยนแปลงน้อยแต่กว่าจะได้คำตอบมาต้องเสียเวลานานเอาไว้  แต่กับเว็บที่ content ในเว็บมัน dynamic มาก โดยเฉพาะเว็บที่ content สร้างโดยผู้ใช้ (User-generated content) แล้วก็เป็น Social Network ด้วยอย่าง Wongnai การ cache ข้อมูลไว้ก็เป็นเรื่องที่ยากขึ้นด้วยปัจจัยหลายๆ อย่าง

การทำ index สำหรับระบบ search ก็เป็นอีกวิธี optimize เว็บให้ค้นหาของได้รวดเร็วขึ้น แต่เราก็ไม่ได้สามารถทำ index ได้ทุกอย่างอยู่ดี เพราะการใช้งานของผู้ใช้ Wongnai ไม่ได้เป็นแค่การ browse หน้าเว็บไปเรื่อยๆ  แต่เป็นการค้นหาทั้งจาก keyword และค้นหาตาม location

ถ้าเป็นการค้นหาด้วย keyword เราอาจจะสามารถทำ index ล่วงหน้าหรือ cache ผลลัพธ์การค้นหาไว้ได้ระดับหนึ่ง แต่การค้นหาร้านรอบตัวด้วย location (latitude, longitude) โอกาสที่เราจะคำนวณหาคำตอบไว้ล่วงหน้านั้นเป็นไปไม่ได้เลยหรือเป็นไปได้ยากส์ เพราะผู้ใช้แต่ละคน request ข้อมูลจากตำแหน่งที่ต่างกัน แค่ยืนห่างกัน 10-20 เมตร ก็อาจจะได้ผลลัพธ์ต่างกันแล้ว นี่ขนาดยังไม่ได้นึกถึงความสามารถต่อๆ ไปที่จะทำเรื่อง personalized search ด้วย การทำ index ยิ่งเป็นไปได้ยากขึ้นไปอีก (caching ก็เช่นกัน)

 

SEO

คงไม่ต้องปฏิเสธเลยว่า Traffic ของเว็บ content ส่วนใหญ่ จะมาจาก Search Engine อย่าง Google   แต่ละเว็บก็พยายามที่ดัก traffic จากตรงนี้และพยายามทำให้หน้าเว็บของตัวเองติดอยู่ในผลการค้นหาของ Google เป็นอันดับแรกๆ เมื่อผู้ใช้ google ค้นหาข้อมูลด้วย keyword ที่ตรงกับ content ที่มีในเว็บ

จำนวน keyword ที่แต่ละเว็บต้องการดักจับ traffic ก็แตกต่างกันไป อาจจะมีจำนวนหลักสิบ หลักร้อย แต่ถ้าเป็นเว็บประเภท Commerce ที่ไว้ค้นหาสินค้า หรือเว็บที่ไว้ค้นหาสถานที่อย่าง Wongnai  ปริมาณ keyword มันก็จะเป็นสเกลที่ใหญ่ขึ้นหน่อย เพราะมีหน้าแสดงข้อมูลจำนวนมาก  ถ้าพูดถึง Wongnai.com ก็มีหน้าที่ไว้แสดงสถานที่ในระบบจำนวนมาก (เกือบ 200,000 สถานที่) ซึ่งก็หมายความว่าเรามี keyword ที่อยากจะให้ Google ค้นหาเจอในอันดับต้นๆ จำนวนหลักแสนคำ

การจะทำโครงสร้างเว็บให้ถูกหลักและถูกใจ Google เวลามา crawl ข้อมูลเราไปก็เป็นอีกเรื่องใหญ่สำหรับเว็บที่มี content ปริมาณมาก  คนที่เชี่ยวชาญด้าน SEO ที่เคยดัน keyword จำนวนไม่มากให้ติดอันดับใน Google อาจจะตกม้าตายได้เมื่อต้องมา optimize เว็บสเกลนี้ถ้าไม่วิเคราะห์กันให้ลึกสุดๆ และก็ต้องทำงานร่วมกับทีม Dev เพื่อปรับเปลี่ยนให้ทันเหตุการณ์อยู่เรื่อยๆ เวลา Google search มีการเปลี่ยนแปลง  ทีม Dev ก็ต้องพร้อมที่จะปรับเปลี่ยนตามคำแนะนำของคนที่ดูแลเรื่อง SEO อยู่ตลอด

ถามว่าปัจจุบันเราทำ SEO ได้ดีแล้วหรือยัง ก็ต้องตอบตรงๆ ว่ายังครับ เรายังต้องการคนที่เชี่ยวชาญที่อยากจะสู้กับข้อมูลปริมาณมหาศาลแบบนี้อยู่ครับ 😀

 

ทิ้งท้ายตอนแรก

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

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

  • Full-stack Web Developer
  • Android Developer
  • iOS Developer
  • QA Automation Engineer
  • SEO Analyst
  • IT Support
  • Digital Marketing
  • Graphics Designer

ส่ง resume มาที่ recruit@wongnai.com

ผมชอบอ่านเหตุผลของของคนที่ส่งอีเมล์มาสมัครงานนะครับ ถ้าใครมีไอเดียหรือคิดว่าตัวเองมีความสามารถและอยากจะเข้ามาร่วมทีมเพื่อปรับปรุงจุดไหนของ Wongnai เป็นพิเศษ  เขียนมาในอีเมล์ได้เลยครับ

สำหรับตอนแรกนี้ขอจบเพียบเท่านี้ก่อนครับ  ขอไปพักชาร์จพลังเตรียมเขียนเนื้อหาตอนต่อไปซักยาวๆ อีกซักรอบครับ 😀

Advertisements

กำเนิดแอพ Wongnai บน iPhone

ประวัติตอนนี้น่าจะเป็นตอนที่เขียนได้เข้ามือที่สุดถ้าเทียบกับที่เขียนมาก่อนหน้านี้เพราะมีเรื่องราวให้เขียนถึงเยอะมากเกี่ยวกับแอพ Wongnai บน iOS กับ 5 ปีกว่าที่ผ่านมา ตั้งแต่เริ่มมีความคิดอยากให้บนมือถือมีแอพ Wongnai อยู่

สำหรับตอนนี้ จะพูดถึงจุดเริ่มต้นตั้งแต่เริ่มมีไอเดียทำแอพ, ใครเป็นคนลงมือคนแรกและใครเป็นคนดูแลมาเรื่อยๆ, ใช้เวลาไปเท่าไหร่สำหรับเวอร์ชั่นแรก, การโดน reject app ครั้งแรกพร้อมเหตุผลแปลกๆ และปิดท้ายด้วย screenshot แอพตัวแรกสุดที่หลายคนน่าจะไม่เคยเห็น

 

เริ่มพูดถึงแอพบน iPhone

ไอเดียที่จะทำแอพบน iPhone มีมาตั้งแต่เว็บ Wongnai.com ยังไม่เสร็จสมบูรณ์ และจะบอกว่าโค้ดของแอพ Wongnai บน iPhone ช่วงแรกสุด ไม่ได้ถูกเขียนขึ้นมาโดยทีมงานของวงในเอง แต่เป็นการจ้างคนมาช่วยเขียนให้  ลำดับเหตุการณ์เป็นมายังไงอ่านตาม timeline นี้เลย

วันพุธที่ 28 เม.ย. 2010 เป็นครั้งแรกที่ได้คุยกับยอดเรื่องทำแอพ Wongnai บน iPhone  เราคิดว่าถ้าสามารถมีแอพ Wongnai บนมือถือได้  user จะสามารถค้นหาร้านอาหารได้สะดวกมาก เพราะคนมักจะถามคำถามว่า “กินอะไรดี” พร้อมกับถามว่า “แถวนี้มีอะไรกิน” ซึ่งมือถือที่มี GPS อย่าง iPhone สามารถตอบโจทย์นี้ได้อย่างดีแน่นอน

อยากจะมีแอพ Wongnai ไปอยู่ในหน้านี้

อยากจะมีแอพ Wongnai ไปอยู่ในหน้านี้

ยอดบอกว่าจะลองติดต่อบริษัทที่รับทำแอพให้ เพราะมีโปรเจคที่ทำที่อเมริกาที่อยากได้แอพบนมือถืออยู่แล้วด้วย เลยจะลองถามไปพร้อมกันเลยว่าถ้าทำสองแอพเลย จะต้องเสียเงินเท่าไหร่ ระยะเวลาเท่าไหร่ โดยแอพ Wongnai เป็นแอพที่สองที่จะจ้างเค้าทำ …  ระยะเวลาที่บริษัทนี้ประเมินมาคือ เดือนครึ่ง ถือว่าค่อนข้างเร็วเลยถ้าจะให้ได้แอพที่สมบูรณ์อย่างที่ฝันไว้จริง  แต่สุดท้ายเราไม่ได้ร่วมงานกับเจ้านี้ ไม่แน่ใจเหตุผลเหมือนกัน แต่คงเป็นเรื่องราคามั้ง

 

Developer ไม้แรกสำหรับ Wongnai app on iPhone

ความคิดเรื่องทำแอพบน iPhone หายไปซักพัก จนกลับมาอีกทีตอนยอดเรียนจบและกลับมาไทยแล้ว แล้วก็เริ่มโพสหาคนมาทำแอพบน iPhone โดยประกาศรับสมัครพนักงาน iPhone Developer ไปในเว็บหางาน

2 ส.ค. 2010 – มีคนฝรั่งเศสคนนึงชื่อ Sebastien ส่งเมล์มาขอสมัครตำแหน่ง iPhone/iPad Developer กับ Wongnai (ต่อไปจะขอเรียกชื่อสั้นๆ ว่า Seb)

10 ส.ค. 2010 – ยอดส่ง requirement สำหรับ iPhone app ให้เค้าดู โดยสิ่งที่ต้องทำได้ใน version แรก เช่น

  • ค้นหาร้านตาม keyword, ตาม category, และแน่นอนว่าต้องตามพิกัดได้ด้วย
  • Filter ร้านด้วยราคาได้ เลือกรัศมีได้ เลือกรูปแบบการเรียงลำดับของร้านได้
  • แสดงข้อมูลร้านโดยละเอียดได้ เบอร์โทรต้องพร้อมกดโทรได้เลย แผนที่ต้องมีให้กดไปดูได้
  • สมัครสมาชิก เขียนรีวิว โพสรูปได้
  • ดู profile ของตัวเองและคนอื่นได้
  • Follow/Unfollow ได้
  • อ่าน Feed ได้
  • มีหัวข้อ Articles ไว้อ่านบทความจากนักเขียนของวงใน
  • สามารถ bookmark ร้านที่สนใจได้
  • แชร์ไปยัง Facebook / Twitter ได้
  • และอื่นๆ อีกยิบย่อยที่ผมนึกไม่ออก

15 ส.ค. 2010 – นาย Seb ประเมินราคามา 65,000 บาท! ต้องบอกว่าราคานี้ถูกมากกก แถมประเมินเวลามาว่า 3 อาทิตย์เสร็จ เร็วยิ่งกว่าเจ้าแรกที่เป็นบริษัทซะอีก แต่ก็ต้องบอกว่าเสี่ยงสุดๆ ครับที่เราตกลงให้งานนี้เค้าทำ เพราะสิ่งเดียวที่เรารู้เกี่ยวกับเค้าคือ รู้ว่ามีแอพบน App Store หลายแอพ  แต่ไม่รู้ว่าคุณภาพแอพเป็นยังไง คุณภาพโค้ดเป็นยังไง และไม่รู้ว่าโค้ดที่จะส่งให้เราเราจะ maintain ต่อได้รึเปล่า  แต่ช่วงนั้นถ้าจ้างเป็นบริษัทก็น่าจะหลายแสนแน่ๆ ในที่สุดเราก็ offer งานให้เค้าไป

18 ส.ค. 2010 – ยอดได้รับจดหมายขอสมัครฝึกงานจากนักศึกษาจาก ม.มหาสารคาม ชื่อ กุ้ม ขอฝึกงานในตำแหน่ง iPhone developer  เคยเขียนเกมตอนทำ project จบ ซึ่งเราก็รับไว้เลยเพราะกะไว้ว่าจะให้น้องคนนี้มาดูแลโค้ดที่ Seb จะส่งมาให้ (ปัจจุบันน้องคนนี้ก็ยังทำงานอยู่ที่ Wongnai)

6 ก.ย. 2010 – ได้รับเมล์ตอบจาก Seb ตกลงทำ และพร้อมจะเริ่มลุยทันที เย่! ในที่สุดเราก็ได้ Developer ที่จะทำแอพ Wongnai เป็นไม้แรกได้เป็นที่เรียบร้อย

 

ตะกุกตะกักกับเวอร์ชั่น 0.000000001

หลังจากที่ตกลงให้โปรแกรมเมอร์คนนี้ทำแอพให้ ผมต้องเริ่มนัดคุย นัดเจอ และส่งเมล์คุยทั้งเรื่องทางเทคนิคกับเค้าอยู่เป็นระยะๆ ค่อนข้างเหนื่อยใช้ได้เลยกับการอธิบายว่าเค้าจะต้องต่อ API ของ Wongnai ยังไง เพราะเค้าไม่เคยเขียนแอพต่อกับ Web Service อะไรมาก่อนเลย ต้องเรียนรู้ใหม่เองหมดทุกอย่าง ผมไม่สามารถช่วยอะไรได้ในเรื่องวิธีเขียน เพราะตอนนั้นยังเขียน Objective-C ไม่เป็น ช่วยได้แค่ Google แก้ปัญหาเป็นจุดๆ ไปแค่นั้น

ปัญหาที่ใช้เวลาแก้กันนานมากที่สุดคือ ทำยังไงให้แอพไม่ต้อง Login ใหม่ทุกครั้งที่เปิดแอพ เนื่องจากโปรแกรมเมอร์คนนี้ไม่เคยเขียนแอพที่ต้องทำ authentication มาก่อนเลย   ปัญหาที่เค้าเจอคือ HTTP Cookie ที่ได้หลังจาก Login เสร็จแล้ว มันไม่ถูกเก็บไว้ให้ถ้าปิดแอพไป  ติดอยู่กับปัญหานี้อยู่นานมากจนต้องเข้าไปช่วยดู แล้วทำให้มารู้ว่าต้องจัดการ Save/Load cookies เอาเอง

ผมมารู้ทีหลังตอนเค้าก่อนส่งมอบงานไม่นานว่า เค้าไม่ได้เรียนด้าน Computer Science มาก่อน เรียนมาด้าน Math และไม่เคยเขียนโปรแกรมมาก่อน เริ่มเขียนโปรแกรมครั้งแรกก็คือเขียนแอพบน iOS เลย ลองผิดลองถูกจนสามารถสร้างแอพไปไว้บน App Store อยู่หลายตัว

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

 

ผ่านไปทั้งหมดสองเดือนกว่าๆ งานก็เสร็จ (เกินที่ประเมินไว้) และถึงเวลาส่งมอบโค้ด หลังจากได้โค้ดมาก็มีการรีวิวโค้ดนิดหน่อย แล้วก็เจอว่าโค้ดไม่ได้ถูกเขียนให้ maintain ได้ง่ายเลยแม้แต่น้อย  T__T  ไม่มีใช้ design pattern อะไรทั้งสิ้น แม้แต่ MVC ก็ไม่ได้ใช้! OMG   แต่ ณ จุดนั้น ถ้าจะให้เค้ากลับไปเขียนมาใหม่ก็คงไม่ใช่  ก็ต้องทำใจและเตรียมตัว refactor โค้ดครั้งใหญ่เป็นพอ สิ่งสำคัญที่สุดตอนนั้นคือ เราอยากออกแอพให้ไวที่สุด  ไม่ใช่ออกแอพที่มีโค้ดที่สวยที่สุดในเวลานั้น

 

นักศึกษาฝึกงานคนแรกของ Wongnai

หลังจากได้รับโค้ดมาแล้ว คนที่รับช่วงต่อก็คือ กุ้ม นักศึกษาฝึกงานอย่างเป็นทางการคนแรกของบริษัท มาถึงก็ต้องรับบทหนักดูแลโค้ดที่ตัวเองไม่ได้เขียนตั้งแต่ต้น และต้องช่วยปรับแก้ UI/UX ตามที่ผมกับยอด feedback กลับไปในเวลาที่ค่อนข้างจำกัด

กุ้มเข้ามาฝึกงานตั้งแต่เดือนพฤศจิกายน 2010 เป็นเวลาเกือบ 4 เดือน เริ่มจากที่เขียนโค้ดไม่เป็นระบบระเบียบเลย และเขียนโค้ดที่เป็น asynchronous โดยไม่เข้าใจหลักการเลย อยู่ฝึกงานจนกระทั่งเขียนได้ดีขึ้นเยอะก่อนจบการฝึกงาน   ผมจำเหตุการณ์นึงได้แม่นมากอันนึง ตอนนั้นกุ้ม(ในอดีต)อธิบายสาเหตุว่าทำไมแอพถึง crash พอทำงานถึงตรงจุดนี้ คำอธิบายคือ “โค้ดบรรทัดนี้ถ้าเครื่องมันทำงานเร็วเกินไป บรรทัดต่อไปจะยังไม่พร้อมทำงาน ทำให้ crash แน่ๆ เลยครับ” …. อึ้งสิครับ ต้องเรียกมาปรับทัศนคติใหม่ด่วน ฮ่าๆ   สรุปคือต้องสอนเรื่อง Thread ให้ฟังคร่าวๆ เพื่อให้สามารถทำงานไปได้ต่ออย่างถูกต้อง (นี่มันคือการเอาอดีตของน้องมาเผาชัดๆ ฮ่าๆ … แต่นั่นคืออดีตครับ ตอนนี้น้องเค้าฝีมือดีแล้ว)

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

ก่อนที่จะจบช่วงฝึกงาน ก็ต้องเตรียมหาคนมาดูแลแอพต่ออย่างจริงจัง  บอยเอสและป่านยังต้องผนึกกำลังกันทำฝั่ง Web Front-end กับ Backend ที่เป็นกระดูกสันหลังของแพลตฟอร์ม บวกกับต้องทำงานที่บริษัทรับมาทำให้เพื่อให้เกิดรายได้ในบริษัทด้วย สรุปคือผมน่าจะเหมาะสุดที่จะต้องดูต่อ เพราะว่าเริ่มดูมาตั้งแต่แรกๆ  หลังจากมาดูแลแอพบนมือถือ ก็เลยไม่ได้กลับไปโค้ดในโลกของฝั่ง Web อีก

มีคนถามบ่อยว่าอ่านวิธีเขียนแอพบน iOS จากที่ไหนดี ผมจะแนะนำเหมือนกันทุกครั้ง คือ ให้ไปนั่งดูคอร์สสอนเขียน iOS app ของ Stanford (รหัสวิชา CS193) ของ Paul Hegarty โหลดดูได้จาก iTunes U ฟรี!  ดูไปเลย 10 ตอนแรก คนสอนสอนดีมาก นักเรียนใน class ก็ถามคำถามดี  ถ้าดูแล้วเข้าใจทุกประโยค รับประกันพื้นฐานดีและเขียนเป็นแน่นอน แต่ต้องมีพื้นฐาน Programming และเข้าใจ OOP มาก่อนระดับนึงนะครับ

โชคดีมากที่ก่อนรับช่วงต่อ มีช่วงวันหยุดยาวตอนสิ้นปี 2010 อยู่ 4-5 วันให้ได้เตรียมความพร้อมล่วงหน้า เลยว่างดูวีดีโอคอร์สนี้ไปหลายตอน พอเปิดปีใหม่ 2011 มาก็เลยพร้อมพอดี ยังไม่ต้องรีบหาคนมาช่วยทันที

 

โดน Reject ซักครั้งให้ได้ประสบการณ์

ก่อน submit ขึ้น App Store มีคนบอกไว้ก่อนแล้วว่าต้องระวังอะไรบ้างก่อนส่งให้ทีมรีวิวแอพของ Apple ตรวจสอบคุณภาพของแอพก่อนยอมให้ปล่อยขึ้น App Store (เวอร์ชั่นแรกสุดปกติจะถูกตรวจเข้มงวดเป็นพิเศษ และใช้เวลานาน)

สิ่งที่ต้องระวังก็เช่น แอพต้องเสถียรไม่ crash ง่ายๆ, ต้อง handle กรณีเกิดข้อผิดพลาดต่างๆ ได้ดี ไม่ใช่เก็บเงียบหรืแอพเด้ง, ถ้าแอพต้องใช้ Internet แต่มือถือไม่สามารถต่อได้ แอพก็ควรทำงานต่อได้และแจ้งให้ผู้ใช้ทราบว่าเกิดข้อผิดพลาดอะไร ฯลฯ

เราทดสอบแอพ Wongnai v1.0 เป็นอย่างดีจนมั่นใจว่าไม่น่าพลาด แต่แล้วก็ไม่รอด!

Submit ครั้งแรกก็โดน Reject ซะแล้ว

Submit ครั้งแรกก็โดน Reject ซะแล้ว

ภาพนี้เป็นตราบาปมากเพราะเป็นการโดน Reject ครั้งเดียวในชีวิต  แต่ที่ไม่มีทางลืมเลยคือเหตุผลที่ได้กลับมาจากคนรีวิว เพราะเค้าบอกเหตุผลมาว่า มีหน้านึงในแอพที่ปุ่ม Search ไปบังโลโก้ของ Google บน Google Maps  เห้ย! ตรวจเข้มขนาดนี้เลยหรอเนี่ย มีห่วง  branding ของ Google ด้วย   จำได้เลยว่าผมลองเล่นแอพดังๆ ของต่างประเทศก็เห็นมี view ไปบังโลโก้ Google บนแผนที่ตั้งหลายแอพ แต่แอพพวกนั้นก็สามารถอยู่บน App Store ได้

สุดท้ายก็ยอมย้ายตำแหน่งปุ่มไม่ให้ทับโลโก้ Google ไป ไม่อยากเสี่ยง submit ไปใหม่โดยไม่แก้กลับไป … แล้วในที่สุดแอพก็ผ่านขึ้นไปอยู่บน App Store ได้สมใจ ฮูเร่!

ก่อนหน้านี้ไม่มีหมวด Food & Travel แอพ Wongnai เลยต้องอยู่หมวด Travel

ก่อนหน้านี้ไม่มีหมวด Food & Drink แอพ Wongnai เลยต้องอยู่หมวด Travel

แอพ Wongnai แรกสุดใช้หมวด Travel เป็น Primary category จนกระทั่งกลางปี 2012 แอปเปิ้ลเพิ่มหมวด Food & Drink เข้ามาซึ่งตรงกับประเภทแอพเรามากกว่า เราก็ย้ายมาหมวด Food & Drink ทันที

 

Wongnai for iOS v1.0

คิดว่าหลายๆ คนน่าจะไม่ทันเห็นหน้าตาแอพ Wongnai เวอร์ชั่นแรกสุด  ขนาดว่าผมเองยังลืมไปแล้ว ยังดีที่มีเก็บภาพ screenshot ไว้บ้างใน dropbox (ช่วง version แรกๆ ลืมเก็บไว้ใน source control)

blog นี้เรียกได้ว่าเอาผลงานสมัยโน้นที่ยังประสบการณ์น้อยมาโชว์ให้ตัวเองอายกันเลย ฮ่าๆ เพราะ UI/UX ของแอพที่ออกไป ถ้าเอามาปล่อยตอนนี้นี่ ดับแน่นอน คนคงไม่ทนใช้ แต่ความโชคดีคือ เมื่อ 5 ปีที่แล้วไม่มีแอพลักษณะนี้เลยในไทย,  design principle สำหรับ mobile app ก็ยังไม่เกิด ทำให้ user ไม่ได้เอาไปเปรียบเทียบกับแอพอื่น

ถ้าให้วิจารณ์ตอนนี้ก็คงต้องบอกว่า​ design ได้ไม่มีรสนิยมเอาซะเลย ใช้สีมั่วไปหมด ซึ่งก็ต้องยอมรับครับ เพราะว่าตอนนั้นไม่มีเวลามาช่วยกันคิดเรื่อง design เลย ขอแค่ให้มันตอบโจทย์การใช้งานอย่างเดียว  แต่ก็ต้องบอกครับว่าด้วยแอพที่หน้าตาไม่สวยนี้แหละที่เป็นสิ่งที่ทำให้คนรู้จัก Wongnai เพิ่มขึ้นอย่างมากอีกช่องทางนึงในตอนนั้น

มาดูกันครับว่าหน้าตาเวอร์ชั่นแรกมันเป็นยังไง

หน้าแรกของแอพ Wongnai v1.0

หน้าแรกของแอพ Wongnai v1.0

Filter ร้านอาหารตามเงื่อนไขได้

Filter ร้านอาหารตามเงื่อนไขได้

เปิดดูหน้าร้านอาหารจะหน้าตาเป็นแบบนี้

เปิดดูหน้าร้านอาหารจะหน้าตาเป็นแบบนี้

หน้าเขียนรีวิว และให้ดาว

หน้าเขียนรีวิว และให้ดาว

Bookmark ร้านกับ Share ไป Facebook/Twitter ได้

Bookmark ร้านกับ Share ไป Facebook/Twitter ได้

หน้า landing ของผู้ใช้

หน้า landing ของผู้ใช้

หน้า Feed ในตำนาน (ไม่แสดงรูปอะไรเลยที่เกี่ยวกับรีวิว ฮ่าๆ)

หน้า Feed ในอดีตที่ไม่รู้จักจัดลำดับความสำคัญของข้อมูลที่แสดงเลย รูปในรีวิวก็ไม่เอามาแสดง (น่าอายมาก)

อันนี้เป็นหน้าไว้อ่าน Articles ที่เขียนโดยทีมงาน (alignment มั่วอีกแล้ว ฮ่าๆ)

อันนี้เป็นหน้าไว้อ่าน Articles ที่เขียนโดยทีมงาน (alignment มั่วอีก ฮ่าๆ)

ไอคอนของแอพ Wongnai for iOS v1.0 (อยากรู้ครับว่าใครทันเห็นแอพตอนที่ใช้ icon นี้บ้าง :D)

ไอคอนของแอพ Wongnai for iOS v1.0

ตอนผมรื้อหาไฟล์มาโพสใน blog นี้ค่อนข้างอึ้งว่าเราผ่านช่วงเวลานั้นมาได้ยังไง มาไกลมากตั้งแต่แอพเวอร์ชั่น 1.0 ที่อยู่ในสมัย iOS 3 (สมัยนั้นต้องเรียกว่า iPhone OS 3.0) จนมาถึงเวอร์ชั่นล่าสุด v5.0.1 ในสมัย iOS 9 ล่าสุด  หน้าตาแอพเปลี่ยนไปมาก ฟีเจอร์เพิ่มใหม่ตลอด 5 ปีที่ผ่านมา นับจนถึงวันที่เขียน blog นี้ เราออกอัพเดทไปทั้งหมด 62 versions โดยระยะห่างแต่ละ version จะเฉลี่ยประมาณ 1 เดือน

โชคดีที่จริงจังกับการเขียน changelog ของแต่ละ version  จะไม่เขียนแค่ว่า bug fixes ห้วนๆ จะเขียนบอกไว้ทุก update ว่ามีอะไรใหม่ ทั้งภาษาไทยและอังกฤษ พร้อมกับเก็บ changelog ไว้ใน source control ตลอด  ตอนนี้เลยตามอ่านย้อนกลับไปได้ง่ายว่า What’s New ที่ขึ้นไปบน App Store แต่ละ version เขียนอะไรไปบ้าง

 

ไม่ได้ใช้ iTunes account ของบริษัทตั้งแต่แรก

หลังจากแอพเวอร์ชั่น 1.0 เสร็จตามที่พอใจ พร้อมที่จะ submit ขึ้น App Store เราก็เริ่มสมัคร iTunes account เพื่อ submit app ขึ้น App Store พร้อมๆ ไปกับการมาไล่ดูโค้ดและ refactor โค้ดที่ได้มา

ปกติการสมัคร Developer Program แบบ Corporate จะต้องมีการส่งเอกสารหลายอย่างเพื่อยืนยันว่ามีบริษัทอยู่จริงในไทย ทำให้ต้องเสียเวลาเยอะ อย่างน้อยก็ 2 อาทิตย์ แต่เนื่องจากเราจะมีงานเปิดตัวเว็บ Wongnai.com อย่างเป็นทางการช่วงต้นเดือนธันวาคม 2010 แอพบน iPhone จะต้องไปอยู่บน App Store ให้ทันเวลาก่อนงานให้ได้   ทำให้เราตัดสินใจใช้ account แบบ Individual ที่สามารถสมัครแล้ว submit app ได้เลยไปก่อน โดยใช้ชื่อผมเองสมัครไปตอนนั้น  เลยเป็นที่มาว่าชื่อเจ้าของแอพ Wongnai ช่วงแรกเป็น Pattrawoot Suesatayasilp ไม่ใช่ชื่อบริษัท Wongnai Media Co., Ltd. อย่างตอนนี้

หลังจากนั้นเปิดตัวทั้งเว็บและแอพไป เราพยายามคิดหาวิธีเปลี่ยนจาก Individual เป็น Corporate account แต่ก็หาวิธีดีๆ ไม่ได้  โทรติดต่อไปแอปเปิ้ล ก็ได้คำตอบกลับมาว่าเราต้อง submit แอพด้วย account ใหม่ ซึ่งเป็นวิธีที่ไม่สามารถรับได้ เพราะว่าอันดับแอพเราอยู่อันดับต้นๆ ในหมวด Travel อยู่   ถ้า submit ใหม่แสดงว่าเราต้องหาทางโปรโมตแอพใหม่ ซึ่งเสี่ยงมาก ไม่รู้ว่าจะได้อันดับดีมั้ย แถมจะเป็นการไปบังคับให้ user ที่เคยโหลดไปแล้วต้องโหลดใหม่อีก

แอพ Wongnai อยู่ใน iTunes account ชื่อผมอยู่ประมาณเกือบ 3 ปีได้ จนกระทั่งวันที่ 11 มิ.ย. 2013  iTunes Connect มี feature ใหม่ที่ให้ผู้พัฒนาสามารถโอนย้าย ownership ได้ด้วยตัวเอง ไม่ต้องติดต่อแอปเปิ้ลให้ยุ่งยาก และเราก็เปลี่ยนทันทีตั้งแต่วันแรก

แชร์ให้นักพัฒนาแอพท่านอื่นทราบนิดนึงว่าหลังจากเปลี่ยน ownership ​  พวก stats ต่างๆ ก่อนเปลี่ยน ownership  จะไม่ได้ย้ายไปยัง account ใหม่ด้วยนะครับ แต่จะเริ่มนับใหม่หมด

 

เรื่องแอพบน iOS ยังอีกยาว

ประวัติเกี่ยวกับแอพ Wongnai บน iOS ยังมีอีกหลายเรื่องที่ยังไม่ได้เขียนถึง แต่คิดว่าควรแบ่งออกไปอีกตอนนึงจะดีกว่า  สำหรับตอนต่อไปผมจะเปลี่ยนไปเล่าถึงเหล่าเด็กฝึกงานที่เคยมาฝึกงานที่ Wongnai และงานที่ได้รับมอบหมายให้ทำเท่าที่สามารถเล่าให้ฟังได้ดีกว่า แล้วค่อยกลับมาเล่าเส้นทางของแอพบน iOS กันต่อ

 

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

เดินเครื่องด้วยกองกำลัง part-time กับอาวุธต่างๆ

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

 

Wongnai ไม่ใช่ชื่อแรกและชื่อเดียว

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

แน่นอนว่าเรื่องชื่อคิดกันไม่ได้ง่ายๆ เพราะเราอยากได้ขื่อที่มันดูเก๋ สะกดไม่ยาก ติดหูได้ง่าย และที่สำคัญคือ domain ที่เป็น .com ต้องยังว่างอยู่ด้วย ชื่อที่ผมพอจำได้ที่ถูกยกขึ้นมาให้เลือกก็มีไม่เยอะเท่าไหร่   ตอนแรกก็พยายามคิดคำที่เกี่ยวข้องกับการกินไว้ก่อน เช่น อร่อย, หิว, ฯลฯ ซึ่งผมจำไม่ได้แล้วว่าคิดชื่ออะไรกันไว้บ้าง แต่ 2 คำที่ค่อนข้างโดนสุดคือ
– Longpoong (ลงพุง)
– Wongnai (วงใน)

ชื่อ “ลงพุง” ฟังดูน่ารักดีครับ ฟังครั้งแรกผมก็ชอบ แต่ก็ออกไปทาง negative นิดๆ และความหมายมันค่อนข้างแคบด้วย ใช้ได้แค่เรื่องกินอย่างเดียว  แต่คำว่า “วงใน” (Wongnai) ถึงความขี้เล่นของคำอาจจะน้อยลงกว่า แต่ความหมายใช้ได้กว้างกว่า และที่สำคัญที่สุดคือมันรับกับเป้าหมายระยะยาวที่เราตั้งใจไว้ตั้งแต่แรกเริ่มเลยว่าอยากให้เว็บนี้ไม่ได้จำกัดแค่ร้านอาหารอย่างเดียว แต่เราอยากจะให้เป็นเว็บที่รวบรวมข้อมูล/รีวิวทุกประเภทธุรกิจ เอาให้ครบทุกหมวด

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

(ตลกดีที่ผมเจอรุ่นพี่คนนึงมาบอกว่า มีคนที่ใช้แอพ Wongnai ประจำแต่เรียกชื่อแอพว่า “วังน้อย” (Wangnoi) มาตลอด! แถมบอกว่าชื่อแปลกดี ผมนี่อึ้งเลย ฮ่าๆ  เดาว่าเพื่อนเค้าคงอ่านชื่อจากการดู logo ที่ตัวอักษร o กับตัว a ค่อนข้างคล้ายกัน)

โลโก้ Wongnai แรกสุดๆ ยังไม่มีรูปช้อนส้อมโผล่มา

โลโก้ Wongnai แรกสุดที่ใช้ สมัยที่ยังไม่มีรูปช้อนส้อมโผล่มา

 

ทำงานแบบไม่ต้องเจอหน้ากัน มีวินัยในการแบ่งเวลากันเอาเอง

เป็นความท้าทายอย่างหนึ่งที่ต้องสร้างเว็บขนาดใหญ่ที่ต้องอาศัยความร่วมมือกันมาก แต่ทุกคนคงไม่สามารถคุยกันแบบเห็นหน้าได้บ่อยๆ เพราะแต่ละคนก็ยังมีงานประจำต้องทำทุกวัน แล้วไม่ได้อยู่บริษัทเดียวกันด้วย แถมยอด คนที่น่าจะบอก requirement ได้ดีที่สุดก็อยู่คนละประเทศอีก แต่ project ต้องเดินหน้าแล้ว ทีม dev ก็ต้องเริ่มโค้ด  โชคดีที่เครื่องมือ online มีให้ใช้อยู่เยอะ เราก็เลยต้อง setup ทุกอย่างให้เป็นแบบ online ให้หมด

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

เราประชุมกันทุกวันอาทิตย์ตอน 10 โมงเช้าผ่าน Skype โดยยอดก็ Skype เข้ามาด้วย ประชุมแต่ละครั้งก็จะดู progress ของงานแต่ละ week   วางแผนสิ่งที่ต้องทำ sprint ต่อไป รวมถึงอัพเดทข่าวสารต่างๆ ว่าตอนนี้ตลาดเป็นยังไงบ้าง มีอะไรน่ากังวล มีคู่แข่งโผล่มามั้ย หรือใครมีไอเดียหรือเจออะไรที่เกี่ยวข้องกับโปรเจคที่เรากำลังทำอยู่ก็จะมาแชร์กันตลอด

รวมเวลาทั้งหมดประมาณ 6-7 เดือน สำหรับการใช้ชีวิต part-time แบบนี้ ก่อนเว็บเวอร์ชั่น beta จะเปิดให้ใช้งานได้จริง  โดยในระหว่างช่วงเวลานี้นอกจากจะมีกองกำลัง part-time หลัก 3 คนแล้ว ก็ยังมีทั้งเด็กฝึกงานและเพื่อนๆ ในบริษัทเก่าที่เราเคยทำงานกัน แล้วเราก็ไปชวนมาทำ part-time ด้วย (เช่น รุ่นน้องที่วิศวะจุฬา และเพื่อนบอยเอสที่ DST) ถ้านับแล้วก็หลายคนอยู่ครับ น่าจะประมาณ 5 คนได้ (เดี๋ยวตอนที่เล่าถึงช่วงทำเว็บ คิดว่าน่าจะได้พูดถึง part-time หลายๆ คนที่ผ่านมาครับ)

แต่ถ้านับเฉพาะชั่วโมงการทำงานของ 3 คนหลักแล้วก็ประมาณ (3 คน) x (คนะละ 20 ชั่วโมงต่อสัปดาห์) x (26 สัปดาห์) = 1,560 ชั่วโมง

 

เครื่องมือ เครื่องมือ เครื่องมือ (ในช่วงแรก)

  • Google Wave เป็นเครื่องมือแรกสุดเลยที่ใช้ และเป็นเครื่องมือที่ผมว่าดีสุดแล้วในการ brainstorm กัน  เราใช้ Wave ในการจดไอเดียต่างๆ ที่คิดขึ้นได้ อยากให้เว็บทำอะไรได้บ้าง อยากแปะ reference อะไรก็แปะลงไป ชอบตรงที่มัน comment ได้ง่ายๆ ที่ตำแหน่งไหนของ conversation ได้เลย  เสียดายที่ Google ฆ่า Wave ไปซะแล้ว ถึงจะมี Google Doc มาแล้ว แต่ลักษณะการใช้งานมันก็ไม่ใช่อยู่ดี

Google Wave

  • Skype ใช้ประชุมกันทุกเช้าวันอาทิตย์ตอน 10 โมงเช้า(เวลาไทย) ประชุมกันทั้ง 4 คน (ผม บอยเอส ป่าน และยอดที่อยู่ที่อเมริกา) ประชุมแต่ละครั้งประมาณ 2 ชั่วโมงกว่า เสียงตะกุกตะกัก ขาดๆ หายๆ ระหว่างประชุมเป็นประจำ แล้วแต่ช่วงว่าตอนนั้นเน็ตบ้านใครกำลังย่ำแย่ … จำได้ว่าช่วงนั้นผมไม่เคยได้กินข้าวเช้าวันอาทิตย์เลย ตื่นจากเตียงมาปุ๊ปก็คุย Skype เป็นอย่างแรกแล้วลากยาวไปถึงเที่ยง ฮ่าๆ [ปัจจุบันไม่ใช้แล้ว เพราะคุยกันในออฟฟิศแทน ยกเว้นจะจำเป็น]
  • ใช้เครื่อง iMac ของป่านที่อยู่ที่บ้านทำเป็น dev server  ถ้าจำไม่ผิด เวลาเครื่องมีปัญหาแล้วจำเป็นต้อง restart ถ้าเกิดป่านไม่อยู่บ้าน ก็ต้องรบกวนให้คนที่บ้านป่านช่วย restart เครื่องให้ตลอด
  • DDNS ของ dyndns.org ระหว่างสร้างเว็บอยู่เราไม่ได้เสียเงินค่า hosting ที่ไหน เพราะยังไม่จำเป็นก็เลยใช้ DDNS นี่แหละ ลดค่าใช้จ่ายที่ยังไม่จำเป็นไว้ก่อน
  • Google Talk (หรือที่กลายมาเป็น Google Hangout ในปัจจุบัน) ขาดไม่ได้เลย เพราะใช้คุยทุกอย่างจริงๆ  ส่วนมากจะเป็น 1:1

Google Talk

  • JIRA เอาไว้จัดการ/วางแผน project … ใช้อยู่ประมาณเกือบสองปีได้ แล้วก็เปลี่ยนมาใช้ Asana แทน เพราะ minimal กว่ามาก คล่องตัวดี
  • ช่วง plan งานในแต่ละ sprint ก็อาศัยให้เว็บ Planning Pocker มานั่งเล่น poker กัน … อย่างที่บอกครับแทบไม่เจอหน้ากัน เราก็ต้องใช้ tool ที่ไม่ต้องเจอหน้ากันด้วย 😛
  • Dropbox ส่วนใหญ่จะใช้แชร์ไฟล์ที่เกี่ยวกับ graphics ที่ต้องใช้ทุกอย่าง เช่น ไฟล์ logo, draft web design, icon
  • SVN (Subversion) ใช้เก็บ source code [ปัจจุบันใช้ Git]
  • Hudson สำหรับ Continuous Integration แล้วก็เปลี่ยนมาใช้ Jenkins ในตลอดหลัง
  • Sonar ถูกนำมาใช้ตั้งแต่ผ่านไปเดือนกว่าๆ ได้ เพราะต้องการทำให้ code quality มันดีขึ้น ก็ต้องเอา tool มาช่วยควบคุมกันหน่อย

 

Backend เขียนด้วยภาษาอะไร

อาจจะไม่เกี่ยวกับ blog นี้เท่าไหร่แต่ขอแทรกหัวข้อนี้นิดนึงแล้วกัน เพราะค่อนข้างโดนถามบ่อยว่า backend ของ Wongnai เขียนด้วยภาษาอะไร คำตอบคือ Java ครับ ตอนเริ่มจำได้ว่าตอนนั้นแทบไม่ได้มองของใหม่ๆ ที่กำลังฮิตอย่าง Ruby on Rails, Node.js หรือพวก PHP เลย เราดูแต่ความพร้อมเป็นหลักมากกว่า

Java

แต่ละคนมี background และประสบการณ์แตกต่างกัน ก็ต้องมีการจูนและตกลงกันหน่อยว่าจะใช้เทคโนโลยีอะไรในการพัฒนา พร้อมกับแชร์กันว่าใครมีประสบการณ์การใช้อะไรมาก่อน ถ้าคิดว่าน่าเอามาใช้ก็เอามาบอก (ส่วนใหญ่บอยเอสจะเป็นคนนำของดีๆ มาบอกให้อ่าน ให้ใช้)

บอยเอส ถนัด Java เป็นหลักเพราะงานประจำตอนนั้นใช้ Java ซะส่วนใหญ่แต่ภาษาอื่นๆ ก็เซียนด้วย  ป่านในตอนนั้นจะถนัด .NET/SQL อยู่ซึ่งก็ใกล้เคียงกับ Java มาก ส่วนผมก็จะเป็น C/C++ และ Java จากที่ต้องใช้ในงานประจำที่ผ่านๆ มา

ประสบการณ์ที่เหมือนกันคือประสบการณ์กับภาษาที่เป็น Type-safe / OOP / และไม่ใช่ scripting … Java เลยเป็นตัวเลือกที่ทุกคนน่าจะพร้อมใช้สุด เพราะไม่ต้องศึกษาอะไรใหม่มาก เคยใช้มาก่อนแล้วไม่ว่าจะตอนเรียนหรือตอนทำงาน เครื่องมือในการพัฒนาที่ค่อนข้างพร้อม ไม่ต้องเสียเงิน และทำงานบน OS ที่ไม่ต้องเสียเงินได้ดี … แต่สรุปเหตุผลทั้งหมดทั้งมวลแล้วก็คือ เราเลือกสิ่งที่เราสามารถเริ่มลุยงานกันได้ในทันที! ต้องพร้อมทั้งของที่จะใช้และพร้อมทั้งคนด้วย

 

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

ครบทีมพร้อมลุย!

เกือบเที่ยงคืนวันจันทร์ที่ 28 ธ.ค. 2552  ใน Inbox ของ Gmail มี email จากยอดโผล่ขึ้นมา ในเมล์ไม่ได้เขียนบอกอะไรเลยนอกจากถามว่าพรุ่งนี้อยู่ที่ออฟฟิศมั้ย เลยคิดว่าคงแวะเข้ามาทักทายเพื่อนๆ พี่ๆ ที่เคยทำงานด้วยเฉยๆ

จริงๆ ย้อนกลับไปอ่านแล้วก็งงเหมือนกันว่าทำไมทักมาทางเมล์  ไม่ทักมาใน Facebook เพราะก่อนหน้านั้นก็ทักทายกันบน Facebook อยู่เรื่อยๆ ช่วงที่ยังเรียนอยู่กับตอนเรียนจบใหม่ๆ แต่ยังหางานที่โน่นไม่ได้  (ระหว่างเขียน blog นี้อยู่นึกขึ้นได้ว่ายอดเคยทักมาใน Facebook ครั้งนึง ชวนให้ไปทำงานกับ startup ที่ยอดกำลังจะทำหรือทำอยู่นี่แหละ แต่ว่าตอนนั้นไม่ได้ตกลง)

บ่ายวันอังคารที่ 29 ธ.ค. ยอดแวะมาที่โต๊ะที่ทำงานแล้วก็เริ่มเล่าให้ฟังว่ามีไอเดียอยากจะสร้างเว็บแบบ Yelp.com อยากจะชวนมาทำกัน พร้อมกับอธิบายเหตุผลด้วยว่าทำไมเราควรจะต้องสร้างตั้งแต่ตอนนั้น  ตัวอย่างเหตุผลก็เช่น ในไทยไม่มีเว็บแบบนี้หรือถึงมีก็ยังไม่ดังหรือไม่ใช่แบบที่ต้องการ, เทคโนโลยีกำลังมา (มือถือที่มี GPS กำลังมา อย่างเช่น iPhone)  แต่สรุปง่ายๆ คือวันนั้นยอดมา pitch idea เพื่อ recruit เข้าร่วมทีมนี่เอง!

Yelp.com เป็นเว็บนึงที่เด็กไทยที่ไปเรียนที่อเมริกาน่าจะเคยใช้กันเวลาอยากหาร้านอาหารดีๆ  ยอดเลยไม่ต้องเสียเวลาอธิบายว่าเว็บนี้มันทำงานยังไงเพราะผมเองใช้ประจำ ที่น่าสนใจคือตอนนั้นถ้าอยากรู้ข้อมูลร้านอย่างละเอียดผมจะเปิด Yelp ก่อนเลย (ไม่ใช่ Google) เพราะรู้ว่าถ้าหาใน Google แล้วก็จะกด link ที่เป็น Yelp.com อยู่ดี (ระบบ search ในเว็บ Yelp เองก็ดีมากพอแล้ว)

วันนั้นคุยกันไม่นานเท่าไหร่เพราะอยู่ในช่วงเวลางาน แต่สิ่งที่สรุปได้คือ ผมตกลงเอาด้วย แล้วก็เริ่มคิดกันต่อเลยว่าต้องหาคนร่วมทีมเพิ่ม และชื่อเพื่อนสมัยเรียนคนแรกที่ถูกพูดถึงก่อนเลยคือ บอย ศุภฤทธิ์ เพราะเป็นเพื่อนรุ่นเดียวกันที่ยังเขียนโค้ดอยู่และเป็นที่รู้กันในเพื่อนวิศวฯ คอม จุฬา (CP27) ว่าเป็นเทพคนนึงในรุ่น (เพื่อไม่ให้สับสนกับการเรียกชื่อ บอย 2 คน ขอชื่อแบบเดียวกับที่เรียกในบริษัทแล้วกัน  บอย ศุภฤทธิ์ เราจะเรียกว่า บอยเอส แล้วก็เรียกตัวผมเองว่า บอยพี)

จำได้ว่าตอนนั้นบอกยอดไปว่าถ้าชวนบอยเอสมาร่วมทีมได้จะเยี่ยมมาก ทีมจะแข็งแกร่งขึ้นสุดๆ  ซึ่งแน่นอนว่างานนี้ต้องยอดที่เป็นเพื่อนกันตั้งแต่อัสสัมฯ ไปชวนเท่านั้น และยอดก็รับหน้าที่นี้ไป (ตอนนั้น บอยเอส ทำงานอยู่ที่ DST)

ดึกของวันเดียวกัน ยอดส่งเมล์หาทุกคนที่ได้คุยและชักชวนให้มาร่วมทีมในวันนั้น สรุปถึงสิ่งที่เรากำลังจะสร้าง, เครื่องมือที่จะใช้คุยกันระดมสมองกันอย่าง Google Wave, Dropbox  พร้อมกับส่ง resume ของตัวเองให้ทุกคนอ่าน จากนั้นคนอื่นๆ ก็ส่งตามๆ กันมาเพื่อเป็นการแนะนำตัวเองให้รู้จัก background ของแต่ละคน (ตอนนี้มีพี่รุตม์กับปุ๊เพื่อนยอดที่ไม่ได้เป็นสาย technical มาอยู่ในทีมด้วยเรียบร้อย)

Welcome on Board

Welcome on Board

วันรุ่งขึ้นยอดต้องบินกลับไปเรียนต่ออีกหนึ่งเทอม ช่วงเดือนมกรามีเว้นช่วงไปพักนึง แล้วยอดก็กลับมาอัพเดทข่าวว่าได้เริ่มทาบทามบอย ศุภฤทธิ์ เรียบร้อยแล้วเหลือรอแค่คำตอบ (วันพุธที่ 10 ก.พ. 2553)  ซึ่งข่าวดีก็มาในวันต่อมาครับ ยอดส่งเมล์มาบอกผมว่าได้ชวน บอยมาร่วมทีมได้แล้ว เยี่ยมเลย แถมในวันเดียวกันก็ได้ ป่าน วรวีย์ คนที่มีประสบการณ์เขียนเว็บมากกว่าคนอื่นในทีมมาร่วมทีมด้วยอีกคน เย่!  ถึงตอนนี้สำหรับทีม dev ต้องเรียกว่า Full team ของจริง!

หลุยส์ - บอยเอส - ปุ๊ - พี่รุตม์ - ป่าน - บอยพี - ยอด (เรียงจากหลังมาหน้า ซ้ายไปขวา)

หลุยส์ – บอยเอส – ปุ๊ – พี่รุตม์ – ป่าน – บอยพี – ยอด (เรียงจากหลังมาหน้า ซ้ายไปขวา)

ลองแสดงความสัมพันธ์ระหว่างสมาชิกแรกเริ่มให้ดูเล่นๆ ครับ

  • ผม ยอด ป่าน บอยเอส เป็นวิศวะจุฬา Intania 84 (วิศวะฯ คอม CP27)
  • ผม ยอด ป่าน ตอนจบตรีใหม่ๆ เข้าทำงานที่แรกที่เดียวกันคือ Reuters Software (Thailand) Limited
  • ผม ยอด บอยเอส ปุ๊ เรียนอัสสัมบางรักเหมือนกันแต่คนละปี ผมรุ่น AC114   ส่วนยอด บอยเอส ปุ๊ เรียน สพพ. รุ่น 7 ที่จบพร้อมรุ่น 114
  • ยอด พี่รุตม์ ทำงานอยู่ทีมเดียวกันที่รอยเตอร์ และเป็นทีมที่ทำงานร่วมกับทีมที่ผมทำงานอยู่ประจำ นั่งอยู่ชั้นเดียวกัน โซนเดียวกัน
  • ผมกับพี่รุตม์ เล่นดนตรีอยู่ในวงดนตรีเดียวกันที่รอยเตอร์
  • ฯลฯ

หลังจากได้สมาชิกที่เป็น developer ครบตามที่ต้องการก็ได้เวลาเริ่มลงมือสร้างปราสาทที่วาดกันไว้ แต่สำหรับ entry นี้พอแค่นี้ก่อน ใช้พลังในการเรียบเรียงนานมากจริงๆ โคตรเหนื่อย ส่วนเรื่องราวต่อไปน่าจะได้พูดถึงชื่อเว็บที่เคยถูกเสนอขึ้นมาก่อนจะเป็นชื่อ Wongnai, เครื่องมือที่ใช้ระหว่างทำงาน, เหตุการณ์ต่างๆ ระหว่างปั่นเว็บจนถึงวันที่เปิดให้คนใช้เว็บเป็นวันแรก

วันแรกสุดๆ ของตัวเองกับโปรเจคที่มีโค้ดเนมว่า “W” — Gmail “before:2010/01/31″

สองอาทิตย์ก่อน (17 ก.ค. 2558) ที่บริษัทเริ่มโครงการ #WongnaiWeShare (เป็นโครงการภายในบริษัทที่จะให้ leaders มาแชร์ความรู้ให้กับคนในบริษัท เพื่อให้ทุกคนได้เรียนรู้และพัฒนาตัวเองอยู่เรื่อยๆ) ซึ่ง session แรกของยอดเป็นการเล่าประวัติ Wongnai อย่างละเอียด (สองอาทิตย์ก่อนหน้านั้นพี่รุตม์มาสอนประเดิมเรื่องแรกด้วยเรื่อง time management ให้)

หลังจากได้ฟังยอดเล่าประวัติให้น้องๆ ในบริษัทฟังวันนั้น ก็เลยคึกอยากเขียน blog บันทึกเหตุการณ์ของตัวเองตั้งแต่เริ่มต้นรวมถึงแรกเริ่มของ Wongnai ให้เป็นแบบบทความบ้าง เผื่ออนาคตเกิดอยากอ่านเพลินๆ จะได้มีให้อ่าน

อยากเขียนมานานมากแล้วด้วย แต่ผลัดมาเรื่อยจนตอนนี้บริษัทมีอายุครบ 5 ปีเข้าไปแล้วเมื่อไม่กี่อาทิตย์ก่อน (จริงๆ โปรเจค Wongnai เริ่มขึ้นก่อนจดทะเบียนบริษัทเกือบครึ่งปีได้) เลยใช้โอกาสนี้ให้ฮึดเขียนซะเลย ไม่งั้นก็ไม่เริ่มซักที

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

แน่นอนว่าถ้าจะให้ลำดับเนื้อหาถูกต้องทั้งหมด ก็ต้องเริ่มด้วยการหาจุดเริ่มต้นที่ถูกต้องของตัวเองให้ได้ก่อนด้วย!

คำถามแรกที่ต้องหาคำตอบให้ได้

“มันคือวันที่เท่าไหร่เดือนอะไรปีอะไรที่ยอดทักมาเป็นครั้งแรก ก่อนจะเริ่มชวนมาช่วยกันสร้างเว็บ Wongnai?”

เหตุการณ์เดียวที่พอจะทำให้ตามหาคำตอบได้คือ ยอดนัดผมไว้ล่วงหน้า แล้วก็แวะมาคุยที่โต๊ะทำงานผมตอนอยู่ที่ Thomson Reuters ประมาณช่วงต้นปี 2010 อะไรประมาณนั้น

โชคดีที่การคุยแทบทุกครั้งเกิดขึ้นผ่านทาง email กับ chat ของ Google ซึ่งก็รวมถึงข้อความที่ยอดส่งหาผมเพื่อทักทายและนัดคุยครั้งแรกด้วย  แล้วก็โชคดีที่คุยด้วย Google Talk เพราะ Gmail มันค้นหาบทสนทนาเก่าๆ โดยระบุช่วงเวลาได้ง่ายสุดๆ แค่ใส่ว่า “before:YYYY/MM/DD”  ก็หาได้แล้ว จัดไปครับผมค้นหา inbox ตัวเองด้วย “<อีเมล์ยอด> before:2010/01/31” ทันที

gmail-search-textfield

คำสั่งค้นหาคำสั่งเดียวทำให้ได้เห็นบทสนทนาสำคัญทุกช่วงเวลาตั้งแต่เริ่มต้น ผมนั่งอ่าน chat log และ email ที่คุยเรื่องโปรเจค Wongnai ในช่วง 1 ปีแรกไปหลายชั่วโมงเลย ได้ข้อมูลมาไว้เขียน blog พอสมควร ยิ่งอ่านยิ่งมีไฟ ไม่ใช่แค่มีไฟในการเขียนประวัติ แต่มันช่วยเติมไฟในการทำงานในปัจจุบันด้วย เพราะข้อความที่คุยกันในทีมช่วงนั้น พอได้กลับไปอ่านแล้วก็รู้สึกได้ถึงความไฟแรงและความฟิตของทุกคนในทีม (ยอด, บอยพี (ผมเอง), บอยเอส, ป่าน) เราตื่นเต้น เรากระตือรือร้นกันมาก เริ่มทำทุกสิ่งอย่างจากศูนย์ ไม่มีประสบการณ์อย่างจริงกับการ run เว็บที่ผู้ใช้คือใครก็ได้ แล้วก็เป็น user ของเราเองด้วย ไม่ใช่ user ของลูกค้าอีกทีนึง   บางข้อความพอกลับไปอ่านแล้วก็ตลกตัวเองเหมือนกันนะว่าไฟมันจะแรงไปไหน คิดไปนู่นนี่เต็มไปหมด ฮ่าๆ

แต่ที่สำคัญสุดคือการที่ได้เจอคำตอบให้กับตัวเองแล้วว่ายอดส่งเมล์มานัดคุยตอนดึกของวันจันทร์ที่ 28 ธ.ค. 2552  ส่วนวันที่คุยครั้งแรกคือวันอังคารที่ 29 ธ.ค. 2552

will-you-be-at-the-office-tomorrow

ฮูเร่! เริ่มต้นได้แล้ว ต่อไปก็คือภาระที่ต้องเขียนต่อไปอีก ฮ่าๆ  … ยังไม่รู้เลยว่าจะมีรายละเอียดมากน้อยแค่ไหนให้เขียน หรือจะเขียนไปได้ซักกี่โพส แต่ขอตั้งเป้าไว้หน่อยว่าต้องบันทึกเรื่องราวที่ครบถ้วนไว้อ่านในอนาคตได้อย่างน้อยก็ช่วง 365 วันแรก!

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

ปล. ลองเล่น “before:<date>” ใน Gmail ดูครับ ผมว่ามันสนุกดีนะเวลาได้อ่านบทสนทนาในอดีต โดยเฉพาะเวลาเจอข้อความที่เราลืมไปแล้วว่าเคยพูด (ไม่ได้ค้นได้แค่ email นะครับ แต่ chat log ของ Google Talk ก็ได้ด้วย)

ของฝาก(ผู้ช่วย)นักก็อป

กระแสจาก blog ที่แล้วเกิดแรงจนผมงงเหมือนกันว่ามันไปเร็วจริงๆ แฮะ … มีหลายคนบอกว่าอ่านแล้วเพลินดี เหมือนนิยาย (เป็นซะงั้น ฮ่าๆ … แต่ก็ดีครับที่อ่านแล้วไม่เครียดเกินไป)

ก่อนอื่นผมต้องขอ

ขอบคุณสำหรับทุกกำลังใจจากเพื่อนๆ พี่ๆ น้องๆ ทุกคน (โดยเฉพาะ developers ด้วยกันเอง) ที่เห็นด้วยกับสิ่งที่ผมเขียนนะครับ
ขอบคุณเพื่อนๆ ที่เห็นว่าบทความน่าสนใจเลยช่วย retweet/share ไปให้คนอื่นได้อ่าน
ขอบคุณสำหรับคำด่าทุกอันครับ มันทำให้ผมได้เรียนรู้และเข้าใจ mindset ตลอดจนถึงวิธีการคิดของพวกคุณได้เป็นอย่างดีครับ

ทำไมต้องโพสเพิ่มเติมอีก

เนื่องจากมีการตอบโต้มาหลายประเด็นจากคนกลุ่มหนึ่ง / บ้างก็มีคำถามกลับมาด้วย และก็มีการหาว่าผมเงียบไปหลังจากที่เค้าพูด+ถามย้อนกลับมาที่แอพ Wongnai บ้าง … ผมขอตอบก่อนว่า ผมไม่สามารถตามไป search หาทุกเว็บหรือทุก Facebook page ที่อ้างอิงสิ่งที่ผมเขียน แล้วตามไปตอบทุก comment ได้ภายในเวลาที่คุณคาดหวังนะครับ มันเป็นไปไม่ได้

และในเมื่อโดนหาว่าเงียบไป(ซะงั้น)  ผมก็คงอยู่นิ่งไม่ได้ครับ ขอมาร่วมสนุกสนานกันต่อครับ

จากการอ่าน comment (คิดว่าทั้งหมด)จาก blog ส่วนตัวแห่งนี้ และ comment บนโพสที่จ่าช่วย share ให้  ผมรวบรวมประเด็นมาให้เรียบร้อยตามนี้ครับ จะได้ไม่ต้องตอบราย comment

ประเด็นที่ 1: มีคนบอกว่ามันเป็น Basic UI ของ Apple อยู่แล้ว

ถ้าคุณบอกว่า design ต่างๆ ที่ผมนำขึ้นมาชี้ให้เห็นว่ามีการลอกเกิดขึ้น  มันเป็น Basic UI อยู่แล้ว แสดงว่าคุณคงไม่เข้าใจประเด็นที่ผมพูดขึ้นมาเลยครับ

  • การลอก UI ที่เกิดขึ้น มันเกิดที่การวางโครงสร้างของหน้า (layout) หรือเราเรียกมันว่า wireframe ก็ได้ … ไม่ใช่ว่ามีการใช้ Textbox เหมือนกัน, ใช้ดาวเหมือนกัน, หรือใช้ปุ่มเหมือนกัน  แต่ให้ดูองค์ประกอบทุกอย่าง การจัดวางตำแหน่งต่างๆ  ต่างหากที่มีการลอกเกิดขึ้น
  • มีการบอกว่าใน comment มีเขียนไว้ด้วยนะครับว่า “ลองเปิดหนังสือหัดเขียน App ได้เลย ก็ประมาณนี้ทั้งนั้นแหละ” … รบกวนช่วยบอก reference ของหนังสือหน่อยก็ดีครับ เท่าที่ผมเคยเปิดอ่านมาบ้าง เค้าไม่ได้สอนการวาง layout ต่างๆ นะครับ ส่วนใหญ่จะเป็นการสอนเขียนแอพเบื้องต้น สอนให้เขียนภาษา Objective-C มากกว่าครับ
  • เพื่อให้เห็นภาพ ขอยกตัวอย่าง wireframe ที่ทางผม “คิดเอง” และร่างไว้บนกระดาษเวลาจะออกแบบหน้าต่างๆ ก่อนที่จะส่งให้ designer ทำให้มันเป็นรูปเป็นร่างนะครับ (wireframe ของหน้าที่เป็นปัญหา ไม่มี เพราะมันนานซักพักแล้ว ไม่ได้เก็บไว้)
อันนี้เป็น draft หน้าร้านอาหาร

อันนี้เป็น draft หน้าร้านอาหาร

Draft หน้าร้านอาหาร

Draft หน้าร้านอาหาร

หน้าสำหรับ Check-In (หน้านี้ออกแบบได้หลายแบบมากครับ)

หน้าสำหรับ Check-In (หน้านี้ออกแบบได้หลายแบบมากครับ)

กล่องแสดงข้อมูลกล่องเล็กกล่องน้อย [แบบที่ 1] แต่สุดท้ายก็มีไม่ได้ใช้บ้าง

กล่องแสดงข้อมูลกล่องเล็กกล่องน้อย [แบบที่ 1] แต่สุดท้ายก็มีไม่ได้ใช้บ้าง

กล่องแสดงข้อมูลกล่องเล็กกล่องน้อยที่ออกแบบได้ตั้งหลายแบบ แต่สุดท้ายก็มีไม่ได้ใช้บ้าง

กล่องแสดงข้อมูลกล่องเล็กกล่องน้อยที่ออกแบบได้ตั้งหลายแบบ แต่สุดท้ายก็มีไม่ได้ใช้บ้าง

Draft แรกของหน้า Profile ของ User (สำหรับ v3.0) ที่สุดท้ายก็ต้องแก้อีกหลายส่วน

Draft แรกของหน้า Profile ของ User (สำหรับ v3.0) ที่สุดท้ายก็ต้องแก้อีกหลายส่วน

Draft ที่ 2 ของหน้า Profile ของ User ก่อนที่สุดท้ายจะถูกปรับให้เข้าที่โดย Designer อีกที

Draft ที่ 2 ของหน้า Profile ของ User ก่อนที่สุดท้ายจะถูกปรับให้เข้าที่โดย Designer อีกที

ประเด็นที่ 2: หน้าเขียนรีวิว/หน้า Coupon ออกแบบยังไง ก็ต้องได้แบบเดียวกันอยู่แล้ว หน้าจอมันก็เล็กแค่นั้น

ถ้ามันคิดออกมาได้วิธีเดียวจริง แอพรีวิวทุกแอพก็คงต้องหน้าตาเหมือนกันหมดสินะครับ (ถ้าเป็นแบบนั้นจริง ผู้พัฒนาแอพก็คงสบายครับ ไม่ต้องเครียดเลยว่าจะเลือกแบบไหนดีตอนออกแบบ) แต่แปลกดีที่ผมลองโหลดแอพที่มีการให้เขียนรีวิวหรือเขียน Tip มาเพื่อ capture หน้าจอมาให้ดูข้างล่างนี้ เค้าก็มี look & feel + layout ที่ต่างกันออกไปทั้งนั้นแฮะ … หรือคุณมองไม่เห็นความต่างกันของทั้ง look & feel และ layout

Yelp

แอพ Yelp จะไม่มีหน้าเขียนรีวิว มีแต่หน้าเขียน Tip … ถ้าต้องการเขียนรีวิวต้องเขียนผ่าน Web Browser

หน้าเขียน Tip ของ Yelp

หน้าเขียน Tip ของ Yelp

หน้า Coupon ของ Yelp

หน้า Coupon ของ Yelp

Foursquare

Foursquare เท่าที่กดๆ เล่นดู บนมือถือไม่มีหน้าเขียนรีวิว  มีแต่หน้าเขียน Tip

หน้าเขียน Tip ของ Foursquare

หน้าเขียน Tip ของ Foursquare

หน้า Check-in เพื่อรับส่วนลดของ Foursquare ... เสียดายที่ร้านไม่ได้อยู่ใกล้ เลยไม่ได้กด Check-in เพื่อจะได้หน้าผลลัพธ์เพิ่มเติม

หน้า Check-in เพื่อรับส่วนลดของ Foursquare … เสียดายที่ร้านไม่ได้อยู่ใกล้ เลยไม่ได้กด Check-in เพื่อจะได้หน้าผลลัพธ์เพิ่มเติม

Facebook

แอพ Facebook จะให้ rating สถานที่ได้ต้องทำการ Check-In ก่อน  ยกมาให้ดูทั้ง 2 หน้าครับ เป็นหน้าที่ให้เลือกดาว และหน้าไว้เขียน Recommendation

หน้าให้ใส่ Rating ของ Facebook

หน้าให้ใส่ Rating ของ Facebook

ถ้าเขียน Recommendation ของ Facebook

ถ้าเขียน Recommendation ของ Facebook

Foody (Vietnam)

มาดูแอพที่พัฒนาโดยประเทศในเอเชียเราบ้างครับ

หน้าเขียนรีวิวของ Foody

หน้าเขียนรีวิวของ Foody

หน้า Coupon ส่วนลดของ Foody (ใช้เป็น WebView มั้ง)

หน้า Coupon ส่วนลดของ Foody (ใช้เป็น WebView มั้ง)

HungryGoWhere (Singapore)

มาดูอีกรายใหญ่ที่สิงคโปร์กันบ้าง อันนี้ค่อนข้างต่างเลย

หน้าเขียนรีวิวของ HungryGoWhere

หน้าเขียนรีวิวของ HungryGoWhere

คิดว่าน่าจะยกตัวอย่างมาให้เปรียบเทียบเพียงพอนะครับ ถ้าอยากเห็นตัวอย่างเพิ่ม ผมจะหามาให้เพิ่มครับ

ไม่พูดถึงแอพ Wongnai คงไม่ได้ครับ  แอพ Wongnai ออก update มาเป็นน่าจะประมาณ 10 กว่า version ครับ  การอัพเดทแต่ละครั้งจะมีการปรับแก้ UI แต่ละหน้าไปเรื่อยๆ (ถ้าเกิดคิดวิธีใหม่และคิดว่าดีกว่าของเก่าออก) ซึ่งรวมถึงหน้าเขียนรีวิวนี้  ถ้าผมจำไม่ผิด หน้าเขียนรีวิวจะเปลี่ยนไป  3-4 รอบครับ จนถึงอันล่าสุด (เมื่อ 3 เดือนที่แล้ว)  design หน้าเขียนรีวิวก็เปลี่ยนใหม่ไปแล้วตรงส่วนที่ไว้ใส่รูปภาพตามนี้

หน้าเขียนรีวิวของ Wongnai ตั้งแต่ v3.0 เป็นต้นมา

หน้าเขียนรีวิวของ Wongnai ตั้งแต่ v3.0 เป็นต้นมา

เห็น screenshots ทั้งหมดนี้แล้ว ผมว่าน่าจะเห็นภาพนะครับว่าหน้าเขียนรีวิว มันสามารถออกแบบได้หลายแบบครับ ไม่ใช่ออกแบบยังไงก็ได้แบบเดียวกัน

การที่เขียนหน้ารีวิวของแอพ “ลอกเค้า…สนุกจังเลย” มาเหมือนกับเขียนหน้ารีวิวของวงใน ทั้งๆ ที่แอพอื่นๆทั้งหมด ไม่ได้มีหน้าตาเหมือนกันเลย คิดว่าบังเอิญหรือตั้งใจครับ?

ประเด็นที่ 3: เรื่องจุดเหมือนเล็กๆ

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

ประเด็นที่ 4: พูดกันเยอะเรื่อง Yelp

มีคน comment ว่า Wongnai ก็เอาไอเดียมาจาก Yelp ที่อเมริกามาเหมือนกันนั่นแหละ ผมขอแยกตอบเป็น 2 ประเด็นย่อย

5.1 เรื่อง idea ของเว็บรีวิวร้านอาหารที่เหมือนกัน ข้อนี้ตอบง่ายสุดๆ เลย

  • เริ่มจากการตั้งคำถามๆ นึงครับ “ถ้าประเทศลุงแซมเค้าเปิดร้านขาย Burger ขึ้นมา … แล้วคนไทยเราอยากให้มีในไทย ก็เลยเปิดร้านขาย Burger ขึ้นมาบ้าง  แบบนี้คุณคิดว่าเป็นสิ่งที่ไม่ถูกต้องรึเปล่า?”  ถ้าคุณตอบว่าไม่ถูกต้อง  คุณก็ไม่ต้องอ่าน blog นี้ต่อครับ  เกินเยียวยาครับ
  • การที่มีแต่ละประเทศมีเว็บ/แอพรูปแบบต่างๆ ที่เหมือนกับที่เมืองลุงแซมมี เป็นของตัวเอง มันแปลกยังไงครับ … Concept/Idea ของการทำธุรกิจมันเหมือนกันเป็นเรื่องปกติครับ  แต่การ implement เหมือนกันนี่สิที่ไม่ปกติ … มันต้องคิดของใครของมันครับ ไม่ใช่ลอกกัน
    • เว็บรีวิวร้านอาหาร
      • Yelp (US)
      • Citysearch (US)
      • Kakaku (Japan)
      • Tabelog (Japan)
      • Foody (Vietnam)
      • HungryGoWhere (Singapore)
    • แอพ Chat
      • WhatsApp
      • Line (Japan)
      • Kakao Talk (Korea)
      • วี แชท (China)
  • ทีม Wongnai ไม่เคยบอกว่าเราคิดค้นเว็บแนวนี้ขึ้นมาใหม่ แต่กลับกันครับ เราบอกเสมอครับ น่าจะแทบทุกครั้งที่มีการออกสื่อ รวมถึงวันแถลงข่าววันแรกของการเปิดตัวเว็บ Wongnai.com ว่าเรามี role model มาจาก Yelp.com เนื่องจากส่วนหนึ่งของผู้ก่อตั้ง Wongnai (รวมถึงผม) เคยใช้ Yelp เป็นประจำในช่วงที่มีโอกาสได้ไปเรียนที่เมืองลุงแซม  และเราเห็นว่าเป็นเว็บที่มีประโยชน์มาก แต่ในไทยก็ไม่มีเว็บประเภทนี้เลย (หรือมีแต่ไม่รู้จัก ณ เวลานั้น)  ก็อยากจะทำขึ้นมาให้คนไทยได้ใช้กัน
  • ถ้าทุกคนต้องใช้เว็บนอกกันหมด … เราคงไม่ได้เห็น web ดีๆ ของไทยหลายๆ เว็บที่เราใช้กันอยู่ทุกวันนี้ ที่เค้าทำการพัฒนา/ต่อยอดความคิดให้เว็บนั้นเหมาะสมกับความต้องการของคนไทย

5.2 จาก blog ที่แล้ว ผมเขียนว่า มีการลอก UI design จากแอพ Wongnai ไป ผมไม่ได้กล่าวหาว่าเค้าลอก idea เว็บ Wongnai.com ไปครับ (ผมเขียนไว้ที่ชื่อบทความแล้วว่า “ลอก UI design” ช่วยตั้งใจอ่านนิดนึงครับ … มันอ่านว่า “ยู-ไอ-ดี-ไซน์” และมันคือส่วนหนึ่งของ implementation)

เก็บตกประเด็นเล็กประเด็นน้อย

– มีคนบอกว่าเค้าลอกไปแล้วทำได้สวยกว่า มันเป็นสิ่งที่น่ายกย่องหรอครับ?
– ผมเขียนไว้ตั้งแต่แรกแล้วว่า ผมไม่บอกชื่อแอพ เหตุผลเดียวคือเพราะไม่อยากให้เค้าได้ประโยชน์ไปมาก  เพราะบอกไป คนก็จะตามไปโหลดมาดูกัน สุดท้ายคือเค้าได้ประโยชน์ไป  เอาไว้โม้ตอนขายโฆษณาว่าคนโหลดไปเยอะมากเลย
– [ย้ำอีกรอบ] Design ที่ถูกลอกไป เป็น design เก่าของ Wongnai … ถ้าโหลด Wongnai เวอร์ชั่นปัจจุบันมาเทียบ คงไม่เห็นว่าเหมือน … สิ่งที่ผมจับได้ เพราะผมเป็นผู้พัฒนา  ผมจะย้อนกลับไปดู version เก่าๆ กี่ version ก็ได้ เพื่อ capture หน้าจอมาเปรียบเทียบกัน

ถ้าคุณเป็นผู้พัฒนาแอพ “ลอกเค้า…สนุกจังเลย” แล้วถูกกล่าวหาว่าลอก (แต่ไม่ได้ลอกจริง) คุณจะทำยังไง

เป็นผม คงทนไม่ได้ครับ ต้องรีบออกมาเถียงและชี้แจงด้วยเหตุผล  แต่นี่เงียบ … คุณไม่คิดหรือครับว่าเรื่องที่ผมเอามาจุดประเด็นมันเป็นเรื่องจริง

รบกวนช่วยหาเหตุผลมาตอบ แทนคนสร้างแอพหน่อยครับ ตอบผมแค่ข้อเดียวพอ

คนที่คิดว่ามันไม่มีการลอกเกิดขึ้น ช่วยหาเหตุผลที่แอพ “ลอกเค้า…สนุกจังเลย” เลือกที่จะกำหนดความยาวสูงสุดของของประโยคสรุปรีวิวไว้ที่ 120 ตัวอักษรซึ่งเท่ากับตัวเลขที่แอพ Wongnai ใช้พอดีเป๊ะให้หน่อยครับ

สมมติว่า คุณต้องกำหนดความยาวสูงสุดของตัวอักษรที่จะพิมพ์ได้ในช่องๆ หนึ่ง คุณคิดถึงตัวเลข 120 เป็นตัวเลขแรกหรือไม่ครับ?  ทำไมถึงบังเอิญซ้ำกันได้ ช่วยหาเหตุผลให้หน่อยครับ  … ผมคิดเหตุผลแทนให้เล่นๆ นะครับ สงสัยไปขูดเลขมาจากต้นเดียวกัน หรือไม่ก็เจ้าแม่เจ้าเดียวกันบอกครับ 🙂

ปิดท้าย

หวังว่าคนที่ก่อนหน้านี้ที่คิดว่าไม่มีการลอกเกิดขึ้น น่าจะฉุกคิดอะไรขึ้นมาได้บ้างนะครับหลังจากอ่าน blog นี้  ผมคงไม่หวังว่าคุณจะมาเห็นด้วยกับผมด้วยทั้งหมดหรอกครับ  จากการอ่าน comment ที่คุณเขียนไว้  มันสื่อให้เห็นถึงวิธีการคิดของคุณชัดเจนพอครับ

ปล. ผลจากการแฉ ทำให้แอพเค้าอันดับพุ่งขึ้นมาเชียวเพราะจำนวน download เพิ่มขึ้นคงเยอะ (ได้ free PR ไปเพียบ) … คิดไว้ก่อนแล้วว่าเค้าจะได้ประโยชน์ไประดับนึงจากเหตุการณ์นี้ แต่ก็โอเคครับ แลกกับการได้เตือนให้เค้ารับรู้ว่าผมรู้นะว่าคุณลอกไป

ผลงานของ Startup อย่าง Wongnai โดนลอก UI design ไปโดยบริษัทใหญ่ของไทยที่รักสนุกในการลอก

ขอประจานแอพที่ทำการลอกเลียนแบบผลงาน design ของทางทีมงาน Wongnai ซึ่งผมบังเอิญโชคดีไปเจอเข้าเมื่อวันศุกร์ที่ผ่านมาครับ

ผมเป็นผู้พัฒนาหลักของแอพ Wongnai บน iPhone/iPad ซึ่งเป็นแอพที่ใช้สำหรับค้นหาข้อมูลร้านอาหาร, รีวิวหรือรูปภาพของร้านอาหาร โดยข้อมูลต่างๆ ได้มาจากผู้ใช้เว็บ Wongnai.com ทั้งผ่านหน้าเว็บและแอพบนมือถือครับ

แอพ Wongnai for iOS ถูกพัฒนามาตั้งแต่ปี 2010 (2 ปีกว่าแล้ว) ออกมาก็หลายสิบ version  ถูกโหลดไปก็หลายแสน downloads อยู่  ผมเชื่อว่าผู้ที่ใช้แอพ Wongnai มาตลอดก็จะเห็นการพัฒนาของ app เป็นระยะๆ และจะสามารถเข้าใจ blog นี้ได้เป็นอย่างดี

ไปไงมาไง ทำไมเจอแอพนี้ที่ลอก design แอพ Wongnai?

ปกติผมชอบโหลดแอพต่างๆ มาลองเล่นไปเรื่อยโดยเฉพาะแอพที่อยู่ในตลาดเดียวกัน industry เดียวกัน เพื่อศึกษาดูผู้เล่นทุกเจ้าในตลาดนี้ว่าเป็นยังไงกันบ้างแล้ว แต่การโหลดแอพล่าสุดครั้งนี้กลับพิเศษกว่าครั้งก่อนๆ ครับ  เพราะหลังจากผมลองเล่นแอพนี้แค่ไม่ถึง 5 นาที ก็เจอเข้าเต็มๆ ว่า

***** ผลงาน UI design ของทีมงาน Wongnai (บริษัท Tech Startup ที่ไม่ได้ใหญ่โตอะไรมาก) ได้โดนบริษัทยักษ์ใหญ่แห่งหนึ่งที่เป็นเจ้าของเว็บใหญ่อันดับต้นของประเทศไทย  จงใจลอก design ไปแบบเกินที่จะรับได้(หว่ะ) *****

ตลอดระยะเวลาที่สร้างแอพ Wongnai มา ก็มีเจอการนำ design ไปใช้ในแอพประเภทเดียวกันบ้างเล็กๆ น้อยๆ … แต่ก็ไม่ติดใจอะไรครับ  แต่ที่ติดใจกับการลอกครั้งนี้เพราะมันเจตนาจะลอกกันชัดเจน ขนาดที่อดคิดไม่ได้จริงๆ ว่าคนที่สั่งให้เริ่มทำแอพเป็นคนบอกผู้พัฒนาเองว่าให้ลอก UI ของ Wongnai (ณ ตอนนั้นเค้าคงเริ่มลอกจาก version 2.6) ไปเลย

ผมขอเรียกชื่อแอพที่ลอกนี้ว่าแอพ ลอกเค้า…สนุกจังเลย” จะได้อ้างอิงถึงแอพใน blog ได้ถูก และไม่อยากให้แอพนี้ได้ประโยชน์จากการโดนแฉ กลายเป็นทำให้คนรู้จักกันมากขึ้น/มีคนเข้าไปโหลดแอพเค้ามากขึ้นซะงั้น แทนที่จะถูกประณามโดยสังคม

จริงๆ แล้ว Design ที่โดนลอกเนี่ย มันไม่ได้เทพอะไรเลย ธรรมดาๆ ครับ … แต่ไอ้ธรรมดาๆ เนี่ยแหละ กว่าจะสรุปออกมาได้ว่าต้องวางอะไรไว้ตรงไหนของหน้าจอเล็กๆ บนโทรศัพท์มือถือ   ผมและ designer ต้องเสียเวลามากมายในการคิด/ออกแบบ ทดลองวาดลงกระดาษ วาดแล้ววาดอีก ส่งให้ designer ออกแบบและแก้แบบกลับไปกลับมาหลายรอบ จนกว่าจะได้ออกมา 1 หน้าเล็กๆ …  ทุกอย่างมันมีต้นทุนครับ ผมไม่ได้จ้าง designer มาฟรีๆ ครับ และผมก็ไม่ได้ทำงานฟรีๆ นะครับ  แต่บริษัทที่สร้างแอพ “ลอกเค้า…สนุกจังเลย” กลับมักง่ายจัด ลอกไปอย่างหน้าด้านๆ .. “สนุก”ใช่มั้ยครับ

Timeline การ release ของแอพ Wongnai และแอพ “ลอกเค้า…​สนุกจังเลย”

ก่อนอื่นมาดู Timeline การออกแอพ Wongnai และแอพ “ลอกเค้า…​สนุกจังเลย” ก่อนครับ จะได้เห็นครับว่า แอพไหนมาก่อนกัน

[16 กรกฎาคม 2555] Wongnai 2.6
[11 กันยายน 2555] Wongnai 2.7
[13 ตุลาคม 2555] Wongnai 2.7.1
[26 ตุลาคม 2555] Wongnai 2.7.2
[10 ธันวาคม 2555] ลอกเค้า…สนุกจังเลย 1.0
[12 ธันวาคม 2555] Wongnai 3.0
[2 มกราคม 2556] ลอกเค้า…สนุกจังเลย 1.0.1
[7 กุมภาพันธ์ 2556] ลอกเค้า…สนุกจังเลย 1.1
[7 มีนาคม 2556] ลอกเค้า…สนุกจังเลย 1.1.1

จาก Timeline ผมขอวิเคราะห์แบบนี้ …. ก่อนที่เค้าจะออกแอพ v1.0 ได้ ก็ต้องใช้ระยะเวลาพัฒนาและทดสอบประมาณหนึ่ง ซึ่งปกติแอพที่รายละเอียดเยอะๆ ก็จะใช้เวลาเป็นเดือนๆ  ผมเดาว่าเค้าคงไม่สามารถลอก Wongnai v2.7 ได้ทันเพราะมันกระชั้นชิดเหมือนกัน น่าจะเริ่มดูจาก v2.6 เอา

มาเริ่มดูกันดีกว่าว่าผมจับอะไรได้บ้างว่าเค้าลอกอะไรไปบ้าง

ภาพ screenshots ต่างๆ ผมจะวางแบบนี้นะครับ

ด้านซ้าย: แอพ Wongnai (v2.6)
ด้านขวา: แอพ “ลอกเค้า…สนุกจังเลย”

1. หน้าสำหรับเขียนรีวิว

wongnai-copycat

การจัดวางกล่องต่างๆ ทั้งหน้า /การจัดเรียงกล่องใส่รูปภาพ และภาพที่อยู่บนปุ่ม

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

1.1 ตัวเลข 120 ในกล่องข้อความกล่องแรก

Wongnai: “พูดถึงร้านนี้ใน 120 ตัวอักษร”
ลอกเค้า…สนุกจังเลย: “สรุปการีวิวนี้ใน 120 ตัวอักษร”

wongnai-copycat-10

ตัวเลข “120” เป็นตัวชี้ที่ชัดมากว่ามีการลอกเกิดขึ้น  ถึงแม้ข้อความในกล่องจากต่างไปบ้าง แต่ตัวเลขมันเป็นไปได้ยากมากที่จะเกิดขึ้น  เพราะตัวเลข 120 ไม่ได้เป็นตัวเลขที่นิยมใช้กันทั่วไป … ถ้าบอกว่าเป็นตัวเลขความยาว “140”  ผมจะไม่พูดถึงเลย เพราะมันเป็นตัวเลขที่เห็นบ่อยและรู้จักกัน (เป็นตัวเลขจำนวนอักขระสูงสุดของข้อความที่ Twitter ยอมให้ใส่ได้ใน 1 ทวีต)

1.2 กล่องพิมพ์ข้อความ (กล่องใหญ่)

เมื่อกดที่กล่องข้อความกล่องใหญ่ (ตรงที่ผมวงกลมเบอร์ 2 ไว้) จะมี effect เพื่อเปิดหน้าใหม่ที่มีกล่องพิมพ์ข้อความที่ใหญ่ขึ้น เพื่อให้เห็นข้อความที่เราพิมพ์เข้าไปมากขึ้น  … ซึ่งทั้งหมดนี้ก็ลอกไปจากแอพ Wongnai อีก ทั้ง effect และหน้าสำหรับพิมพ์ข้อความ เหมือนกันหมดครับ  ชื่อปุ่มต่างๆ ก็เหมือนกัน

wongnai-copycat-9

1.3 ส่วนที่ไว้เลือกรูปภาพ และปุ่มลบรูป หลังจากเลือกรูปเสร็จแล้ว

Image

  • ส่วนที่ไว้เลือกรูปภาพไว้ Upload …. แค่ดูแบบเผินๆ แล้ว จะเห็นว่าองค์ประกอบทุกอย่างเหมือนกันมาก ทั้งข้อความที่เขียนว่า “+ Add Photo” และรูปภาพ
  • ปุ่มลบรูปออก ของ Wongnai จะเป็นปุ่มกากบาท (X) อยู่ที่มุมขวาของกล่อง   ส่วนของแอพนี้ก็แค่เปลี่ยนเป็นเครื่องหมายลบ (-) … แต่จุดนี้อาจจะบอกได้ว่าเหมือนของ iOS อยู่แล้ว ก็พอรับได้

1.4 แถบที่แสดงข้อมูลร้านอาหารเบื้องต้น

แถบนี้อยู่ส่วนบนสุดของหน้านี้ ซึ่งดูจาก design ที่แอพนี้ทำแล้ว ก็คงจงใจทำเหมือนกันคือไว้บนสุด เพียงแต่เพิ่มข้อมูลเข้าไปให้ดูต่างจากต้นฉบับหน่อยนึง

2. หน้า Filter

หน้านี้เป็นหน้าไว้สำหรับค้นหาร้านอาหารแบบละเอียด คือสามารถค้นหาร้านอาหารตามเงื่อนไขต่างๆ ตามที่เรากำหนด  ถ้าดูจาก screenshot เปรียบเทียบกับแล้วก็เห็นว่ามันเหมือนกันขนาดไหน … Look & Feel มันชัดมากครับ  ทุกคนที่ผมโชว์รูปนี้ให้ดู ไม่มีใครที่บอกว่าไม่เหมือนครับ

Image

2.1 โดยรวมทั้งหน้า

ต้นแบบ design หน้า Filter หน้านี้ ถูกนำมาจาก design ของแอพ Wongnai ก่อนเวอร์ชั่น 2.7 (ภาพที่ capture มาคือ Wongnai v2.6 ซึ่ง release เมื่อวันที่ 16 กรกฎาคม 2012)

2.2 ปุ่ม Reset และปุ่ม Search

ปุ่ม 2 ปุ่มที่อยู่ด้านล่าง อาจจะดูแล้วไม่เหมือนกัน  แต่เอาเข้าจริงๆ   มันเหมือนปุ่ม Clear / Search ของ Wongnai v2.7 เป็นต้นมาครับ (ข้อนี้ผมเฉยๆ อาจจะซ้ำกันได้)

Image

3. หน้า Coupon

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

Image

3.1 ลำดับการเรียงลำดับข้อมูล

การเรียงลำดับข้อมูลต่างๆ เหมือนกันอย่างกะแกะ

3.2 กล่องที่แสดงข้อมูลร้าน

เป็นกล่องที่ทำให้ผมเชื่อว่าโดนลอกไปเต็มๆ ครับ … วางตำแหน่งเดียวกันและมีลูกศรเหมือนกันซะด้วย … หน้า Coupon หน้านี้ มันมีวิธีออกแบบมากมายครับ แต่ทำไมออกแบบมาได้เหมือนกันขนาดนี้ครับ

3.3 ปุ่ม “กดเพื่อรับส่วนลด”

ข้อความบนปุ่ม “กดเพื่อรับส่วนลด” เหมือนกันเป๊ะ และที่สำคัญกดเสร็จ เมื่อได้โค้ดกลับมา แอพจะขึ้นข้อความข้างล่างปุ่มว่า “กรุณาแสดงรหัสนี้ให้กับพนักงาน” (ลอกมาจากประโยคนี้ “กรุณาโชว์โค้ดนี้ให้กับพนักงาน”) แบบเดียวกัน

wongnai-copycat-4

4. รายละเอียดอื่นๆ เล็กๆ น้อยๆ

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

4.1 คำว่า “Photo Gallery”

ปกติแล้วผมไม่เคยเห็นแอพไหนใช้คำนี้ครับ แต่สำหรับแอพ Wongnai ผมเป็นคนเลือกใช้คำนี้เอง ตั้งแต่ version แรกๆ ครับและแอพ “ลอกเค้า…สนุกจังเลย” ก็เลือกใช้คำเดียวกัน ใจตรงกันเชียวนะ

Image

4.2 ตัวเลขระยะทาง

ในแอพ Wongnai ถ้าระยะทางเกิน 50 กม.  จะแสดงผลเป็น  ” > 50 กม.”  ส่วนแอพ “ลอกเค้า…สนุกจังเลย” คิดเหมือนกันเลยอะ แต่เปลี่ยนเป็นตัดที่ระยะทาง 99 กม. แทน และใช้การแสดงผลเหมือนกัน แต่เปลี่ยนเป็นภาษาอังกฤษหน่อยคือ ” > 99 km”

Image

ความคิดเห็นจากเพื่อนๆ บน Facebook ต่อการลอกครั้งนี้

  • หลายคนบอกผมว่ามันเป็นเรื่องปกติ ทำใจเถอะ ช่างมัน เว็บหลายเว็บก็โดน copy กันเยอะแยะ
  • หลายคนบอกผมว่ามันน่าเกลียดมากกับวิธีการลอกแบบนี้ และไม่เห็นด้วยกับการกระทำแบบนี้
  • บางส่วนก็บอกว่าฟ้องร้องไปเลย
  • และ(อาจจะ)มีบางคนบอกว่า เห้ย ของแบบนี้ มันมีโอกาสเหมือนกันก็ได้นะ … ใช่ครับ มันมีโอกาสเหมือนกันได้ครับ แต่มันต้องไม่เป๊ะขนาดนี้ และผมมั่นใจครับว่าไม่ใช่ผมคนเดียวแน่นอน ที่เห็น design ของแอพ “ลอกเค้า…สนุกจังเลย” แล้วจะจับได้ทันทีว่าลอกแอพ Wongnai ไป … วิธีทดสอบง่ายมากครับ แค่เลือกผู้ที่ใช้ Wongnai เป็นประจำมาตั้งแต่ version แรกๆ ขึ้นมา แล้วให้เค้าลองเล่นแอพนี้ หรือแค่ให้เห็น screenshot ของแอพนี้เท่านั้นพอ  ผมพนันได้ว่าเค้าจับได้ทันทีว่าลอก design มา (ตามหน้าต่างๆ ที่ผมจะบอกรายละเอียดต่อไปครับ) เพราะเค้าคุ้นเคยกับ design เหล่านั้นมาอย่างดี
  • หลายคนไม่รู้/ไม่ได้สังเกตครับว่าเค้าได้ทำการลอก design จากแอพ Wongnai ไป  …. ทำไมไม่รู้กัน? ก็เพราะแอพ Wongnai เวอร์ชั่นหลังๆ เราได้เปลี่ยน design ไปเยอะครับ ทำให้หน้าตาไม่เหมือนกับแอพ “ลอกเค้า…สนุกจังเลย” ใน version ปัจจุบัน (v1.1.1)   สิ่งที่อยากให้รู้กันคือ design ที่แอพ “ลอกเค้า…สนุกจังเลย” ใช้อยู่ในปัจจุบันเนี่ย  มันคือ design ที่ Wongnai คิดขึ้นมาและเคยใช้ใน version เก่าครับ
  • (อาจจะมี)บางคนบอกว่าบางจุดมันเป็นเรื่องเล็กมากเลย เค้าคงไม่ได้ลอกมั้ง อย่าคิดมาก … สำหรับผู้ใช้ทั่วไป ตรงนี้ยากหน่อยครับในการสังเกต แต่เนื่องจากผมมีส่วนร่วมในการออกแบบหน้าตาทุกส่วนของแอพ Wongnai  มันทำให้เวลาลองเล่นแอพต่างๆ แล้ว ผมจะสังเกตในรายละเอียดยิบย่อยทุกส่วนครับ … โดยเฉพาะส่วนเล็กๆ ที่ผมคิดแก้ไขไว้ในแอพ Wongnai แล้วลองดูว่าแอพอื่นเค้าแก้ปัญหากันยังไง  ไอ้จุดเล็กๆ ไม่กี่ pixel เนี่ย บางครั้งกว่าจะคิดออกมาได้ มันนานมากครับ

ความคิดเห็นของผม

  • การแข่งขันในตลาด แน่นอนว่ามันต้องมีครับ และผมก็โอเคกับการแข่งขันครับ  แต่ผมรับไม่ได้กับการลอกผลงานที่ทุเรศได้ขนาดนี้ และไม่คิดว่าควรจะช่างมัน เพราะบริษัทที่สร้างแอพนี้ขึ้นมาก็เป็นบริษัทใหญ่และมีชื่อเสีย(ง)มากครับ  แต่ดันมาลอกผลงานบริษัทเล็กอย่างผม ไม่เคารพความเป็นเจ้าของผลงานกัน คุณก็ควรจะได้รับการประณามจากผม และจากผู้ที่ต่อต้านการลอกผลงานคนอื่นจากผู้อ่าน blog นี้ด้วยครับ
  • ถ้ามันสามารถฟ้องร้องกันได้  ผมก็คงไม่ฟ้องร้องอะไรทั้งสิ้นครับ เสียเวลาครับ ผมคนทำงาน ฟ้องไปก็ไม่มีอะไรดีขึ้น ผมไม่ต้องการอะไรนอกจากความสำนึกผิดที่คนที่ลอกผลงานควรจะคิดได้และควรจะมี และคำขอโทษอย่างเป็นทางการครับ  (ถ้ากล้าลอกแล้ว  เมื่อโดนจับได้ ก็ควรกล้าขอโทษครับ)
  • ผมขอรณรงค์ไม่สนับสนุนผลงานของคนที่ลอกผลงานคนอื่นแบบนี้ครับ  ถ้าผู้อ่านรู้ว่าแอพที่ผมนำมาแฉนี้คือแอพอะไร หรือถ้าคุณใช้งานอยู่ ผมอยากเตือนสติครับว่า คุณกำลังสนับสนุนคนที่”สนุก”กับการลอกผลงานคนอื่นอยู่ครับ  และถ้าเรื่องแบบนี้เกิดกับคุณเอง คุณก็คงไม่สนุกด้วยแน่
  • ถ้าผู้อ่านท่านใดเห็นว่า blog นี้เป็นประโยชน์และน่าเอาไปบอกต่อ ผมยินดีเป็นอย่างมากและขอบคุณมาก ถ้าคุณจะช่วยนำบทความนี้ไปแชร์ตาม Social media ต่างๆ  เพื่อให้คนได้รับรู้มากขึ้นครับ

ถ้าคุณคนที่ลอกได้อ่าน blog นี้มาจนถึงบรรทัดนี้นะครับ ผมหวังว่าคุณน่าจะฉุกคิดอะไรขึ้นมาได้บ้างนะ และต่อไปช่วยหัดคิดทำอะไรเองจะดีกว่าครับ (เอ้อ …แล้วก็อย่าลอก blog นี้ของผมไปด้วยนะคร้าบ :P)

ปล. ใน entry นี้ จริงๆ ผมเฉลยว่าใครเป็นคนทำแอพนี้ไปเยอะมากครับ แค่สังเกตให้ดีๆ หุหุ