Part 2 :: มาสร้าง App ง่าย ๆ ด้วย Flutter กันหน่อย

หลังจากที่เราทำงานติดตั้ง Flutter กันไปแล้ว จาก blog :: Part 1 :: สวัสดี Flutter ด้วยการติดตั้ง  จากแนวคิดของ Flutter นั้นมาจาก React โดยทุก ๆ component จะเรียกว่า widget ประกอบไปด้วย

• การแสดงผล
• State
• ทำงานตาม state ที่เปลี่ยนแปลงไป

มาเริ่มต้นพัฒนา app กันดีกว่า

ก่อนอื่นมาดูโครงสร้างของ Flutter project กัน

แสดงดังรูป คำอธิบาย

• android สำหรับ code ของ Android app
• ios สำหรับ code ของ iOS app
• lib สำหรับไฟล์การทำงานหลักของ app เขียนด้วยภาษา Dart ที่เราจะทำความรู้จักและเขียนกัน
• test สำหรับไฟล์ของชุดการทดสอบ ที่จะพูดกันใน blog ต่อ ๆ ไป
• pubspec.yaml สำหรับ configuration ต่าง ๆ ของ app เช่น package หรือ dependency ต่าง ๆ

มาเริ่มเขียน code ในไฟล์ lib/main.dart

เนื่องจาก code ตัวอย่างที่สร้างมาจากตอนสร้าง project มันเยอะมาก ๆ แถมอ่านก็ไม่รู้เรื่องเลย !! ดังนั้นทำการลบแล้วเริ่มเขียนใหม่ดีกว่า เขียน code ตามระเบียบคือ Hello Flutter World กัน [gist id="8c266410792614cda8d4b0075508456e" file="main.dart"] คำอธิบาย

• แสดงคำว่า Hello Flutter World ตรงกลางหน้าจอ
• อยากให้ตัวอักษรหนา ๆ และขนาดตัวอักษรใหญ่ ๆ

แสดงการทำงานดังรูป การทำงานจะเริ่มต้นจาก function main() จากนั้นจะทำงานที่ function runApp() เพื่อกำหนด root ของ widget ของ app เรา code ตัวอย่างนั้น มี 3 widget คือ Center, Text และ TextStyle ดังนั้น Widget ต่าง ๆ จะถูกจัดการในรูปแบบ tree นั่นเอง แนวคิดเหล่านี้ไม่ได้ต่างจาก React และ Angular component มากนัก แสดงดังรูป

เรื่องต่อมา Flutter ได้เตรียม Widget พื้นฐานมาให้ใช้เยอะเลย

เราสามารถนำมาใช้ได้เลย ประกอบไปด้วย

• Text สำหรับการแสดงผลข้อความต่าง ๆ
• Row, Column เรียกว่า Flex widget สำหรับการสร้าง layout แบบยืดหยุ่นทั้งแนวตั้งและแนวนอน ซึ่งการออกแบบก็ตาม Flexbox ใน web นั่นเอง
• Stack สำหรับการสร้าง layout ที่ทับกันได้ (overlap)
• Container ตามเชื่อเลยคือ ที่รวบรวม widget ต่าง ๆ เข้าด้วยกัน
• ยังมีตัวอื่น ๆ อีกนะ ทั้ง Listview และ GridView และอื่น ๆ อีกมากมาย

ถ้าเราต้องการสร้าง Widget เอง ก็สามารถทำได้ โดยสามารถสร้าง Widget ใหม่ด้วยการ extend มาจาก 2 class คือ

1. StatelessWidget
2. StatefulWidget

จะทำการ extend จาก class ไหนดีละ ? ตอบง่าย ๆ ตามชื่อเลย นั่นคือ ถ้าต้องการจัดเก็บ state ต่าง ๆ ของการทำงานไว้ ก็ใช้ StatefulWidget กันเลย ถ้าไม่จัดเก็บ state ก็ใช้ StatelessWidget ซะ เช่นพวกการแสดงผลเป็นต้น ดังนั้นเรามาสร้าง Widget และ app เล่นกันดีกว่า

มาสร้าง Widget แรกชื่อว่า HelloApp กัน

ลองใช้งาน Material design ที่มีให้มาอยู่แล้วกัน ทำการแสดงผลในรูปแบบเดิม เพิ่มเติมคือใช้ Scaffold widget ของ Material Design เป็น layout ง่าย ๆ ทำให้เรากำหนดชื่อของ title ในส่วนของ App bar ได้เลย เนื่องจาก widget ที่จะสร้างไม่มีการจัดเก็บข้อมูลหรือ state อะไรเลย ดังนั้นจึงทำการ extend จาก class StatelessWidget พวก property ต่าง ๆ ของ class ต้องเป็น immutable ด้วยนะ นั่นคือเปลี่ยนแปลงไม่ได้ นั่นคือ ต้องทำการใส่ keyword final เข้าไปด้วย การแสดงผลจะทำงานใน function build() ถ้าเป็น React จะทำงานใน function render() นั่นเอง [gist id="8c266410792614cda8d4b0075508456e" file="main2.dart"] ผลการทำงานเป็นดังนี้ ดูสวยงามขึ้นเป็นกองนะ

เพื่อทำความเข้าใจมากยิ่งขึ้น มาลองสร้าง App จริง ๆ กันหน่อย

สิ่งที่ต้องการประกอบไปด้วย

• ดึงข้อมูลของเบียร์จาก PUNK API
• นำข้อมูลมาแสดงใน ListView widget

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

ปัญหาที่ 1 จะดึงข้อมูลจาก API ผ่าน internet อย่างไร ?

เอกสารของ Flutter ก็มีให้เช่นกันคือ Fetch data from the internet ซึ่งจะใช้งาน http package เมื่อได้ข้อมูลมาจาก API แล้ว จะทำการแปลงมาอยู่ในรูปแบบของ Dart object โดยใช้ package dart/convert มาเขียนกันเลย ในภาษา Dart ได้เตรียม Future class สำหรับการทำงานแบบ Asynchronous เขียนในรูปแบบ async-await ได้ดังนี้ [gist id="8c266410792614cda8d4b0075508456e" file="main3.dart"] ผลการทำงานเป็นดังนี้  อ่านไม่ค่อยรู้เรื่องเท่าไร !!

สิ่งที่อยากทำต่อไปคือ การแปลง JSON ให้อยู่ในรูปแบบของ Dart object ว่าแต่ทำอย่างไรละ ?

ใน function getBeers() จะต้องทำการ return ข้อมูลเป็น List ของ Beer object !! ดังนั้นมาสร้าง class Beer กัน ซึ่งจะสร้างอยู่ในไฟล์ใหม่ชื่อว่า beer.dart ดังนี้ [gist id="8c266410792614cda8d4b0075508456e" file="beer.dart"] คำอธิบาย

• Constructor จะรับ 3 ค่า สำหรับการสร้าง object ตรงนี้แล้วแต่เราต้องการ
• มี static function/method สำหรับการแปลงจาก JSON message มาอยู่ในรูปแบบของ Beer Object ซึ่งในภาษา dart จะใช้ keyword ว่า factory
• ทำการ override function toString() สำหรับการแสดงผลข้อมูลของ Beer แบบสวย ๆ ตามที่ต้องการ

กลับมาที่ไฟล์หลักคือ main.dart ใน function getBeers() ทำการเพิ่ม code การแปลงข้อมูล JSON message ให้มาอยู่ในรูปแบบ List ของ Beer กัน รวมทั้งเปลี่ยนชนิดข้อมูลที่จะ return กลับด้วย ยังไม่พอนะ ต้องทำการ import beer.dart ด้วย มิเช่นนั้นจะใช้งานไม่ได้ มี code ดังนี้ [gist id="8c266410792614cda8d4b0075508456e" file="main4.dart"] แสดงผลการทำงานแบบสวย ๆ กันแล้ว ดังนี้

มาถึงตรงนี้เขียนไปเขียนมา นึกว่าเขียนภาษา Java อยู่นะ !!!

เมื่อเรื่องข้อมูลที่จะนำมาใช้งานเรียบร้อยแล้ว ก็มาถึงในส่วนของการแสดงผล

เป็นส่วนที่ยากที่สุดสำหรับผมแล้ว !!

ใน blog นี้จะไม่มีการเก็บค่าใด ๆ ดังนั้นจะสร้าง Widget แบบ Stateless ส่วนการแสดงผลจะอยู่ในรูปแบบของ ListView ใน ListView นั้นประกอบไปด้วย Item ซึ่งจะนำข้อมูล Beer มาแสดง ตอนนี้เอาแค่ชื่อเบียร์มาแสดงก่อนก็แล้วกัน !! มาเริ่มกันเลย

ก่อนอื่นต้องออกแบบ Widget ที่จะสร้าง โดยผมทำการแยกออกเป็น 3 widget ตามหน้าที่การทำงาน

1. MyApp เป็น widget เริ่มต้นหรือ root ของ app นั่นเอง ทำการกำหนดว่าจะใช้ Material design นะ
2. Firstpage เป็น widget ลูกของ MyApp ทำหน้าที่กำหนด Layout ของหลักของ app รวมทั้งทำหน้าที่ดึงข้อมูลของ beer จาก PUNK API ด้วย ในส่วนนี้นี่เองที่ผมต้องการให้มี Progress bar ขึ้นมาในขณะที่กำลังดึงข้อมูล ซึ่งจะใช้ widget ชื่อว่า CircularProgressIndicator เราน่าจะเรียก widget นี้ว่า Smart/Container component/widget ก็ได้นะ
3. ListBeer เป็น widget ลูกของ FirstPage ทำหน้าที่แสดงข้อมูลของ beer ทั้งหมด เราน่าจะเรียก widget นี้ว่า Dumb/Presentational component/widget ก็ได้นะ

มี code ดังนี้ [gist id="8c266410792614cda8d4b0075508456e" file="main5.dart"] ผลการทำงานเป็นดังรูป ลองเปลี่ยนไปใช้ GridView เพื่อแสดงรูปของ beer กันหน่อย ก็พอได้นะ

ยากจริง ๆ สำหรับการแสดงผล !!

ถ้าจะให้สวยต้องใช้พวก Flex และ Card widget เข้ามาช่วยอีกนะ

เป็นเรื่องที่ต้องศึกษาและนำมาใช้ต่อไป แต่เพียงเท่านี้ ก็น่าจะทำให้เห็นว่า Flutter มีหน้าตาอย่างไรบ้างแล้ว รวมไปถึง code ที่เขียนด้ววยภาษา Dart รวมกับ package ต่าง ๆ จะพัฒนา app ด้วย Flutter ให้ดี ต้องไปเรียนรู้ภาษา Dart เพิ่มเติมอีก ดังนั้น part ต่อไป มาทำความรู้จักกับภาษา Dart กัน ( Dart 2.0 ) รวมทั้งการพัฒนา app ที่ซับซ้อนและสวยงามขึ้น

Source code ตัวอย่างอยู่ที่ Github::Simple App with Flutter

ขอให้สนุกกับการ coding ครับ