Your first, basic ARKit Application (Part 1) with TDD & MVVM

Fasten your seatbelts, the ride is about to begin. It’s time to create your very first ARKit app. We will take advantage of Xcode’s application template and then learn how to modify your app to provide basic UI elements such as labels and buttons. This will enable user feedback. This step is the initial setup of the app. You can download the finished version from here and jump to part 2.

Let’s get started

To start getting familiar with Apple frameworks. Apple, provide out of the box project templates. Essentially it’s a boilerplate that’s designed to save you time and effort, getting you up and running as fast as possible.

That being said let us create a new project. If you haven’t already done so open Xcode and either go to File > New > Project or press Shift + Command + N. 

Select Augmented Reality App Then tap Next.

Populate the following fields as the image below

Product name = EarthAR

Content Technology = SceneKit

Ensure Include Unit Test has been ticked.

Finally, tap Next and select a folder to where you want to save this project and click create.

Now, I probably should have started with this statement. The Xcode simulator cannot be used with ARKit applications. This is because it doesn’t come bundled with a camera. Also, you must have one of the following supported devices to continue with this tutorial.

  • iPhone SE
  • iPhone 6S or 6S Plus
  • iPhone 7 or 7 Plus
  • iPad Pro
  • iPad (2017 +)
  • iPhone 8 or 8 Plus
  • iPhone X

If you have one of the above devices, connect it to Xcode press Command + R  or tap the play button.

Voila, your first ARKit application.

Take five. Move the camera, duck, stand on your tiptoes and walk around this Jet Fighter. Thanks to ARKit you will notice that the virtual element remains anchored to its position.

Taking a look around

Time to have a quick review of the project before moving onto some more cool stuff.

If you open up the Main.storyboard file you’ll notice that Apple has embedded an ARSCNView. This view allows you to overlay a 3D scene onto of a live background imagem streamed from the camera. It provides a seamless integration between ARKit and SceneKit. 

(If you plan on using SpriteKit instead of SceneKit then you should see an embedded ARKSView.)

Next, open up the ViewController.swift file. You should be presented with the following

At the top of this class note that both SceneKit and ARKit have been imported and secondly that the ARSCNView conforms to the ARSCNViewDelegate allowing you to sync up your SceneKit objects with ARKit.

Finally, notice that you have two asset folders. The standard Assets.xcassets and SceneKits art.scnassets. If you expand the latter you should see the texture of the plane (texture.png) and the ship.scn. We will come back to this asset file a little later.

Go to your Project Navigator > Targets > EarthAR > Development Info to Hide status bar and Requires full screen and ensure both of these are checked.

Clean up

Finally, its time to clean up and organize our code. Add the following syntax at the given line position:

15: // MARK:- @IBOUTLETS
19: // MARK:- PROPERTIES
21: // MARK:- FUNCTIONS
61: // MARK:- CUSTOM FUNCTIONS
63: // MARK:- @IBACTIONS
65: // MARK:- ACTIONS
67: // MARK:- DELEGATES

Then delete the didReceiveMemoryWarning function.

The Manager

In order to de-couple everything and allow our test-cases access, we will need to create an ARManager Class.

So without further ado press command + n to create a new swift file. Name the file ARManager and ensure EarthAR & EarthARTests are selected then tap create.

Add the following Syntax to your ARManager Class.

Pop back over to ViewController.swift  and then remove the ARSCNViewDelegate from the top of the class

Next, select and drag from the line

To the end of

Cut the code (command + x) and then finally paste it into the ARManager class we just created.

Create group files (Resources, ViewControllers, Models, and ViewModels) in your project navigator. Drag the classes and objects into the right group. It should look something like this:

 

Finally, add  final prior the word class

Much better. Run the app to ensure that everything still works. It will not behave differently to when we loaded it the first time. But the project is now structured to conform to both MVVM and TDD

In the next part of this tutorial, we will start adding our own objects to render on the screen while following TDD principles and the MVVM design pattern.