เริ่มต้นใช้งาน Places SDK สำหรับ iOS (Objective-C)

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 ใหม่" ที่นี่

4f1ecee473937c7b.png

ในหน้าจอถัดไป ระบบจะขอเทมเพลตสำหรับโปรเจ็กต์ใหม่ เลือก "Single View Application" สำหรับ iOS แล้วกด "Next"

เมื่อระบบขอให้ระบุชื่อผลิตภัณฑ์ คุณจะเลือกชื่อใดก็ได้ แต่โปรดจดบันทึกตัวระบุแพ็กเกจที่ระบบสร้างให้ คุณจะต้องใช้ข้อมูลนี้ในภายหลัง

72fbf25cb2db22ad.png

กด "ถัดไป" แล้วระบบจะสร้างโปรเจ็กต์ให้คุณ จดบันทึกไดเรกทอรีที่สร้าง ปิด Xcode แล้วใช้เทอร์มินัลเพื่อไปยังไดเรกทอรีนั้น

ป้อนคำสั่งต่อไปนี้โดยใช้เทอร์มินัล

pod init

ระบบจะสร้างไฟล์ชื่อ Podfile ให้คุณ แก้ไขเพื่อเพิ่มพ็อดสำหรับ GoogleMaps ดังนี้

target '{YOUR APP NAME}' do
pod 'GoogleMaps'
end

บันทึกแล้วปิด Xcode อย่าลืมปิดโปรเจ็กต์ดังกล่าวเนื่องจากในขั้นตอนถัดไปคุณจะต้องแก้ไขโปรเจ็กต์พื้นฐาน คุณจะเปิดไฟล์โปรเจ็กต์อื่นเมื่อดำเนินการเสร็จแล้ว และเป็นเรื่องปกติที่นักพัฒนาซอฟต์แวร์จะสับสนว่าทุกอย่างอยู่ที่ไหนหากไม่ได้ปิด Xcode ก่อนหน้านี้ ตอนนี้ในเทอร์มินัล ให้ไปที่ไดเรกทอรีโปรเจ็กต์แล้วเรียกใช้ "pod install" ดังนี้

789c5bc62817f68a.png

เมื่อเสร็จแล้ว ระบบจะติดตั้งพ็อดและสร้างไฟล์ .xcworkspace ใหม่ โปรดใช้รหัสนี้สำหรับโปรเจ็กต์นับจากนี้เป็นต้นไป แต่ก่อนที่จะเขียนโค้ด สิ่งที่คุณจะต้องมีต่อไปคือคีย์ API

2. รับคีย์ API

สำหรับขั้นตอนการเปิดใช้ต่อไปนี้ ให้เปิดใช้ Maps SDK สำหรับ iOS

ตั้งค่า Google Maps Platform

หากยังไม่มีบัญชี Google Cloud Platform และโปรเจ็กต์ที่เปิดใช้การเรียกเก็บเงิน โปรดดูคู่มือเริ่มต้นใช้งาน Google Maps Platform เพื่อสร้างบัญชีสำหรับการเรียกเก็บเงินและโปรเจ็กต์

  1. ใน Cloud Console ให้คลิกเมนูแบบเลื่อนลงของโปรเจ็กต์ แล้วเลือกโปรเจ็กต์ที่ต้องการใช้สำหรับ Codelab นี้

  1. เปิดใช้ Google Maps Platform APIs และ SDK ที่จำเป็นสำหรับ Codelab นี้ใน Google Cloud Marketplace โดยทำตามขั้นตอนในวิดีโอนี้หรือเอกสารประกอบนี้
  2. สร้างคีย์ API ในหน้าข้อมูลเข้าสู่ระบบของ Cloud Console คุณสามารถทำตามขั้นตอนในวิดีโอนี้หรือเอกสารประกอบนี้ คำขอทั้งหมดไปยัง Google Maps Platform ต้องใช้คีย์ API

3. การสร้างแอป Places API

ตอนนี้คุณได้สร้างโปรเจ็กต์คอนโซลและเปิดใช้งาน Places API ในโปรเจ็กต์ดังกล่าวแล้ว รวมถึงได้รับคีย์ API แล้ว คุณก็พร้อมที่จะเริ่มเขียนโค้ดแอป Places API แอปแรก

ก่อนหน้านี้เมื่อคุณติดตั้งไฟล์ Pod ระบบได้สร้างไฟล์ .xcworkspace ใหม่ให้คุณ เปิดไฟล์นี้โดยดับเบิลคลิก

19d62f34c08e645c.png

คุณจะเห็นใน Project Explorer ว่าตอนนี้คุณมีโฟลเดอร์ใหม่ชื่อ "Pods" หากดำเนินการสำเร็จ คุณจะเห็นโฟลเดอร์ GoogleMaps ที่มีเฟรมเวิร์กอยู่

8844d861f64c61aa.png

4. แก้ไขไฟล์ Info.plist

เมื่อคุณเรียกใช้แอปพลิเคชันเป็นครั้งแรก iOS จะแสดงกล่องโต้ตอบที่ขอให้ผู้ใช้ให้สิทธิ์เข้าถึงบริการตำแหน่ง กล่องโต้ตอบนี้จะแสดงสตริงที่คุณกำหนดและคุณจะวางไว้ในไฟล์ Info.plist หากไม่มีสตริงนี้ กล่องโต้ตอบจะไม่แสดงและแอปของคุณจะใช้งานไม่ได้

คุณจะดูไฟล์ Info.plist ได้ใน Project Explorer ที่นี่

c224c920ab3f1ef.png

เลือกไฟล์ดังกล่าว แล้วคุณจะเห็นเครื่องมือแก้ไข plist

859ca56f3b19da5.png

วางเมาส์เหนือองค์ประกอบใดก็ได้ แล้วคุณจะเห็นไอคอน "+" ปรากฏขึ้น กดปุ่มดังกล่าว แล้วคุณจะเห็นรายการใหม่ปรากฏขึ้น ป้อนค่า "NSLocationAlwaysUsageDescription" ในช่องนี้

9fb225d6f5508794.png

กด Enter เพื่อเพิ่มคีย์ใหม่ จากนั้นดับเบิลคลิกคอลัมน์ค่าสำหรับคีย์นี้ แล้วเพิ่มสตริง

5aefeb184187aa58.png

ดูข้อมูลเพิ่มเติมเกี่ยวกับสตริงนี้ได้ในเอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์ของ Apple ที่นี่

5. แก้ไข App Delegate

ในโปรแกรมสำรวจโปรเจ็กต์ ให้ค้นหาและเปิด AppDelegate.m คุณจะใช้ไฟล์นี้เพื่อเพิ่มคีย์ API

ที่ด้านบนของไฟล์ ให้เพิ่มข้อความนี้ใต้บรรทัด #import ทันที

@import GoogleMaps;

จากนั้นในฟังก์ชัน didFinishLaunchingWithOptions: ให้เพิ่มโค้ดต่อไปนี้ที่บรรทัด "return YES"

[GMSServices provideAPIKey:@"<Add your API Key>"];

อย่าลืมใช้คีย์ API ที่คุณสร้างไว้ก่อนหน้านี้

6. แก้ไขไฟล์สตอรี่บอร์ด

ในโปรเจ็กต์ Explorer ให้เปิดไฟล์ Main.storyboard ตรวจสอบว่าแถบด้านข้างเปิดใช้งานอยู่โดยกดปุ่มแถบด้านข้างที่มุมบนขวา

352af28b970d9e2.png

จากนั้นที่ด้านล่างของแถบด้านข้าง ให้ค้นหาการควบคุมป้ายกำกับโดยตรวจสอบว่าได้เลือกไลบรารีออบเจ็กต์แล้ว

adec7051ae949531.png

ใน View Controller Scene ทางด้านซ้ายมือ ให้ตรวจสอบว่าได้เลือก "View" แล้ว

e4827b92b5861e3e.png

จากนั้นลากและวางป้ายกำกับ 7 รายการลงในมุมมอง จัดเรียงตามที่แสดงที่นี่ อย่าลืมลากขนาดให้ตรงกับขนาดที่แสดง คุณแก้ไขข้อความในป้ายกำกับได้โดยดับเบิลคลิกที่ป้ายกำกับนั้น แล้วพิมพ์ค่าที่ต้องการ

f8a9457772358069.png

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

a4abacf00d8888fe.png

7. สร้างช่องทางสำหรับค่า

สำหรับป้ายกำกับ "คุ้มค่า" ทั้ง 3 รายการ คุณจะต้องสร้างเอาต์เล็ต ซึ่งจะช่วยให้คุณเปลี่ยนค่าได้โดยใช้โค้ด โดยก่อนอื่น คุณจะต้องเปิดใช้งานผู้ช่วยแก้ไข โดยให้ปิดแถบด้านข้างของพร็อพเพอร์ตี้ก่อนด้วยการคลิกปุ่มเพื่อนำออก (ปุ่มนี้แสดงในขั้นตอนก่อนหน้า)

จากนั้นเลือกปุ่ม Assistant ซึ่งเป็นปุ่มวงกลม 2 วงที่แสดงที่นี่

e92dcc4ceea20a51.png

ตรวจสอบว่าไฟล์ ViewController.h แสดงผล หากยังไม่ได้เปิดใช้ คุณสามารถเปลี่ยนเพื่อเปิดใช้ได้โดยใช้เครื่องมือแก้ไขที่ด้านบนของหน้าต่างผู้ช่วย ดังนี้

d42f0fcc18b84703.png

จากนั้นขณะกดปุ่ม CONTROL ค้างไว้ ให้ลากป้ายกำกับแต่ละรายการแล้ววางไว้ใต้บรรทัด @interface ในไฟล์ ViewController.h ในผู้ช่วย กล่องโต้ตอบจะปรากฏขึ้นเพื่อถามว่าคุณต้องการเชื่อมต่อประเภทใด

a44b7888ed0f62b.png

ตรวจสอบว่าการตั้งค่าเป็นไปตามที่แสดง (การเชื่อมต่อ: 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 โดยใช้โปรแกรมจำลอง

bbbe0b8820c8a913.png

เมื่อกดปุ่มเรียกใช้ แอปจะสร้างและเปิดตัว คุณจะเห็นคำขออนุญาตให้แอปเข้าถึงตำแหน่ง รวมถึงสตริงที่กำหนดเองที่คุณระบุไว้ก่อนหน้านี้

b9bb2ace7e68f186.png

เมื่อดำเนินการนี้แล้ว คุณจะเห็นการอัปเดตละติจูดและลองจิจูด หากต้องการเปลี่ยนตำแหน่ง ให้เลือกเมนูแก้ไขข้อบกพร่อง แล้วเลือกตำแหน่ง เช่น คุณสามารถเลือก "ขับรถบนทางด่วน"

dcb1ce091d780f56.png

เมื่อทำเช่นนี้ คุณจะเห็นตำแหน่งพร้อมสถานที่ที่น่าจะเป็นซึ่งอัปเดตอยู่ ซึ่งจำลองการขับรถบนทางหลวง

649e3eeb2321ae03.png

เพียงเท่านี้ก็เรียบร้อยแล้ว คุณเข้าถึงรายละเอียดสถานที่ปัจจุบันโดยใช้ Google Places API ใน iOS ได้สำเร็จแล้ว