รายงาน เรื่อง ภาษา Flutter

รายงาน เ อง ภาษา Flutter ด โดย อ-ส ล นางสาว ชล ชา ใจ ข ร สประ ว 62202040001 เสนอ อาจาร อรรถพล เ ยวทอง รายงาน เ น วนห งของการเ ยน ชา ฒนาโปรแกรมบน ปกร พกพาเ อง น ภาคเ ยน 2 การ กษา 2565 ทยา ยเทค คเพชร ีรุบินัลิว ึศีป่ีทีร ้ต้ืบ์ณุอ ัพิวีร่ึน่ส็ป้ีน ีข์ย ัตำจัห ุสิธุก่ืช ำทัจ ่ืร

ก รายงานเ ม ด นเ อเ น วนห งของ ชา การ ฒนาโปรแกรมบน ปกร พกพาเ อง นเ อใ ไ กษาหาความ ใน เ อง Flutter และไ กษาอ างเ าใจเ อ เ นประโยช บการเ ยน ด ห ง า รายงานเ ม จะเ นประโยช บ าน ห อ กเ ยน งหา อ ลเ อง อ หาก อแนะ ห อ อ ดพลาดประการใด ด ขอ อม บไ และ ขออ ยมา ณ วย ด นางสาว ชล ชา ใจ ข น 20 ก.พ. 65 ่ีทัว ุสิธำทัจู้ผ ้ด้ีน่ีทัภ้วัร้นำทัจู้ผิผ้ขืรำน้ขีมู่ย้ีน่ืรูม้ขัลำก่ีทีรันืร่อู้ผัก์น็ป้ีน่ล่วัวำทัจู้ผ ีรัก์น็ป่ืพ้ข่ยึศ้ด่ืรู้รึศ้ด้ห่ืพ้ต้ืบ์ณุอัพิว่ึน่ส็ป่ืพ้ึขำทัจ้ีน่ล นำค

ข อเ อง :รายงาน เ อง Flutter กษา นค า :นางสาว ชล ชา ใจ ข :ประกาศ ย ตร ชา พ ระ บ :คอม วเตอ ร จ สาขา ชา :คอม วเตอ ร จ สาขางาน : นายอรรถพล เ ยวทอง :2565 ป กษา การ กษา บท ด อ รายงาน เ อง Futter ค ง ต ประสง อ 1.2.1 เ อ กษาเ ยว บ Flutter 1.2.2 กษาการ งานของ Flutter 1.2.3 เ อเ ม องทางการ กษาหา อล จากเ อหาในรายงานส ปไ า Flutter เ น Google UI toolkit ใ ห บ ฒนา Nativemobile application ง ง IOS และ Android วยภาษา Dart ด ายๆ อสามารถเ ยนMobile application วยภาษา Dart ค งเ ยวแ Build ออกมาไ ง IOS และ Android ้ัท้ด่ตีด้ัร้ดีขืค็ก่งูพ้ด่ัฝ้ัทัพัรำส้ช่ีท็ป่ว้ดุร้ืน ูม้ขึศ่ช่ิพ่ืพำทึศัก่ีกึศ่ืพืค์คุถัวีม้ีน้ัร่ืร ่ยัค ึศีป ีขึร่ีท ิกุธ์ริพ ิกุธ์ริพิว ีชิวับีนัด ุสิธ้ว้คึศู้ผ ่ืร่ืร่ืช

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

สาร ญ ง เ อง หา ก บท ด อ ข ต กรรมประกาศ ค ง สาร ญ 1 บท 1.1 มาและความ ญ 2 1.2 ต ประสง 3 1.3 ขอบเขต านเ อหา 3 1.3.1 ขอบเขต านประซากรและก ม วอ าง 4-5 1.4 ประโยช คาด าจะไ บ 6-12 บท 2 13 Flutter ออะไร 14 ดเ นของ Flutter อเ ยของ Flutter บท 3 Install Flutter ห บ MacOS Install Flutter ห บ Window บท 4 การเ ม น Project แรก (Getting Start) บรรณา กรม ุน ้ต่ิร ่ีท ัรำส ัรำส ่ีท ีส้ข ่ดุจ ืค ่ีท ัร้ด่ว่ีท์น่ยัตุล้ด ้ืน้ด ์คุถัว ัคำส่ีท ่ีท ับิติก่ยัคำนำค ้น่ืร ับ

1 บท 1 บท 1.1 มาและความ ญ Flutter อ Framework ใ ส าง UI ห บ mobile application สามารถ งาน าม แพลตฟอ มไ ง iOS และ Android ในเวลาเ ยว น โดยภาษา ใ ใน Flutter น จะเ นภาษา dart ง ก ฒนาโดย Google และ ญ อเ น open source สามารถใ งาน ไ แบบฟ 1.2 ต ประสง 1.2.1 เ อ กษาเ ยว บ Flutter 1.2.2 กษาการ งานของ Flutter 1.2.3 เ อเ ม องทางการ กษาหา อ ล 1.3 ขอบเขต านเ อหา เ ยนคน นๆ กษาเ ยว บการ ด รายงานเ อง Flutter เ อเ นแนวทางใ เ ามา กษา หาความ นอกหองเ ยน เ อเ ดความเขาใจเ มมาก น 1.3.1 ขอบเขต านประชากรและก ม วอ าง ประชากร ไ แ ก ม คคล วไป องการ กษาเ อง Flutter 1.4 ประโยช คาด าจะไ บ 1.4.1 ไ ความหมายของ Flutter 1.4.2 การ งานของ Flutter 1.4.3 สามารถตอยอดและ ไปใ ในการเ ยนการสอน ีร้ชำน ำทู้ร ู้ร้ด ัร้ด่ว่ีท์น ่ืรึศ้ต่ีท่ัทุบุล่ก้ด ่ยัตุล้ด ้ึข่ิพิก่ืพีรูร ึศ้ข่ือีรู้ผ้ห็ป่ืพ่ืรำทัจัก่ีกึศ ้ืน้ด ูม้ขึศ่ช่ิพ่ืพ ำทึศ ัก่ีกึศ่ืพ ์คุถัว ีร้ด้ช่ีท็ปืคัคำส่ีทัพูถ่ึซ ็ป้ัน้ช่ีทักีด้ัท้ด์ร ้ขำท่ีทัรำส้ร้ช่ีทืค ัคำส่ีท ำน ่ีท

2 บท 2 Flutter ออะไร Flutter อ Cross-Platform Framework ใ ในการ ฒนา Native Mobile Application (Android/iOS) ฒนาโดยบ ท Google Inc. โดยใ ภาษา Dart ในการ ฒนา ความค าย บภาษา C# และ Java กห ง ดเ นของ Flutter อ การป บแ ง UI (User Interface) ความ นห น แยกการออกแบบเ อเ นไป ประสบการ ของ ใ งาน UX (User Experience) โดย UI จะใก เ ยง บ Native และตรงตาม Design Guideline ก อง และ ความสามารถในการ Hot Reload ใ การแ ไขโ ดสามารถแสดงผลไ น ในระห าง นแอปพ เค น และ งรวมไป ง Widget พ อมใ เ อกใ มากมาย ใ ฒนาแอปพ เค นไ ไวเหมาะ ห บอง กร องการแอป สวยงามและ ประ ท ภาพ ในห ก ตร การสอน State Management โดยใ BLoC (Business Logic Component) ยมในก ม ก ฒนา Flutter ในการ ดการ Local/Global State เ อรอง บระบบ ขนาดให และ บ อน เ น ออา พ รวม งการเ ยนโ ด งาน วม บ Native API โดยใ ภาษาส ยให อ าง Kotlin และ Swift เ อใ เ าอบรมสามารถ บ อ บ Requirement องเ อม อ บ Native Android และ iOS วอ าง Flutter Workshop  ่ยัต ัก่ต่ืช้ต่ีทักืมัร้ขู้ผ้ห่ืพ่ย่มัม้ชัก่รำท่ีท้คีขึถีชืม็ปูด้ซัซ่ญีม่ีทัร่ืพัจัพันุ่ลิน่ีท้ชีมูสัล ิธิสีม่ีท้ต่ีท์คัรำส้ดัชิลัพ้หำท้ชืล้ห้ร่ีทีมึถัยัชิลัร่ีท่วีทัท้ด้ค้ก้หำท่ีทำทีม้ตูถ่ีทักีค้ล้ชู้ผ์ณ่ีท้น่ืพุ่ยืยีม่ีท่ตัรืค่ดุจ่ึนีอ ัก้ลีม่ีทัพ้ชัษิรัพัพ้ช่ีทืค ืค ่ีท

3 ดเ นของ Flutter ออะไร? ดเ นห ก ๆ ของ Flutter อ ระบบ Hot Reload โดยเ อ การทดสอบ, การส าง, การ add features ห อการกระ าง ๆ บ UI จะ อง การ reload เ อใ ห า UI update งระบบ Hot Reload จะเ ามา วยใน วนของการ reload โดย ดเ นของ ระบบ อการ นระยะเวลา ใ ในการ reload ใ เห อเ ยงเ ยว นา เ า น ใ การ ฒนา UI ของ application ความรวดเ ว นอ างมาก และ ง ดเ น น ๆ วยใ การ ฒนาเ นไปไ าย นไ าจะเ น Build-In วยในการออกแบบ UI ใ ความสวยงาม ง นอ าง Material Design และ Cupertino (iOS- avor), Framework วยใ การ animation าง ๆ ห อ gesture ของ UI เ นเ อง าย ง น และ งสามารถใ งาน วม บ IDE งเ น ยมอ ใน จ นอ าง VS Code และ Android Studio ไ ก วย วอ าง App ส างโดยใ Flutter อเ ยของ Flutter จาก ก าวมา า ดเ น าง ๆ ของ Flutter อะไร าง คราว เราจะมาก าว ง อเ ย น าง โดย อเ ยห ก ๆ พบ อ การใ ภาษา dart ในการเ ยน งคน วนให อาจจะ งไ นเคย บ syntax ของภาษา กเ าไร ประกอบ บ community งเ ก อ เ องจาก Flutter งเ ด วมาไ ไ นาน กเ อเ ยบ บ Framework ว น ๆ อ าง React Native community อน างให ง ใ document าง ๆ งไ เยอะเ า ควร ใ เวลา ญหาเ ยว บการใ งานอาจจะ องมา งงมหา แ นนานพอสมควร ัก้กีธิว่ัน้ต้ชัก่ีกัปีม้หำท่ีท่ท่มัย่ต้หำทึจ่ญ้ข่คีม่ีท่ย่ือัตักีท่ืมัน่ม้ดัติปัย่ืนู่ย็ลัยัก่ทัส้ีนักุ้ค่มัย่ญ่ส่ึซีข้ชืค่ีทัลีส้ข้บักีส้ขึถ่ล้ีน้บีม่ต่ดุจ่ว่ล่ีท ีส้ข ้ช้ร่ีท่ยัต ้ดีอ้ด่ยับุจัปู่ยิน่ีท็ปัลำก่ีทัก่ร้ชัย้ึข่ิย่ง่ืร็ปืร่ตำท้ห่ช่ีทีมlf่ย้ึข่ิยีม้ห่ช่ีท็ป่ว่ม้ึข่ง้ด็ปัพ้ห่ช่ีท่ือ่ดุจีมัย่ย้ึข็รีมัพ้หำท้ัน่ทีทิว้ีสีพืล้ห้ช่ีท่ยืค้ีน่ดุจ่ส่ช้ข่ึซ้น้ห่ืพีม้ตัก่ตำทืร้รีม่ืมืคัล่ดุจ ืค่ดุจ

4 บท 3 Install Flutter ห บ MacOs ด ง Flutter v1.9.x บน MacOS Catalina จาก https://medium.com ด ง Platform Android (OSX) 1. การดาว โหลดและ ด ง Android Studio 2.เ ด Android Studio นมา • ไป Con gure > AVD Manager • ค ก + Create Virtual Device… • การเ อก Device de nition ง จาก น กด Next เ น Name: Pixel Size: 5.0 • เ อก System Image เ น Pie (จาก น กด Next) • กด Finish ด ง Platform IOS (OSX) • การดาว โหลด Flutter — https:// utter.dev/docs/get-started/ install/macos ( วอ าง utter_macos_v1.9.1+hot x.6-stable.zip) • แตกไฟ ไป /Users/username $ cd /Users/username && unzip utter_macos_v1.9.1+hot x.6- stable.zip • เ ม ~/ utter/bin ไป ง PATH environment variable (ใน วอ าง ใ .zshrc)$ open -e ~/.zshrc • เ ม code เ าไปใน ~/.zshrc $ export PATH=/Users/username/ utter/bin:$PATH • การ พเดท .zshrc $ source ~/.zshrc • เ ค version ของ utter $ utter --version • น น อตกลง บ Android $ utter doctor --android-licenses • น น อตกลง บ IOS $ sudo xcodebuild -license • ง า IOS ห บ ฒนา $ brew update $ brew install --HEAD libimobiledevice $ brew install ideviceinstaller ios-deploy cocoapods ัพัรำส่ค้ัต ัก้ขัยืย lf ัก้ขัยืย lf lf็ช ัอำท lf ้ข้ีน่ิพ ้ช่ยัตัยlf่ิพ iflf ่ีท์ล iflf่ยัตlf์นำท ้ัติต ้ัน็ปืล ่ช้ัน้ีนัดifืลำท ่ีทิล if่ีท ้ึขิป ้ัติต์นำท ้ัติต ้ัติต ัรำส ่ีท

5 $ pod setup าง ๆ Recommended // าหาก Homebrew permission denied $ sudo chown -R $(whoami) $(brew --pre x)/* • เ คความ ก องของ Flutter และ Dependency $ utter doctor • า ก อง องหมดจะ นผล พ ง ทดสอบส างโปรเจค Flutter น • ใ ง ห บส างโปรเจค Flutter ง $ utter create --org com.jeerawatdev -i swift project_name // -i swift เ นการระ ภาษา ไ ห งจากการ complie utter โดยผมระ ใ เ น ภาษา Swift าไ ระ default จะเ น ObjectiveC • ทดสอบ น $ utter run -d [device_name] lf ัร ็ปุย่ม้ถ็ป้หุบlfัล้ด่ีทุบ็ป lf ้ีนัด้รัรำส่ัสำค้ช ัก้ร ้ีนัด์ธัล้ึข้ต้ตูถ้ถ lf ่ีท่ต้ตูถ็ช if ้ถ

6 Install Flutter ห บ Window 1. ดาว โหลด Flutter ไ utter.dev/docs/get-started/install 2. เ อก OS เราใ งาน ( Window ห อ Mac ห อ Linux ) เ อค กเ าไปแ วจะ เจอไฟ .zip ใ เราดาว โหลด ์น้ห์ล้ล้ขิล่ืมืรืร้ช่ีทืล lf่ีท้ด์น ัรำส

7 3. เ อดาว โหลดไฟ .zip เส จเ ยบ อยแ ว ใ การแตกไฟ ไป งโฟลเดอ เรา องการ ( ใน วอ างจะแตกไฟ ไ D:\\Flutter ) ่ีท้ว์ล่ยัต้ต่ีท์รัย์ลำท้ห้ล้รีร็ร์ล์น่ืม

8 4. หนด Path ของ แห งโฟลเดอ D:\\Flutter\\bin ( โฟลเดอ bin อ ใน โฟลเดอ Flutter เราแตก zip ไ ) โดยเ าไป Search Bar ของ Windows แ ว ม Edit environment variables for your account ์พิพ้ล่ีท้ข้ว่ีท์รู่ย่ีท์ร์ร่นำตำก

9 5. เ อเ ด \"Edit environment variables for your account\" นมาจะเจอ ห า าง ใ เราเ อก Path แ วค ก Edit ิล้ลืล้ห่ต้น้ึขิป่ืม

10 6. เ ม แห งโฟลเดอ bin ลงไป โดยค ก New แ วกรอก D:\\Flutter\\bin ลงไป แ วค ก OK เ อ น ก ึทับ่ืพิล้ล้ล่ีทิล์ร่นำต่ิพ

11 7. เ ด Command Prompt นมา โดย ม CMD ใน อง Search Bar ของ Windows ( บน Mac ใ Terminal ) ้ช่ชิพ้ึขิป

12 8. ม utter doctor ลงไปใน Command Prompt เ อตรวจสอบการ ด ง Flutter 9. utter จะตรวจสอบการ ด ง 4 นตอน • Flutter อ เวอ นของ Flutter - หากเราใ เวอ น า ดจะไ ญหาใน วน • Android toolchain อ ยอม บเ อนไขใน วนของ Android - หาก อ ไ านใ การ ม utter doctor --android-license จะ ถามใ เรา น นโดย ม y ไป จาก น จะ าน ( อ า ม ม utter docker กค ง เ อตรวจสอบ ) • Android Studio อ ด ง Android Studio เ ยบ อยแ ว - หากเราใ เวอ น า ดจะไ ญหาใน วน ( ด ง Android Studio ) • Connected device อการเ อม อเ า บ Emulator - หากเราใ เวอ น า ดจะไ ญหาใน วน ( ส างและใ งาน Android Emulator ห อ Android Virtual Device ) ืร้ช้รีธิว้ีน่สัปีม่มุส่ล่ัช์ร้ชัก้ข่ต่ืชืค ้ัติตีธิว้ีน่สัปีม่มุส่ล่ัช์ร้ช้ล้รีร้ัติตืค ่ืพ้ัรีอlf์พิพืล่ย่ผ็ก้ัน์พิพัยืย้หำคีมlf์พิพำท้ห่ผ่ม้ีน้ข่ส่ืงัรืค ้ีน่สัปีม่มุส่ล่ัช์ร้ช่ัช์รืค ้ึข้ัติตlf ้ัติต่ืพlf์พิพ

13 บท 4 การเ ม น Project แรก (Getting Start) Step1: Create Flutter Project Create Flutter Project วย ง utter create hello utter Step2: Run Project เ ด simulater IOS โดยไป Xcode > open Developer Tool > Simulator เ อเ ด simulater เ ยบ อยแ ว ง Run Project โดยไป Run > Run Without Debugging มา ง ด เรา สามารถส าง Flutter Project ห บส าง Mobile application ไ แว ้ล้ด้รัรำส้ร็ก้ีนุจึถ ่ีท่ัส้ล้รีริป่ืม ่ีทิป lflf ้ีน่ัสำค้ด ้ต่ิร ่ีท

14 บรรณา กรม Hizoka. (2018). Dart 101: มา ความ ก บ Flutter นเถอะ. บ น 20 มภา น 2565, จาก https://medium.com Thiti.dev. (2020). Flutter EP.1 ความ ก บ Flutter. บ น 20 มภา น 2565, จาก https://thiti.dev/blog/30/ ด ง Flutter และโปรแกรม เ ยว อง ห บการเ ยนแอพ อ อ. บ น 20 มภา น 2565, จาก https://ifelse.co/code/mobile/install- utter lf ์ธัพุก้คืสืถืมีขัรำส้ข่ีก่ีท้ัติตีธิว ์ธัพุก้คืสักัจู้รำท ์ธัพุก้คืส ักักัจู้รำท ุน