React native + Android studio : SDK Location + Run APK

รา build app เพื่อให้ได้แฟ้ม .apk ที่พัฒนาขึ้นด้วย React native ร่วมกับ Android SDK ซึ่งสามารถส่งออกผลงานได้หลายวิธี เมื่อได้แฟ้ม .apk มาแล้ว นำไปใช้บนอุปกรณ์ หรือ emulator ได้อีกหลายวิธี ซึ่งวิธีหนึ่งที่น่าสนใจ คือ upload แฟ้ม .apk ขึ้นไปทำงานบน เว็บบราวเซอร์ (Run APK Online in Browser) ผ่านบริการของ appetize.io หรือ ApkOnline Chrome extension (ส่วน testobject.com และ Manymo.com ประกาศยุติแล้ว) ซึ่งตัวอย่างนี้ เลือกใช้บริการที่ appetize.io เมื่อสมัคร และกรอกอีเมล ระบบจะส่งลิงค์ register ไปให้ทางอีเมล หลังจากนั้นจะพบลิงค์เข้าแอพแบบ online ในอีเมล หัวข้อ “Your links are ready!” มีข้อความว่า Your app is ready to go at https://appetize.io/app/g7..ym หรือ sign in เข้า dashboard เลือก ชื่อโปรเจคของเรา (myproject) มีตัวเลือก view , embed , manage , .. หากเลือก view ก็จะเปิด emulator แบบ online มาให้ใช้งาน ถ้าต้องการใช้บริการมากกว่านี้ หรือมีข้อจำกัดที่ลดลง เลือกจ่ายค่าบริการได้ ซึ่งหน้าตาแอพบนเว็บไซต์ เหมือนที่พบบน emulator โดยเงื่อนไขให้บริการแบบ Trail มีระยะเวลาหนึ่งเดือน หรือจำกัดจำนวน มีรายละเอียดดังนี้ Current plan: Trial. Period usage: 0 sessions, 0 minutes from Aug 1, 2021 12:00:00 AM to Sep 1, 2021 12:00:00 AM UTC. You are limited to 1 concurrent user and 100 minutes of streaming per month.

Android Studio
 Menu bar, Tools, SDK Manager, Android SDK Location: C:\Users\burin\AppData\Local\Android\Sdk
 Menu bar, Tools, SDK Manager, Android SDK, SDK Platforms, Check : Android 9.0 (Pie) API Level 28
 Menu bar, Tools, SDK Manager, Android SDK, SDK Tools,
 Check : Intel x86 Emulator Accelerator (HAXM installer) - Installed
 Bios : VT-x Virtualization must be enabled in Bios ( VT-x )
 C:> sysdm.cpl
 ANDROID_SDK_ROOT=C:\Users\burin\AppData\Local\Android\Sdk
 อ่านเพิ่ม https://developer.android.com/studio/run/emulator-commandline
 dir C:\Users\burin.android\avd พบ folder : Nexus_5X_API_24.avd
 C:\Users\burin\AppData\Local\Android\Sdk\emulator> emulator @Nexus_5X_API_24
 C:> react-native init myproject
 C:\myproject> gradlew assembleRelease
 dir E:\myproject\android\app\build\outputs\apk\release\app-release.apk - 31 MB
 dir E:\myproject\android\app\build\outputs\apk\debug\app-debug.apk - 44 MB

#AndroidStudio ตอนที่ 1 การพัฒนา app สำหรับใช้งานบน Smart Phone ที่ลง Android

ตอนที่ 1 การพัฒนา app สำหรับใช้งานบน Smart Phone ที่ลง Android

<introduction>
หลังจากผมได้คอมพิวเตอร์โน๊ตบุ๊ค แล้ว IT Clinic ลง Windows 10 Home 64Bit (OEM=Original Equipment Manufacture)
ก็นำมาลองสร้างแอพ (App = Application) สำหรับ Moveable Device ด้วย Android Studio
ซึ่งมีผู้พัฒนา คือ บริษัทกูเกิ้ล (Google.com) เริ่มต้นก็คิดว่าจะลงโปรแกรมแล้วเขียนโปรแกรม Hello World ไป Run บน Smart Phone ที่ใช้อยู่
</introduction>

<process>
กระบวนการในการพัฒนา APP
เพื่อให้ได้ .apk ไปใช้งาน
ซึ่ง Google พัฒนา Android Studio เป็น IDE ที่มี everything และใช้งานง่ายกว่าเดิม
มีขั้นตอน ดังนี้

1. Download : Java (jdk-8u144-windows-i586.exe หรือรุ่นใหม่กว่า)
จาก https://java.com/en/download/
เพราะเครื่องมือสำหรับพัฒนาโปรแกรม ต้องใช้ Java Runtime Environment (JRE)
แต่ใน Android Studio รุ่นที่ผมใช้เป็นแบบ Portable
มี JRE Embeded ติดมาให้ด้วย ไม่ต้องติดตั้ง เพราะเรียกใช้งานจากในแฟ้มที่คัดลอกมาได้เลย
ดังนั้นในเครื่องที่ผมใช้พัฒนา Android App จึงไม่ติดตั้ง JAVA ด้วยตนเอง
เพราะมีมาพร้อม Android Studio แล้ว

project structure in android studio
project structure in android studio

2. Download : Android Studio (android-studio-ide-162.4069837-windows32.zip)
จาก https://developer.android.com/studio/
ของผมได้รุ่น Android Studio v2.3.3 (June 2017) ซึ่งใหม่สุด ณ ตอนนี้
ซึ่ง Include Everything มาแล้ว
ทั้ง IDE (Integrated Development Environment) + SDK (Android Software Development Kit) + Emulator
ผมเลือกรุ่น .zip ไม่เลือกแบบ install
เพราะคลาย zip แล้ว เรียกให้โปรแกรม Folder> android-studio\bin\studio.exe ทำงานได้เลย
ทำงานแบบ Portable ที่ไม่ต้องติดตั้งก่อน
และผมไม่เลือกใช้ Eclipse เพราะ sdk-tools-r2602_windows-3859397.zip
จะไม่มี SDK Manager มาให้ ต้องใช้ SDK Manager ใน Android Studio
และ Google ประกาศเลิกสนับสนุน SDK ให้ Software ภายนอกแล้ว

Android Studio can be the portable software
Android Studio can be the portable software

3. เมื่อสั่งให้ studio.exe ทำงาน
ก็สั่ง Menu Bar, File, New, New Project
Application name : My Application
Company domain : www.thaiall.com
Minimum SDK : API 19: Android 4.4 (KitKat)
อาจเลือก API 25: Android 7.1.1 (Nougat)
หรือ API 26: Android 8 (O) ก็แล้วแต่ชอบนะครับ แต่ผมชอบของเก่า
Add an Activity to Mobile
เป็น Template ให้เลือก 12 แบบ แบบแรกที่เลือก คือ Basic Activity
แล้วก็ Finish อะไรไม่แจ้งไว้ แสดงว่าไม่ได้เปลี่ยน

Default Activity on Android Studio
Default Activity on Android
Studio

Default Activity on Android Studio
Default Activity on Android
Studio

Default Activity on Android Studio
Default Activity on Android
Studio

4. เข้าสู่ส่วนของ IDE มีหน้าต่างย่อยเพียบ
เห็นคำว่า Hello World! ใน content_main.xml
พบช่อง Text ด้านขวา สามารถเปลี่ยนเป็น Hello My World! ที่นั่นได้

We can change from hello world to hello my world
We can change from hello world to hello my world

5. ทดสอบประมวลผล
Menu bar, Run, Run ‘app’ หรือ Shift F10

6. เลือก Device
จาก Connected Devices หรือ Available Virtual Devices
หรือกด Create New Virtual Device
ผมสร้าง Device ชื่อ Nexus 5X API 19 ไว้ทดสอบตัวหนึ่ง
สร้างเสร็จก็เลือก Device ที่สร้างขึ้น
จะมีการ Popup อุปกรณ์ Emulator ขึ้นมา เพื่อแสดงผลการ Run

android emulator
android emulator

7. หลังพอใจในผลลัพธ์ ที่เห็นบน Emulator แล้ว
สั่งสร้าง .APK ด้วย Menu bar, Build, Build APK
แฟ้ม .apk ที่ได้ชื่อ app-debug.apk
อยู่ใน C:\Users\[Your Name]\AndroidStudioProjects\basicactivity\app\build\outputs\apk
นำแฟ้มนี้ไปใช้ใน Smart Phone ได้ตามต้องการ
หากผลบน Emulator ไม่น่าพอใจ ก็สั่ง Uninstall
ได้เหมือนกับที่ทำบน Smart Phone คือ ลากลงถังขยะ

we can use apk file on smart phone
we can use apk file on smart phone

 

https://www.4shared.com/folder/AgIkeXaS/android.html

</process>

<website_guide>
+ http://www.thaiall.com/android
</website_guide>

หมายเหตุ 
ถ้าสนใจติดตามเนื้อหาในบล็อกนี้ สามารถ subscribe ด้วย email ที่อยู่ข้างขวา หรือ click here