Who do you think you are?

30-something mother, wife, lawyer, writer, design junkie, craftaholic, cook

likes: clever tools, snazzy colors, working for justice, kid wrangling, Meyer lemons

dislikes: inefficiency, civil discovery, most shades of purple, Tori Amos

What? You want my life story?

My Shop

 

The Twitter


Subscribe!

 In Your Reader

 In Your Email

Entries in apps (1)

Sunday
Jul152012

There's an app for that: how to make your own web-based summer reading app!

This time last year my little boy had just turned five. He was learning to swim and steadfastly refusing to learn to read. Rather than push the issue, I read to him as often as possible and figured he'd pick it up when he was ready. Only a few months later, and his kindergarten teacher had spearheaded a transformation. By the end of this school year, my pudgy-handed little five-year-old had become a tall, skinny rising first grader who, it seems, can't NOT read every billboard and street sign and cereal box he encounters.

Still, persuading him to read anything longer than a well-placed advertisement has been a challenge. He's added to his list of obsessions—pirates have had to make room for ninjas and Star Wars and...well...Angry Birds. Although we limit his screen time, I'm amazed at the ease with which he seems able to learn anything technological.

So I've tried to devise a way to keep him motivated to read. His school is doing a summer reading contest, but the end of the summer is as remote as the turn of the next century to a six-year-old. Still, I want to track his reading for the contest so he and his teacher will know how much he's accomplished over the summer. So I give him a point for every page he reads. He has to reach a certain number of points before he's allowed to spend his money on any kind of toy. Brilliant, right? Yeah, until you start trying to keep track of it. I mean, maybe you are more organized than I, but within the first few days of summer, I found myself trying to keep up with umpteen scraps of loose paper with scribbled titles and page numbers. 

So I turned to technology. I searched the Apple store for a summer reading app, but couldn't find anything that suited me. Everything was far more complicated than I wanted. I just wanted to be able to record the name of the book, how many pages (aka points) were in it, and a brief reflection from my son about what he liked about the book. Finally, I gave up looking and decided to make one for myself.

Using nothing but free services (Google Docs/Drive and DropBox, plus some freeware scripts and helpful tutorials), I was able to create a web "app"* that I can access from my iPhone, my iPad, or any device with access to the internet. My son just has to answer a few questions, and hit submit—every entry is automatically dropped into a Google spreadsheet that I can access from anywhere to track his reading progress and his points.

And you can do it, too!

Although I was once—so very long ago—a computer programmer (as in, I was one of those people who was feverishly re-coding mainframe computers to avert the Y2Kpocalypse), it didn't require any real coding skills, just a little careful cutting and pasting. 

First, I'd like to point you toward the helpful resoures I used to make my Reading List app:

How to Host Your Website on Dropbox

Customizing and Styling Google Forms

Now here's how to do it yourself, even if you don't have your own website!

Before we begin, if you haven't already, you'll need to sign for a free Dropbox account (unless you plan to host your web app from your own web site) and install the Dropbox app on your computer. You'll also need a free Google account. Which, surely, you already have, right? Finally, you'll need a text editor appropriate for making minor edits to an html page. I have been using "Text Wrangler" for Mac, which is free, but there are loads of free options for Mac and Windows.

Now, you'll need to download the two files linked below. Save these in your Dropbox folder in the subfolder named "Public." You can rename the form template to anything you like, but unless you are comfortable rooting around in HTML, don't rename the apple-touch-icon file.

Right-click (control-click on a Mac) to download and save:

reading_form_template.html

apple-touch-icon.png

Now, go to your Google Docs/Drive account, and create a new form:

Google automatically creates a form with two fields, by default. You can edit these, name your form, and add as many other fields as you need:

When you've finished creating your form, you'll notice, at the bottom of the page, a link to the "published form." It will look something like this:

Copy this link, and then click on the link to launch your form. Looks pretty good already, right? If you want to stop right here, you've already got a functional form that you can bookmark and use, easy peasy. But if, like me, you want to have an app icon on your iPhone or iPad that your kiddo can use to enter his own info, press on.

Your web browser should have an option to "View Source." Mine looks like this:

When you "View Source" you can see all the html and other code that instructs your web browser what your form should look like. Now, you need to go hunting. You're looking for a chunk of text that starts with "<form action" and ends with "</form>." Copy this entire chunk of code.

Now, using your text editing app, open the reading_form_template.html that you saved in your Public folder on Dropbox. Scroll down till you see this:

<!--Insert your form's custom code BELOW this line-->

Now put your cursor in the next empty line and paste the code you copied from the web form source code.

Next, you need to find the "public" address of your web app's icon file. Go to your Dropbox folder and click on the Public subfolder. Right click (or control-click on a Mac) on the file named "apple-touch-icon.png" and look for the Dropbox menu option. You want to select "Copy Public Link" from this menu:

Now, go back to your text editing app. There are two spots where you'll need to paste the "Public Link" you just copied. In both places, you're looking for this text: "REMOVE_THIS_TEXT_AND_REPLACE_WITH_ICON_PUBCLIC_LINK" Select all the text between the quotation marks, but LEAVE THE QUOTATION MARKS IN PLACE. Paste the "Public Link" in the place of the highlighted text.

Now, save all the changes to your reading list form.

Go back to your Dropbox folder and find the reading list form. Again, you want to copy the Public Link. Now you can paste this link into your web browser or an email. If you open the link on an iPad or iPhone, you can save the page to your home screen. Try it, and—violà!—you've made an app. (Sort of. At least that's what you can tell your kiddos.) I've shared my page with my mom, so whenever my son reads books over at her house, she can keep me updated. I just go back to my Google Drive from time to time to see the full reading list and tally up his pages. So cool!

I've tried to make this as simple as possible. There are tons of ways to make this even niftier, but I didn't want to overcomplicate it. Unfortunately, I'm pretty overscheduled, so I am unable to respond to requests for technical assistance. Feel free, though, to help each other out and to make suggestions for enhancements in the comments. I'll check in whenever I can.