Tuesday, November 22, 2016

Create an Alexa Skill for your Amazon Alexa or Echo Dot

So you've bought an Alexa Dot and you want to create your own voice app - but you are wondering how difficult is it to build, how do you build the app and how much will it cost to run?  If you have basic programming skills then building the application is really easy. If you have written a function or script in Microsoft Excel or Google Sheets - then you can build an Alexa voice app. I'm providing all the basic stuff you need to get started ...

Note: This post is not intended to give you an exhaustive guide to building a skill. Instead it aims to give you the overview to get up and running quickly. Amazon provides a build-it-yourself walkthrough (here), samples (here) and a free course on Udemy (here).  I recommend starting with the free course then following the walkthrough.

How much does it cost ?

It costs nothing to build and run a simple Alexa app. $0 / £0 / €0.  Zero.  Furthermore the app is hosted on Amazon's cloud, it's secure, load balanced and managed for you - so don't need to provide your own hardware. The only real cost is your personal time to build the app.
If you use additional AWS services then you will incur costs - but for an initial app, demo or concept - you are unlikely to have to pay for anything.

What is an Alexa app?

The simplest Alexa app consists of 4 components
  1. Skill
  2. Intent & Slots
  3. Sample Utterance
  4. Application Logic (written in JavaScript or Python or your own code exposed via a service)




How the pieces work together


So before you get started, here's how your voice request gets translated and processed. I think it's useful to understand the flow and therefore triage any issues when you test the app. A word of warning here: this is my simple interpretation of the flow based on the apps I've built so far.




Let's assume our skill is called "Check In".  To invoke your skill and test it on your Alexa Dot, your Alexa Dot needs to be registered to your Amazon account (this is usually the case because most people tend to sign up for AWS using the same Amazon account that they used to purchase the Dot in the first place).

Asking Alexa to use your skill is as simple as saying "Alexa begin Check In" ...

How to build a skill

If you don't have an AWS account then sign up for one at https://aws.amazon.com/free/


To build your skill you will use two tools:
  • Alexa Skills Developer portal - create the Skill, Intent, Slots and Sample Utterance
  • AWS Lambda console  -  create the logic your app uses. AWS Lambda is a separate service that can be used with many other Amazon products. Lambda supports JavaScript or Python.

Important Note:
Your skill is associated with the lambda function using the Amazon Resource Name (ARN) of the lambda function.  When you create your lambda function, you will see the ARN at the top right of the screen. I mention this now because this is one of those bits of information that you need when you set up your Skill and you waste a ton of time looking for it later ...

Screen shot of Amazon Lambda with the ARN value highlighted
Lambda function with ARN



Your first Skill


We will create a simple skill that greets guests and asks them to announce who they are and who they are going to meet. It's a simple example and stops short of doing anything with the data collected. All of the code is available on Github: https://github.com/dipockdas/alexaskill. While it is simple, you could use this skill in a lobby for a business or even a guest comment book.

Step 1: Create your lambda function


I recommend setting up your back end code first as the Skill set up itself is pretty straight forward. Click this link to create your Lambda function: https://goo.gl/Nu3z3s

From the list of templates, select Blank Function.




On the Configure Triggers screen select 'Alexa Skills Kit'.




Click Next




On the Configure function screen enter the name of your function and select Node.js as the runtime.



Copy the JavaScript code located here http://bit.ly/2geg5Cy and paste it in the code window




Make a note of the ARN number at the top right of the window. Note: We will need to update one line of code later - so keep this browser tab open.

Step 2: Create your Skill

Open a new browser tab and create your first skill by clicking this link: https://goo.gl/TuEIvx
(Note: if the link does not take you to the create skill window - click Login, then click 'Get Started' on Alexa Skills kit, then click Add a new skill).

The skill type should be custom. You can give the skill any name you wish but call the invocation name "check in" or something that makes sense to a guest.




Before we proceed we need to update our application logic so that it only accepts requests from our skill.
Copy the Application ID from your new Skill - it's the string beginning with "amzn1.ask.skill".
Now go back to your Lambda function and update Line 11 of the code. Replace the string "***** CHANGE-ME ******" with your Application ID.

if (event.session.application.applicationId !== "***** CHANGE-ME ******")

Will now look something like ...

if (event.session.application.applicationId !== "amzn1.ask.skill.32222-3333-2222-3333")


Go back to your Amazon Skill browser tab.

Now you need to add the Intent to the interaction model.  To save time you can just copy the intent.json file from http://bit.ly/2giAmV1



The intent file describes the actions that your skill will support. If you scroll through the Intent schema you will see that there are 4 Intents supported - 3 built in Amazon intents and our custom intent.

  • Notify - our custom Intent
  • AMAZON.CancelIntent
  • AMAZON.HelpIntent
  • AMAZON.StopIntent

(To understand what each Intent does you can read the code you posted in your Lambda function).

Looking at the Notify Intent you can see that we have defined two slots. One for the Contact name (the person we are going to meet) and the other for the Visitor name.  Both of these will be passed to our Lambda function that we created earlier. You will observe that Visitor is defined as "AMAZON.LITERAL" - this allows us to capture any information and pass it onto our function to manage. Contact on the other hand has been defined as "EMPLOYEE". I could have defined Contact as "AMAZON.LITERAL" - because in all likelihood we would want to look up the contact in a directory - which we would do in our Lambda function. However, to keep things really simple, I chose to create a brand new type called "EMPLOYEE" - which will hold the lookup list of people that people could visit.

Click 'Add Slot Type'. Enter 'EMPLOYEE' as the name of the type and then enter a list of names in the values list.



Click Save when you have finished.

Now you need to add the Sample Utterances. Copy the text file located here : https://goo.gl/BGX8Vw 
and paste it in the Sample Utterances panel.





Last Step ... almost there ...


Now we need to connect your Skill to your Lambda function. Go back to your Lambda browser tab. Copy the ARN from the upper right of the screen.

Screen shot of Amazon Lambda with the ARN value highlighted


Back on the Skills tab,  paste the ARN into the Endpoint field on the Configuration window. I've assumed that your Lambda function and your skill is located in North America (if you have everything deployed in another region then of course switch to that region).




Once you have added the ARN - you can click the Test link and verify that the Skill is Enabled so that you can test it.




All done ! Let's Test !


You can now test the skill in the browser - but where's the fun in that? Let's get straight to Alexa instead !

With your Alexa device close by, Invoke your skill by saying "Alexa, begin Check In" .... and you're off to the races ! You have now built a voice driven application.

Checking the logs

Go to Cloudwatch located here https://goo.gl/kyu9Yn, and click on the link for your lambda function. If you click onto the latest timestamp for your function you will see all your console.log() messages (from your Lambda function) visible - including the parsed Contact and Vistor information.


Have fun !





Friday, November 18, 2016

The easiest VPN set up ever ... (or how to surf anonymously and securely)

There are many reasons why you want to get online and surf incognito using a VPN.   Fortunately there is a really easy way to do this in 3 simple steps ...

Setup


1. Install the Opera browser from www.opera.com.

Opera is built on Google Chrome (so it's got bleeding edge support for all the web standards) AND it has a private browsing option with built in VPN support ...





















2.  Once Installed, open the browser and Click File ... New Private Window


3. Enable VPN by clicking "VPN" next to the search icon in the browser address bar.


That's it - You're all set ! You can now surf anonymously !


Bonus Points...


You don't have to do this - but you can select the region from the Virtual Location drop down...
Why would you want to do this? Perhaps the site you want to access is region locked or you want to test your application experience for users coming from another region for performance and usability.

For example, as I was writing this post, Google popped up this friendly message....



I was curious to see what a user from Germany would see when they visited the site.
Do they see the Cookie alert required by the European Union? How do you test this?

4. With the VPN option enabled, click the 'Virtual Location' drop down


... and select the region.


Now navigate to your site ...



Now you are accessing your site via a server in the region you selected. In my case I selected Germany - Oh - and here's the cookie alert .... 





Monday, October 31, 2016

Use a Beacon to check in guests and share Emergency info

I had to put together a simple demo that uses a beacon to check in a visitor and share Emergency information, such as Fire Exits in the building, with the user .
(Note: this isn't the best way to check in a guest - but this was the request).

Most beacon demos require some native coding - but this approach favours configuration over coding so that you can get a concept working quickly before spending time on a native app.

What you will need


1. A Google account
2. A Beacon - I used a beacon from Bluecats (https://bluecats.com/)
3. Any iOs device (OS 8+) or Android Device with Google Chrome installed

How it works


You will set up the Beacon set up to emit a static URL using the Eddystone protocol.
The URL will navigate the user to a Google Web Form. You can use any URL (your own website if you want) but it must be using HTTPS.

Any device with BLE support, with an appropriate receiving app, will pick up the URL.  But therein lies the problem ! Most guests will not have the native app and it's just rude to ask someone to install an app on their phone for an ephemeral use case.
So how does the guest get the link? In our example we will use Chrome for iOs and Android (which you would hope is a more likely scenario for the guest ...).

On any iOs device (8+ OS) if the guest has Google Chrome installed, the beacon URL, once detected, is placed in the Today panel.



On Android you can use the Physical Web app to detect the Beacon. (I don't know why Google doesn't push the URL to Google Now - but I'm sure they'll get there...).


Putting the demo together


1. Navigate to https://docs.google.com/forms to create a Google Web Form. Web Forms are pretty easy to use and the result looks good on a mobile device.  I called my form 'Visitor sign in'. This will be displayed with your URL when the beacon is detected - so make it a sensible name.

Once you have completed the web form, press the SEND button to bring up the Send Form dialog.



Click the Link option in the dialog. This will give you the short URL to access the form. You can copy the URL and use as is or paste it into your favourite URL shortener such as bit.ly to get a shorter URL.

Note: If you have a website you want to navigate to, then skip creating the web form - all you need is the short URL of the website. Just make sure the site uses HTTPS and not the HTTP protocol.

2. Now you need to configure your beacon to use the Eddystone protocol and provide your static URL. Today, most beacons support multiple protocols (Bluecats supports Apple's iBeacon protocol AND the Eddystone protocol).  Most beacons come with an app to configure your beacons. I'm using Bluecats, so you're setup will differ if you have different beacons - but it should be pretty straight forward.

To configure the Bluecats beacon, launch the BC Reveal app (install it from the Appstore if you don't have it).



Select the beacon you want to configure by tapping on the beacon from the list.



Next, tap 'Edit Beacon'

If you have never configured the beacon before, you can change the beacon name on Step 1. If you have changed the name or don't care about the name just press 'continue'.

On Step 2 you will set up the beacon mode.

 

Scroll to the bottom of the list and select 'Eddystone Url' and then press Continue.

On Step 3, you can now provide the URL for the web form you created. (This is why you want a really short URL.... )



Enter the URL, press Continue and then confirm the changes.  Your beacon will be updated with the new settings.

3. Enable Google Chrome on iOs or Android to detect the beacon. Open up Chrome on your device and go to  chrome://flags#enable-physical-web  (or chrome://flags and scroll through the list until you find Physical Web). Enable the option.
On iOs there is one final step - and that is to add the Chrome widget to the Today panel. Pull down the panel and iOs will ask if you want to see Chrome widgets. Once you confirm you're all set.

That's it ! Really that's the hard work done.

Showtime


Enable Bluetooth on your iOs or Android device.

If you are using iOs, Pull down the Today panel.  You will see the Physical web icon with your URL. On Android, launch the Physical Web app and you will see the URL in the Nearby Beacons list.

In either case, tap the URL, Chrome will launch and take you to your form (or website).  That's it, it's that simple.










Friday, September 2, 2016

Translate your Mobile App for free in 3 easy steps

This is a simple way to translate your Android (or iOs) application into multiple languages, without using an expensive professional translation service for the initial translation or having to write any additional code. The solution is easy to manage and share for review. I've used this approach in my last 4 jobs and it works for all classes of application. (In one company I used this approach to translate over 8000 strings for a web based app.).
Once you have completed the translation you can manage the strings in Google's Android Translation tool (https://developer.android.com/studio/write/translations-editor.html).

Warning: You should still use someone fluent in the chosen language to verify the final application and make sure you don't end up with something that does not fit your application.

These instructions assume that you have developed an Android application and have located your strings.xml file under the res/values/ directory. The steps are similar with iOs but are not covered here.

You will be using Google Spreadsheets, so you need a Google account. I could just share the spreadsheet - but where's the fun in that?

Step 1: Preparation

In your Android project copy the strings.xml file to strings.csv.
Open strings.csv in your favourite editor.
(I've used strings.xml in the screenshot to highlight specific strings).


 You are going to remove everything other than the text in yellow and white.

Remove all text before <resources> tag.
Remove the <resources> and </resources> tags.
Search and replace all </strings>
Search and replace all  <string name=
Search and replace all < characters with  ,

Your file should now look like this:



Step 2: Import into a Google Spreadsheet

Open a new Google spreadsheet. From the File menu click 'Import' and upload your csv file.











All being well you should have two columns in your spreadsheet. 

Now insert one row at the top of the spreadsheet.
Enter the following headers for each of the columns 

Col A: ui  - the meaning of your string
Col B: en - the two character language code of the source string (en = english in this case)
Col C: de - the two character language code of the target string (de = german in this case)
Col D: the target XML string 

You can read up on language codes here: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2

Your spreadsheet should look like this:


Step 3: Translate and generate <string> tags

Now here comes the fun ! Use the Google Translate function to do the translation for you.
The function takes the following format: source string, source language, target language. 

So based on this enter the following in column C, row 2. 

=GoogleTranslate($B2,$B$1,C$1)

The $ will ensure you are always using the same Row or Column (depending upon where it is used) - so in effect you told Google to

=GoogleTranslate  - translate
$B2                        - the text in col B  row 2
$B$1                      - using the language locale in col B row 1
C$1                        - to the locale in col C row 1














Now you have the translated strings we need to create the XML strings to add back into your app.

Recreate the XML string by concatenating column A and D in a <string></string> tag.
Enter the following formula in column D, row 2 onwards.  

= CONCATENATE ("<string name=", A4, ">", B4, "</string>")










Once the strings have been translated you can select column D and copy the contents into a text file called strings.xml and store this as per the Android instructions (in our example we would store the strings.xml file in /res/values-de/ ).

That's it - you're done!

Step 4: Extra credits


OK - this is good - but what if you want to translate multiple languages in one go? Just clone the spreadsheet and change cell C1 from 'de' to the (two or four) appropriate language string you want - such as 'fr', 'pt' 'ko' etc.



Sunday, May 25, 2014

Host a static website on Google Drive (in 5 easy steps)

You need to host a static website but don't have the time, money or resources to set up a web server.  Perhaps you're learning to code or just doing a demo. Here's a way to set up a web site at no cost, in just a few minutes.

Step 1. Create a new folder in Google Drive.

From Google Drive, Click 'Create', select 'Folder' and enter the folder name.
(I chose 'hybrid' for this example, but you can choose anything you want).














Step 2. Share the folder.
First select the folder you created (displayed in the folder list), then click the sharing icon.









In the Sharing Settings popup, go to the 'Who has access' section and click 'Change'


The Visibility options pop up will appear. Change the Visibility option to 'Public on the web'. 
Although set by default, make sure that 'Access' is set to 'Can view'.
Click 'Save'.



















The folder is now shared. Click Done.




3. Upload your web content.
Open the folder and drag/drop your web content into the folder.
You can upload HTML, JS, CSS.  (I'm sure you can try media files as well but I haven't).

(Note: I have used Hakim El Hattab's Stroll.js CSS experiment for this example. You can find the original content at http://lab.hakim.se/scroll-effects/ ).













Double check that the files are also publicly viewable.

4. Create your site URL.
Your Google drive folder is accessed using a specific URL. The site URL has the following structure:
Google Drive host / folder ID / your web page.html

First get your folder's unique identifier. Look in your browser address bar, the URL will end with a long unique string after the last "/".




Copy that long string.  Based on this information, we have:

Google Drive Host: https://www.googledrive.com/host/
Folder UID: 0B8SIN8IVD8DGRFByVGZ0Vjdfcnc    (** yours will be different)
Web page: index.html (this is the name of your web page)

Open up your favourite browser and enter the following URL (use your folder UID and web page name)

https://googledrive.com/host/0B8SIN8IVD8DGRFByVGZ0Vjdfcnc/index.html

Your web page should now display. Yay !! Almost there.

5. Make the URL a friendly one.

That URL is a little long - so the final step is to use a URL Shortener such as bit.ly or goo.gl

Copy your URL and enter it into your chosen URL shortener. Once converted you will have a short and simple URL such as http://bit.ly/1kCcqsO or  http://goo.gl/69KvBD


























Enjoy !!


Wednesday, September 18, 2013

Turn that old box into an Internet TV for less than $70...



So you've got an old TV or computer monitor with a VGA or DVI socket and it's looking pretty outdated because all the latest devices are HDMI only - including the cheap but amazingly great value Google Chromecast.

Well all is not lost! You can get a DVI-to-HDMI or a VGA-to-HDMI adapter and connect your TV or monitor to the adapter and then plug the Chromecast to the adapter. The adapter comes with audio sockets to take the HDMI audio and play it through the TV speakers. Really simple to put together and no software to set up.


Cost:
Chromecast:                        $35
VGA-to-HDMI Converter : $30 (or less on Amazon)

I have this setup on an old TV that was sitting in the garage. The picture quality is exceptional.


Monday, April 29, 2013

Watch the BBC iPlayer and ITV Player when outside of the UK on Ubuntu


This is a follow up to my post of a year ago. The instructions are simpler than last year's post. If you want instructions for the Mac go here.

I re-imaged an old laptop last year with Ubuntu (12.04 LTS).  If you've never tried Ubuntu before, head over to http://www.ubuntu.com/download  to try the latest version. The installation is straightforward and you can install it without affecting your Windows image (if that's what you're running). Not only is this fast (boots in seconds) it also has better support for a wider range of devices - specifically Wifi.

To run the BBC iPlayer on Ubuntu, do the following...

Step 1: Download tor from this site : https://www.torproject.org/.  The download button should detect your operating system. For Linux the direct link is here. Alternatively you can use the command line and enter sudo apt-get install tor.

Step 2: Unpack the tor tar.gz file. Open the folder that was extracted. On my machine it's called 'tor-browser_en_US'.  Double click the file called 'start-tor-browser'.



Press 'Run' when challenged.



 This will launch the Vidalia control panel. If all goes well, the control panel should connect to the Tor network and you should see the following status:



Once you are connected, the web browser bundled with Tor will appear and carry out a check to ensure you are online anonymously.



The bundled Tor browser is a cut down Firefox image that does not have Flash player installed - which is required for the iPlayer.  To use another browser, with Flash installed, we need to get the SOCKS host setting from the bundled Tor browser.

Step 3 From the bundled Tor web browser menu select Edit->Preferences->Advanced. Then press the Network tab. Click the 'Settings' button.   Make a note of the SOCKS host port (9050 on my setup).  If for some reason this is blank - then Check 'Manual Proxy configuration' and then enter 127.0.0.1 for the SOCKS Host and 9050 for the port.



Step 4: Set up tor to use servers in the UK. On the Vidalia control panel click "View the Network". The Tor network map will open.


This shows you a list of the servers that are available all around the world.  Sort the list of countries by clicking the column header for the flags. Once the list is sorted by flag - scroll down until you see the Union Jack (British Flag).  Make a note of several relays by typing their names in a text editor (several incase one is offline or has poor performance).

Once you have made a note of the relays - Close the tor network map.


Step 5Setup the Tor servers in the Tor configuration file.

In the Vidalia control panel, press the 'Settings' button. Then press the Advanced tab.


In the Tor configuration file section, click 'Edit current torrc'.
The torrc configuration file will open.


At the bottom of the list of settings add the following two lines. Replace #R1, #R2, #R3 with the names of the relays that you picked out earlier.

ExitNodes  #R1, #R2, #R3, #R4
StrictExitNodes 1

For example:

ExitNodes  TorLand1, StickItToTheMan, obelix
StrictExitNodes 1

(StrictExitNodes forces Tor use the list of Relays that you provide).

Also add the SOCKS Host and port number (if it is not present) ensuring the values match your settings.

SocksListenAddress 127.0.0.1
SocksPort 9050

Now press OK to confirm the changes and close the window. Press OK to close the Settings Window.

Step 6. Restart tor by pressing the Stop Tor button.  Once Tor has stopped - press Start Tor. When Tor has started successfully - then get excited - you're almost there !


Step 7a: Set up a Firefox to use Tor.  Open Firefox. Select Edit->Preferences->Advanced. Then press the Network tab.



Click the 'Settings' button.
Select 'Manual Proxy configuration'.  Enter 127.0.0.1 for the SOCKS Host and 9050 for the port.



Press OK then Close to exit the preferences.

Step 7b: Set up Chrome to use Tor. Open Google Chrome.
Click the wrench on the toolbar, then click "Settings" from the menu options.


At the foot of the page - click "Show Advanced settings".

In the section marked "Network", click the "Change Proxy Settings" button.



Click "Network proxy" from the list on the left.




Select "Manual" from the Method pick list.
In the SOCKS Host field enter 127.0.0.1
In the field marked ":" enter the port number 9050 (or whatever your setting was)
Press Apply and close the Network settings dialog.
Now Google Chrome is set up to talk to Tor running locally on your machine


Step 8:  View !!  You made it ! You can now head to the BBC iPlayer page at http://www.bbc.co.uk/iplayer .




You can also watch ITV at http://www.itv.com






Final notes

You are not limited to the UK. You can access online content any part of the planet. Just remember to change the relay for the host country.