For a long time I’ve wanted an app that could
- Allow my students to take a picture of their work and share it with the class
- Certainly my computer should be able to display it, but with thumbnails for all the images
- Bonus if all the images are on everyone’s device
This post is about my attempt to make just such an app in Google Apps Script. It includes detailed instructions for how you can make your own copy. If you want to see it in action, see this vid.
Before jumping in, I want to say thanks to some great twitter friends who had thoughts about other ways to do this. I haven’t tried them all, but I think they all could work really well:
How to get it working for you
Below I’ll explain a little more about how it works, but one important feature is the use of webSockets. To do that I use a free account on pusher.com. It limits all my apps to 100 total simultaneous connections. For the purposes of this app, that means 100 students all sharing images with each other. That’s fine for me, since I’ve never taught a class that big, but I can’t just let everyone use my copy of the app since then I’ll hit that limit pretty quick. The good news is that if you follow the steps in this section you can have your own version up and running that’ll have its own 100-user limit.
So: Step 1, sign up for a pusher account. I described how in this post.
On to step 2. Make your own copy of this google sheet. Make a google folder to hold the images and make sure its contents are viewable to the world. Then follow the instructions in this vid (:
And you’re done! Have fun!
To start the next class all you have to do is clear out the spreadsheet. You can delete the files in the image folder too if you want, but you wouldn’t have to.
Ways to use it
I think my ideal situation is when I ask students to work on something, either individually or in groups, and then letting them all review everyone’s work. Without this app I’ve done that in the past by gathering their personal whiteboards and showing the class what I’ve found or asking them to walk around and look at other groups’ whiteboards. This way they see everyone’s and they can zoom in all they want without trying to see past people. It’s somewhat anonymous since the system doesn’t capture who uploads the image (actually it does capture the email and the date but I haven’t bothered to use that info in the UI).
Here’s an example: “Ok everyone, write down something you know about the dot product. When you’re done, submit your photo.” It seems to me you’d get some cosine (ugh) thoughts, some vectors saying “hey you, how much of you is parallel to me”, and some component-by-component scribbles. Imagine the students scrolling through all of that and then asking what patterns they’re seeing!
I also think this could be interesting in other situations. Imagine if your students were out and about doing some observations or something. They could stay on top of what everyone is seeing with this app. In other words, they don’t have to be in the same room to use the app.
How it works
What’s stopped me in the past from making this app is the annoying habit of phone manufacturers where they make their cameras have incredible pixel densities. That means that the typical file sizes are multiple megabytes. That’s not really a big deal for your phone, but it means your uploads take a while and the server just gets hammered.
This time around I googled a little and found that you can resize images before uploading them. The local machine (your student’s phone) creates a much lower density copy and uploads that instead of the original. This also makes the final product much more responsive.
Next comes the hassle of uploading and saving files in google apps script. Here’s a chapter of my GAS book explaining how I do that, though I did a little different trickery due to the copy of the image that gets created by the local machine.
Next comes making a thumbnail-based image viewer. I just used what I found here. Of course I had to make it a little more dynamic, essentially recreating the thumbnails when a new image comes in. I don’t bother to make tiny images for the thumbnails, they’re just the full image shown small. But since they’re all pretty small to begin with, that works fine.
So all together then, here’s the life cycle:
- A student loads the page
- They’re shown any images that have already been uploaded.
- If they upload a new one:
- Their machine makes the low density version
- and then sends it to google.
- Google saves the image
- retrieves the download url
- saves the url in the spreadsheet (which is why the page loaded all the old ones to begin with)
- and sends that url to all connected devices through pusher
- When a pusher message is received, the student’s machine requests the new image from the google server
- Then that image is added to the array of images at the top of the page.
- For some crazy reason, this only works on iPhones if they use an incognito window
- If for sure everyone loads the page at the beginning of class, you could skip the spreadsheet. But if they hit reload they’d lose all the old ones
- I gather google isn’t crazy about being an image hoster. It’s possible they’ll throttle you. In my (admittedly small scale) testing, I haven’t seen that. Famous last words, maybe
- I used a cool trick to automatically resize the image and upload it after a student selects the image. There’s no separate “submit” button. I like that
- On both iPhones and android when you select a new image you get the choice of your camera to take a picture. I love that as it reduces the steps for the students.
I’d love to hear what you think. Here are some starters for you:
- I love this. What I particularly like is . . .
- I can’t believe you reinvented the wheel, especially after such great suggestions from twitter. Loser
- I know why it has to use an incognito window on the iPhone . . .
- What’s wrong with cosine?
- Google here: cease and desist
- pusher here: are you ever going to pay for our service (note, I have paid when my school has scaled up some of my projects – they let you go month to month which is great)
- Here’s another cool way you could use it . . .
- I don’t think you need to be so worried about the original sized images and here’s why . . .