iPhone for the rest of us

iPhone is a nice platform to develop for. The appstore made possible to transform a hobby or a simple idea into a good income source, due to the popularity of iPhone and the low prices of the apps found here .
Bu what about the rest of coders that come from the pure web side of the programming ( like me ) - php, javascript, ror, etc ?
Below I’ll try to make a list with components you can use to develop for iPhone using only what you know, or learn only few things more.
Apps for iPhone are separated into 2 groups - native apps and webapps.

Native apps use their SDK and runs native on and from the phone, while webapps run inside safari, and are fetched from an external sever.

Frameworks

Here comes one type of projects , that managed to make a bridge between the 2 types of applications, using a native instance of webkit to render and use html/css/js files - from local space of the device and/or a remote server.

Usually the frameworks expose some native device functions -  camera, accelerometer, contacts,geolocation to javascript methods, so you can use it on your apps.

Big5apps -  it lets you access some features of the device using javascript -  like image, camera,sound,geolocation

Phonegap - is intended to be a cross-device platform, covering iphone,blackberry,android.

Liquidgear - seems to be a fork of phonegap, but oriented on the iphone only, so the development of this framework get another course, more specific for the iPhone device.

Quickconnect - allows you to use a template for dashcode or for xcode to develop for iphone using web technologies.

The above frameworks needs only the effort to learn a little of xcode usage.

JavaScript/CSS/HTML  Llibraries

WebKit for iPhone or other mobile devices is a little different -  for example touch events, or hardware accelerated css transforms. For this you need to develop your own functions/methods, or to adapt other scripts to to use this.

Or, you can use one of the below js scripts/frameworks.

XUI

A simple javascript framework for building mobile web applications.XUI strives to be a framework for first class mobile device browsers such as WebKit, Fennec and Opera with future support under consideration for IE Mobile and BlackBerry.

MagicFramework

Magic Framework is a native iPhone UI imitator and HTML5 db interface built in html/css/javascript. It’s useful for online websites or on-device Webkit-based applications looking to imitate the native iPhone UI and/or use native storage without having to write native code.

Dashcode

 Apple’s web toolkit

jQTouch

A jQuery plugin with native animations, auto list navigation, and default application styles for Mobile WebKit browsers like iPhone, G1, and Pre.

CiUI

CNET iPhone UI

Safire

Safire is an open source framework written in HTML/CSS/JS

It make’s building/porting applications to the iPhone ridiculously easy.

iWebKit

iWebKit is a file package designed to help you create your own iPhone and iPod Touch compatible website or webapp. The kit is accessible to anyone even people without any html knowledge and is simple to understand thanks to the included tutorials. In a couple of minutes you will have created a full and profes

iphone-universal

The framework is based on 1 stylesheet and several HTML examples, also, it contains original artwork so you can edit them in Adobe Photoshop CS and adapt it to your projects.

iUi 

Based on Joe Hewitt’s iPhone navigation work, iUI has the following features:

• Create Navigational Menus and iPhone interfaces from standard HTML
• Use or knowledge of JavaScript is not required to create basic iPhone pages
• Ability to handle phone orientation changes
• Provide a more “iPhone-like” experience to Web apps (on or off the iPhone)

Tools

Iphone Simulator

It comes with Apple’s SDK

Phonegap iphone emulator

To test apps built with phonegap

iPhoney 

iPhoney gives you a pixel-accurate web browsing environment—powered by Safari—that you can use when developing web sites for iPhone. It’s the perfect 320 by 480-pixel canvas for your iPhone development.

TestiPhone.com

This is a web browser based simulator for quickly testing your iPhone Applications. This tool has been so far tested and working using Internet Explorer 7, FireFox 2 and Safari 3 in Windows, but you ned Safari to get the real experience.

Safari 4

Well…no comment here

Ok, almost all the above tools needs a mac to be able to use. But  to develop for iPhone, you will need a mac anyway.

Have I missed something ? Let me know.

Textmate - check your JavaScript syntax

Following the previous post, we will see today how to check the syntax for JS.

In this case we will need a bundle wrote some time ago by Andrew Dupont here. (read the article , scroll down and download the bundle). 

Install the bundle.

In this moment you are almost good to go, as the bundle is set to run just as the previous PHP check syntax, when you save the file.

I say almost good to go, because there is an warning you get from ruby,  ”Insecure world writable dir”.
So open the Bundle Editor, find Javascript tools, click on the Quick Lint command and add a -W0 ( is a zero here ) after the ruby word, like this:

ruby -W0 “$TM_BUNDLE_SUPPORT/bin/quick_lint.rb”

Close the Bundle Editor.

This is how it looks in action:

That’s it.

Textmate - php syntax check

A nice “hidden” feature that Textmate has, is to check the syntax of the php files you are writing, and display a popup with the result.

How to do this?

Open Bundle Editor, search for the PHP bundle, scroll down until you find the Validate syntax command.

Edit the Save setting to Current File.

Now, depending on how you want, you can alter the Activation setting or not. I set it  the same as saving the file, so each time I save the file, it makes me the syntax check.

Close the Bundle Editor.

From now on, each time you save, a syntax check will be done, and a popup will show you the result

Like below:

That’s all.

Import your Gmail contacts into Os X AddressBook

If you need to import your Gmail contacts into the local Address Book, to be used by Mail for example , here are the simple steps you need to make.
Open safari and login to your Gmail account.
In the left side, under the mailboxes you have the menu Contacts. Click on it and it will open the contacts manager:

On the right side you have the Export link -  click on it

From the next screen choose what group you want to export, select vCard format, and click Export 

Safari will download the file, will open the Address Book application and ask you if you want to import the new contacts:

Click add, and you’re done.

That’s it.

Os X - close the dashbord - the nice way

Dashboard - nice eye candy tool, lot of widgets, from temperature stats to calculators, radios or whatever else.
Why would I want it closed? Well being on a G4 , I want it a little faster, and faster…( we all want it, don’t we? ), so I need to close some apps/services for this, and to be honest I use dashboard once a week, so is not a big loss.
There is dashboard widget that close the dashboard - irony - but keeps the F12 active which is a nice trick, and save you all the hassle with restarting the dock with dashboard in it.
I tried other solutions, but this seems for me a nice and handy one, and here it is:
StopDashboard -Widget

How to setup svn with remote working copy - my big question

Everybody know SVN and “everybody” is using it. No doubt SVN is one of the best things that happend in the last time. but for a web developer, svn can be a little frustrating - at least for me.
Let me explain:
I am on a mac, a G4 one,so I cannot afford a MAMP running on my local machine. On the other hand, I use to let clients see in real time the evolution of their projects ( is a pretty good selling advantage , by the way ) so that’s why I need a remote working copy. I want to have a version controlling system but with my working copy on this server, and of course, lazy how I am, without a terminal where to write lines for commit and so on. You get my point.
On the other hand, I like the way a ftp program “caches” my transactions so my editor does not freeze every time I hit ?+S.

How this can be done? How can i accomplish this?

I would like to hear a good and practical solutions for this.
The solution I found is a nice one( of course because is mine ), but is very very sloooooooooow.
I mount a ftp or sftp drive with the working folder on the server on my mac, and I declare here to be the working copy. So in this way, I have a remote live working environment, and a versioning control that helps to keep my work in one piece and forget about backups - well almost.
The only drawback is that the macfuse is very slow on mac so a commit or a simple update seems to take ages - but is a good excuse for a coffee, or another coffee, and another one…..

Do you have a better solution? I would really like to speedup the process, so please let me know your thoughts

Os X - how to create links to scripts for dock or desktop

As I promised in the previous post, I will show you how to add any script or program run normally from command line to dock or desktop and run as any other application.

For this we will use Platypus.

Platypus “can be used to create native, flawlessly integrated Mac OS X applications from interpreted scripts. Supports shell scripts, Perl, Python, PHP, Ruby, Expect, Tcl, AppleScript”.

We will use today the shell script to start the synergy application presented in the previous post

First of all we need to create a script file, to launch the synergy application

#!/bin/sh

/Applications/synergy/synergys -f –config /Applications/synergy/synergy.conf

Save this as “run_server” into the synergy folder and make it executable

If you did not downloaded yet platypus, do it and install it on your mac, then start it.

Complete the fields as necessary and choose another icon if you want to. An example of how to set the parameters are in the screenshot below

Hit create , save the new created tool into Application folder and you should be set
This is a very basic example, but you can explore more as platypus is pretty powerfool.

Let me know your thoughts.

synergy 2 - redirect your mouse and keyboard the easy way

If you are a web developer you are forced to run multiple operating systems, to check your code and design in as many browsers as possible. Well, the main problem is the IE as it always do strange things….

This can be done using a virtual machine, or multiple computers. The first case can be done using some software like VMware, VirtualBox os VirtualPC.

The second case is when you have more than one computers.

If you are like me, which i have a G4 Mac, and an HP, i think the second solution is better, as for G4 only VirtualPC works, and is in emulated mode, not virtualised, so is way too slow.

Ok, so I setup my G4 in my front, the HP in the left, mouses close, and let’s work. Well, after some time (short time) I managed to mix mouses, type on the HP keyboard wondering why my mac is not working, and so on…so is not good.

After a small search on the internet a found Synergy 2. “Synergy lets you easily share a single mouse and keyboard between multiple computers with different operating systems, each with its own display, without special hardware. It’s intended for users with multiple computers on their desk since each system uses its own monitor(s).”

It is cross-platform so it can run on Os X, windows and linux.

You have to setup a server on one computer, a client on the other, or others, and you will be able to use the main’s computer mouse and keyboard on the other one.

For Os X is a a little hard to do this as you have to configure a file, and run the software form the terminal. In a next post I’ll show how to bring this on your applications folder as any other app, being able to add it to dock or make a link to it on the desktop.

So, after I downloaded the software I put it in my application folder, I downloaded the software for windows on my HP and installed it.

the configuration file is pretty simple, the instructions on the site and on the sample config are very clear, the only thing that need to be said is that, in the config file , on the hostname for os x you have to add a “.local”, so something like “powerbook.local”

below is my config file:

section: screens
mobilegarth:
powerbook.local:
end

section: links
mobilegarth:
right = powerbook.local
powerbook.local:
left = mobilegarth
end

section: aliases

end

section: options
switchDelay = 350
end

mobilegarth is the HP.

after this you need to start the terminal, and run

/Applications/synergy/synergys –config synergy.conf -f

the “-f” will keep the application in front, so you can see what messages it returns.

All this being set, go to windows computer, start the synergy client, put the server name “powerbook” in this case and this should be all.

Moving the mouse on the left side of the screen will trigger the switch , and your mouse and keyboard will work on the other computer, until you come back on the right side this time, to your main computer.

As i said before, in one of the next posts, i will show you how to setup a “shortcut” to run this as any other normal application, without the need of terminal.

Let me know your thoughts.

Textmate tricks- open ftp files in tabs,keybindings changes and codebrowser

After searching through editors for Os X, that can go as close as possible to Quanta, my former editor in linux, before I switched to mac, and not founding anything close - or better said close to my habits - I finished choosing 3 editors - Coda, skEdit, and TextMate.

Coda is nice, but I miss auto-completion, as I was used with , skEdit does a really good job, but I miss a codebrowser panel , and again the auto-completion.

Well, now it comes TextMate.

I wanted for it a codebrowser - i need to see my functions, classes and variables - so i used this plugin TmCodeBrowser . Is not a real panel, but I moved it to the right side of the screen, set normal panel and visible on launch, resized the main window until it touch the edge of codebrowser, and seems ok.

What was very unpleasant for me, was that without a project, files were opening in individual windows. I like my desktop clear, so a file tabs solution would be nice. To fix this, in conjunction with using an external ftp manager - I use ForkLift - I had to create a project, and set to it the folder used by ForkLift to cache it’s files

~/Library/Caches/com.binarynights.ForkLift/

save the project, and take care to have it opened before opening a remote file.

Another thing was the autocomplete feature TextMate it has. I would like to have a classical dropdown, but i think this is the way it reach the speed it has in presenting a suggestion. For a >7000 lines source code, on my G4, other apps become slow, so I get used with this behaviour. What I did not get used with is that key Esc is binded to do operation. Is far, is small and almost always i was pressing the ` key. So I edited the

/Applications/TextMate.app/Contents/Resources/KeyBindings.dict - don’t forget to back-up -

and added this line -

“~ ” = “nextCompletion:”;

that means alt(option) key with spacebar will perform the completion.

I am sure lot of other tricks exist to make TextMate an easier and more pleasant companion for new users of mac, so if you know some, please share.

Thanks.

web development on OS X

There is some long time since i posted, but i had a very limited time in last month. Meanwhile I managed to buy myself a mac, I always wanted one. So now i’m in a little kind of dilema. What tools to use for webdeveloping ?

My area is PHP, Javascript - Mootools at most, xhtml,CSS, and some design.

So, for design part, I choosed CS2, for the server side I choosed MAMP - for windows users is almost the same with WAMP, it installs php,apache with a mouse click..(well, almost), for ftp I use ForkLift which is pretty close to Krusader, even with less, lot less features

But, the main problem for me remains the editor.

I come from linux world, where I spent a lot of time…so Quanta is what I really miss, with Krusader as file manager, and all the little add-ons like Kdiff for example, that allowed me to make some operations in a very easy and time productive way.

I have tried lot of editors

Textmate - all the people say it rocks, but i did not manage to find a code browser for it, or i did - some extention, but did not like’it. And autocomplete I had to press escape several times until i get what i need, instead of opening a dropdown near the cursor, too choose from. Maybe if any of you know how to do this, or knows a good “noob” tutorial for textmate, it will convince me.

I tried others like Smultron, Webscripter, KomodoEdit - which is pretty nice, but is too much resources eater - my mac is a g4, 1.33 -, Aptana, same problem as KomodoEdit,and some others i don’t remember right now

What i choosed are skEdit, and Coda, but i like skEdit more, as is less heavy for the system than Coda.

Maybe a more experimented mac user, can suggest a better setup, for people like me, who are trying to use a mac fr web development.

Thanks