Tcoz Tech Wire

Discoursing on trends and technologies interesting to Tim Consolazio, sole proprietor of Tcoz Tech Services, specializing in Flash/Flex/Air, iPhone, Facebook, Twitter, and related technologies.

"Technology from an indie software developer's perspective".

Wednesday, June 3, 2009

iPhone app development...using JS and HTML instead of Objective C? Freakin' amazing!

I had to try this; check out NimbleKit. I dabble in iPhone development, and have already gone through the rigor of Objective C, but I mean...JS and HTML?

NimbleKit touts, "NimbleKit is the fastest way to create applications for iPhone and iPod touch.You don't need to know Objective-C or iPhone SDK. All you need is to know how to write an HTML page with Javascript code."

I'm dubious to say the least; write in one language, compile to another completely different environment, is something I've seen blow up more than once. But then again, I was dubious of the Google Web Toolkit, and that worked really well when I needed it. With that said, let's give it a try. I downloaded the installer, which adds a new project type to your XCode iPhone Applications project templates:



Firing it up brings you to the dev interface for the project. It looks more or less like a regular app, with the addition of a the NimbleKit supporting binaries, like libNimbleKit.a, the NKit.js library, and an HTML folder in the project explorer. The page of interest to me is located in that HTML folder, called main.html, and we see it includes the NKit.js file.



So, let's compile and run the project on the iPhone (I'm a registered developer) using just the default HTML text in the emulator...BONK! NimbleKit wants you to register NimbleKit, and initialize it with the serial number they send you in order to test on the iPhone. I'm not inclined to do that at this point but, it did show that NimbleKit will deploy the app to the iPhone without issue; I actually see the icon on the iPhone and everything exactly as you'd expect. The pic below is a screenshot from the iPhone:



So, for now we're using the emulator. My confidence is building though, if this thing really pans out I might just register and get a serial number. Right now though, there's very little documentation and only one tutorial. I think I'll wait for another rev to commit.

There's a tutorial showing how to build a simple "Radio" application, but what I think I'm going to do is just try to knockout a hello world that loads an image. Right off the bat, you can see that, while you use JS and HTML as your "MainView", which is what you put UI items on. Let's try to add a button, and an image control, so that when we click the button, the image loads. Nothing fancy, but this gets us through creating and positioning UI elements, hooking up events, and UI elements that react based on the result of that event (in this case, a button click). This is a basic exercise I try in any UI development environment I come across.

In Objective C, the code might look like this; this is the implementation class, I'll leave out the interfaces and whatnot. Note that in the NimbleKit project, I don't have to worry about the separate interface and implementation objects, I just work right on that HTML page directly.


- (void)loadView
{
[ super loadView ];

mainView = self;

btn = [ UIButton buttonWithType: UIButtonTypeRoundedRect ];
btn.frame = CGRectMake ( 110, 10, 100.0, 20.0 );
[ btn setTitle: @"Load Pic"
forState: UIControlStateNormal ];
[ btn addTarget: self action: @selector(btnClicked:) forControlEvents: ( UIControlEventTouchDown ) ];

[ self.view addSubview: btn ];
}

- (IBAction) btnClicked:(id)sender
{
/*
UIAlertView *alert = [ [UIAlertView alloc]
initWithTitle:@"Hello DevX" message:
@"iPhone, here I come!"
delegate:self cancelButtonTitle:@"OK"
otherButtonTitles:nil, nil];
[alert show];
[alert release];
*/
img = [ UIImage imageNamed: @"cat.jpg" ];
CGSize imageSize = img.size;
myImageView = [ [ UIImageView alloc ] initWithImage: img ];
myImageView.frame = CGRectMake ( 0, 100, imageSize.width, imageSize.height );

[ mainView.view addSubview: myImageView ];
[ myImageView release ];

}


So, let's try and port that same idea into NimbleKit. Although there's no documentation, I saw in the video and in the screenshot on the home page that the UI elements are preceded with "NK". Those aren't native iPhone framework names...hmm, where do I get the object names? My guess would be, since you do this all in a JS script tag, I'd need to look in the nkit.js file, and sure enough, that's where I found what I was looking for; NKButton, and supporting methods.


function NKButton()
{
this.init = NKPlaceNativeButton;
this.show = NKShowNativeButton;
this.hide = NKHideNativeButton;
this.setTitle = NKSetNativeButtonTitle;
this.setImage = NKSetNativeButtonImage;
this.id = CallNKitAction("NKCreateButton?sync=yes");
}
function NKSetNativeButtonImage(imageName)
{
CallNKitAction("NKSetNativeButtonImage?image="+imageName+"&id="+this.id);
}

function NKSetNativeButtonTitle(title)
{
CallNKitAction("NKSetNativeButtonTitle?title="+title+"&id="+this.id);
}

function NKPlaceNativeButton(x, y, width, height, callback)
{
CallNKitAction("NKPlaceNativeButton?x="+x+"&y="+y+"&width="+width+"&height="+height+"&callback="+callback+"&id="+this.id);
}

function NKShowNativeButton()
{
CallNKitAction("NKShowNativeButton?id="+this.id);
}
function NKHideNativeButton()
{
CallNKitAction("NKHideNativeButton?id="+this.id);
}



So, with this info in hand, I tried to write out the JavaScript. Doing "var btn = new NKButton ( ), and setting the properties every which way, didn't make a native button appear. Ok, I'll go with a NKNavigationController instead; this worked as expected, a nav controller appeared on the top of the emulator screen with a button, and a test event handler that shows an NKAlert worked. So far so good.

It then dawned on me that I wasn't thinking about this right; I'm supposed to be using HTML and JS, not trying to figure out how the standard iPhone SDK applies. So, let's shift thinking: I'll still use the NKNavigationController (though based on what I can see, the button should have worked...DOCS PLEASE!), but I'll also add a button under it that does the same thing; clicks and makes the image appear. For the image, I'll just put in an HTML "img" tag, with no "src" attribute specified. When I click either the button in the nav bar, or the standard HTML button, I'll call a JS function to load the image. Here's my code:


<html>
<head>
</head>
<body>
<script type="text/javascript" src="NKit.js"></script>

<script type="text/javascript">
var navController = new NKNavigationController ( );
navController.setTitle ( "Testing NimbleKit" );
navController.setStyle ( "black" );
navController.addNavigationItem ( "Image", "showImage" );

function showImage ( )
{
img.src = "cat.jpg";
}

</script>

<input type="button" value="Load Image", onClick="showImage ( )" />
<img id="img" src="" />

</body>
</html>


And I will be freakin' damned...they both worked perfectly. Screenshots below. I gotta say, I'm stunned. The potential for this development kit is pretty staggering when you think about it. The developer of NimbleKit has essentially put basic iPhone development into the hands of every basic web page developer.

You think there's a lot of apps in the iPhone store NOW...just wait 'til this gets out!

As always, thanks for visiting.




Labels: , , , , , ,

Monday, May 11, 2009

Climbing Mount iPhone Developerest: At the Foot (Getting it Up and Running)

If you didn't know from the blog description or my profile, I'm a software developer by trade. I've worked for American Express R&D, Microsoft, count Citigroup, Spectrum/IEEE and Thomson Reuters among my current project clients, and have run my own cottage dev shop for five years (lucratively enough to make a living, thank the powers).

My specialty for quite some time, actually as long ago as 10 of my 15 years in the field, has been, on top of competency with Java, .Net, PHP, and assorted ECMA scripting languages and whatnot, ActionScript development. I don't consider myself a "Flash" developer; "ActionScript programmer" is more accurate, though these days, I would add "Flex Developer" as well, since I work with and manage resources for some pretty big Flex projects. Facebook development is also up my alley, I actually was a paid reviewer for both O'Reilly Facebook dev books, but on the tech side, that really boils down to skill with ActionScript, JavaScript, and PHP (I do understand that integration of the social graph is another and equally important matter).

Note: Check out my Facebook Sudoku app, Planet Sudoku, at http://apps.facebook.com/planetsudoku.

Based on a history of development tools and languages that focus on the UI, and the fact that I own an iPhone and find it indispensable, it's probably no surprise that I got interested in iPhone development.

So there you are one day, saying out loud to nobody in particular (well, I do that now and then anyway), "I gotta get this rolling," and off we go.

Note: I'm aware of the open source alternatives to the official Apple SDK and so on; at this point, I'm only interested in being a fully legit, licensed, Apple iPhone developer, particularly because Apple makes it clear that any unsanctioned use means no App Store approval. I'm sure I won't be good enough to fool them for a long time, if ever, and I'm not prepared to take up the Jolly Roger for that cause right now.

So, my learning process, in a nutshell:

- Get a beta or something of the dev kit.
- Get the language book.
- Put on the strong black tea.
- For a month or so, allocate the time used for relaxing, working out, and playing guitar, to going through the samples, cursing at the screen, eventually figuring out how to make hello world appear when you click a button, getting the eventing mechanisms straight, learning how to call and use data, figuring out how to manipulate images...all the key stuff that you'd have to understand to be able to translate requirements, into features, into an app.

Additionally:

- Find the useful community resources (often done by googling for things that either seem broken in the book, or just because you know from experience there has to be a better way to do a certain something)
- See if any frameworks I already work with exist for the given environment (e.g. PureMVC for iPhone).

FYI, PureMVC for iPhone: http://www.darklump.co.uk/blog/?p=185. I will more than likely blog my experience with this port some day.

- See if you can find some practice certification material, or get the cert book; this is important to me not because I necessarily want to get certified (I used to take certification seriously, I don't anymore, but that's a topic for another day), but it's valuable to me to make sure I understand what's considered "essential" areas for a given technology.
- Maybe take a class or two. Instruction can never hurt, and it shows real interest to a potential client. This can be costly, but it's a write off.
- Avoid the design-time GUI tool until I know how to create basic applications with just the language. I firmly believe, if you don't know how the basic plumbing works and depend entirely on the UI design tool, and something doesn't work the way you expect, you'll be seriously behind the 8-ball.

That's how I've always done it, it's always worked, and that's how I intended to start my climb up Mt. iPhone Develeporest.

So...

- Go to the iPhone Developer Center, http://developer.apple.com/iphone/.

Tutorials, community, and download for the dev tool, XCode. So far so good, several of my steps knocked right out.

- Get the language book.

I got this one first, and recommend it, but I'll say it right now, it is NOT enough, even to get you started: iPhone SDK Application Development, O'Reilly, Jonathan Zdziarski.

I say "NOT enough" for two main reasons:

First, Objective C is different from C-based languages in many ways syntactically; at first glance, it's really cryptic. You ultimately see that it's actually not bad at all, but all the brackets and unfamiliar keywords, and having to write two distinct parts for every class (interface and implementation), can take you out of your comfort zone. I love interfaces and such, I'm an OOP nut, but I still found the conventions of Objective C a bit disorienting.

Second, iPhone development involves understanding "Views" and class hierarchies related to them. If you don't understand the language already, working with the iPhone API to implement views and attach things to them is not easy at all.

Realizing all this quickly, I got this book: Programming in Objective-C 2.0, 2/e, Stephen G. Kochan.

Now we're talking; excellent book that demystifies Objective-C. For the most part, you write "utility apps", like simple calculators and so forth, but it gets you grounded in the language, which really unlocks the iPhone API for you. I like the language now and have no issue writing classes and having them work together nicely.

Alrighty; I understand the language, at least enough to work with the tool somewhat productively. XCode has an iPhone emulator, so I've ported some of the utility examples from the Objective C book to the iPhone (like adding real buttons for the calculator) and run them in the emulator with no errors. I'm starting to feel like an iPhone developer.

So, let's get one of these sample apps on the iPhone. You have to register your phone as a "developer" phone...ok, not so bad, the iPhone site walks me through this, yeah yeah I know if I blow it up or it catches fire Apple is not responsible...alrighty let's get "Hello World" on and see how this process works...BLAMMO. Dead stop.

In order to put an app on your own iPhone (now registered as a dev unit), you have to register as an iPhone developer with Apple, and they have to send you a license key, which you use in combination with a certificate, to sign your app, so that it can be transmitted via your usual USB connector to your iPhone (XCode actually makes this seamless, very nice). Otherwise, you'll just develop with the emulator forever (again, I am not interested in hacks or workarounds to this).

This process takes time, and may not be as easy as it sounds. You can register a number of different ways; for example, as an independent developer under your own name, or as a business. I opted for the latter; Tcoz Tech Services, a sole proprietorship with a DBA that I've used for five years. Apple required that I fax (can you believe they don't accept emails of scanned forms?) my business registration documents to them, and that they review them, etc. If approved, you go on to the next step.

So, I complied. Again, BLAMMO. I don't live at the address that I originally registered the business under anymore. Apple won't approve your registration unless the mailing address you apply under, and the addresses on the documents (in my case, a DBA), are identical. This held me up for almost two months, so I will say in caps:

IF YOU ARE A CONTRACTOR RUNNING A SOLE PROPRIETORSHIP WITH A DBA, AND WANT TO REGISTER YOUR BUSINESS WITH THE IPHONE DEVELOPER PROGRAM, MAKE SURE THE ADDRESS OF YOUR BUSINESS REGISTRATION MATCHES THE ONE YOU REGISTER WITH!!!!!

Fair warning.

After quite a bit of back and forth, Apple did allow me to change my registration address to the one on the DBA; this was reasonable, because there is no law saying I have to live at the same address, it's entirely Apple's policy. It held me up, but they worked with me and I pushed it through. One day, Apple telephoned me, asked me some confirmation questions, welcomed me/my business to the program, and said I'd receive a mail taking me to the last step.

Hah, guess what...the last step is to PAY. That's right. You don't have to pay to learn Objective-C, or get the XCode dev tool, or the emulator. But that's all meaningless if you want to be an independent developer building iPhone apps that sell in the App Store. You need to be able to put them on the iPhone accordinlg to Apple hoyle, and unless you pay up (a little more than $100 a year), you can't do it. Talk about incentive to build and sell at least 120 copies of my first 0.99$ app!

I grumbled, and again considered going the open source hacker route (interestingly, as I understand it, the developers of the first iPhone SDK are in fact the guys that wrote the open source unofficial one, which preceded the official one), but no, I'm a pro, do the right thing, keep it above board.

After a journey of roughly four months, all the pieces are in place, and I'm now testing apps on my iPhone. Look out for my first iPhone app; will it be a hit? I don't know. It certainly won't be my magnum opus, but I do know it's original; I've looked carefully and there isn't one available that does what I have in mind.

Feel free to contact me at tcoz@tcoz.com if you have any questions.

Labels: , , , , , , , ,