Every now and then, a random kid will email and ask me how I did something on the site. That sure excites the nerd in me when I see a young, curious version of myself who has the potential to grow up and turn that curiosity into a cool job in skateboarding, especially when the inevitable "I want to be a pro skateboarder" dreams collide with harsh physical reality.
This edition of Skate by Numbers isn't necessarily numbers, but it's closely related. I want to show you how easy it is to make computers do anything you want and use that skill to create some value to a business, or even better, start your own business. I'm going to show you how I made The Boardr InstaGame.
I think if no one explains the high level basics to you, programming and working with computers like that can be super intimidating. Looking at a bunch of crazy ass code can make you feel like you're illiterate. I picture it like people who don't skate that look at skateboarding and think it's the most dangerous thing they've ever seen. We all as skateboarders know that's far from the case. Once you know the basics and know how to fall, you're on your way to getting better and better. So many intimidating things in life work this way and making computers work for you is no different.
So, what's involved in making something like InstaGame? First, the concept. I wanted an easy, fun way to do giveaways of product on TheBoardr.com, plus I wanted the stuff to go to fellow skate nerds, so I figured I'd do something in quiz format. I also wanted to make it as easy on myself as possible to create these games every week.
First up, you need a place to store the InstaGames. Databases and how to correctly create them for me was the hardest part of ramping up to being comfortable in making software systems. It took two college semesters to get this stuff to sink in. That sucked, but I'm glad I applied myself there. Databases and the language you use to manipulate what's stored in them is an important foundation, much like learning to kickflip before you 360 flip. Anyway, step one is to create the database storage. Things in a database are stored in tables. There are four "things" I need to record: the InstaGames, the quiz questions for each InstaGame, the people who play the InstaGames, and their answer to each quiz question. That's four tables of database information. It's not as crazy as you think once you learn the basics.
So, now you have a place to store the data, next up is creating the forms to enter and upload the data. For this one, I'm using a plain old website like you're used to using. We use this private website to enter and create the InstaGames, plus do a bunch of other stuff like post photos, articles, etc. Note the typo - this is a private website used only by the employees of The Boardr, so it's messy like your house when there's no company. Know the right place to cut corners and you'll get a lot more done not just with computers, but in life in general.
So, you create this webpage form above that collects the information needed to create an InstaGame such as the title and product giveaway image associated with it. In the code that runs on the webserver, you handle the submission of the data and send it over to the database.
Next, back over in the database, you write little bit of code to take that data and save it in the database.
Now that you can create an InstaGame, you need to make a form that lets you enter quiz items for that InstaGame. You're just repeating all the above steps - make the form, handle the submission of it on the server, send it to the database, save it in the database. Here's the form to enter quiz items for an InstaGame. I wanted to make it a little extra custom so I gave myself two text areas to enter the message you get when you're correct and the message you get when you're incorrect.
Once you've got all your forms done to create games, there's some extras to be done like the ability to edit entries for people who enter bad words and/or sketchy stuff you don't want appearing on your website. The process is the same. Here's where I view the entries and can edit them if needed.
Now it's time for the public part of InstaGame where people on the internet will play it. This involves the same processes - creating forms, handling the data submitted to the server, sending it to the database to be saved, and emailing the player. There are a few extra things to think about here like making sure someone enters a real email address, handling things like them entering an Insta username with spaces in it or adding the unnecessary "@" symbol, etc.
Finally, there's a screen that shows the player their results. This involves writing something that goes to the database and gets the information and presents it to your player. You can also see here how the custom message I entered display to the player.
And there you have it, a silly little quiz game. When this idea just popped in my head on Sunday, I thought it would take me two hours, but I'm always way over optimistic on my time estimates. This ended up taking me about eight. Not bad and I will end up using it over and over for a long time to come, especially as we consider our entry into online retail here at The Boardr. This hopefully will help drum up some traffic and some sales to pay the bills here.
Once you know how to make computers do anything you want, you can work anywhere, build anything, and be around whatever makes you happy. Thanks for nerding out! Email me with any questions anytime at Rob@TheBoardr.com.
