I love learning new things, especially when it is something as accessible as an app for the computer that lives in your pocket, or a webpage that can be accessed from anywhere in the world.
I know that JavaScript is not the worlds most robust or efficient language, and that many people don't like the way it does this or implements that, but I personally think that it would be a great Intro to Programming language. It teaches if/then, loop, variables, functions and program flow. It is free and easy to set up. All you need is notepad and a browser, and to compile? just reload the webpage. Sure, it won't teach you about data types, inheritance is a bit of a mess for me still, and there is so much hack-job code out there that it can get ugly fast, but for accessibility, ease of setup and how quickly you can feel powerful, I think it's wonderful.
That is one of the things I loved about it. I'd been in the computer science program and finished my associates degree, and I still wondered when I'd get to build something usable. So far, I'd learned a lot about concepts, theories, algorithms. I'd written a slew of command line programs, but I still had no idea how this could translate into something like a complex webpage, a phone app, or a media playing program on your PC. Once I took the classes on web design and databases, I could finally start to see how they could tie together to build something powerful and useful.
Recently, I wrote a web app that relied heavily on html 5. This meant a lot of trial and error, research and reading random blogs on the internet. I loved it. The needs for my app were the ability to store data offline, run on an Android tablet, and accept signatures. Other than that, it was pretty standard mobile webpage stuff. When presented with problems like this, where I'm not even sure if it's possible, my first approach is to proof-of-concept each step.
Can I store data offline? I went with an offline SQLite database, I know it's deprecated and isn't implemented by everyone, but in my mind, it's the only sane way to store any amount of data offline. I started by creating a database, inserting and reading back out some data. I tested it in Chrome for desktop, the Android Browser, and then when it was released, Chrome for Android and it worked across all, so I said why not. I have control over what browser my users will have access to, so as long as it works in the one I tell them to use, than we are good to go.
Then, optimizing it for a mobile interface. This was easy in the sense that there were several options out there, but hard in that there were several options out there. The most robust delivery method I found was jQueryMobile. This made it a cinch to get things styled and laid out for a mobile device. Their ThemeRoller is awesome, and there are several really good prebuilt themes out there. Once I figured out how page navigation worked, then things suddenly clicked and it was a good decision. It 'enhances' webpages after you've written them, so things look great, perform well, and it makes webpages feel much more like a native app. It even adds transitions between pages to smooth out navigation.
Finally, the signature capture. I looked at the few examples I could find online. Many seemed to be some sort of paid service, and I don't like relying on someone else like that. The best tutorial I found was by a guy named Thomas J Bradley (1). He had a working example on his webpage, downloadable source code, and it worked across browsers. My problems was that I was delivering to a controlled, mobile device. That meant that I didn't need the Flash plugin (which he included non-canvas browsers)... and I also just like to build my own (I learn so much more that way). I looked at several different ways to capture the input. First, I looked at using an SVG (2) of some sort and storing the points in an array and then converting that to a jpeg to send to the server. This proved to be more of a hassle that I thought it was worth, so I started down the long road that is Canvas. Canvas is awesome if you know what you're doing. I had no clue. I'd never done any programmatic 'drawing' and so the vocabulary, examples and concepts were pretty foreign to me. Finally, after dissecting several different online 'drawing' examples (one showed how to read touch events for a touch screen device, another showed how to accept multitouch events, one showed how to draw the line to sign on, one showed the logic behind drawing the actual signature line as they draw), I started writing my own signature class. It seemed (relatively) simple at first until I ran into an Android Browser bug where, when drawing on a canvas, it would occasionally throw a mouse event during a touch event... this caused it to draw a line to the middle of the canvas. This was nearly impossible to debug (because it only happened on the device, not on the desktop). I would look at the ADB log from Android, and it had some obscure error that led me to a bug on the Android website... which was quite old... and still had no solution. But I got around that, and then kept tweaking, improving, simplifying, and improving my 'library'.
The reason I mention all this is just to say that I love prototyping, learning and building. The area where I have a harder time is finishing and deploying a project, and cleaning up bugs. I'll have to write about that in another post.
1. http://thomasjbradley.ca/lab/signature-pad/
2. http://mcc.id.au/2010/signature.html
No comments:
Post a Comment