Charles Engelke's Blog

December 4, 2011

The Bookshelf Project – Using Amazon Web Services from JavaScript

Filed under: Uncategorized — Charles Engelke @ 8:08 pm
Tags: , , ,

Many years ago, I got frustrated with using Amazon’s “save for later” shopping cart function to keep track of books I probably wanted to buy someday. The problem I was trying to solve was that I’d find out about an upcoming book by one of my favorite authors months before publication and I didn’t want to forget about it. I could have just preordered the book, but back then there was no Amazon Prime so I always preferred to bundle my book orders to save on shipping. So I’d add the book to the shopping cart and tell it to save it for later. But (at least back then) Amazon was willing to save things in your cart for only so long, and my books would often disappear from the cart before they were published.

I’m a programmer, and Amazon had an API (application program interface), so I did the obvious thing: wrote a program to solve my problem. It was just for me, so I wrote the simplest thing that could possibly work, figuring I’d improve it some day. It was a simple Perl CGI script that I ran under Apache on my personal PC. It used the (then very primitive) Amazon Web Service to look up the book’s information given an ISBN, and saved its data in a tab delimited text file.

That was a long time ago, probably very soon after Amazon introduced its first web services. And I’m still using it today with almost no changes. But I’m no longer happy with it, for several reasons:

  • It only recognizes the old 10 digit ISBN format, not the newer 13 digit one.
  • It can’t find Kindle books at all.
  • It runs only on a PC running an Apache webserver.
  • The data is available on only that device.

The cloud has spoiled me. I want this program to run on any of my web-connected devices, and I want them all to share a common data store. Hence this project.

“Run on any of my web-connected devices” pretty much means running in a browser, so I’ll have to write it in HTML and JavaScript. I’ll use HTML5 and related modern technologies so I can store data in the browser so I can see my saved book list even when off-line.

I know HTML and JavaScript but I’m no expert, so I’m going to build this incrementally, learning as I go. Step 1 will be to get a web page that just uses Amazon Web Services (AWS) to look up the relevant information given an ISBN. And right away, that’s going to require a detour. As a security measure, web browsers won’t let a web page connect (in a useful enough way) to any address but the one hosting the web page itself. My web page isn’t going to be at the same address as AWS, so it seems this is a hopeless task.

There is a way out, called Cross Origin Resource Sharing (CORS). The target web site can tell the web browser that it’s okay, it’s safe to let a “foreign” web page access it. Modern browsers support CORS, so I should be okay. Unfortunately, AWS doesn’t (yet) support CORS, so that’s out. Foiled again!

But there is a stopgap. I can create a Chrome Web Application. That’s pretty much just a normal web page, except that it can tell the web browser to allow access to foreign services. And that’s just what I will do, starting in my next blog post. That will take a while, but after that’s done, I can explore various directions to take it:

  • Maybe AWS will support CORS soon, in which case I’ll be able to use almost the exact same solution on any modern web browser, even on tablets and phones.
  • I can always write server-side code to “tunnel” the web service requests through my server on the way to AWS. That works, but I think it’s inelegant.
  • I might try creating an HP TouchPad application, which uses the same kinds of technologies as the web, but to create native apps. I find that approach very appealing, even though the TouchPad is more-or-less an orphan device now. I’ve got one, and this would be an excuse to develop for it.
  • Tools like PhoneGap let you wrap a web application in a shell to allow it to run as a native app on various mobile platforms. I think they allow operations that normal browsers block, such as CORS. I could find out, anyway.

So I’ve got a lot of potential things to learn and try. First up: creating a Chrome web application, in many steps. If it comes out nice, I’ll even try publishing it in the Chrome Web Store.

Advertisement

May 9, 2011

HTML5 Development with the Chrome Dev Tools

Filed under: Uncategorized — Charles Engelke @ 6:47 pm
Tags: , ,

This is the session I’ve been most looking forward to here at IO Bootcamp.  I use these tools all the time, but I know I’m missing out on a lot that’s available.  We will be working with the examples at goo.gl/FFEmd.  That includes a TODO web application, and the slides from today’s talk.

We start with using Chrome to change CSS styles in the app.  I have no sense of design, so I just make things uglier.  But the various transforms and transitions are cool.  I delete items by having them slowly shrink to nothingness.

Moving on to feature detection, seeing what APIs are available to your web page.  The next exercise uses Modernizr to see if the Geolocation API is available (of course, it is in Chrome), and then we add use of it to the JavaScript for the page.  Just edit the script in the dev tools, click Ctrl-S to “save” the changes, and refresh the page.  When you’re done, go to the Resources tab, look at every version of the resource you’ve saved, and right-click to save the modified script to a file on your PC.  Very nice.

Next, profiling.  We use the Profiles tab in the dev tools and start by taking snapshots and comparing their differences.  Then start profiling by clicking on the circle, do some things, and stop the profiler by clicking the circle again.  You get a list of how much time each part of your code was running during the test.  The half second busy loop inserted in the example really eats up a lot of the application’s time.

You can set breakpoints in your code the normal way (by selecting the code to break on), even with conditional breaks.  But you can also set breakpoints on code that handles events, callbacks for XHR, and even on changes to DOM elements.  That last is really going to be useful.  But, things are going fast here and I’m not fully keeping up.  Still, knowing what’s there will let me seek out the details later.

This has been a nice session, even if I didn’t always keep up with the presenter.  I eventually covered it all, and have more tools available to me when I get back to work.

September 3, 2008

Google Chrome

Filed under: Notes — Charles Engelke @ 10:24 am
Tags: ,

I’m excited about Google Chrome.  It’s in Google’s best interests to make the Internet ever more usable, and when they do it through pure open source it helps everybody with similar interests (even Google’s competitors).  But I’m also pleased because it has three specific features that I’ve wanted a lot lately as I’ve been living more of my computing life online:

  • Minimal “chrome”.  That is, almost all of the web browser is given over to what’s inside the page I’m using, not to browser functions.  I’ve stripped Firefox’s chrome down as much as I could, but Google Chrome is even better than that.
  • Tear-away tabs.  I can grab a tab and drag it outside of my browser, and have it stand on its own.  I love tabbed browsing in general, but sometimes it gets in the way.  Just as I often want to have several command shells open and visible at the same time, sometimes I want browser pages set up the same way.
  • Application windows.  You can turn a tab into an “application” that can be started from a menu or shortcut like any other application, and which has even less browser elements around the page.  I’ve already done this for my Google Mail, Calendar, and Docs pages, and my blog administration page.
Professionally, I’m interested in building web applications, and Google Chrome is a great frame for them.  It doesn’t have a lot of features yet, but it’s definitely ready for solid use.

Blog at WordPress.com.