...specifically by using Google Now, Laravel, AngularJS, UIKit & Mailgun!
We love to get our hands on the latest and greatest; and currently we feel the above are leaders in their fields when it comes to creating platforms and frameworks that allow immense control and great ease!
So what better way to play with them than apply this tech to the in-house tradition that is "Fat Fridays".
Building A Breakfast WebApp
Each Friday all the guys and girls at Selesti get a treat that keeps us fat and wedged in our seats! We rotate around the local cafés and market stalls (helping the local community and all that) and get breakfast delivered straight to our desks to enjoy whilst the radio booms out some classic Kisstory tunes!
Normally we have had a spreadsheet that just had a person's name, then what they wanted next to it, but where is the fun in that?
So we quickly whipped up a basic foundation using Laravel which gave us a solid API structure with several endpoints to allow peoples food orders to be recorded. Effectively we had 5 endpoints:
- Get Orders - This returned a JSON array of Users, each with their last food order attached.
- Set My Order - A simple POST endpoint that takes "UserID, "FoodID", "ThisWeek" allowing you to update users food and if they want it for the coming week.
- Send Reminders - This gets triggered by a cron that sends an email to everybody via the PHP Mailgun driver provided by Laravel at 4:20 on Thursday telling people what their current order is, giving them 10 minutes to change them if they want!
- Send Order - This runs via a cron at 4:30 which collates a full order email and sends out the order! Which our lovely local café then confirms for us.
Setting Up The API
So, setting up the API was fairly straight forward, we had attached a small MySQL database to it to persist the orders for next week, and now we had our endpoints all set up we delved into the front end!
As mentioned, the 2 weapons of choice were AngularJS and UIKit. For those of you who don't know what either of these are, the most simplistic explanation I can give you is
After hooking up our endpoints to a AngularJS Service and a basic UIKit layout using the Switcher Component - which allows us to replicate the iOS ScrollableView element and give us a slider like experience - we ended up with this little gem:
Once we had it all hooked up and working it was time to add a little more integration...
As we use Google Apps for most of our platforms and more recently adopted Google Now functionality, it was time to jump on the bandwagon! Most of us already use the Now feed for various systems, so it seemed a great place to add our integration, and allowed everybody within our team to see what was coming for breakfast and get their taste buds tingling!
Google Now works with a mixture of systems, but the one we'll be focusing on is using its Gmail & Schema.org implementation known as 'Now Cards'. These are semi-automated cards that are retrieved from your inbox, you attach a JSON payload or use microdata to reference data within your email. Google then analyses this data and adds it to its memory, so when the time comes, you'll be alerted to this event!
An example of this would be, it's detected your booking reservation for your hotel, and has analysed your check-in and check-out time, so you wake up at your favourite Connaught Hotel in London from a night out on the town, not sure what the time is or when you need to get out, Google Now will give you the update as Now is approaching! You will end up with a small card similar to this
So we checked out some of the schemas, currently there are only a few you can use:
We opted for the Event Registration as it would give us the closest card as we could for the time being, so we attached our customised JSON payload to the email template.
The next step was to generate our email and get some generated HTML. To make sure we've done it correctly you can then visit the Google Email Mark up Tester where you paste in your code, and it will validate it against the schemas.
Once it's validated, you can jump into the Gmail Actions Tester which allows you to send a variety of emails to yourself. In our case it lets us paste the generated HTML and email it to ourselves so that Google Now detects it in our inbox.
At this point, using the Inbox app from Google, we get a little message looking like the below!
Inbox has detected our schema and has created a card for it! If we open it we then get an expanded view.
So there we have it, we've managed to import our Food Orders into our Inbox feed! We can now see that its coming up!
As mentioned, Google Now will only show you things that are "about to happen" so we just sit and wait until Friday comes along to enjoy our hard work!
As the Google Now schema support expands more possibilities will become available. The schema.org website contains extensive explanations and schemes which we can hook into, and will allow us to deliver your future product with living data!
If you've got any ideas how to use Google Now then contact us and we'll see what we can do with you!