Image for post
Image for post

หลังจากที่ได้เห็นเบื้องหลังในการคำนวณเส้น Path ที่ใช้สร้าง UI Component เป็นรูปคูปองกันไปแล้ว ต่อไปก็ถึงเวลาของการทำให้โค้ดเหล่านั้นสามารถนำไปใช้งานกับโค้ดบนแอนดรอยด์ได้อย่างเรียบเนียนไร้รอยต่อกัน

บทความทั้งหมดของชุดนี้

สร้าง View สำหรับคูปอง

การสร้าง UI Component ใด ๆ บนแอนดรอยด์ด้วยสิ่งที่เรียกว่า View ซึ่งเป็นพื้นฐานของ UI ทั้งหมดทั้งมวลบนแอนดรอยด์ ซึ่งจะมีโค้ดพื้นฐานดังนี้

จะเห็นว่าผมได้เตรียม setup(...) ไว้เพื่อใช้กำหนดค่า View Attribute ต่าง ๆ ในทีหลัง และจะต้องกำหนด setWillNotDraw(...) เป็น false เพื่อให้ View ทำการ Render UI ขึ้นมาทันทีที่สร้างขึ้นมา ซึ่งควรใช้คำสั่งเมื่อมีการ Override คำสั่งที่ชื่อว่า onDraw(canvas: Canvas?) เสมอ

นอกจากนี้ setup(...) ยังมี Parameter ที่ส่งเข้ามา 2 ตัวคือ AttributeSet กับ Int เพื่อเรียกค่า View Attribute ต่าง ๆ ที่กำหนดไว้ในตอนที่สร้าง UI

กำหนดรูปแบบของ View Attribute สำหรับใช้กับ Canvas API

การสร้าง UI บนแอนดรอยด์ส่วนใหญ่จะถูกสร้างไว้ใน Layout Resource ที่เขียนด้วย XML ดังนั้นการเตรียม View Attribute ให้กับ View จะช่วยเพิ่มความสะดวกในการนำไปใช้งาน เพราะว่าคนที่นำไปใช้จะได้กำหนด Attribute ต่าง ๆ ผ่าน XML ได้เลย ลดโค้ดที่เกี่ยวกับ UI ในฝั่ง Java หรือ Kotlin ที่ไม่จำเป็นให้น้อยลง เช่น…


Image for post
Image for post

หลังจากที่เล่าเรื่องราวและที่มาของ UI Component ตัวใหม่ที่ผมต้องสร้างขึ้นมาเพื่อนำไปใช้งานในแอป LINE MAN โดยมีชื่อฟีเจอร์ว่า Coupon Book และในตอนสุดท้ายก็ได้ตัดสินใจเลือกที่จะสร้างขึ้นมาด้วย Canvas API

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

บทความทั้งหมดของชุดนี้

การสร้างรูปคูปองด้วย Canvas API

โดย Custom View บนแอนดรอยด์จะรองรับ Canvas API ในตัวอยู่แล้ว เพราะในคำสั่ง onDraw(canvas: Canvas?) หนึ่งใน Lifecycle ของ View ส่ง Canvas เข้ามาให้ด้วย เพื่อให้นักพัฒนาสามารถใช้คำสั่งต่าง ๆ ของ Canvas API ใน Custom View ตัวนั้น ๆ ได้เลย

และคำสั่งของ Canvas API ที่เป็นหัวใจสำคัญของ UI ตัวนี้ก็คือ drawPath(path: Path, paint: Paint) เพราะเราสามารถใช้ Path เพื่อสร้างเส้นที่ลากต่อกันให้เป็นรูปคูปองได้


Image for post
Image for post

สวัสดีผู้อ่านประจำสำนักพิมพ์​ LINE MAN Wongnai ทุก ๆ คนครับ ผมชื่อ “สมเกียรติ กิจวงศ์วัฒนะ” หรือจะเรียกว่า “เอก” ก็ได้นะ เป็น Senior Software Engineer ที่คอยดูแลและพัฒนาแอป LINE MAN บน Android

และบทความนี้ก็เป็นบทความแรกของผมในฐานะนักเขียนบน LINE MAN Wongnai ก็ขอฝากเนื้อฝากตัวด้วยนะครับ

บทความทั้งหมดของชุดนี้

ย้อนกลับไปเมื่อปี 2020 (ปีที่แล้ว)

ทีมของผมได้รับภารกิจให้ทำฟีเจอร์ใหม่ในแอป LINE MAN ที่มีชื่อว่า Coupon Book เพื่อให้ผู้ใช้จัดการกับคูปองได้สะดวกมากขึ้น ดูรายละเอียดในการใช้คูปอง และสามารถเลือกคูปองที่ต้องการใช้งานไว้ล่วงหน้าได้

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


เรื่องราวของคนที่อยากจะลาพักร้อนนาน ๆ เพื่อทำอะไรก็ได้ที่ตัวเองอยากทำ

Image for post
Image for post
Photo by Joanna Kosinska on Unsplash

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

และเมื่อได้เป็น Android GDE ก็ทำให้วันลาพักร้อนของผมหมดไปกับการเดินทางเพื่อไปร่วมงาน Developer Conference ของ Google เกือบทั้งหมด เพราะต้องเดินทางไปสหรัฐอเมริกา

ความพยายามในการลาพักร้อนในครั้งแรก

ในตอนที่ทำงานได้ครบ 3 ปีในบริษัทแรก ผมได้ตั้งใจไว้ว่าตัวเองจะลาออกแล้วหยุดพักซัก 1–2 เดือนก่อน ระหว่างนั้นก็ค่อยเริ่มหาที่ทำงานใหม่

แต่ในความเป็นจริงคือได้ที่ทำงานใหม่ก่อนที่จะลาออกด้วยซ้ำ ทำให้ต้องลาออกจากที่เก่าแล้วไปทำงานที่บริษัทใหม่ต่อเลย (จะว่าดีมันก็ดีแหละ แต่ที่ความตั้งใจในตอนแรกก็ต้องหยุดลง)

ความพยายามในการลาพักร้อนในครั้งที่สอง

หลังจากทำงานในที่ใหม่ 3–4 ปี ก็ได้ตระหนักถึงวันลาที่ตัวเองเหลืออยู่ในทุก ๆ ปี จึงตัดสินใจลาพักร้อนในช่วงที่เดินทางไปงาน Developer Conference ที่สหรัฐอเมริกา โดยตั้งใจว่าจะลาพักร้อนนาน 1 เดือน…


เรื่องเล่าจาก Software Engineer ที่กดซื้อ MacBook Pro เพื่อใช้ส่วนตัว ทั้งๆที่บริษัทก็มีให้ใช้อยู่แล้ว

Image for post
Image for post

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

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

บริษัทมีคอมให้ แถมใช้ส่วนตัวได้ จะซื้อใหม่ทำไม?

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

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


Works with Non-inherited and Inherited Custom View

Image for post
Image for post
Photo by Annie Spratt on Unsplash

In Android, there are some behaviors that we called “State Changes” which can occur from many conditions. Whether the platform might kill the application to reclaim the memory for the currently active app or Configuration Changes which recreated the Context in running Activity with the new configurations. To keep the data in your application from these changes, we have to handle the state in each Activity, Fragment and View.

Using existing Views from Android Frameworks or 3rd-party Libraries (which handle the state changes correctly), the state changes will be handled by itself. …


ในที่สุดก็ถึงเวลาลงมือทำแล้ว

Image for post
Image for post

ในที่สุดก็ถึงเวลาเล่าถึงวิธีการสร้างแอปแอนดรอยด์เพื่อเปิดเว็ปของเราที่รองรับ PWA ให้ทำงานได้อย่างมีประสิทธิภาพสุด ๆ ด้วยการใช้ TWA แล้ว

บทความในชุดเดียวกัน

บทความนี้เหมาะกับ

นักพัฒนาที่มีเว็ปที่รองรับ PWA อยู่แล้ว และต้องการทำแอปแอนดรอยด์ด้วยการเปิดเว็ปโดยใช้ TWA แทนการใช้ WebView

ถึงเวลาสร้างแอปแอนดรอยด์กันแล้ว

หลังจากที่ได้รู้เรื่องราวของ TWA หรือ Trusted Web Activity กันไปแล้ว รวมไปถึงการทำ Digital Asset Links เพื่อใช้ในการยืนยันระหว่างเว็ปกับแอปว่ามีเจ้าของเดียวกัน ถึงเวลาที่จะสร้างแอปแอนดรอยด์กันแล้ว

ในการสร้างแอปแอนดรอยด์จะใช้ Android Studio นะ (ติดตั้งลงในเครื่องกันให้เรียบร้อยด้วย)

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

สร้างโปรเจคแอนดรอยด์

เมื่อเปิด Android Studio ขึ้นมา ให้เลือก Start a new Android Studio project เพื่อสร้างโปรเจคแอนดรอยด์ขึ้นมาใหม่


Image for post
Image for post

จากบทความก่อนหน้านี้ที่เล่าถึงความสามารถของ TWA ที่จะมาช่วยทำให้ PWA ของเราให้สามารถทำงานอยู่บนแอปแอนดรอยด์ได้ง่ายขึ้น แต่ก่อนที่จะเริ่มสร้างแอปแอนดรอยด์สำหรับเว็ปของเรา ขอเล่าวิธีการทำ Digital Asset Links เพื่อทำให้เว็ปของเรากลายเป็น Trusted Web สำหรับแอปแอนดรอยด์ที่เราจะสร้างกันก่อน

บทความในชุดเดียวกัน

บทความนี้เหมาะกับ

นักพัฒนาที่มีเว็ปที่รองรับ PWA อยู่แล้ว และต้องการทำแอปแอนดรอยด์ด้วยการเปิดเว็ปโดยใช้ TWA แทนการใช้ WebView

Digital Asset Links คือ?

Digital Asset Links หรืออีกชื่อหนึ่งก็คือ App Linking ซึ่งเป็นการ Verify ระหว่างเว็ปกับแอปแอนดรอยด์เพื่อยืนยันว่าทั้งเว็ปและแอปมีเจ้าของเป็นคนเดียวกัน ทั้งนี้ก็เพื่อป้องกันการแอบอ้างหรือปลอมแปลงจากผู้พัฒนาอื่น ๆ ที่ไม่ประสงค์ดีนั่นเอง

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

ซึ่งการทำ Digital Asset Links จะมีผลต่อ Google Search บนแอนดรอยด์, การเปิด Deep Links บนแอนดรอยด์ รวมไปถึงการแชร์ Credential ระหว่างเว็ปและแอปด้วย…


มีเว็ปที่เป็น PWA อยู่แล้ว อยากจะทำให้เป็นแอปแอนดรอยด์? ใช้ TWA สิ จะได้ไม่ต้องง้อ Add to Home Screen อีกต่อไป

Image for post
Image for post

บทความในชุดเดียวกัน

บทความนี้เหมาะกับ

นักพัฒนาที่มีเว็ปที่รองรับ PWA อยู่แล้ว และต้องการทำแอปแอนดรอยด์ด้วยการเปิดเว็ปโดยใช้ TWA แทนการใช้ WebView

Progressive Web Apps

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


เพราะไม่มีเงินซื้อใหม่ทั้งชุด เลยซื้ออะไหล่มาเปลี่ยนแทน

Image for post
Image for post

ผมก็เป็นคนหนึ่งที่ซื้อ Nintendo Switch มาเล่นเกมที่ชอบ ซึ่งซื้อมาหลายปีและเล่นเป็นประจำ และเจอปัญหาว่าคันโยกของ Joy-Con มีอาการเพี้ยน หรือที่เค้าเรียกกันว่า Stick Dirft ซึ่งเป็นอาการปกติที่อาจจะเจอกันได้

คันโยกเพี้ยนหรือ Stick Drift

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

Ake Exorcist

Lovely android developer who enjoys learning in android technology, habitual article writer about Android development for Android community in Thailand.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store