Apple Developer Support

It is great to see all the support that Apple Developers get in terms of tools, ecosystem, community and more.

Apple_support

For starters the Developer Support portal has a ton of information for the new comer as well as for the more expert of experts. Including guides and documentation for tools such as Xcode as well as information for developing software for MacOS and iOS.

Information about Design is available in the same place, including Human Interface Guidelines, Fonts (including downloads for San Francisco!) and information about accessibility and localisation.

Information about new tools and updates such as the latest about Swift, and SwiftUI can be easily found. And testing your apps with the help of tools such as TestFlight makes things so much easier.

CoreML – Boston Model: The Complete App

Look how far we have come… We started this series by looking at what CoreML is and made sure that our environment was suitable. We decided to use linear regression as our model, and chose to use the Boston Price dataset in our exploration for this implementation. We built our model using Python and created our .mlmodel object and had a quick exploration of the model’s properties. We then started to build our app using Xcode (see Part 1, Part 2 and Part 3). In this final part we are going to take the .mlmodel and include it in out Xcode project, we will then use the inputs selected from out picker and calculate a prediction (based on our model) to be displayed to the user. Are you ready? Nu kör vi!

Let us start by adding the .mlmodel we created earlier on so that it is an available resource in our project. Open your Xcode project and locate your PriceBoston.mlmodel file. From the menu on the left-hand side select the “BostonPricer” folder. At the bottom of the window you will see a + sign, click on it and select “New Groups”. This will create a sub-folder within “BostonPricer”. Select the new folder and hit the return key, this will let you rename the folder to something more useful. In this case I am going to call this folder “Resources”.

Open Finder and navigate to the location of your BostonPricer.mlmodel. Click and drag the file inside the “Resources” folder we just created. This will open a dialogue box asking for some options for adding this file to your project. I selected the “Create Folder References” and left the rest as it was shown by default. After hitting “Finish” you will see your model now being part of your project. Let’s now go the code in ViewController and make some needed changes.  The first one is to tell our project that we are going to need the powers of the CoreML framework. At the top of the file, locate a line of code that imports UIKit, right below it type the following:

import CoreML

Inside the definition of the ViewController class, let us define a constant to reference the model. Look for the definitions of the crimeData and roomData constants and nearby them type the following:

let model = PriceBoston()

You will see that when you start typing the name of the model, Xcode will suggest the right name as it knows about the existence of the model as part of its resources, neat!

We need to make some changes to the getPrediction()function we created in the last post. Go to the function and look for place where we pick the values of crime and rooms and right after that write the following:

guard let priceBostonOutput = try? model.prediction(
            crime:crime,
            rooms: Double(rooms)
            ) else {
                fatalError("Unexpected runtime error.")
        }

You may get a warning telling you that the constant priceBostonOutput was defined but not used. Don’t worry, we will indeed use it in a little while. Just a couple of words about this piece of code, you will see that we are using the prediction method defined in the model and that we are passing the two input parameters that the model expects, namely crime and rooms. We are wrapping this call to the prediction method around a try statement so that we can catch any exceptions. This is where we are implementing our CoreML mode!!! Isn’t that cool‽

We are not done yet though; remember that we have that warning from Xcode about using the model. Looking at the properties of the model, we can see that we also have an output attribute called price. This is the prediction we are looking for and the one we would like to display. Out of the box it may have a lot of decimal figures, and it is never a good practice to display those to the user (although they are important in precision terms…). Also, with Swift’s strong typing we would have to typecast the double returned by the model into a string that can be printed. So, let us prepare some code to format the predicted price. At the top of the ViewController class, find the place where we defined the constants crimeData and roomData. Below them type the following code:

let priceFormat: NumberFormatter = {
        let formatting = NumberFormatter()
        formatting.numberStyle = .currency
        formatting.maximumFractionDigits = 2
        formatting.locale = Locale(identifier: "en_US")
        return formatting
    }()

We are defining a format that will show a number as currency in US dollars with two decimal figures. We can now pass our predicted price to this formatter and assign it to a new constant for future reference. Below the code where the getPrediction function was defined, write the following:

let priceText = priceFormat.string(from: NSNumber(value:
            priceBostonOutput.price))

Now we have a nicely formatted string that can be used in the display. Let us change the message that we are asking our app to show when pressing the button:

let message = "The predicted price (in $1,000s) is " + priceText!

We are done! Launch your app simulator, select a couple of values from the picker and hit the “Calculate Prediction” button… Et voilà, we have completed our first implementation of a CoreML model in a working app.

There are many more things that we can do to improve the app. For instance, we can impose some constraints on the position of the different elements shown in the screen so that we can deploy the application in the various screen sizes offered by Apple devices. Improve the design and usability of the app and designing appropriate icons for the app (in various sizes). For the time being, I will leave some of those tasks for later. In the meantime you can take a look at the final code in my github site here.

Enjoy and do keep in touch, I would love to hear if you have found this series useful.

 

CoreML – iOS Implementation for the Boston Model (part 3) – Button

We are very close at getting a functioning app for our Boston Model. In the last post we were able to put together the code that fills in the values in the picker and were able to “pick” the values shown for crime rate and number of rooms respectively. These values are fed to the model we built in one of the earlier posts of this series and the idea is that we will action this via a button that triggers the calculation of the prediction. In turn the prediction will be shown in a floating dialogue box.

In this post we are going to activate the functionality of the button and show the user the values that have been picked. With this we will be ready to weave in the CoreML model in the final post of this series. So, what are we waiting for? Let us launch Xcode and get working. We have already done a bit of work for the button in the previous post where we connected the button to the ViewController generating a line of code that read as follows:

@IBOutlet weak var predictButton: UIButton!

If we launch the application and click on the button, sadly, nothing will happen. Let’s change that: in the definition of the UIViewController class, after the didReceiveMemoryWarning function write the following piece of code:

@IBAction func getPrediction() {
        let selectedCrimeRow = inputPicker.selectedRow(inComponent: inputPredictor.crime.rawValue)
        let crime = crimeData[selectedCrimeRow]

        let selectedRoomRow = inputPicker.selectedRow(inComponent: inputPredictor.rooms.rawValue)
        let rooms = roomData[selectedRoomRow]

        let message = "The picked values are Crime: \(crime) and Rooms: \(rooms)"

        let alert = UIAlertController(title: "Values Picked",
                                      message: message,
                                      preferredStyle: .alert)

        let action = UIAlertAction(title: "OK", style: .default,
                                   handler: nil)

        alert.addAction(action)
        present(alert, animated: true, completion: nil)
    }

The first four lines of the getPrediction function takes the values from the picker and creates some constants for crime and rooms that will then be used in a message to be displayed in the application. We are telling Xcode to treat this message as an alert and ask it to present it to the user (last line in the code above). What we need to do now is tell Xcode that this function is to be triggered when we click on the button.

There are several way we can connect the button with the code above. In this case we are going to go to the Main.storyboard, control+click on the button and drag. This will show an arrow, we need to connect that arrow with the View Controller icon (a yellow circle with a white square inside) at the top of the view controller window we are putting together. When you let go, you will see a drop-down menu. From there, under “Sent Events” select the function we created above, namely getPrediction. See the screenshots below:

You can now run the application. Select a number from each of the columns in the picker, and when ready, prepare to be amazed: Click on the “Calculate Prediction” button, et voilà – you will see a new window telling you the values you have just picked. Tap “OK” and start again!

In the next post we will add the CoreML model, and modify the event for the button to take the two values picked and calculate a prediction which in turn will be shown in the floating window. Stay tuned.

You can look at the code (in development) in my github site here.

CoreML – iOS App Implementation for the Boston Price Model (Part 1)

Hey! How are things? I hope the beginning of the year is looking great for you all. As promised, I am back to continue the open notebook for the implementation of a Core ML model in a simple iOS app. In one of the previous post we created a linear regression model to predict prices for Boston properties (1970 prices that is!) based on two inputs: the crime rate per capita in the area and the average number of rooms in the property. Also, we saw (in a different post) the way in which Core ML implements the properties of the model to be used in an iOS app to carry out the prediction on device!

In this post we will start building the iOS app that will use the model to enable our users to generate a prediction based on input values for the parameters used in the model. Our aim is to build a simple interface where the user enters the values and the predicted price is shown. Something like the following screenshot:

You will need to have access to a Mac with the latest version Xcode. At the time of writing I am using Xcode 9.2. We will cover the development of the app, but not so much the deployment (we may do so in case people make it known to me that there is interest).

In Xcode we will select the “Create New Project” and in the next dialogue box, from the menu at the top make sure that you select “iOS” and from the options shown, please select the “Single View App” option and then click the “Next” button.

This will create an iOS app with a single page. If you need more pages/views, this is still a good place to start, as you can add further “View Controllers” while you develop the app. Right, so in the next dialogue box Xcode will be asking for options to create the new project. Give your project a name, something that makes it easier to elucidate what your project is about. In this case I am calling the project “BostonPricer”. You can also provide the name of a team (team of developers contributing to your app for instance) as well as an organisation name and identifier. In our case these are not that important and you can enter any suitable values you desire. Please note that this becomes more important in case you are planning to send your app for approval to Apple. Anyway, make sure that you select “Swift” as the programming language and we are leaving the option boxes for “Use Core Data”, “Include Unit Tests” and “Include UI Tests” unticked. I am redacting some values below:

On the left-hand side menu, click on the “Main.storyboard”. This is the main view that our users will see and interact with. It is here where we will create the design, look-and-feel and interactions in our app.

 

We will start placing a few objects in our app, some of them will be used simple to display text (labels and information), whereas others will be used to create interactions, in particular to select input values and to generate the prediction. To do that we will use the “Object Library”. In the current window of Xcode, on the bottom-right corner you will see an icon that looks like a little square inside a circle; this is the “Show the Object Library” icon. When you select it, at the bottom of the area you will see a search bar. There you will look for the following objects:

  • Label
  • Picker View
  • Button

You will need three labels, one picker and one button. You can drag each of the elements from the “Object Library” results shown and into the story board. You can edit the text for the labels and the button by double clicking on them. Do not worry about the text shown for the picker; we will deal with these values in future posts. Arrange the elements as shown in the screenshot below:

OK, so far so good. In the next few posts we will start creating the functionality for each of these elements and implement the prediction generated by the model we have developed. Keep in touch.

You can look at the code (in development) in my github site here.