Starting with siriKit — part 1/2
After some experiences with siriKit and while developing with my team an iOS app focused on accessibility features, i’ve found a problem with the “add to siri” button, that is a crop bug on its text (“added to..”). There isn’t much content about how to fully use it, a lot of tutorials on the web pass trough the basics of the button and forget to teach beyond the function of add a shortcut.
At the end of this tutorial we will have learned to do the basic: a UserActivity to our shortcut, the "add to siri" button more than just adding the shortcut, but also managing it. We also gonna solve the crop problem and explore a bit more about how to start the app using a shortcut (e.g. how to start the app in a view that’s not the home view).
Let’s do it!
Everything into this step by step tutorial should work on both simulator and iPhone.
1 — Creating the project
Create a Single View App.
Fill up the product name and make sure that you team is correct, also check that the user interface is storyboard and the language is swift. My product name gonna be “StartingWithSiriKit”
Click next and select where to save your project.
2 — Creating views
The project will be a simple app with 2 views: the home and a second with the "add to siri" button (one thing that was difficult to do was open the app on a specific view, so we gonna do that too).
First, in the main.storyboard, drag and drop one more ViewController, then select the two ViewController’s and go to Editor menu > embed in > Navigation controller (you can also do that on the right low corner of xCode, where the first button on left to right has this function), we also need a button to perform a segue to the second ViewController.
Now, on the second ViewController, add a view to be our visual reference to where the "add to siri" button gonna be (the button is programmatically added, so always is good to use this view to measure how the things are arranged on our components hierarchy).
Lets set its height to 44 (without constraint) and add constraints to:
Leading (<=87), Trailing (<=87), Bottom (<=353) e Top (<=377), all constraints to superview (feel free to positioning it in wherever you want).
The constraints and view borders gonna get red, this happens because we are using less than or equal and the autoLayout is warning us that it doesn’t know which final size the component will have, but its all right! The below image show the result.
It would be a good moment to run the app to test if everything is ok!
3 — Coding a bit
Now we gonna enter a bit on code (uhuuul), starting with creating a UIViewController subclass, let's call it "SecondViewController"
Now at the storyboard, on identity inspector of the second ViewController we need to set its custom class to SecondViewController, as shown in the image below:
We need an outlet of that UIView that we have created on step 2, i will call it "siriButtonContainer".
Time to create some blocks of code!! First we have to import the IntentsUI, that is the package to work with siri on the UI.
import IntentsUIWe gonna do an extension of this SecondViewController, at the end of file add:
With this extension we are turning SecondViewController into a delegate of the shortcuts manager modal (at this moment only the add shortcut modal was implemented) as i said before in the beginning of this post, there's a lack of content in the web about how to implement the edit shortcut modal, but keep calm, at the end of this tutorial you will have learned how to use the other delegate to make possible that the button manage the shortcut completely.
What the functions do:
//1 is called when the user completes the shortcut action
//2 is called when the user cancels the shortcut action
A "shortcut action" could be: add, edit or delete a shortcut; All the rest of the processing is done by the siri's API, so we only call the modal dismiss on both functions.
Then, below the outlet, we gonna add the siri button. Let's call it “siriButton” and we are using the class INUIAddVoiceShortcutButton initializer that receive the button style, that can be: black, white, automatic, blackOutline, whiteOutline, automaticOutline. Let’s choose the the automatic, that’s gonna fill the style considering the iOS selected theme (dark or light mode).
private let siriButton = INUIAddVoiceShortcutButton(style: .automatic)We need to program the tap of this button, for this two block of code are needed, the first will be the effectively callback of the tap:
And the block that configures the button, in this block we only configure constraints between siriButtonContainer and siriButton, we also add the target to siriButton. Let's put a TODO here to don't forget to add here the shortcut that this button will manage.
Now we add the button to the view calling the prepareSiriButton on viewDidLoad().
If we build & run the app, we can go to Second Screen and our button will be there, but it doesn't work yet.
4 — Shortcut
Now we need to do the UserActivity that will generate the shortcut to our button, create a new .swift file, name it "SiriActivities.swift" and its responsibility will be centralize all our activities in it. This file will have the code below:
Into the class, we have a function that returns a NSUserActivity (that is the base of a shortcut) and it configures the activity with an ActivityType that is basically a identifier of it (we gonna need it in the future, so we used a enum to avoid typo errors). The function also configures the shortcut card, setting the title, the thumbnail and the suggested invocation phrase (the siri command to execute the already added shortcut). Lets go back to the SecondViewController and we gonna replace the comment:
(//TODO: Add shortcut to the button)with the code below to get the activity and make a shortcut with it:
//gets the our activity
let openSecondVC = SiriActivities.openSecondVCActivity(thumbnail: nil)//create the shortcut using the activity
let shortcut = INShortcut(userActivity: openSecondVC) //set that this button will manage this shortcut
siriButton.shortcut = shortcut
Building & running the app we should be able to go to Second Screen and there will be the "add to siri" button, this time it is able to add the shortcut. Doing that, you can check on the app shortcuts of your iPhone if the “siri test” shortcut is there. And also, if you run the shortcut (by both the siri using the voice or by the shortcuts), it will have two behaviors:
- It will open the app on the main screen (if the app was closed);
- It will open the app on the screen that it was (if the app was on background)
None of this behavior is the desired and we will fix it soon, but we also can see that the button crops its text, it looks like in the image below:
At this point, i want to share a interesting information to learn: the button and the modal has all the L18N resources, but to work on the button you will need to add the specific localization in the project settings as shown on the next image:
Solving the Crop problem
Ok, investigating a lot about it and using the debug view hierarchy tool, i found a peculiarity on the setting of siri button content hugging - by default it was set to 1000.
Thinking that it was the cause of the problem, we gonna add the fix on our prepareSiriButton function: open the SecondViewController, go to the beginning of the function and add:
//sets the horizontal content hugging to 250 (defaultLow)
siriButton.setContentHuggingPriority(.defaultLow, for: .horizontal)This makes the new content hugging equal to 250 (defaultLow), as the problem apparently happens on horizontal, we are only fixing to this axis, but it may be also necessary to fix on the vertical (in our case, it wasn't necessary yet).
Building & running the app now we can check the button and that this problem is solved.
Almost perfect! But our button still doesn’t manage the shortcut, it only add it.
In the next part of this post I will show how to implement the edit shortcut modal and how to fix the shortcut behavior.
Link to the next part: https://medium.com/academy-eldoradocps/starting-with-sirikit-part-2-2-fb7e8b71f11f
