1. ก่อนเริ่มต้น
ก่อนเริ่มเขียนโค้ด คุณจะต้องตั้งค่าข้อกำหนดเบื้องต้น 2-3 อย่าง
Xcode
บทแนะนำนี้ใช้เครื่องมือ Xcode ของ Apple ร่วมกับภาษา Objective-C เพื่อสร้างแอปพลิเคชัน iOS อย่างง่ายที่ทำงานในโปรแกรมจำลอง โดยไม่จำเป็นต้องใช้อุปกรณ์จริง คุณดาวน์โหลด Xcode ได้ที่ https://developer.apple.com/xcode/
CocoaPods
Places SDK สำหรับ iOS พร้อมใช้งานเป็น CocoaPods Pod CocoaPods เป็นเครื่องมือการจัดการทรัพยากร Dependency แบบโอเพนซอร์สสำหรับโปรเจ็กต์ Swift และ Objective-C หากยังไม่มีเครื่องมือนี้ คุณจะต้องติดตั้งก่อนดำเนินการต่อ โดยติดตั้งจากเทอร์มินัลได้ดังนี้
sudo gem install cocoapods
ดูรายละเอียดเพิ่มเติมเกี่ยวกับ CocoaPods ได้ที่คู่มือการเริ่มต้นใช้งาน CocoaPods
การติดตั้ง SDK
หากต้องการติดตั้ง SDK คุณต้องสร้าง Podfile ในไดเรกทอรีโปรเจ็กต์ที่ CocoaPods จะใช้เพื่อดาวน์โหลดและกำหนดค่าทรัพยากร Dependency ที่จำเป็น วิธีที่ง่ายที่สุดคือการสร้างโปรเจ็กต์ใหม่ใน Xcode เพิ่ม Podfile ลงในโปรเจ็กต์นั้น และติดตั้ง Pod ในโปรเจ็กต์
เปิด Xcode แล้วคุณจะเห็นหน้าจอ "ยินดีต้อนรับสู่ Xcode" เลือก "สร้างโปรเจ็กต์ Xcode ใหม่" ที่นี่
ในหน้าจอถัดไป ระบบจะขอเทมเพลตสำหรับโปรเจ็กต์ใหม่ เลือก "Single View Application" สำหรับ iOS แล้วกด "Next"
เมื่อระบบขอให้ระบุชื่อผลิตภัณฑ์ คุณจะเลือกชื่อใดก็ได้ แต่โปรดจดบันทึกตัวระบุแพ็กเกจที่ระบบสร้างให้ คุณจะต้องใช้ข้อมูลนี้ในภายหลัง
กด "ถัดไป" แล้วระบบจะสร้างโปรเจ็กต์ให้คุณ จดบันทึกไดเรกทอรีที่สร้าง ปิด Xcode แล้วใช้เทอร์มินัลเพื่อไปยังไดเรกทอรีนั้น
ป้อนคำสั่งต่อไปนี้โดยใช้เทอร์มินัล
pod init
ระบบจะสร้างไฟล์ชื่อ Podfile ให้คุณ แก้ไขเพื่อเพิ่มพ็อดสำหรับ GoogleMaps ดังนี้
target '{YOUR APP NAME}' do
pod 'GoogleMaps'
end
บันทึกแล้วปิด Xcode อย่าลืมปิดโปรเจ็กต์ดังกล่าวเนื่องจากในขั้นตอนถัดไปคุณจะต้องแก้ไขโปรเจ็กต์พื้นฐาน คุณจะเปิดไฟล์โปรเจ็กต์อื่นเมื่อดำเนินการเสร็จแล้ว และเป็นเรื่องปกติที่นักพัฒนาซอฟต์แวร์จะสับสนว่าทุกอย่างอยู่ที่ไหนหากไม่ได้ปิด Xcode ก่อนหน้านี้ ตอนนี้ในเทอร์มินัล ให้ไปที่ไดเรกทอรีโปรเจ็กต์แล้วเรียกใช้ "pod install" ดังนี้
เมื่อเสร็จแล้ว ระบบจะติดตั้งพ็อดและสร้างไฟล์ .xcworkspace ใหม่ โปรดใช้รหัสนี้สำหรับโปรเจ็กต์นับจากนี้เป็นต้นไป แต่ก่อนที่จะเขียนโค้ด สิ่งที่คุณจะต้องมีต่อไปคือคีย์ API
2. รับคีย์ API
สำหรับขั้นตอนการเปิดใช้ต่อไปนี้ ให้เปิดใช้ Maps SDK สำหรับ iOS
ตั้งค่า Google Maps Platform
หากยังไม่มีบัญชี Google Cloud Platform และโปรเจ็กต์ที่เปิดใช้การเรียกเก็บเงิน โปรดดูคู่มือเริ่มต้นใช้งาน Google Maps Platform เพื่อสร้างบัญชีสำหรับการเรียกเก็บเงินและโปรเจ็กต์
- ใน Cloud Console ให้คลิกเมนูแบบเลื่อนลงของโปรเจ็กต์ แล้วเลือกโปรเจ็กต์ที่ต้องการใช้สำหรับ Codelab นี้
- เปิดใช้ Google Maps Platform APIs และ SDK ที่จำเป็นสำหรับ Codelab นี้ใน Google Cloud Marketplace โดยทำตามขั้นตอนในวิดีโอนี้หรือเอกสารประกอบนี้
- สร้างคีย์ API ในหน้าข้อมูลเข้าสู่ระบบของ Cloud Console คุณสามารถทำตามขั้นตอนในวิดีโอนี้หรือเอกสารประกอบนี้ คำขอทั้งหมดไปยัง Google Maps Platform ต้องใช้คีย์ API
3. การสร้างแอป Places API
ตอนนี้คุณได้สร้างโปรเจ็กต์คอนโซลและเปิดใช้งาน Places API ในโปรเจ็กต์ดังกล่าวแล้ว รวมถึงได้รับคีย์ API แล้ว คุณก็พร้อมที่จะเริ่มเขียนโค้ดแอป Places API แอปแรก
ก่อนหน้านี้เมื่อคุณติดตั้งไฟล์ Pod ระบบได้สร้างไฟล์ .xcworkspace ใหม่ให้คุณ เปิดไฟล์นี้โดยดับเบิลคลิก
คุณจะเห็นใน Project Explorer ว่าตอนนี้คุณมีโฟลเดอร์ใหม่ชื่อ "Pods" หากดำเนินการสำเร็จ คุณจะเห็นโฟลเดอร์ GoogleMaps ที่มีเฟรมเวิร์กอยู่
4. แก้ไขไฟล์ Info.plist
เมื่อคุณเรียกใช้แอปพลิเคชันเป็นครั้งแรก iOS จะแสดงกล่องโต้ตอบที่ขอให้ผู้ใช้ให้สิทธิ์เข้าถึงบริการตำแหน่ง กล่องโต้ตอบนี้จะแสดงสตริงที่คุณกำหนดและคุณจะวางไว้ในไฟล์ Info.plist หากไม่มีสตริงนี้ กล่องโต้ตอบจะไม่แสดงและแอปของคุณจะใช้งานไม่ได้
คุณจะดูไฟล์ Info.plist ได้ใน Project Explorer ที่นี่
เลือกไฟล์ดังกล่าว แล้วคุณจะเห็นเครื่องมือแก้ไข plist
วางเมาส์เหนือองค์ประกอบใดก็ได้ แล้วคุณจะเห็นไอคอน "+" ปรากฏขึ้น กดปุ่มดังกล่าว แล้วคุณจะเห็นรายการใหม่ปรากฏขึ้น ป้อนค่า "NSLocationAlwaysUsageDescription" ในช่องนี้
กด Enter เพื่อเพิ่มคีย์ใหม่ จากนั้นดับเบิลคลิกคอลัมน์ค่าสำหรับคีย์นี้ แล้วเพิ่มสตริง
ดูข้อมูลเพิ่มเติมเกี่ยวกับสตริงนี้ได้ในเอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์ของ Apple ที่นี่
5. แก้ไข App Delegate
ในโปรแกรมสำรวจโปรเจ็กต์ ให้ค้นหาและเปิด AppDelegate.m คุณจะใช้ไฟล์นี้เพื่อเพิ่มคีย์ API
ที่ด้านบนของไฟล์ ให้เพิ่มข้อความนี้ใต้บรรทัด #import ทันที
@import GoogleMaps;
จากนั้นในฟังก์ชัน didFinishLaunchingWithOptions: ให้เพิ่มโค้ดต่อไปนี้ที่บรรทัด "return YES"
[GMSServices provideAPIKey:@"<Add your API Key>"];
อย่าลืมใช้คีย์ API ที่คุณสร้างไว้ก่อนหน้านี้
6. แก้ไขไฟล์สตอรี่บอร์ด
ในโปรเจ็กต์ Explorer ให้เปิดไฟล์ Main.storyboard ตรวจสอบว่าแถบด้านข้างเปิดใช้งานอยู่โดยกดปุ่มแถบด้านข้างที่มุมบนขวา
จากนั้นที่ด้านล่างของแถบด้านข้าง ให้ค้นหาการควบคุมป้ายกำกับโดยตรวจสอบว่าได้เลือกไลบรารีออบเจ็กต์แล้ว
ใน View Controller Scene ทางด้านซ้ายมือ ให้ตรวจสอบว่าได้เลือก "View" แล้ว
จากนั้นลากและวางป้ายกำกับ 7 รายการลงในมุมมอง จัดเรียงตามที่แสดงที่นี่ อย่าลืมลากขนาดให้ตรงกับขนาดที่แสดง คุณแก้ไขข้อความในป้ายกำกับได้โดยดับเบิลคลิกที่ป้ายกำกับนั้น แล้วพิมพ์ค่าที่ต้องการ
สำหรับป้ายกำกับล่างสุด (ป้ายกำกับขนาดใหญ่มาก) ให้ไปที่เครื่องมือแก้ไขพร็อพเพอร์ตี้และตรวจสอบว่าตั้งค่าให้มี 0 บรรทัด (ค่าเริ่มต้นคือ 1) ซึ่งจะช่วยให้แสดงข้อความได้หลายบรรทัด
7. สร้างช่องทางสำหรับค่า
สำหรับป้ายกำกับ "คุ้มค่า" ทั้ง 3 รายการ คุณจะต้องสร้างเอาต์เล็ต ซึ่งจะช่วยให้คุณเปลี่ยนค่าได้โดยใช้โค้ด โดยก่อนอื่น คุณจะต้องเปิดใช้งานผู้ช่วยแก้ไข โดยให้ปิดแถบด้านข้างของพร็อพเพอร์ตี้ก่อนด้วยการคลิกปุ่มเพื่อนำออก (ปุ่มนี้แสดงในขั้นตอนก่อนหน้า)
จากนั้นเลือกปุ่ม Assistant ซึ่งเป็นปุ่มวงกลม 2 วงที่แสดงที่นี่
ตรวจสอบว่าไฟล์ ViewController.h แสดงผล หากยังไม่ได้เปิดใช้ คุณสามารถเปลี่ยนเพื่อเปิดใช้ได้โดยใช้เครื่องมือแก้ไขที่ด้านบนของหน้าต่างผู้ช่วย ดังนี้
จากนั้นขณะกดปุ่ม CONTROL ค้างไว้ ให้ลากป้ายกำกับแต่ละรายการแล้ววางไว้ใต้บรรทัด @interface ในไฟล์ ViewController.h ในผู้ช่วย กล่องโต้ตอบจะปรากฏขึ้นเพื่อถามว่าคุณต้องการเชื่อมต่อประเภทใด
ตรวจสอบว่าการตั้งค่าเป็นไปตามที่แสดง (การเชื่อมต่อ: Outlet, ประเภท: UILabel, พื้นที่เก็บข้อมูล: Weak) จากนั้นตั้งชื่อให้แต่ละรายการ ใน Codelab นี้ ฉันตั้งชื่อป้ายกำกับ Longitude, Latitude และ Altitude เป็น lblLongitude, lblLatitude และ lblAltidude ตามลำดับ นอกจากนี้ ให้ลากป้ายกำกับขนาดใหญ่จากด้านล่างมาไว้ด้านบน แล้วตั้งชื่อว่า lblPlaces
เมื่อเสร็จแล้ว ไฟล์ ViewController.h ควรมีลักษณะดังนี้
#import <UIKit/UIKit.h>
@import GoogleMaps;
@interface ViewController : UIViewController
@property (weak, nonatomic) IBOutlet UILabel *lblLatitude;
@property (weak, nonatomic) IBOutlet UILabel *lblLongitude;
@property (weak, nonatomic) IBOutlet UILabel *lblAltitude;
@property (weak, nonatomic) IBOutlet UILabel *lblPlaces;
@end
8. แก้ไขไฟล์ส่วนหัวสำหรับ API ตำแหน่งและ API ไคลเอ็นต์ของ Google
ก่อนถึงขั้นตอนสุดท้าย ซึ่งเป็นขั้นตอนที่คุณสร้างแอปเพื่อใช้ Places API คุณต้องตั้งค่าตัวแปรอีก 2-3 ตัวในไฟล์ส่วนหัว (ViewController.h) ต่อไปนี้คือ Core Location Manager และออบเจ็กต์ Core Location
@property (strong, nonatomic) CLLocationManager *locationManager;
@property (strong, nonatomic) CLLocation *location;
นอกจากนี้ คุณยังต้องมีไคลเอ็นต์ Google API ด้วย
@property GMSPlacesClient *placesClient;
สุดท้าย คุณจะต้องอัปเดตไฟล์ส่วนหัวเพื่อให้คลาสใช้ CLLocationManagerDelegate ดังนี้
@interface ViewController : UIViewController<CLLocationManagerDelegate>
เมื่อเสร็จแล้ว ไฟล์ส่วนหัวควรมีลักษณะดังนี้
#import <UIKit/UIKit.h>
#import <CoreLocation/CoreLocation.h>
#import <GoogleMaps/GoogleMaps.h>
@interface ViewController : UIViewController<CLLocationManagerDelegate>
@property (strong, nonatomic) CLLocationManager *locationManager;
@property (strong, nonatomic) CLLocation *location;
@property (weak, nonatomic) IBOutlet UILabel *lblLongitude;
@property (weak, nonatomic) IBOutlet UILabel *lblLatitude;
@property (weak, nonatomic) IBOutlet UILabel *lblAltitude;
@property (weak, nonatomic) IBOutlet UILabel *lblPlaces;
@property GMSPlacesClient *placesClient;
@end
9. แก้ไข View Controller
ขั้นตอนแรกคือการแก้ไขฟังก์ชัน viewDidLoad เพื่อเริ่มต้น Location Manager ขอสิทธิ์จากผู้ใช้ในการเข้าถึงตำแหน่ง และสุดท้ายคือเริ่ม Location Manager เพื่อให้ติดตามตำแหน่งปัจจุบัน นอกจากนี้ คุณยังจะเริ่มต้นไคลเอ็นต์ Google Places API ด้วย
- (void)viewDidLoad {
[super viewDidLoad];
self.locationManager = [[CLLocationManager alloc]init];
self.locationManager.desiredAccuracy = kCLLocationAccuracyBest;
if([self.locationManager respondsToSelector:@selector(requestAlwaysAuthorization)]) {
[self.locationManager requestAlwaysAuthorization];
// Or [self.locationManager requestWhenInUseAuthorization];
}
[self.locationManager startUpdatingLocation];
self.locationManager.delegate = self;
self.location = [[CLLocation alloc] init];
self.placesClient = [GMSPlacesClient sharedClient];
}
10. จัดการการอัปเดตตำแหน่ง
ตัวจัดการตำแหน่งจะโทรกลับไปยัง View Controller พร้อมข้อมูลอัปเดตตำแหน่งโดยเรียกใช้ฟังก์ชัน didUpdateLocations คุณจะต้องเพิ่มโค้ดนี้ลงใน ViewController.m โดยฟังก์ชันจะมีลักษณะดังนี้
-(void)locationManager:(CLLocationManager *)manager didUpdateLocations:(NSArray<CLLocation *> *)locations{
// Enter code here
}
ฟังก์ชันนี้จะต้องทำหลายอย่าง
ก่อนอื่น ระบบจะแคชตำแหน่งด้วยตำแหน่งที่ได้รับล่าสุด
self.location = locations.lastObject;
จากนั้นให้อัปเดตป้ายกำกับ 3 รายการสำหรับละติจูด ลองจิจูด และระดับความสูง
self.lblLatitude.text = [NSString stringWithFormat:@"%f", self.location.coordinate.latitude];
self.lblLongitude.text = [NSString stringWithFormat:@"%f", self.location.coordinate.longitude];
self.lblAltitude.text = [NSString stringWithFormat:@"%f", self.location.altitude];
จากนั้นคุณจะเรียกใช้ Places API โดยใช้ไคลเอ็นต์ Places คุณทำได้โดยการระบุฟังก์ชันเรียกกลับ ซึ่งจะรับรายการความน่าจะเป็นของสถานที่ Places API จะพิจารณาความเป็นไปได้ที่คุณอยู่ในสถานที่หนึ่งๆ โดยอิงตามตำแหน่งของคุณ โดยจะแสดงชื่อสถานที่ที่น่าจะเป็น พร้อมค่าระหว่าง 0 ถึง 1 ซึ่งมีความน่าจะเป็นที่คุณอยู่ในสถานที่นั้น
[self.placesClient currentPlaceWithCallback:^(GMSPlaceLikelihoodList *likelihoodList, NSError *error) {
จากนั้นคุณจะใช้การเรียกกลับได้ ซึ่งจะวนซ้ำในรายการความน่าจะเป็น โดยเพิ่มสถานที่และความน่าจะเป็นสำหรับสถานที่เหล่านั้น
[self.placesClient currentPlaceWithCallback:^(GMSPlaceLikelihoodList *likelihoodList, NSError *error) {
if (error != nil) {
NSLog(@"Current Place error %@", [error localizedDescription]);
return;
}
NSMutableString *strPlaces = [NSMutableString stringWithString:@""];
for (GMSPlaceLikelihood *likelihood in likelihoodList.likelihoods) {
GMSPlace* place = likelihood.place;
NSLog(@"Current Place name %@ at likelihood %g", place.name,
likelihood.likelihood);
NSLog(@"Current Place address %@", place.formattedAddress);
NSLog(@"Current Place attributions %@", place.attributions);
NSLog(@"Current PlaceID %@", place.placeID);
[strPlaces appendString:place.name];
[strPlaces appendString:@" "];
[strPlaces appendFormat:@"%g",likelihood.likelihood];
[strPlaces appendString:@"\n"];
}
self.lblPlaces.text = strPlaces;
}];
เมื่อเสร็จแล้ว ฟังก์ชัน didUpdateLocations ควรมีลักษณะดังนี้
-(void)locationManager:(CLLocationManager *)manager didUpdateLocations:(NSArray<CLLocation *> *)locations{
self.location = locations.lastObject;
self.lblLatitude.text = [NSString stringWithFormat:@"%f", self.location.coordinate.latitude];
self.lblLongitude.text = [NSString stringWithFormat:@"%f", self.location.coordinate.longitude];
self.lblAltitude.text = [NSString stringWithFormat:@"%f", self.location.altitude];
NSLog(@"%@", self.location.description);
[self.placesClient currentPlaceWithCallback:^(GMSPlaceLikelihoodList *likelihoodList, NSError *error) {
if (error != nil) {
NSLog(@"Current Place error %@", [error localizedDescription]);
return;
}
NSMutableString *strPlaces = [NSMutableString stringWithString:@""];
for (GMSPlaceLikelihood *likelihood in likelihoodList.likelihoods)
{
GMSPlace* place = likelihood.place;
NSLog(@"Current Place name %@ at likelihood %g", place.name, likelihood.likelihood);
NSLog(@"Current Place address %@", place.formattedAddress);
NSLog(@"Current Place attributions %@", place.attributions);
NSLog(@"Current PlaceID %@", place.placeID);
[strPlaces appendString:place.name];
[strPlaces appendString:@" "];
[strPlaces appendFormat:@"%g",likelihood.likelihood];
[strPlaces appendString:@"\n"];
}
self.lblPlaces.text = strPlaces;
}];
}
ตอนนี้คุณพร้อมที่จะเรียกใช้แอปและทดสอบแล้ว
11. การเรียกใช้แอปในโปรแกรมจำลอง
คุณเรียกใช้แอปโดยใช้ปุ่มเรียกใช้ในแถบชื่อ นอกจากนี้ คุณยังเลือกประเภทการเรียกใช้ได้ด้วย และอย่างที่เห็นที่นี่ ฉันกำลังทดสอบบน iPhone 6 โดยใช้โปรแกรมจำลอง
เมื่อกดปุ่มเรียกใช้ แอปจะสร้างและเปิดตัว คุณจะเห็นคำขออนุญาตให้แอปเข้าถึงตำแหน่ง รวมถึงสตริงที่กำหนดเองที่คุณระบุไว้ก่อนหน้านี้
เมื่อดำเนินการนี้แล้ว คุณจะเห็นการอัปเดตละติจูดและลองจิจูด หากต้องการเปลี่ยนตำแหน่ง ให้เลือกเมนูแก้ไขข้อบกพร่อง แล้วเลือกตำแหน่ง เช่น คุณสามารถเลือก "ขับรถบนทางด่วน"
เมื่อทำเช่นนี้ คุณจะเห็นตำแหน่งพร้อมสถานที่ที่น่าจะเป็นซึ่งอัปเดตอยู่ ซึ่งจำลองการขับรถบนทางหลวง
เพียงเท่านี้ก็เรียบร้อยแล้ว คุณเข้าถึงรายละเอียดสถานที่ปัจจุบันโดยใช้ Google Places API ใน iOS ได้สำเร็จแล้ว