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

1. ข้อควรทราบก่อนที่จะเริ่มต้น

ก่อนที่จะเริ่มเขียนโค้ด ต้องมีข้อกําหนดเบื้องต้นบางอย่างที่คุณจะต้องตั้งค่า

Xcode

บทแนะนํานี้จะใช้เครื่องมือ Xcode ของ Apple&#39 ควบคู่กับภาษา Objective-C เพื่อสร้างแอปพลิเคชัน iOS ง่ายๆ ที่ทํางานในโปรแกรมจําลอง คุณไม่จําเป็นต้องใช้อุปกรณ์จริง คุณสามารถรับ Xcode ได้ที่ https://developer.apple.com/xcode/

โคคาพ็อด

Places SDK สําหรับ iOS มีให้บริการเป็นพ็อด CocoaPods CocoaPods เป็นเครื่องมือการจัดการทรัพยากร Dependency แบบโอเพนซอร์สสําหรับโปรเจ็กต์ Swift และ Objective-C หากคุณยังไม่มีเครื่องมือนี้ คุณจะต้องติดตั้งก่อนที่จะดําเนินการต่อ โดยจะติดตั้งจากเครื่องชําระเงินได้ดังนี้

sudo gem install cocoapods

โปรดดูรายละเอียดเพิ่มเติมเกี่ยวกับ CocoaPods ในคู่มือเริ่มต้นใช้งาน CocoaPods

การติดตั้ง SDK

หากต้องการติดตั้ง SDK คุณต้องสร้าง Podfile ในไดเรกทอรีโปรเจ็กต์ที่ CocoaPods จะใช้เพื่อดาวน์โหลดและกําหนดค่าทรัพยากร Dependency ที่จําเป็น วิธีที่ง่ายที่สุดคือการสร้างโปรเจ็กต์ใหม่ใน Xcode เพิ่ม Podfile และติดตั้งพ็อดในนั้น

เปิด Xcode แล้วคุณจะเห็นหน้าจอ "ยินดีต้อนรับสู่ Xcode' ในส่วนนี้ ให้เลือก "สร้างโปรเจ็กต์ Xcode ใหม่&#39

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

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

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

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

pod init

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

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

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

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

2. ดาวน์โหลดคีย์ API

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

ตั้งค่า Google Maps Platform

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

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

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

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

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

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

คุณจะสังเกตเห็นใน Project Explorer ว่าตอนนี้มีโฟลเดอร์ใหม่ชื่อ "Pods' หากการดําเนินการนี้สําเร็จ คุณจะเห็นโฟลเดอร์ Google Maps อยู่ในนั้นพร้อมเฟรมเวิร์ก

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

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

ค้นหาไฟล์ Info.plist ได้ในเครื่องมือสํารวจโปรเจ็กต์ที่นี่

เลือกเลย แล้วคุณจะเห็น plist Editor

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

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

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

5. แก้ไขการมอบสิทธิ์แอป

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

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

@import GoogleMaps;

จากนั้น ในฟังก์ชัน doFinishLaunchingWithOptions: ให้เพิ่มข้อมูลต่อไปนี้เกี่ยวกับบรรทัด "return YES'

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

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

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

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

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

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

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

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

7. สร้างเต้ารับสําหรับค่า

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

จากนั้นเลือกปุ่มผู้ช่วย นั่นคือวงกลมคู่ที่แสดงที่นี่

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

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

ตรวจสอบว่าการตั้งค่าตามที่แสดง (การเชื่อมต่อ: เต้าเสียบ; ประเภท: UILabel; พื้นที่เก็บข้อมูล: อ่อน) จากนั้นตั้งชื่อให้แต่ละชื่อ สําหรับวัตถุประสงค์ของ Codelab นี้ ผมเรียกป้ายกํากับลองจิจูด ละติจูด และระดับความสูง 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. แก้ไขไฟล์ส่วนหัวสําหรับ Location API และ Google Client API

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

@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. แก้ไขตัวควบคุมข้อมูลพร็อพเพอร์ตี้

ขั้นตอนแรกคือแก้ไขฟังก์ชัน viewdoesLoad เพื่อเริ่มต้นใช้งาน Location Manager, ขอสิทธิ์ของผู้ใช้ในการเข้าถึงตําแหน่ง และสุดท้ายก็ให้เริ่ม 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 พร้อมอัปเดตตําแหน่งโดยเรียกใช้ฟังก์ชัน doUpdateLocations คุณจะต้องเพิ่มสิ่งนี้ลงใน 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;
}];

เมื่อเสร็จสิ้น ฟังก์ชัน doUpdateLocations ควรมีลักษณะดังนี้

-(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 เรียบร้อยแล้ว