Mobile Apps เริ่มต้นไม่ยากอย่างที่คิด

Panida KHUPHIRAN
4 min readFeb 11, 2018

--

คุณอาจจะเป็นคนที่เขียน Application อยู่แล้ว หรือกำลังเริ่มต้นศึกษาวิธีการเขียน หากตอนนี้คุณกำลังมองหา platform เหมาะๆฟรีๆอยู่
บทความนี้อาจเป็นคำตอบของคุณ :D

วันนี้เราจะมาลองสร้าง Application กันบน Microsoft Azure

Microsoft Azure มี services หลายตัวให้เราได้ลองใช้งานกันฟรีๆ
สำหรับ Microsoft Azure for Student ก็จะมี Web App, Wordpress ที่จะออกไปทางสายสร้างเว็บไซต์ แต่วันนี้เราจะมาเล่น Mobile App กัน

ขอบคุณรูปภาพประกอบจากเว็บไซต์ http://www.ittraining.vn/newstech/introduction-to-microsoft-azure-mobile-backups/

Mobile App จะประกอบไปด้วยส่วนที่เป็น
- Web Service ซึ่งเราจะใช้งานด้วย REST API (Representational State Transfer)
- ตัว Application สามารถเปิดใช้งานผ่านมือถือ หรือ tablet ได้
ซึ่งทั้ง 2 ส่วนนี้ Azure มี services ที่ช่วย support หลักๆ ก็จะมี
Store Data in Cloud — database ของเราจะถูกเก็บไว้บน cloud
User Authentication — สร้างระบบยืนยันตัวตนของ user
Push Notification

ข้อดีของการสร้าง Application ด้วย platform Microsoft Azure ก็คือ
1. Autoscale รองรับเมื่อมีผู้ใช้งานเข้าสู่ระบบมากๆในเวลาเดียว
2. รองรับหลายภาษา ไม่ว่าจะเป็น Android, IOS, .NET, Node JS
Database อย่าง mongoDB ก็รองรับเช่นกัน

3. Azure มีรูปแบบ Free packed ให้ลองใช้กัน
*แต่จะจำกัด service บางอย่าง อย่างเช่น Autoscale เราจะใช้ไม่ได้นั่นเอง
ซึ่งหากคุณเป็นนักศึกษาอยู่สามารถใช้งาน packed แบบฟรีได้
ด้วย Microsoft Azure for Student

เราจะเริ่มต้น ด้วยการเข้าไปใน Microsoft Azure กันก่อน

  • หาก มี Account อยู่แล้ว เข้าที่นี่
  • หากยัง ไม่เคยมี Account มาก่อน + คุณเป็นนักศึกษาอยู่
    สามารถสมัครตามขั้นตอนได้ ที่นี่
  • หากยัง ไม่เคยมี Account มาก่อน + ไม่ได้เป็นนักศึกษา
    สามารถสมัคร Azure free account ได้ ที่นี่

เมื่อเราเข้า Account azure ได้แล้ว ทำการค้นหาคำว่า “ Mobile App ”

หน้าตาจะคล้ายๆแบบนี้
เลือก Mobile Apps QuickStart
คลิ๊กที่ปุ่ม create

Setting app ที่เราจะสร้าง

  • App name : ตั้งชื่อ App ของเรา
  • Subscription
  • Resource Group : เลือกใช้ database
    หากมีอยู่แล้วเลือก Use existing
    หากยังไม่มีเลือก Create new
  • App Service Plan :
    เลือก location ของ server ซึ่งใกล้ที่สุด

จากนั้นกด “ create ” ที่มุมล่างสุด
แล้วรอระบบ จะสร้าง app ตามที่เรา setting ไว้

เมื่อสร้างเสร็จจะได้หน้าตาแบบนี้

จะเห็นว่ามี URL ที่มุมขวา
เมื่อลองเข้าไปก็จะเป็น
เว็บไซต์ของเรา

วันนี้เราจะมาสร้างแอพ Android แบบง่ายๆกัน

ไปที่ Quickstart
เลือก platform ที่เราอยากสร้าง
เลือกเป็น Android

จากนั้นก็ทำตามขั้นตอน

Step 1 คือเลือก database ที่เราจะใช้
ปกติ ระบบจะใช้ database ที่เราได้เซ็ตไว้ตั้งแต่สร้าง app
*ถ้าอยากใช้ SQLite ก็เลือกได้

Step 2 setting ตัว API
เลือก platform ที่จะใช้เป็น backend language
ซึ่งระบบได้เซ็ตไว้ให้แล้ว

Step 3 ทำการ Download app ที่ผ่านการ setting เรียบร้อยแล้ว
นำไปเปิดใน Android Studio

Folder ที่ download มา
เลือก Import project (Gradle, Eclipse ADT, etc.) แล้วเลือก Folder ของ App เรา ในที่นี้ใช้ชื่อว่า “ AndroidBPK “
จากนั้น คลิ๊กที่ icon play สีเขียว เพื่อ Run App

เลือก Target ที่จะทำ Simulate app ซึ่งมี 2 ทางเลือก
- Connected Devices :
simulate บนมือถือเราเลย
*กรณีนี้มือถือเราต้องเป็น android นะ และต้องมี version ของ API ที่รองรับได้
- Available Virtual Device :
จะ simulate Android device ขึ้นมาบนคอมพิวเตอร์ของเรา
เลือกช้อยส์นี้

และนี่คือหน้าตา app ของเรา
ซึ่งเป็น app
สำหรับลิสต์รายการ Todo item

มาลองทดสอบตัว App
โดยพิมพ์ข้อความคำว่า “ Hello ”
ลงไปแล้วกด Add

จะมีข้อความที่เราพิมพ์ปรากฎขึ้นมา

นั่นคือคำว่า “ Hello ” ถูกเพิ่มใน database ของเราแล้ว
*หากทดสอบบนมือถือของเราเอง แล้วไม่ขึ้นคำว่า “ Hello ” ให้เช็คว่ามือถือได้เชื่อมต่อ ​internet หรือยัง

ต่อมาไปที่ website ของ app เรากัน

เลือกคำว่า try iy out ->
จะเปิดหน้าต่าง
Swagger UI ออกมา

swagger มีหน้าตาแบบนี้

ในหน้านี้ จะมี Operations สำหรับใช้ทำการเปลี่ยนแปลงหรือดึงข้อมูลจาก table หรือ database ที่เราสร้างไว้ คลิ๊กที่ List Operations

จะเห็นคำสั่ง HTTP Method ที่เราเลือกใช้งานได้

เลือก GET ที่เป็น /tables/todoitrm
จะแสดงรายละเอียดของ JSON ที่เราได้รับหลังจากใช้ HTTP Medthod ด้วยคำสั่ง GET

แล้วคำว่า “ Hello ” ที่เรากด Add ไว้ไปอยู่ตรงไหน?
ให้เลื่อนลงไปดูที่หัวข้อ Response Messages แล้วคลิ๊กที่ปุ่ม Try it out! นั่นคือเราใช้คำสั่ง GET แล้ว

ดูในส่วนที่ Response Body จะเห็นว่ามีคำว่า “ Hello ” อยู่ใน table หรือ database ของเราอยู่แล้ว

เราจะได้ JSON ก้อนหนึ่งที่มี text คำว่า Hello กลับมา

ส่วนคำสั่งอื่นๆ อย่างเช่น
POST, DELETE ก็สามารถใช้ได้ผ่าน Swagger นี้

หากอยากสร้างระบบเพิ่ม
- ระบบ User Authentication สามารถทำตามได้ ที่นี่
- ระบบ Push Notification ทำตามได้ ที่นี่

สำหรับการเขียน Mobile app ด้วย android คงต้องขอจบไว้ที่ตรงนี้ก่อน

ถ้าหากเราอยากใช้ระบบ Backend เป็นอย่างอื่น หรืออยากเริ่มสร้าง app ด้วย .NET, IOS
สามารถทำตาม Tutorial
ได้ที่เว็บไซต์นี้ https://docs.microsoft.com/en-us/azure/app-service-mobile/

เว็บไซต์สำหรับอ้างอิง | https://azureinteractives.azurewebsites.net/Azure101Cards/default.html
https://docs.microsoft.com/en-us/azure/app-service-mobile/app-service-mobile-android-get-started — Guild line สำหรับเริ่มต้นสร้าง app android
https://devahoy.com/android/ — สำหรับผู้เริ่มต้นเขียน android

— หวังว่าบทความนี้จะมีประโยชน์นะคะ ขอบคุณค่า

--

--