How To Use HIGH MOBILITY’s Car Emulator
At HIGH MOBILITY we’re passionate about the future of the automobile industry and connected cars. That’s why we strive to offer the very best service to developers who are working to build seamless apps that improve the lives of everyday car users and move the industry towards its connected future. As many influential players from both the automobile industry and developer communities are beginning to realise, the future of the car industry will need the innovation, imagination and skills of developers worldwide if it is going to reach its full potential.
So how do we support individual developers as they seek to transform the industry?
At HIGH MOBILITY we provide developers with the tools, documentation, support and — most importantly — the technology they need to make their ideas come to life. With our in-browser car emulator, they can test and improve their apps, in the same way they might in a real life setting.
In today’s blog post we’re going to be covering how to use HIGH MOBILITY’s car emulator. We’ll be demonstrating how you can get going with the sample apps, using the car APIs via either a Bluetooth or Telematics (Internet) connection.
Let’s get started!
HIGH MOBILITY’s Car emulator — how does it work?
In the following webinar — originally recorded for the Mercedes Benz Digital Challenge — HIGH MOBILITY’s co-founder and CTO Kevin Valdek introduces us to the car emulator, a virtual car upon which you can test out your application. Check out the video below for step-by-step instructions on how to get going with it.
Not able to watch? Don’t worry. In this blog post we’ll be covering the main points of the webinar, so you can go straight to the section you need. That way you can get started on your app development and testing as soon as possible.
Introduction to the page
Once you are signed up to the site and logged in to the HIGH MOBILITY Developer Center, your first port of call is the Develop tab. This tab is in the top left-hand side of your screen and you’ll be able to identify it by the small tool symbol. From here you’ll be able to access the car emulator.
Now let’s take a look at the car emulator, and locate where you can find everything you need on the page.
In the center of the screen you’ll see the virtual car. All you need to do is click on the image of the car to launch the emulator and the virtual car will appear in the center of the page. To the left of the car you will see a section called Linked Apps which will list all of the devices which can be connected to the car. Underneath these devices is a section called Authorised Services, which are services with specific permissions which have been authorised by the car owner. At the bottom of the page you will see a yellow button with the Bluetooth symbol on it for scanning for Bluetooth connections.
At the bottom of the page you’ll find a log of all the APIs which are being used so that you can keep track of what you have implemented. On the right-hand side of the page you will notice all the APIs, known as Capabilities. If you click on one of the Capabilities you can see the state the car is currently in.
In the bottom right-hand corner where there is “1 / 2” you can click on the small arrows to the left and right of the numbers to see the car from different perspectives. When you feel comfortable with all of these aspects of the page, you’re ready to move on to getting to know the tools.
Getting to know the tools
Now that you have an idea of where on the page your essential tools are, have a click through the different Capabilities to get an idea of what you can control. Then, try the same Capabilities but looking at the car from different perspectives (using the arrows in the bottom right of the screen, as mentioned earlier). As you play around with the APIs you’ll see the car emulator change in direct response to your directions. Why not try turning the lights on and off, opening and closing the roof, or adjusting the indoor and outdoor temperatures?
Downloading and using the SDK
Next up go back to the Developer Center using the back button and go to the Resources tab (you’ll find this next to the Develop tab with a small document symbol on it). Click on Downloads. Under Samples, you can then select one of the sample apps to download. Once you have downloaded a sample app, open the project and run it on your phone or server. An Android sample should be opened with Android Studio, an iOS sample is opened with Xcode, and Node.js sample can be run on any server.
First of all, go to the Developer Center, click on the Resources tab at the top of the page as you did before and then click on Downloads.
Select the iOS Auto API Explorer and download it.
Open the iOS API Explorer. Once it’s open on the left-hand side select the App, then Source, then AppDelegate. Once opened you’ll see some instructions on how to get started, including a spot to paste in a snippet.
To find the snippet you need you’ll need to go back to the Develop Center, click on the Develop Tab, and then go to Applications. In Applications you’ll need to click the big plus sign to create a new application, then give the application a name and click Create. After that, click on the white mobile phone graphic that will have appeared on a new page, and type in the name of your device and click ‘+’ to register it.
Click on the place where you just typed and entered your iPhone’s name and you’ll see the snippet you need. Go back to the AppDelegate and paste it in.
Please note that you can find all sample apps on GitHub and you’ll find that the README for each sample app has project specific instructions on how to do the SDK initialisation.
For this tutorial we recommend downloading the “Explore Auto APIs” sample app. Further instructions in this post will relate to this specific app for iOS.
To begin this tutorial we will connect to the car emulator using Bluetooth.
Go back and open up your emulator so you can connect it to the application. Click on the yellow “Scan” button in the bottom left-hand corner of the screen. In the white box which pops up you’ll see different devices. You should see one which matches the device in the grey column next to “Looking for links”. Select that device in the white pop up box and click ‘Pair’.
In the grey column you should now see the text ‘Link connected’ which shows that you have a connected state and that the devices have been paired.
Under Linked Apps section in the left-hand corner of your screen on the car emulator page you should also see the device and the word ‘connected’.
Right, we’re finally at the stage in the development where you need to authorise your device. At the bottom of the screen you will see a grey button which says Authorise. Click on this button.
You should see on the right side of the screen numerous permissions pop up — these permissions tell you exactly what Auto APIs the app is allowed to access. At this stage it is worth noting that with Bluetooth you will have access to all permissions.
Like before, if you click around the Explore Auto APIs panel, you’ll get an idea of what you can do with the car emulator.
For example, you can change the climate in the car, you can close and open the roof, and much more.
When you change something in the capabilities you will see how the application updates as you go along, so both devices are always in sync.
Don’t forget that every action you take is stored in the Log — your entire history from the first click. With this feature you always have a record of exactly what actions you’ve taken to get where you are.
Connecting with Telematics
Now that we’ve covered how to connect using Bluetooth, let’s try out the car emulator using Telematics for those of you choosing this option. (If you have already authorised your device using Bluetooth, the following steps are not necessary for you.)
To do this, go into Services and click on the plus sign to create a new service. Give your new service a name, type it into the box and submit it.
Of the two options, select the application you have created in the previous steps.
As you scroll down, you’ll see you can select which permissions you’d like your app to be able to use. You can also give full access, and allow your app to use all of them. Now, click the blue button at the bottom of the page which says ‘Create’ to create your service. You will see it appear in the Services tab.
Now you need to go to the Virtual Cars tab, and open up your car.
You’ll need to download access certificates for the application. To get your access certificates, go back to the AppDelegate. In the Xcode you’ll see that it says ‘Paste Access Token Here’.
But, where do we get this access token from? Well, you’ll need to open up the Connected Services tab and enter the Workflow of the sample service you’ve just created. Here you’ll see the ‘Owner Login’, which is what the page would look like when a real car owner wants to use your service. Click on the blue login button on the right-hand side of the page. Now you’ll see a pop up telling you that the sample service is requesting access to the permissions you chose earlier. Click on ‘Grant Access’ and you’ll see that an access token is generated. Copy that token. You can now close the Workflow.
Under Authorised Services you’ll see your sample service has popped up. Paste the token you just generated into the sample app where there’s a placeholder per app README file where it says “Paste the App Token Here”
Launching the application
Run the application in Xcode. If you’ve been successful, a hammer symbol will pop up, with the words “build succeeded” underneath it.
If you go back to your car emulator, you’ll see that your iPhone will now appear under the Linked Devices.
That’s the end of today’s look at the HIGH MOBILITY Car Emulator. Why don’t you check out some of other posts, here. We’d love to hear your thoughts!