การทำระบบ Login and Map By Xcode

สวัสดีครับวันนี้เราจะมาสอนการทำ login และ Map ง่ายๆให้รับชมกันนะครับน้องๆหนูๆก็สามารถทำได้แบบไม่ยากเลย เอาหละไปดูกันเลยครับ !!

ก่อนอื่นเลยให้เราเปิดโปรแกรม xcode ขึ้นมา

จากนั้นสร้าง Project

  1. เลือก Single View
  2. กด Next

จากนั้น

  1. ตั้งชื่อ Project ของเราเอง
  2. ชื่อหน่วยงานของเรา
  3. E-mail ที่อยู่ของเรา ให้พิมพ์จากหลังไปหน้านะครับเช่น เมลปกติ “is.wa@gmail.com” ให้เขียนเป็น “com.gmail.wa.is” นะครับไม่ต้องมี @
  4. เลือกใช้ ภาษา Swift ในการเขียน
  5. เลือกเป็น iPhone เพราะว่าเราจะเริ่มทำ App ของ iPhone กัน
  6. กด Next

จากนั้นให้เราทำการเลือก Folder ที่เราต้องการ บันทึก “Save as…” ในที่นี้บันทึกไว้ที่

Desktop > AppLoginAndMap จากนั้นกด Create ดังภาพ

จากนั้นให้เราทำตาม Step ตามภาพ ดังนี้

1. ให้เราเลือกมาที่ “Main.storyboard”

จะเจอหน้าตาแบบนี้

2. พิมพ์หาเครื่องมือที่ชื่อ “ label” ดังภาพ

3. ทำการลากลงไปวางใน Main ดังภาพ

4. เราจะทำการลาก “label” จำนวน 3 ตำแหน่ง คือ

  • Title : Login Map
  • Username
  • Password

ดังภาพ

5. ให้เราทำการ นำปุ่ม Button และ Text Field

Text Field ไว้สำหรับกรอก Username และ Password

Button เป็นปุ่มที่ใช้ในการ Touch Here หรือ แตะที่นี้ เพื่อเข้าสู้ระบบ

หรือที่เรียกว่าการ Login User

เมื่อทำครบหมดแล้วจัดตำแหน่งใส่ให้สวยงาม จะได้ดังภาพ (ภาพตัวอย่างใส่พื้นหลังสีส้มเพื่อความมองเห็นที่ชัดเจนยิ่งขึ้น)

6. จากนั้นตั่งค่า Text Field ในส่วนของ Password ให้เป็น “· · · ·” เพื่อให้ไม่สามารถมองเห็น Password ได้ ดังภาพ

  1. คลิกที่ Text Field ที่ต้องการจะทำ
  2. ติ๊กถูก ตรง “Secure Text Entry”

7. จากนั้นเลือกเหมือนเดิมแบบ ข้อ 6 แต่ไม่ต้อง ติ๊กถูก ตรง “Secure Text Entry” ให้ทำการ ติ๊กถูก ตรง “Clear when editing begins”

  1. ทำการคลิกที่ช่อง Username ละทำการ ติ๊กที่ “Clear when editing begins”
  2. ทำการคลิกที่ช่อง Password ละทำการ ติ๊กที่ “Clear when editing begins”

8. จากนั้นเราจะมาที่หน้าต่างใส่ Code กัน โดยให้เรามาที่หน้า “ViewController.swift” เราจะพบหน้า Code ดังภาพ

9. คลิกตรง ห่วงวงกลม 2 วง จะแบ่งเป็น 2 หน้าให้เราเลือก ฝั่งซ้ายเป็น “Main.storyBorad” และอีกฝั่งจะเป็นเป็นหน้า code คือหน้า “ViewController.swift” ให้อัตโนมัติ

10. จากนั้น คลิกที่ Text Username ดังภาพ

และทำการ กด ปุ่ม “Control” ค้างไว้พร้อม คลิก ที่ Text Username ลากไปวางหน้า Code ให้อยู่ใต้ Class ดังภาพ

จะขึ้น ดังภาพ

  1. เลือกเป็น Outlet
  2. ตั้งชื่อ เป็น Username
  3. Type เลือกเป็น UITextField
  4. Storage เลือกเป็น Weak
  5. จากนั้นกด Connect

จะได้ดังภาพ ในหน้า Code

ทำแบบนี้อีกรอบคือ ในส่วนของ Password ทำเหมือนกัน แต่ตั้งชื่อเป็น Password

จะได้ดังภาพ

11. จากนั้นทำปุ่ม Button ทำเหมือน ข้อที่ 10 คือเหมือน Username และ Password

แต่ตั้งค่า ดังภาพ

จากนั้นกด “Connect” เราจะได้ Code นี้มาตามภาพ

จากนั้นให้เราสร้าง View Controller มาอีกหน้าต่าง1จะได้ดังภาพ

ลาก View Controller มาวางไว้ข้างๆตำแหน่ง Main อันแรก จะเห็นได้ดังภาพ(ใส่สี View ได้ตามต้องการเพื่อการทดสอบผลลัพธ์ที่ชัดเจน)

12. ให้เราพิมพ์ Code เหล่านี้ลงไป ดังภาพ

หรือ คัดลอกส่วนนี้ ไปวางได้เลย

if(Username.text==”admin” && Password.text==”1234") { let vc = self.storyboard?.instantiateViewController(withIdentifier: “psView”) as! ViewController2 self.present(vc, animated: true, completion: nil) } else { let alert = UIAlertController(title: “Pass Not Fail”, message: nil, preferredStyle: UIAlertControllerStyle.alert) alert.addAction(UIAlertAction(title: “OK”, style: UIAlertActionStyle.default, handler:nil)) self.present(alert, animated: true, completion: nil) }

อธิบาย จุดสำคัญ ในการกำหนด ค่า Username และ Password ดังภาพ

  1. คือ ชื่อ Username คือตัวแปรที่เรา ลากมาแล้วตั้งตอนแรกที่ทำการลาก Text มาหน้า Code
  2. คือ ชื่อ Password คือตัวแปรที่เรา ลากมาแล้วตั้งตอนแรกที่ทำการลาก Text มาหน้า Code
  3. เราทำการนำตัวแปล Username จากหมายเลข 1 ในภาพ ที่เราตั้งไว้มาใส่ จะได้ Username.text
  4. เราทำการนำตัวแปล Password จากหมายเลข 2ในภาพ ที่เราตั้งไว้มาใส่ จะได้ Password.text
  5. ในส่วนที่ต่อท้าย Username.text == “กำหนดรหัสตามต้องการ”
  6. ในส่วนที่ต่อท้าย Password.text == “กำหนดรหัสตามต้องการ”

ในส่วนนี้จะเป็นในส่วนของ Code ที่ เป็นข้อความ Alert เด้งขึ้นมาเวลาใส่รหัสผิดหรือข้อความ “ยินดีต้อนรับเข้าสู่ระบบ” เมื่อเราพิมพ์รหัสถูกต้อง

ในส่วนนี้ ตรง “psView” นั้นจะอธิบายว่าได้มาจากไหนกันนะครับ ร่วมทั้ง ViewController2 ด้วยเช่นกัน

เริ่มจาก

  1. คลิกที่วงกลมสีเหลือง
  2. คลิกที่ รูป สีเหลี่ยมดังภาพ
  3. ตั้งชื่อตรง Storyboard ID : “ psView ”

จากนั้นให้เราทำการสร้าง Class ขึ้นมาใหม่ ดังภาพ

เลือก File > New > File…

เลือก Cocoa Touch Class และกด Next

จากนั้นตั้งชื่อ Class ของเรา ในที่นี้ตั้งเป็น “ ViewController2 ” จากนั้นกด Next

จากนั้นเลือก Folder ที่เราต้องการทำการบันทึก คือ Folder ที่เราทำ Project ไว้ตอนแรก ดังภาพ และกด Create

เราจะได้สิ่งนี้มาดังภาพ

จากนั้นให้เรากลับมาหน้านี้ละมาเซ็ตค่าของ View 2 ดังภาพ

  1. กดที่ปุ่มเหลืองๆดังภาพ
  2. เลือก Class
  3. เลือก ViewController2 คือ Class ที่เราสร้างเมื่อสักครู่นี้

และทั้งหมดนี้คือที่มาของเจ้า code ตัวนี้

พอถึงขั้นตอนนี้แล้ว จากนั้นเรามาลอง Run ผลลัพธ์กันว่าจะเป็นแบบนี้กันบ้างไหมเอ่ย

หน้าตาของโปรแกรมที่ Run แล้ว หน้า Main Login
กรณีใส่รหัสผิดจะขึ้นดังภาพ จะขึ้นว่า “ Pass Not Fail”
กรณีใส่รหัสถูกต้องจะเข้ามาหน้านี้ทันที คือหน้า 2

เอาหละเป็นอันเสร็จสิ้นขั้นแรกของการทำโปรแกรมแล้ว นั้นคือ ระบบ Login นั้นเอง

ต่อมาเราจะมาทำ จุดสำคัญของโปรแกรมนี้กันเลย นั้นก็คือ MAP นั้นเอง

เราไปลุยต่อกันเลยยยย

ขั้นตอนการทำ MAP By Xcode

ขั้นแรกให้เราหา Map Kit ได้ดังภาพ

จากนั้นลาก มาใส่ จะได้ดังภาพ ขยายขนาด ตามที่เราต้องการ(เว้นด้านบนไว้ใส่แท๊ปเมนูด้วยนะจ๊ะ)

จากนั้นเลือก หา Segmented Control ดังภาพ

แล้วลากไปวางไว้ที่ หน้า MAP ตามภาพ

พอลากไปวางแล้ว

  1. คลิกท ี่Segmented Control ที่เราวางไว้
  2. คลิกที่รูปไม้บันทัด
  3. กำหนดค่า Autoresizing ดังภาพ

จากนั้นให้ทำตามภาพด้านล่างนี้

และทำการตั้งชื่อ แต่ละ Segments อันแรกให้ตั้งว่า Normal ดังภาพ

ทำการเลือก Segments อันต่อไป อันที่สอง ตั้งว่า Satellite ดังภาพ

อันที่ 3 ตั้งเป็น Hybrid ดังภาพ

จากนั้นเราจะทำการลงมือ Code กันแล้วนะครับ ให้เรามากดที่ Class ที่เราสร้างไว้ตอนแรกคือ ViewController2 ดังภาพ

Step 1

ลบ Code ที่ไม่ใช้ออกดังภาพ ลบออกได้เลย

จากนั้นทำการพิมพ์ import Mapkit

Step 2

1.ทำการพิมพ์ Code ใต้ class ว่า “ @IBOutlet var map: MKMapView! ” ดังภาพ

2.ทำการพิมพ์ Code ใต้ class ว่า “ @IBOutlet var segment: UISegmentedControl! ” ดังภาพ

Step 3

ทำการพิมพ์ Function เหล่านี้ลงไปดังภาพ

Code

@IBAction func segmentch(_ sender: AnyObject){

switch segment.selectedSegmentIndex{

case 0:

map.mapType = MKMapType.standard

break

case 1:

map.mapType = MKMapType.standard

break

case 2:

map.mapType = MKMapType.standard

break

default:

break

}

Step 4

ทำการตั้งค่า MapKit ของเรา ดังภาพ

จากนั้นทำการลากเส้น ดังภาพ

ลากเสร็จแล้วจะขึ้นดังภาพ ให้เลือก “ Map ”

จะได้ดังภาพนี้

จากนั้นให้มาเลือกดังภาพตั้งค่า Tab

ลากเส้นมาที่จุดสีเหลืองดังภาพ

จะขึ้นดังภาพ จากนั้นทำการเลือก “ segment ”

จากนั้นทำเหมือนเดิม รอบนี้มาตรงที่ Value Changed ดังภาพ

จากนั้นเลือก “ segmentch: ”

จะได้ดังภาพ เป็นอันเสร็จสิ้น !!!!

เอาหละเอาหละ ได้เวลาแล้ว !!

ทดสอบ Run ผลลัพธ์กันเลย

Test !!!

หน้าแรก คือ Normol ผลที่ได้คือ….

หน้าสอง คือ Satellite ผลที่ได้คือ….

หน้าสุดท้ายแล้ว คือ Hybrit ผลที่ได้คือ …

เป็นอันเสร็จสิ้นการทำ ทั้งระบบ Login และ MapKit 3แบบ

โดย Normal-Satellite-Hybrit แบบง่ายๆไปแล้ว เห็นไหมหละครับว่ามันไม่มี

อะไรยากเกินความสามารถเราจริงๆเลยนะครับ ^^

วันนี้ก็ขอฝากความรู้ไว้ศึกษาละต่อยอดกันไว้เท่านี้นะครับ สวัสดีคราฟฟ!!!

เพื่อความเข้าใจมากขึ้นสามารถกดดูคลิปและทำตามคลิปได้เลยนะคราฟ

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.