Display Presentation of Credentials - normal answers disappears after a few seconds, audio meta data stays permanent!
Connecting Alexa User to external input options 1: starting without companion app
Connecting Alexa User to external input options 2: using companion app
Simplified voice-only flow of entering the credentials
I wrote an iOS App to share the WiFi Credentials via QR Code back in the Days of iOS 10 when it was not build-in. It does not only scan those QR Codes, it creates them and managed multiple credentials. After incorporating different technologies inside the Apple ecosystem for sharing (NFC, AirPlay, iMessage, AppleWatch), it was natural for me to build a companion skill to share the WiFi settings via Alexa.
Especially the Echo Show is predestined to show the QR Code to guests. The device is always hat the location of the WiFi, while I might be away with my iPhone, when my wife wants to share your wifi with guests.
But a problem e.g. on parties is, that the shown QR Code disappears after a short time - this updates brings infinite displaying the Credentials.
What it does
First of all, the Skill stores the WiFi credentials.
There a three options to accomplish this:
I) Voice Only
By invoking the e.g. "set credentials" the skill asks for the length of the WiFi Name. Then it ask for each character separately. After the last character for the WiFi Name ii asks for the length of the WiFi Passwort and then again asks for each character separately. A character answer could be:
- XS: only character (this might be error-prone think about m vs. n etc.) and will be interpreted as a capital character
- S: the number
- M: a word and the beginning character will be used as a capital character
- L: "small" followed by a character (same as 1, but the character will be used small)
- L: "large" followed by a character (same as 1)
- XL: "small" followed by a word (same as 3, but the character will be used small)
- XL: "large" followed by a word (same as 3)
- XXL: "digit" followed by a number (same as 2)
- XXXL: "special character" followed by the name of the special character, which should be used.
II) Webpage Support
If you ask for "connection code" three options bring you to a website:
- voice only: Alexa tells you the link "alexa.wifi.properties" and a user specific 6 digit code, which is valid for 15 minutes. The URL leads to a webpage, where the user enters the 6 digits and if correct, a page is presented, with two fields (name and password).
- card: The URL ("alexa.wifi.properties") and 6 digits are noted on a card in the Alexa App. The card also presents a qr code, wich is a link. This link directs the user directly (skipping the page for the digit code) to the page to enter the credentials .
- display: On an Echo Show the QR Code, URL ("alexa.wifi.properties") and the 6 digits are also presented on the screen.
III) iOS App
As described in "Inspiration" I have a companion App. This app manages WiFi Credentials. If you ask the skill for the "iPhone App" it will give you the URL "http://wifi.properties" where you can find the link to the App in the Apple App Store. On the card and an Echo Show or. Spot Display it also presents a QR Code wich will directly open the App in the App Store App.
If you have the App installed, you can send any stored credentials directly to the skill. Therefore the app needs to know the Alexa UserID for invoking my Webservice - like the website (see II above). So the app extends the functionality of the "connection code" intent and offers different ways of integrating it:
- You can enter the 6 digit code in a special form inside the app, the app receives the Alexa UserID from a web service and stores it locally.
- You can scan the QR Code inside a special form inside the app and the app extracts the Alexa UserID directly.
Both forms are special, because the user gets a special hint how to invoke the skill via a speech bubble image.
- The Link coded in the QR Code is registered as Universal link, if it is scanned by the iOS Camera App or the URL is entered in the Safari App, my App gets invoked and directly extract the Alexa UserID.
After the Skill backend has stored the WiFi Credentials for a User, it can present those
The user can ask for the credential set or for a specific attribute:
- SSID and Password ("Alexa ask Wifi Helper for the credentials")
- SSID ("Alexa ask WiFi Helper for the WiFi Name")
- Password ("Alexa ask WiFi Helper for the password")
The skill spells every character in detail (like small a large b special character Dollar Digit one ...). Additionally they are also shown on a Card in the Alexa App. In the credential case, the card also includes a QR Code with the WiFi Credentials, so that it can be scanned directly.
On an Echo Show and an Echo Spot the Display is used, to present the written representation of the Card and in the credential case also the QR Code.
On an Echo Show or an Echo Spot the skill ask to present the QR Code infinite. If yes, an audio directive starts a silent audio stream and presents the QR Code as cover image, and the credentials as meta data text. The stream restarts after 2 1/2 minutes by adding those data to the play list. The skill uses a unique toke each time, so that it will reload the credentials if they are changed in-between. The user can directly invoke this infinite presentation by asking alexa to "... start WiFi Helper and show credentials permanently".
The best user experience of this skill is using an Echo Show, connecting the skill to the iOS App for easy credential input and showing the credentials to guest on the Echo Show, which then uses their Smart phone (even without my App) to scan the wifi credentials QR Code and automatically get access to the WiFi.
How I built it
The skill Backend runs on a php server. The script uses the Alexa UserID (hashed) to create an entry in a MySQL database to store the WiFi's SSID and Password. There are different kind of scripts running on the server processing those data:
- Skill (plain JSON parsing and creating via PHP - just minimal code, no framework, yet)
- QR Code Generating (using the PHP QR Code lib) used by Skill for displaying WiFi Credentials on Display / Card or the (deep)link to the webpage.
- Website (just some HTML,CSS and PHP code) for browser use (also supporting universal links to deep-link into the iOS app if installed).
- WebServices (just some PHP code) to communicate with the App
The iOS App is written in Swift an only uses default Frameworks of apple. For the Skill this app is extended by an upper top-left skill button in the navigation bar. This invokes an menu with the options:
- Enabling the skill: If Alexa app is installed, a deep link is called. Otherwise a link to the amazon skill store is invoked).
- Connecting via QR: Start scanner for Connection Code. On the camera image, there is a speech bubble overlay, which shows the phrase how to get the connection code from an echo show.
- Connection via PIN: Speech bubble, which shows the phrase how to get the PIN from an echo and a form to enter it
- Delete connection (if there is an active one).
If an Alexa UserID is linked by QR Code or PIN, the credential detail view presents a switch. If the switch gets activated, the credentials are transferred to the WebService. On the Overview View, the credential wich is stored on the skill is marked by a grey Alexa Skill icon.
Challenges I ran into
The Display of the Spot created some challenges:
- The Display is round, so the normal QR Code would lose the corners and so the scanner could not recognize it. Solution: Added an additional boarder to avoid losing the three orientation squares.
- The shown text is presented over the QR Code on the Spot, so some informations are lost and the scanner sometimes cannot read the data. Solution: While generating the QR Code I use the highest quality which added redundancy so that the lose of some information can be restored. Additionally I shortend the shown text to the minimum, so less information is lost.
Both solutions reduces the comeliness on an Echo Show. But it is not possible to distinguish both devices, neither by the Intent request nor by the HTTP Request of the image itself.
Adapting the audio player interface to the infinity image presentation hack. This means, only using it, when display is present and some additional intents to handle stoping etc. correctly.
Accomplishments that I'm proud of
- Multiple ways for the user to enter the credentials, so that he can chose the one wich suits best for her/him.
- VoiceOnly option for dictation of the SSID and Passwords, which usually mix small and capital letters as well as special characters and digits.
- The idea to quickly adapt the new audio player meta to make infinite presentation of the QR Code by presenting it as a cover image of a silent audio file.
What I learned
- How to build an easy dialog with short interactions while offering options to handle more specific options (like the any character / word for small characters). There fore you need to handle the context, otherwise you can not distinguish a single digit as an intent to specify the length of the SSID or Password or a Digit within those (not handling this well, lead to a bad review in the beginning of the skill).
What's next for WiFi Helper
- Using Notifications to inform about a change of the WiFi Credentials outside a conversation session (e.g. by the App).