chapter 13 android apppioneer.netserv.chula.ac.th/~achatcha/2301466/13.pdf · android > docs...
TRANSCRIPT
![Page 1: Chapter 13 Android Apppioneer.netserv.chula.ac.th/~achatcha/2301466/13.pdf · Android > Docs > Build a simple user interface Open the Layout Editor Add a text box Add a button Change](https://reader034.vdocuments.site/reader034/viewer/2022050611/5fb26e1b271aa92c38009edd/html5/thumbnails/1.jpg)
Chapter 13Mobile App
![Page 2: Chapter 13 Android Apppioneer.netserv.chula.ac.th/~achatcha/2301466/13.pdf · Android > Docs > Build a simple user interface Open the Layout Editor Add a text box Add a button Change](https://reader034.vdocuments.site/reader034/viewer/2022050611/5fb26e1b271aa92c38009edd/html5/thumbnails/2.jpg)
![Page 3: Chapter 13 Android Apppioneer.netserv.chula.ac.th/~achatcha/2301466/13.pdf · Android > Docs > Build a simple user interface Open the Layout Editor Add a text box Add a button Change](https://reader034.vdocuments.site/reader034/viewer/2022050611/5fb26e1b271aa92c38009edd/html5/thumbnails/3.jpg)
Android & iOS
Mobile App
Android
C/C++
JavaScript
Kotlin
iOS
Objective- C
Swift
Hybrid
Cordova (HTML/CSS/Javascript)
React Native
Xamarin (C#)
Expo
![Page 4: Chapter 13 Android Apppioneer.netserv.chula.ac.th/~achatcha/2301466/13.pdf · Android > Docs > Build a simple user interface Open the Layout Editor Add a text box Add a button Change](https://reader034.vdocuments.site/reader034/viewer/2022050611/5fb26e1b271aa92c38009edd/html5/thumbnails/4.jpg)
![Page 5: Chapter 13 Android Apppioneer.netserv.chula.ac.th/~achatcha/2301466/13.pdf · Android > Docs > Build a simple user interface Open the Layout Editor Add a text box Add a button Change](https://reader034.vdocuments.site/reader034/viewer/2022050611/5fb26e1b271aa92c38009edd/html5/thumbnails/5.jpg)
![Page 6: Chapter 13 Android Apppioneer.netserv.chula.ac.th/~achatcha/2301466/13.pdf · Android > Docs > Build a simple user interface Open the Layout Editor Add a text box Add a button Change](https://reader034.vdocuments.site/reader034/viewer/2022050611/5fb26e1b271aa92c38009edd/html5/thumbnails/6.jpg)
ปจจยทตองพจารณาในการเลอกเครองมอทใชพฒนาโมบายแอป
• ลกษณะของแอป เชน เกม ประมวลผลภาพ/วดโอ อานเขยนฐานขอมลเนน GUI สวยงาม ตนทนต าแตตองการทง Android และ iOS
• ความยากงายในการตดตง ถายากเกนไปกไมเหมาะทจะใชสอน• แอปของ iOS ตองมเครอง Mac ถงจะท าได• ทกษะของผพฒนา เชน มทกษะในการท าเวบ (HTML + CSS +
JavaScript) เปนทนเดมอยแลว หรอเขยนโปรแกรมดวยภาษา Javaหรอภาษา C# ได
![Page 7: Chapter 13 Android Apppioneer.netserv.chula.ac.th/~achatcha/2301466/13.pdf · Android > Docs > Build a simple user interface Open the Layout Editor Add a text box Add a button Change](https://reader034.vdocuments.site/reader034/viewer/2022050611/5fb26e1b271aa92c38009edd/html5/thumbnails/7.jpg)
Expo
• เหมาะกบคนทเขยนเวบดวย React อยแลว• ตดตงงายและเรว ไมเสยเวลานาน• ท าแอปไดทง Android และ iOS• ไมตองมเครอง Mac กท าได แตตองม iPhone/iPad ไวทดสอบ
เปรยบเทยบ React Native กบ Expo
![Page 8: Chapter 13 Android Apppioneer.netserv.chula.ac.th/~achatcha/2301466/13.pdf · Android > Docs > Build a simple user interface Open the Layout Editor Add a text box Add a button Change](https://reader034.vdocuments.site/reader034/viewer/2022050611/5fb26e1b271aa92c38009edd/html5/thumbnails/8.jpg)
Hardware Requirements
หา IP address
192.168.43.226
WiFi Access Point / Routerจะแชร WiFi Hotspot จากมอถอกไดChula WiFi ไมแนใจ มคนบอกวาไมได
Android หรอ iOS กได ตดตงแอปชอ Expo
![Page 9: Chapter 13 Android Apppioneer.netserv.chula.ac.th/~achatcha/2301466/13.pdf · Android > Docs > Build a simple user interface Open the Layout Editor Add a text box Add a button Change](https://reader034.vdocuments.site/reader034/viewer/2022050611/5fb26e1b271aa92c38009edd/html5/thumbnails/9.jpg)
Web API
Program.cs
Web Browser
dotnet run
dotnet new webapi -o web-api
cd web-api
แก Program.cs
dotnet run
ทดสอบบน web browser
![Page 10: Chapter 13 Android Apppioneer.netserv.chula.ac.th/~achatcha/2301466/13.pdf · Android > Docs > Build a simple user interface Open the Layout Editor Add a text box Add a button Change](https://reader034.vdocuments.site/reader034/viewer/2022050611/5fb26e1b271aa92c38009edd/html5/thumbnails/10.jpg)
Expo
npm install --global expo-cliexpo init my-app
cd my-app
App.js
ตอง npm install axios ดวย
![Page 11: Chapter 13 Android Apppioneer.netserv.chula.ac.th/~achatcha/2301466/13.pdf · Android > Docs > Build a simple user interface Open the Layout Editor Add a text box Add a button Change](https://reader034.vdocuments.site/reader034/viewer/2022050611/5fb26e1b271aa92c38009edd/html5/thumbnails/11.jpg)
npm start
โปรแกรมจะโหลด api อยตลอดเวลา
![Page 12: Chapter 13 Android Apppioneer.netserv.chula.ac.th/~achatcha/2301466/13.pdf · Android > Docs > Build a simple user interface Open the Layout Editor Add a text box Add a button Change](https://reader034.vdocuments.site/reader034/viewer/2022050611/5fb26e1b271aa92c38009edd/html5/thumbnails/12.jpg)
EP.1 - ความลบของ useEffect ทคณอาจยงไมรhttps://www.youtube.com/watch?v=3HCoVu1FYHk
EP.2 - ท าความเขา useEffect ตงแตเรมตนhttps://www.youtube.com/watch?v=-zEW9tlDmdM
EP.3 - ท าความเขา useEffect ตงแตเรมตน (Part 2)https://www.youtube.com/watch?v=viwzlu7Qf6c
EP.4 - Typescript in React 101https://www.youtube.com/watch?v=OlcaCks-GlE
EP.5 - Typescript in React 101 (Part 2)https://www.youtube.com/watch?v=1WEmiCgZu64
EP.6 - React Anti-Patternhttps://www.youtube.com/watch?v=vStERJGSuCY
EP.7 - React Testing Library 101https://www.youtube.com/watch?v=ve_8ci_WbrM
EP.8 - Project Structure in Reacthttps://www.youtube.com/watch?v=cqIcPfXngqo
EP.9 - React Case Study (Authentication)https://www.youtube.com/watch?v=Y89y890vqwU
EP.10 - รวว Material-UI + Tailwindcss (ของดมอยจรง)https://www.youtube.com/watch?v=4qgGOq8mS4E