Ivan's blog

My first impressions about Sencha Touch and jQuery mobile

admin — Wed, 22 Feb 2012 23:00:13 +0000

There’s a war going on outside, no man is safe from. Prodigy in ‘Survival of the fittest’

If you are into mobile development you’ll know that there’s a war between native and html5 apps. I want to be prepared for the battle so I ended up doing a spike, choosing Sencha Touch and jQuery mobile as weapons.

The two of them are UI frameworks, based on HTML5, CSS3 and javascript, so they work in any browser that supports those technologies. It’s very convenient, so you can code, test and debug in your computer browser, doing less deployments to your mobile device. You can even use these frameworks for making a website since they offer all the UI elements and AJAX support that you’ll need.

The main slogan of this kind of frameworks is that you can code your app once and deploy it in as many devices as you want. The reality is that if you need access to device features (such as camera, contacts or so) you’ll need another libraries (given by PhoneGap, for instance), but you can use these frameworks to develop the code that must be cross-platform and leave the device details for later.

Since I only wanted to do a sneak peek of how they worked, I did only two simple examples:

Sencha Touch

Sencha Touch provides a bunch of Javascript classes to build your app. Everything can be developed only using those js objects, so you can forget about HTML code. Set your containers and panels, insert widgets into them and voilá! Sencha Touch will render a pretty page.

I did a simple sign up form that you can play with here an take a look at the Sencha code here.

A simple form made with Sencha Touch

As you can see in the code, in this form we have a panel form with an items array where you set the desired fields.

var formBase = {
	scroll: 'vertical',
	url: '',
	items: [{
		xtype: 'fieldset',
		title: 'Sign up form',
		instructions: 'Please, fill in the form.',
		defaults: {
			required: true,
			labelAlign: 'left',
			labelWidth: '40%'
		},
		items: [
		{
			xtype: 'textfield',
			name : 'username',
			label: 'User name',
			useClearIcon: true,
		},
		...

After arranging and configuring the form elements via the object properties, we set the screen size (no extra work if it’s displayed on a phone), attach our previous panel to the form and finally show it.

if (Ext.is.Phone) {
	formBase.fullscreen = true;
}
else { // Showing in a browser
	Ext.apply(formBase, {
	autoRender: true,
	floating: true,
	modal: true,
	centered: true,
	hideOnMaskTap: false,
	height: 320,
	width: 480
});

form = new Ext.form.FormPanel(formBase);
form.show();

And that’s it. All this form was made using only Sencha javascript classes.

jQuery mobile

On the other hand, jQuery mobile uses the new custom data attributes that were introduced in HTML5. It will do the hard work if you don’t want to care about CSS and javascript but leaving the door opened if you change your mind.

I did a even simpler page than the other one. I simply embeded my crafstman bio generator into a jquery mobile page. This is how it looks.

Craftsman bio generator with jQuery mobile

The jQuery mobile part is really simple. The body code is:


	
		
			Craftsman bio generator
		
		
			How you doing?
			Generate bio!
		
		
			hacheka.com

The page template consists in one main div with the attribute data-role=”page” and three others divs (header, content and footer). You can play with this page here and have a look to the source code.

jQuery mobile will carry the weight and transform that simple code into a good looking web page.

My premature conclusions

These pages were really simple but my objective was only to make a first approach to webapps development. The two frameworks are very powerful and come with a bunch of UI widgets and other web stuff. I encourage you to spend a few hours doing experiments with them.

I personally prefer the native way but if you already know javascript you’ll save lots of hours doing real work instead of learning new languages. I’d rather go with jQuery mobile as a personal taste and I’ll write a post about how to use it for real cross-platform development, testing a simple webapp (probably the omnipresent bio generator) in iPhone and Android. I swear.

Bye!

A custom view in iOS

admin — Sun, 12 Feb 2012 23:19:19 +0000

iOS SDK gives you plenty of UI elements. Only armed with them you can develop pretty apps but there’ll be a time when you need to make awesome ones! For that, you’ll have to make your own UI widgets. To understand how to do it, I designed an app that shows charts with the accelerometer values.

Three simple steps for making a custom view

The first place to look for is, of course, the iOS developer library. In the ‘View programming guide‘ you can find a checklist for implementing custom views (‘Defining a custom view’ section).

My view gets the X,Y and Z values from the phone accelerometer and print them in a timeline chart. There are several items in that checklist but I don’t do any autoresizing and don’t have subviews so I skipped them.

Initialization methods

You’ll need to override the initWithFrame: and initWithCoder: methods. The former for creating the view programatically and the latter for using it in the interface builder.

Don’t be afraid. I wrote only the minimum code and it works flawlessly. The InitialSteps: method only set initial values and call the CreateGestureRecognizers: method (more on this later).

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self)
        [self InitialSteps];

    return self;
}

Drawing code

All the magic takes place in the drawRect: method. You have to override it and do your custom drawing in there. In my case, I first draw the X-Y axis. Then I transform the accelerometer values into screen coordinates and draw the dimensions lines if its button is lit. I won’t show you the code because it was made in ‘cowboy mode doing spaguetti code’ but trust me, drawing your custom view is quite easy. As the Apple guide says, you’re encouraged to write the minimum lines of code here and bound to do drawing operations. Any other task is not recommended.

Take this recommendation seriously and try to optimize the drawRect: method as much as possible. I did no clipping (draw only the values that fall within the view) and calculated the coordinates transformation inside the function. As a result, when there were lots of accelerometer values the screen refreshing slowed down. So be a nice guy and keep your draw method clean.

Gesture recognizers

If your custom view needs user interaction, you’ll have to attach the proper gesture methods. You can create your own ones or, more easily, use the ones that come in iOS. In my example, I needed to handle pinch (for zooming) and pan (for moving along the timeline). It’s quite easy to include them.

- (void)CreateGestureRecognizers
{
  UIPinchGestureRecognizer *pinch = [[UIPinchGestureRecognizer alloc]
                                      initWithTarget:self
                                      action:@selector(handlePinch:)];
  [self addGestureRecognizer:pinch];
  [pinch release];
    
  UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc]
                                          initWithTarget:self
                                          action:@selector(handlePanGesture:)];
  [self addGestureRecognizer:panGesture];
  [panGesture release];
}

Assign a method for each recognizer with the right signature. For example, the pinch method signature is (void)handlePinch:(UIGestureRecognizer*)sender. The sender gives you the current scale of the view, so you can do the proper calculations for zooming your content.

And that’s it! Quite simple, isn`t it? See the view in action!

Music for Quares

admin — Mon, 30 Jan 2012 15:00:39 +0000

Quares is an addictive puzzle game where you have to fight against the clock, trying to find the biggest squares with its four corners of the same colour. Once you begin to play, you can’t stop. It’s available for iOS and Android platforms, developed by my friends at DoubleEqual (Abel and Guillermo).

They needed a little help with the music so Grossomodo (my colleague Agus and me) composed some fx and three tunes. Our idea was to make catchy loops to inmerse you in the game frenzy. The electronic one that you can hear in the video below is a good example. I think we made it.

Even if you don’t like the music (do you have such a bad taste?) try the game. I dare you to make a Quares, the square that fills all the screen! And it’s free!

Quares App Store Quares for Android

By the way, if you need some music for your game drop me a line.

Craftsman bio generator. A TDD practice.

admin — Tue, 24 Jan 2012 11:44:09 +0000

Last week a friend of mine (one of the developers of Quares) told me an idea about an iPhone game. It was a rap battle game and he wanted my advise, due to my expertise in emceeing His first approach was to have a kazillion pre-recorded raps and then assign them weights, points, whatever… Soon we saw that it’d be better to generate rhymes but it seemed a tough job.

Challenge accepted!!

Choosing the TDD way

I knew how to develop this in a traditional way. A phrase generator can be build using context-free grammar but as I want to learn how to apply TDD I chose to try that way. I also want to master javascript as a new language this year and TDD practice is one of the best methods I know for that purpose.

What I found more difficult was to ask the right questions. It’s kind of funny to ask something when you know the answer but the objective was to build the data structure test by test. I based them on the existence of terminals (final text) and non-terminals (tokens that can be substituted for both terminals and non-terminals). From that point, it was easier to start.

You can find the project in GitHub. It’s written in Javascript and it uses Jasmine as a test framework.

My self exam

As I said before, the key point is to ask good questions. There are many ways to skin a cat and bad tests can lead you in a wrong direction. I need to study other’s people katas to improve this skill.
Not enough refactoring. I think that I need to be more aggresive in refactoring. Sometimes I don’t feel like a refactor is needed right now, leaving a likely broken window. The same thought about katas applies here.
Not sure when it’s better to inject dependencies / use composition. In the end it works as this is a simple example but I have to keep an eye on this.
It’s difficult to create a good grammar. This is not a TDD or development issue but I assure you it’s quite hard.

Craftsman bio generator

After having all my test in a healthy green color and with the ability to substitute non-terminals I decided to have more fun. I’ve created a craftsman bio generator, in case you don’t know what to write in your twitter account.

Here are some examples:

Co-author of ‘The best practices for Haskell’ and ‘Clean Clojure’ (contributor). Scrum enthusiast, Ruby on Rails expert, father.
Working at NextLearning, Haskell expert, husband. Likes reading. Writing Ruby on Rails webs for CompuGlobalHyperMegaNet also.
I write code for NextCoding.com. Prize-Winning author of ‘Developing XP Haskell software’ and ‘Clean RoR’.

Craftsman bio generator

I’ve uploaded the generator to my GitHub. All the magic is in the grammar file (bioGrammar.js). You can study how the generation it’s done and if you use it for building your own generation let me know!

Improvements

More test cases. I guess there aren’t enough tests. You need one that traverses all the grammar to find errors in that structure prior to begin execution. I did tests only for the code but finding issues in the data is a plus.
Number / gender concordance. This is planned for the next iteration. Remember that the aim is to have a rhyme generator, but before, if I want to build sentences that make sense I have to add more complexity to the substitution process, taking care of the number and gender of the subjects.

Have fun!

Featured image Argyle Street Joinery (modified)

Newbie guide for using GitHub in Mac OSX

admin — Sun, 15 Jan 2012 17:27:41 +0000

First of all, note that I’ve said ‘newbie guide’ and not ‘guide for newbies’ ;). I’ve been using Subversion for years but I knew nothing about Git. As GitHub is quite popular these days and I want to publish some code in this blog, I’ve written this little guide for helping me to remember how to get it working. I hope you’ll find this useful too.

Set up Git

First, you need a GitHub account. If you’ve been in a coma, just woken up and you know nothing about this code hosting service, I’ll tell you that is free as long as you use it for open source projects. The repository will be public. In case you want your repositories to be private, you can sign up for a paid account.

Once you have your account, you’ll need to get Git correctly installed. Use the GitHub guide for Mac OSX. There are a few simple steps and you’ll have to do it only once.

Set up Git in OSX – GitHub help

Download GitHub for Mac

You can control your git repositories through the command line but I wanted to make the transition smooth, so I downloaded the GitHub client for Mac. I’ll use the client for the rest of the guide so I recommend you to install it.

Download GitHub for Mac

Once you have it installed, you’ll see nothing, assuming that you’ve just opened your account and you don’t have any repository yet.

GitHub for Mac

Now, we’ll create a repository in GitHub and connect it to a folder in your computer.

Create a repository

To create a new repo, go to your account page (click your name in the upper bar) and push the ‘New repository’ button.

Create new repository

In the next page, fill in the form with the desired name and description.

Enter the repository name and description

After that, you’ll see a page with several instructions. Skip the ‘Global setup’ section since you executed that two commands already while setting up Git in the first place. Go on with the ‘Next steps’ section. Open a terminal and make the directory where you want to place the local repo. These commands will have different parameters depending on your selected name and account.

Next steps for creating repo

After doing this, you’ll see the new repo with the empty README file in your GitHub account.

First commit done!

Now, we’ll take care of our local repo with the GitHub app. Open GitHub and go to ‘GitHub > Preferences’.

Open GitHub app > Preferences

Select ‘Repositories’ page and then click on ‘Scan For Repositories’.

Scan for repositories

Select the folder where you created the repository. It’ll be showed in a list. If is not selected, select it.

Select local repository

From now on, you’ll have this local repository available in the main window of the app.

Your local repository is now available through GitHub app.

Click on the arrow ont the right side of the repo box and you’ll access to the repo page, where you can watch its story, changes, branches and settings. Modify the README file in an editor and you’ll see how ‘Changes’ page reflects that. I’ve added a couple of lines to the file, as you can see in the right zone of the page.

Changes page

Now, as far as I’ve understood, if you want your changes to be reflected in the repository there are two steps to do. First, when you commit your code, your local repo will be updated. This is done using the ‘Commit Changes’ button. Next, if you want your changes to be published in the remote repo, i.e. the GitHub repo, you can sync that commit or simply push it. Sync will bring in changes from the remote and push any pending commits. This is the option that GitHub recommends in its help.

You can see your unsynced commits in this same page. When you’re ready, push the ‘Sync’ button and your code will be updated in the remote repo.

Syncing repo

That’s all, folks! Now you have your project in GitHub, synchronized with your local folder. You can begin to add your source code as any new file will appear in the ‘Changes’ page.

Using GitHub for your Xcode projects

If you plan to use your repo to host a Xcode project, the first thing recommended is to create a .gitignore file. It’ll avoid to push unneccesary files. After searching for the right ignored files in the internet, I found the one in CodeDifferent the most complete one. Kudos to Christian for writing this file. I reproduce it here.

You can write the .gitignore file directly in the GitHub app. Go to the repo settings page, paste the text into the ‘Ignored files’ box and save changes.

Ignored files

Now you’re ready to create a new Xcode project. Proceed as always, but make sure that you create the project in the folder where you have set the local git repository and don’t check the ‘Create local git repository’ option.

As you add files to your project, they’ll appear in the ‘Changes’ page.

But wait… why don’t you use the local git repo option in Xcode?

That was my first option. I thought it’d be a walk in the park but I failed several times to get my local git repo made by Xcode correctly synched with GitHub. I didn’t find an easy way in the internet so I did the steps in this guide instead. When I’ll get used to Git I’ll try again and post another guide to use the Xcode way. If you have the solution, feel free to post it in the comments section.

Local Git option in Xcode

Have a nice commit!

Hello world!

admin — Mon, 09 Jan 2012 17:02:52 +0000

Welcome to my blog!

Who am I?

My name is Ivan Malagon. I’m spanish, born in Zaragoza but living in Madrid. Software engineer by day, Hip-Hop musician at night. Well, not everynight, but I hear drums in my head all the time.

What am I aiming for with this blog?

I always find myself thinking about learning this, improving that, making apps… but in the end I do nothing at all. That time is over! As part of my new years’ resolutions I’ve decided to write this self-development journal, a way of forcing myself to make something in my spare time and show it to the world. I need witnesses to embarrass me if I make no progress.

The topics I want to cover here are mainly two: software development and music theory-to-practice.

Talking about software, I’m now certainly obsessed with XP good practices, mainly TDD and refactoring. My idea is to assign myself some light homework, resolve it and post the solution (or, at least, the main hits of the solution path).

I will focus on mobile development, both native iOS and HTML5/CSS3/Js combo. I have some experience in the former and little-to-none in the latter but I don’t want to miss the cross-platform train and HTML5/Js seems to be the champion in that area.

Talking about music, I’m the half of Grossomodo, a Hip-Hop group of emcees and producers. We’ve published a couple of records and produced lots of tracks for other people. You can see our work in www.grossomodo.org and in our versosperfectos profile. My nickname in the group is Hacheka, hence the name of this blog domain. Right now, I’m a bit retired of the public life but I continue making beats and learning music. I’d like to write the lessons of my piano’s teacher in this blog. His lessons are a bit messy and I need to write them down.

And last but not least, I’ll try my best to post always in english, although I find it a hell of a task. As someone with a technician background I read tons of articles in english but I only write from time to time so I need to improve that skill. If you see me throwing in the towel and writing in spanish, you can punch me (but gently, please).

So this is my public commitmment. Let’s go!

Featured image: Hello world wallpaper