Christmas Beacon is a locative based project which ables people to participate real time with their phones. Since middle November, shops and public monuments on the streets start decorating themselves with beautiful and identical Christmas trees. So what if people can participate something with these tress collectively? One way is to establish a sending greetings page that people can leave a virtual message on the web page with a Christmas emoji icon. They are able to “plant” these icons real time and see others messages real time as well.
Adoption/ what else it can be:
After completing this project I realize that the same idea and be adopt for other things that is more socially meaningful than just greetings. For example, it can used for NYUSH cafeteria feedback wall. I saw a picture on NYUSH Facebook group a few month ago, which is is whiteboard placed in cafeteria written with people’s likes and dislikes from the dishes. However, a lot of informations are covered or blurred because of there are way too much comments. Then, having a web page that can store all these data is more important. And beacon can be a reminder for people to submit feedbacks once they go dining in the cafeteria.
Step 1. Configure beacons
I started with testing different apps in phone to configure my beacons. First I used GetTok to configure it and make sure it detects me beacons. Then I tried to click on the beacon info line, enter the password and I saw a page with more infos but then my quit very quick. After that GetTok quit whenever I tried to clicked on that page(I found how the page looks like with online). Im now sure about if it is a must to have Eddystone password and passkit user key.. Since the GemTok keep quitting I decided to move on.
I opened the app “PhyWeb” with blue icon. After detecting beacons for a few seconds, it shows me the preset url (apple.com). I went to the settings and tried to change the url into something else to see if it works.
Step 2. Firebase
I used firebase to store my datas. Since I’m not experienced with it, I watched two videos from The Coding Train to learn a bit more about it. Links: 9.1: What is Firebase? (Database as a Service) – Programming with Text 9.2: Firebase: Saving Data – Programming with Text
Step 3. the website
The design of the website is pretty basic. I followed the youtube video’s instructions to set up firebase links. In my firebase table, I store 4 objects: “icon, text, x and y”. X and Y are the position of the message user leaves based on where they click/touch on their screen. I also make the rules to be public so that everyone gets access to it.
I used Bounce.js http://bouncejs.com/ for emoji informations. I also have a random array of Christmas emojis so the users will get different ones when they sent out messages. I increase the chance of getting more 🎄 because it’s more relevant to the physical object.
To make things easier, I registered another github account christmasbeacon. And use the GitHub server pushed a new web https://christmasbeacon.github.io/. (I thought about to have a sub from my website like wenqianhu.com/beaconchristmas but the url is too long and doesn’t look good).
Step 4. Test
Then just to set the url to https://christmasbeacon.github.io/ in the beacon. Somehow I couldn’t edit the beacon that I already configured to my website. It shows “reading” forever when I go to the edit url page. So I used another beacon that I didn’t change url yet.
Okay it works!
My code should be easily found in the christmasbeacon github account repo https://github.com/christmasbeacon/christmasbeacon.github.io.