GEAN Stack – Building Your Javascript App with Google Sheets

I love the end of year holidays. It’s the longest holiday I take in the year and I come back with a bunch of (hopefully!) good ideas. Ideas for large and small innovation areas I want to make reality with my team who build out and operate the DevNet Sandbox platform and services.

For DevNet, the post-holiday ramp-up is fierce, as we head toward the first major Cisco event of the year – Cisco Live Europe (CLEUR) – where DevNet will have a major presence. As usual, part of the DevNet Zone will include the DevNet Sandbox booth, where you can come chat with us about everything Sandbox, DevNet, and Cisco with a developer focus.

For CLEUR, as well as a lot of new sandboxes for you guys, we’ve been putting together a new challenge for those coming along to see us.

Building the DevNet Sandbox Tablet Teaser Challenge

So, what’s the challenge? Well, because DevNet Sandbox is so easy to use (and free!), and reduces the time down to minutes for getting your hands on Cisco products and solutions for development and testing – we need to slow you down and make it more difficult!  So, we’re making you build your own tablet device at the booth beforehand! We’ll be timing participants on their touch tablet building skills and logging the fastest of the day for a great prize!

This should be a ton of fun for folks. However, it did leave me needing to build the pieces of software needed for the challenge, beyond the tablet build components themselves.

Generally, keeping it simple, the requirements broke down as follows. I needed:

• A way for my team to capture participant data on the show floor – name, time taken to complete the challenge and minimal contact details (for contacting prize winners!)
• Support multiple synchronous users entering the participant data
• Present a leaderboard of times, that automatically updates with new participant data
• A small duration to a viable solution

The last requirement – small duration to viable solution – made me think about what re-use I could get from other developer tools out there that would satisfy the other requirements.

After a brief brainstorm over a litre of coffee, we landed on something that felt both clever and lazy at the same time (ahh, developer heaven :)… Creating a “GEAN” app!

What’s GEAN then?!

GEAN is simply a twist on the MEAN stack framework of building full stack javascript applications (using MongoDB, Express, Angular, Node). But, instead of using MongoDB as the database, I’d be using Google Sheets.

GEAN – A lazy MEAN stack? Replacing MongoDB for Google Sheets as a data store.

 

“Why?!” I hear you ask…well, because it was great for my requirements. And to be honest, I really wanted to play around with the idea.

So, my Tablet Teaser Solution would consist of Google Forms, Sheets, and a custom Leaderboard App.

I’d build a Google Form for the data input – they are really simple to build, anyone with the Form URL can use it at the same time and they are mobile friendly. Solid.

I’d link that form to a Google Sheet, with the Form data being automatically populated into that sheet upon submission.

Then the funky bit … I’d use that Google Sheet as my database for the leader board app I was going to write. This made great sense, as I already had my data in a spreadsheet, so transferring it over to a DB, in this case, seemed pretty unnecessary (and what’s more, I even ordered the data in the spreadsheet, so even less new code to write). So, pulling the data straight out of the sheet seemed the way to fly. Plus, I got to benefit from a data gathering tool (forms) that already existed, too. I’d decided on the -EAN elements as it means I only need one language (javascript) and it’s a well-tried approach in all other regards.

Teaser Board – Data moves from User Form, to Sheet, to App.

 

Building the Form and Sheet was straight forward, but it took a little research and time to build the code I needed to integrate things from this point and to build the format of the leader board I wanted. But, a couple of nights later, I’d put together a minimal viable.

Note: Really, the main tricks are to setup and understand the client / token aspects of sheets and how your app then uses them to authenticate and drag the data out. The rest is pretty simple.

Once working, I realised GEAN is a pretty useful and re-usable way or gathering data and using a spreadsheet as an app’s database (for the right use cases). Coupling this with a lack of end to end examples of using this approach with the -EAN aspects of a javascript app stack (that I could find), I thought it’d be good to share the code I’ve ended up with for now, in case others want to use this fast approach any have access to working code *.

Come take the challenge at CiscoLive Europe!

If you want to see this fun app stack working and you’re thinking of heading to CiscoLive Europe, drop by the DevNet Zone and the Sandbox booth. We can answer any of your Sandbox (or GEAN!) questions and also show you all the great Cisco tech you can get your hands on fast and FREE through DevNet Sandbox. But hey, you can also do that now or anytime from the Sandbox Portal, so you don’t need to wait!

As always, I’d love to hear your feedback on (G)EAN type approaches you might have taken and of course your experiences of DevNet Sandbox, as well as any ideas you have for us to improve them in the future.

Hopefully, I’ll see you at CiscoLive. Or if not there, at other DevNet events in 2019! Wishing you a great year ahead!

* Couple of notes on the code – I’ve kept the /node_modules folder in the git repo, so that really new folk can get going as fast as possible, just by following the README and hopefully with minimal issue otherwise. I’d also gone as far as splitting the structure into an MVC approach, in case I wanted to build on this first version later. That’s probably overkill right now, but you know, good for the future…

---

We’d love to hear what you think. Ask a question or leave a comment below.
And stay connected with Cisco DevNet on social!

Twitter @CiscoDevNet | Facebook | LinkedIn

Visit the new Developer Video Channel