chapter 13 android apppioneer.netserv.chula.ac.th/~achatcha/2301466/13.pdf · android > docs...

12
Chapter 13 Mobile App

Upload: others

Post on 14-Aug-2020

2 views

Category:

Documents


0 download

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

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
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

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
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
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

ปจจยทตองพจารณาในการเลอกเครองมอทใชพฒนาโมบายแอป

• ลกษณะของแอป เชน เกม ประมวลผลภาพ/วดโอ อานเขยนฐานขอมลเนน 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

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

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

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

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

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

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