Piggate blog

iBeacon and Physical Web tutorials. Stay tuned for more news!

Creating a custom Physical Web Beacon with Piggate

There are several types of beacons, and one of them is the Physical Web beacon, whose structure is a bit different from the iBeacon structure. While iBeacons have the UUID, major and minor, Physical Web beacons have a simple encoded URL which is the main message that will be advertised with the beacon, with the objetive of notifying the user on the smartphone to click in the message and open the URL with the web browser and see the result.

Physical Web

Requeriments

If we want to create a custom Physical Web beacon we can do it with the UriBeacon tool. In this entry we will create an UriBeacon with node.js, which can run in linux, even in a Raspberry Pi, if you have one. Therefore, the requirements are the following:

Creating your Physical Web beacon in Piggate

First of all access to your Piggate account and go to the Beacons section. Create a new Physiscal Web beacon writing the name and placing the beacon in the map:

NewPhysical

Don’t forget to activate your new beacon to show the offers you will create in the next step:

ActivatePhysical

Creating the offers

The first step here is to create a new campaign with the name, description, notification message and Stripe keys to make payments:

New campaign

Then go to the content section and create as many tickets as you want, writing the name, description, image URL and price:

New ticket

Next, enter the unlock code to exchange the offer when purchased and select the currency (the secret and publishable keys are not required here, only in the campaign if you want):

New ticket

Finally place your store clicking in the map and select your Physical Web beacon:

New ticket

Then create your application in the Apps section and associate to your campaign:

New app

If you want to see a preview interface you can go back to the Beacons section and select the eye button in your beacon. A new panel will appear showing a smartphone with the campaign and offers you have created before, like in this image:

Physical preview

Also this preview works like in the smartphone and you can test purchasing an offer with Stripe:

Physical preview

Creating your custom Physical Web Beacon with node.js

First of all, you need to create your package.json file, with the following dependencies:

1
2
3
4
5
6
{
"dependencies": {
"bleno": "~0.1.8",
"uri-beacon": "~0.2.3"
}
}

Then you can install the dependencies:

1
npm install

Then pick the generated URL editing your Physical Web beacon in the dashboard:

Physical Web app

Now create your node.js script and add the following lines, advertising the URL shown above:

1
2
var uriBeacon = require('uri-beacon');
uriBeacon.advertise("http://goo.gl/osMcKE");

Finally, start the Physical Web application in your smartphone and run the previous script as administrator (sudo):

1
sudo node PhysicalWebExample.js

After this anyone with bluetooth activated and with Physical Web application installed can receive a notification:

Physical Web app

If they click on it, the web browser of the smartphone will open the specified URL:

Physical Web app

And finally they can purchase the offer entering a valid credit card in the form below:

Physical Web app

When anyone purchase an offer he will receive an email to confirm the payment. Something like this:

Physical Web app

Then you will be redirected to the exchange screen, where you will need to enter the unlock code:

Physical Web app

If the unlock code is correct a green button with a confirmation will be shown:

Physical Web app

That’s all! With these simple steps we can simulate a Physical Web beacon and receive the information in our device using Piggate. If you have any question feel free to write a comment and we will answer you as soon as possible.

Source: https://github.com/google/uribeacon

Comments

Proudly published with Hexo