de Neo Ighodaro

Cum să construiți o hartă în timp real cu Swift

Hărțile în timp real sunt foarte populare în zilele noastre. Mai ales acum, că există multe servicii de transport la cerere, precum Uber și Lyft, care au raportări de locație în timp real. În acest articol, vom învăța cum să construim o hartă în timp real pe iOS folosind Pusher.

Înainte de a continua, va trebui să vă asigurați că aveți toate următoarele cerințe:

• Un MacBook (Xcode rulează numai pe Mac).
• Xcode instalat pe aparatul dvs.
• Cunoașterea JavaScript (Node.js).
• Cunoașterea Swift și utilizarea Xcode. Puteți începe Aici.
• NPM și Node.js instalat local.
• Cocoapode manager de pachete instalat local.
• O cheie API Google iOS. Vedea Aici pentru instrucțiuni despre cum să obțineți o cheie.
• O aplicație Pusher. Creeaza una Aici.

Este necesară o înțelegere de bază despre Swift și Node.js pentru a urma acest tutorial.

Presupunând că aveți toate cerințele, să începem. Aceasta este o înregistrare pe ecran a ceea ce vom construi:

După cum puteți vedea în demonstrație, de fiecare dată când locația este actualizată, schimbarea se reflectă pe ambele dispozitive. Aceasta este ceea ce vrem să reproducem. Să începem.

Configurarea aplicației noastre iOS

Lansați Xcode și creați un nou proiect „Single-app”. Puteți apela proiectul oricum doriți.

Când proiectul este creat, închideți Xcode. Deschideți terminalul, cd în directorul rădăcină al aplicației dvs. și rulați comanda de mai jos pentru a inițializa Cocoapods în proiect:

$ pod init

Comanda de mai sus va crea un Podfile în directorul rădăcină al aplicației noastre. In acest Podfile, vom specifica dependențele proiectului nostru și vom permite Cocoapod-urilor să le extragă și să le gestioneze. Deschide Podfile și înlocuiți conținutul fișierului cu conținutul de mai jos:

platform :ios, '10.0'target 'application_name' do    use_frameworks!

    pod 'GoogleMaps'    pod 'Alamofire', '~> 4.4.0'    pod 'PusherSwift', '~> 4.1.0'end

⚠️ Asigurați-vă că înlocuiți application_name cu numele aplicației dvs.

Rulați comanda de mai jos pentru a începe instalarea pachetelor pe care le-am specificat în Podfile:

$ pod install

După finalizarea instalării, deschideți fișierul *.xcworkspace fișier care a fost adăugat la rădăcina directorului aplicației. Aceasta ar trebui să lanseze Xcode.

Configurarea aplicației noastre de simulare Node.js

Înainte de a reveni în aplicația noastră iOS, trebuie să creăm o aplicație simplă Node.js. Această aplicație va trimite evenimente cu date către Pusher. Datele trimise către Pusher vor fi coordonate GPS simulate. Când aplicația noastră iOS preia datele evenimentului de la Pusher, aceasta va actualiza marcatorul hărții la noile coordonate.

Creați un director nou care va deține aplicația noastră Node.js. Deschideți terminalul și cd în directorul aplicației dvs. Node.js. În acest director, creați un nou package.json fişier. Deschideți acel fișier și lipiți JSON de mai jos:

{      "main": "index.js",      "dependencies": {        "body-parser": "^1.16.0",        "express": "^4.14.1",        "pusher": "^1.5.1"      }    }

Acum executați comanda de mai jos pentru a instala pachetele NPM listate ca dependențe:

$ npm run install

Creaza un nou index.js în director și lipiți codul de mai jos în fișier:

//    // Load the required libraries    //    let Pusher     = require('pusher');    let express    = require('express');    let bodyParser = require('body-parser');    //    // initialize express and pusher    //    let app        = express();    let pusher     = new Pusher(require('./config.js'));    //    // Middlewares    //    app.use(bodyParser.json());    app.use(bodyParser.urlencoded({ extended: false }));

//    // Generates 20 simulated GPS coords and sends to Pusher    //    app.post('/simulate', (req, res, next) => {      let loopCount = 0;      let operator = 0.001000        let longitude = parseFloat(req.body.longitude)      let latitude  = parseFloat(req.body.latitude)      let sendToPusher = setInterval(() => {        loopCount++;        // Calculate new coordinates and round to 6 decimal places...        longitude = parseFloat((longitude + operator).toFixed(7))        latitude  = parseFloat((latitude - operator).toFixed(7))        // Send to pusher        pusher.trigger('mapCoordinates', 'update', {longitude, latitude})        if (loopCount === 20) {          clearInterval(sendToPusher)        }      }, 2000);      res.json({success: 200})    })

//    // Index    //    app.get('/', (req, res) => {      res.json("It works!");    });

//    // Error Handling    //    app.use((req, res, next) => {        let err = new Error('Not Found');        err.status = 404;        next(err);    });

//    // Serve app    //    app.listen(4000, function() {        console.log('App listening on port 4000!')});

Codul de mai sus este o aplicație simplă Express. Am inițializat Express app si pusher instanță. În /simulate traseu, rulăm o buclă în intervale de 2 secunde și rupem bucla după a 20-a alergare. De fiecare dată când bucla rulează, sunt generate noi coordonate GPS și trimise către Pusher.

Creaza un nou config.js fișier și lipiți codul de mai jos în el:

  module.exports = {        appId: 'PUSHER_APP_ID',        key: 'PUSHER_APP_KEY',        secret: 'PUSHER_APP_SECRET',        cluster: 'PUSHER_APP_CLUSTER',    };

Înlocuiți valorile *PUSHER_APP_ID*, *PUSHER_APP_KEY*, PUSHER_APP_SECRET și PUSHER_APP_CLUSTER cu valorile din tabloul de bord al aplicației Pusher. Aplicația noastră Node.js este acum gata să simuleze coordonatele GPS atunci când aplicația noastră o declanșează.

Acum că am terminat de creat aplicația Node.js, putem reveni la crearea aplicației iOS.

Crearea vizualizărilor hărții noastre în timp real în Xcode

Deschideți Xcode cu proiectul nostru și deschideți fișierul Main.storyboard fişier. În ViewController vom adăuga o UIView, și în asta UIView vom adăuga un buton de simulare. Ceva de genul:

Creaza un @IBAction de la buton la ViewController. Pentru a face acest lucru, faceți clic pe „Afișare asistent editor” în partea dreaptă sus a setului de instrumente Xcode. Aceasta va împărți ecranul în storyboard și editor de cod. Acum ctrl și trageți de la buton la editorul de cod pentru a crea fișierul @IBAction. Vom numi metoda simulateMovement.

Apoi, faceți clic pe butonul „Afișați editorul standard” de pe bara de instrumente Xcode pentru a închide ecranul divizat și a afișa doar Main.storyboard. Adaugă altul UIView începând de la fundul ultimului UIView în partea de jos a ecranului. Această vizualizare va fi locul unde va fi afișată harta.

Seteaza UIViewclasa personalizată din „Inspector de identitate” la GMSMapView. Acum faceți clic pe „Afișați editorul asistent” din partea dreaptă sus a setului de instrumente Xcode. ctrl și trageți din UIView către editorul de cod. Creaza un @IBOutlet și numește-l mapView.

Faceți clic pe butonul „Afișați editorul standard” de pe bara de instrumente Xcode pentru a închide vizualizarea divizată. Deschide ViewController fișier și înlocuiți conținutul cu codul de mai jos:

//    // Import libraries    //    import UIKit    import PusherSwift    import Alamofire    import GoogleMaps

    //    // View controller class    //    class ViewController: UIViewController, GMSMapViewDelegate {        // Marker on the map        var locationMarker: GMSMarker!

        // Default starting coordinates        var longitude = -122.088426        var latitude  = 37.388064

        // Pusher        var pusher: Pusher!

        // Map view        @IBOutlet weak var mapView: GMSMapView!

        //        // Fires automatically when the view is loaded        //        override func viewDidLoad() {            super.viewDidLoad()

            //            // Create a GMSCameraPosition that tells the map to display the coordinate            // at zoom level 15.            //            let camera = GMSCameraPosition.camera(withLatitude:latitude, longitude:longitude, zoom:15.0)            mapView.camera = camera            mapView.delegate = self

            //            // Creates a marker in the center of the map.            //            locationMarker = GMSMarker(position: CLLocationCoordinate2D(latitude: latitude, longitude: longitude))            locationMarker.map = mapView

            //            // Connect to pusher and listen for events            //            listenForCoordUpdates()        }

        //        // Send a request to the API to simulate GPS coords        //        @IBAction func simulateMovement(_ sender: Any) {            let parameters: Parameters = ["longitude":longitude, "latitude": latitude]

            Alamofire.request("http://localhost:4000/simulate", method: .post, parameters: parameters).validate().responseJSON { (response) in                switch response.result {                case .success(_):                    print("Simulating...")                case .failure(let error):                    print(error)                }            }        }

        //        // Connect to pusher and listen for events        //        private func listenForCoordUpdates() {            // Instantiate Pusher            pusher = Pusher(key: "PUSHER_APP_KEY", options: PusherClientOptions(host: .cluster("PUSHER_APP_CLUSTER")))

            // Subscribe to a Pusher channel            let channel = pusher.subscribe("mapCoordinates")

            //            // Listener and callback for the "update" event on the "mapCoordinates"            // channel on Pusher            //            channel.bind(eventName: "update", callback: { (data: Any?) -> Void in                if let data = data as? [String: AnyObject] {                    self.longitude = data["longitude"] as! Double                    self.latitude  = data["latitude"] as! Double

                    //                    // Update marker position using data from Pusher                    //                    self.locationMarker.position = CLLocationCoordinate2D(latitude: self.latitude, longitude: self.longitude)                    self.mapView.camera = GMSCameraPosition.camera(withTarget: self.locationMarker.position, zoom: 15.0)                }            })

            // Connect to pusher            pusher.connect()        }    }

În clasa controlerului de mai sus, importăm toate bibliotecile necesare. Apoi, vom crea câteva proprietăți pe clasă. În viewDidLoad metoda, stabilim coordonatele pe mapView, și, de asemenea, adăugați locationMarker la ea.

În aceeași metodă, apelăm la listenForCoordUpdates(). În listenForCoordUpdates metoda creăm o conexiune la Pusher și ascultăm pentru update eveniment pe mapCoordinates canal.

Cand update evenimentul este declanșat, apelarea inversă preia noile coordonate și actualizează locationMarker cu ei. Amintiți-vă, trebuie să schimbați PUSHER_APP_KEY și PUSHER_APP_CLUSTER la valorile reale furnizate pentru aplicația dvs. Pusher.

În simulateMovement metoda, trimitem doar o cerere către serverul nostru web local (aplicația Node.js pe care am creat-o anterior). Solicitarea va instrui aplicația Node.js să genereze mai multe coordonate GPS.

? Adresa URL a punctului final pe care îl lovim (http: // localhost: 3000 / simula) este un server web local. Aceasta înseamnă că va trebui să modificați adresa URL a punctului final atunci când creați pentru cazuri reale.

Configurarea Google Maps pentru iOS

Va trebui să configurăm SDK-ul Google Maps iOS pentru a funcționa cu aplicația noastră. Primul, creați o cheie SDK Google iOS și apoi, când aveți cheia API, deschideți fișierul AppDelegate.swift fișier în Xcode.

În clasă, căutați clasa de mai jos:

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {        // Override point for customization after application     launch.        return true    }

și înlocuiți-l cu acesta:

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {        GMSServices.provideAPIKey("GOOGLE_IOS_API_KEY")        return true }

? Trebuie să înlocuiți GOOGLE_IOS_API_KEY cu cheia obținută atunci când ați creat cheia API Google iOS.

În partea de sus a aceluiași fișier, căutați import UIKit și adăugați următoarele sub aceasta:

import GoogleMaps

Cu aceasta, am terminat configurarea Google Maps pentru a funcționa pe iOS.

Testarea hărții noastre iOS în timp real

Pentru a testa aplicația noastră, trebuie să pornim aplicația Node.js, să instruim iOS să permită conexiuni la serverul web local și apoi să rulăm aplicația noastră iOS.

Pentru a rula aplicația Node.js, cd în directorul aplicației Node.js folosind terminalul dvs. și executați comanda de mai jos pentru a porni aplicația Node:

$ node index.js

Acum, înainte de a lansa aplicația noastră, trebuie să facem unele modificări finale pentru ca aplicația noastră iOS să se poată conecta la localhost backend. Deschide info.plist în Xcode și efectuați următoarele ajustări:

Această modificare va face posibilă ca aplicația noastră să se conecteze la localhost. Pentru a fi clar, acest pas nu va fi necesar în mediile de producție.

Acum construiți-vă aplicația. Ar trebui să vedeți că aplicația iOS afișează acum harta și marcatorul pe hartă. Dacă faceți clic pe butonul de simulare, se atinge punctul final care, la rândul său, trimite noile coordonate către Pusher. Ascultătorul nostru prinde evenimentul și actualizează locationMarker, mișcându-ne astfel markerul.

Concluzie

În acest articol, am văzut cum putem folosi Pusher și Swift pentru a construi o hartă în timp real pe iOS. Sper că ați învățat câteva lucruri despre cum să creați aplicații iOS în timp real. Dacă aveți întrebări sau sugestii, vă rugăm să lăsați un comentariu mai jos.

Această postare a fost publicată pentru prima dată către Pusher.