Anyway, continuing its idiocy, I received an email from them today stating my iCloud online acct was almost full. Only, I’ve overlaid it with the system information my computer shows (which is correct, btw).

No comments.

(click on image for larger size)

Image tribute designed by Jonathan Mark

Even if you never met the man, if his visionary products helped your child to read and write at an early age, let grandparents see their grandchildren across thousands of miles without having to crowd around a computer, led the transformation of the mobile and music industry that pays your salary today, made product companies rethink their priorities towards customers, and most importantly made many of us want to make even a fraction of a dent he has made to this industry and shape our careers accordingly, its not surprising that on his passing you’d think you knew him very well and to ask yourself ‘What do you want to do before you go’?

I recently purchased a 4 disk-bay Netgear ReadyNAS NV+ box. This was a few days after I lost 60% of my media collection because my HD just decided to stop working. And yes, I’ve been meaning to back up the archive, but never got around it, till it died. Hindsight is 20-20, I guess.

Anyhow, the ReadyNAS NV+ is a great box. The nicest thing about it is that via plugins, you can convert it into a full fledged development box running linux. One of the things lacking was how to make this box a VPN server as well. I currently have OpenVPN running on an ‘always on’ home laptop, but it was better if I moved the VPN server to the ReadyNAS box as it is the one that is supposed to be ‘always on’ anyway.

I searched around. There are several sites that give only partial instructions of how to get things working. No one site has ‘everything you need’. So I thought I’d post *exactly* how to do everything you need to get this working.

Step 1: Install SSH and apt-get

1) Download the Enable RootSSH plugin from here. (You need this to ssh into readynas)

2) Install it in the ReadyNas via the menu (System/Update/Local Update)

3) Download the apt plugin from here. (you need this to download the openvpn package and dependencies)

4) Install it in the ReadyNas via the menu (System/Update/Local Update)

Note: Don’t try and upload both plugin images together and then apply. Only the latest plugin will be applied.

Step 2: Getting OpenVPN working: The layout

Before we setup OpenVPN, lets discuss the network first. You may need to change the client.conf or server.conf as fit.

My home LAN has the following network: 192.168.1.x

The ReadyNAS server (which will be my VPN server soon) runs on: 192.168.1.10

The home router (Which allocates DHCP addresses to my home LAN and is the default internet gateway) runs on: 192.168.1.1

What I want:

a) I want to be able to connect to my ReadyNAS VPN server from outside my home

b) I want to make sure all my internet connections are not forced through my home LAN when connected via VPN.

c) I want my remote client to be able to access all my other machines @ home in addition to the VPN server

Step 3: Getting OpenVPN Server working: The execution

We need to do the following steps:

1) Generate the right certificates/keys for the server and client (easy)

2) Configure the server.conf and client.conf files correctly (logical if you follow the instructions)

3) Enable IP forwarding in your ReadyNas (if you don’t do this, you will not be able to access other machines on LAN)

4) Configure your default home router with a static route (if you don’t do this, you will not be able to access other machines on the LAN)

Step 3.1: Install openVPN

Pre-requisite: You have SSH and apt-get installed and enabled in the ReadyNas.

First, connect to your readynas via SSH (password is same as your readyNas admin password)

ssh -l root 192.168.1.10

Once logged in:

apt-get update
apt-get install openvpn

(the above will download and install all dependencies)

[Note: If you upgrade the NAS Firmware after installing openvpn (like I did for it to support OSX Lion) you will need to re-install openvpn or you may find it segfaulting when a client attempts to connect]

Step 3.2: Create your certificates

(This is just the same instructions as this thread)

You need to set some key variables which will be used to generate the certificate. The content here is not critical – you can change it to what you need. Basically, edit the vars file in your favorite editor and make the changes to the following variables in them. Make sure you save the changes.

cd /usr/share/doc/openvpn/examples/easy-rsa/
vi vars
export KEY_COUNTRY=US
export KEY_PROVINCE=Maryland
export KEY_CITY=MD
export KEY_ORG="Arjun"
export KEY_EMAIL="your@email.com"

Next up:

. ./vars
./clean-all
gunzip openssl.cnf.gz
./build-ca
./build-key-server MyVPNServer

Important: You will be asked a series of questions: The default values are filled in. I just entered my name in the Organization question as well. Also,when it asks you “Sign certificate?” please answer YES otherwise it will generate 0 byte certificates and OpenVPN won’t start.

Note: It is important you do “. ./vars” and not “./vars” as this will not export the variables to your current shell and you will get errors.

At this point, you have the certificate and key for the server instance. Now, you need to build the client keys


./build-key Client01


Finally, build the Diffe-helman code (this takes forever on the ReadyNAS. Take a meal break here).


./build-dh

Step 3.3: Copy the certificates and keys to the right location to your server

cp ./keys/ca.crt /etc/openvpn/
cp ./keys/ca.key /etc/openvpn/
cp ./keys/MyVPNServer.crt /etc/openvpn/
cp ./keys/MyVPNServer.key /etc/openvpn/
cp ./keys/dh1024.pem /etc/openvpn/

The next step is optional – but I prefer to do it and suggest you do too. Basically, you can create a new user/group with limited rights which will run the openvpn server. It’s not a good idea really to run the server as root, because one could exploit a vulnerability in it and get access to a root shell, which is not going to be pretty.


groupadd openvpn
useradd -d /dev/null -g openvpn -s /bin/false openvpn


Step 3.4: Set up the server.conf file


cd /etc/openvpn/
Now just create a server.conf file in your favorite text editor and use the contents below (after the sidebar) Please modify the IP addresses according to your local LAN and VPN IPs.

Sidebar: Tun vs Tap (in .conf files)

Note that I am using a “tun” virtual adapter and not “tap”. Simply put, it means I am establishing an IP level p2p link between my client and the VPN server.
On the other hand, if I used “tap”, then I’d be creating an ethernet bridge between the two. Specifically, in tun mode, any protocols that use broadcast packets to advertise themselves (example, netbios & AFP uses broadcast packets) will not work, as broadcast packets will not be shared from the VPN lan to my lan. Practically, what it means is that I will not see any of my home devices in my network “automatically” – I will need to connect with them over SMB. For example, when I use tap, the home devices automatically show up in my network list. While in tun mode, I need to “Connect to server” to get access to it. I chose to use tun because I believe it is better in performance – though I am not sure by how much. Actually, the real reason I chose tun was so that my Time Machine backup doesn’t auto start syncing gigabytes of data over VPN. Whichever you choose, make sure you use the same interface in the client side as well.

Also note that if you choose tun, Apple’s TimeMachine will stop working, as it uses broadcast packets to identify/locate itself. If you want TimeMachine to sync over the VPN, change tun back to tap in both client and server files. I like it this way, as for now, I don’t want my mac to sync over the VPN. Every time time machine syncs, it syncs many gigabytes of data (Gee I never knew OSX files change so much in an hour) which I did not want. I only want it to sync when I am @ home (ie no VPN on).

local 192.168.1.10 # real LAN IP address of my VPN server
port 1194 # This is the port OpenVPN is running on
proto udp # UDP tends to perform better than TCP for VPN
mssfix 1400 # Supposedly this fixes erros with RemoteDesktop over VPN. Never tried it
# note: these two pushs below don't work for non windows clients unless
# you write a script to parse for these pushes. See OpenVPN Howto.
push "dhcp-option DNS 8.8.8.8"  # I am using Google's DNS servers - I like them they are fast
push "dhcp-option DNS 8.8.4.4"  #
dev tun
ca /etc/openvpn/ca.crt
cert /etc/openvpn/MyVPNServer.crt
key /etc/openvpn/MyVPNServer.key
dh /etc/openvpn/dh1024.pem
server 10.8.0.0 255.255.255.0  # 10.8.0.0 is the VPN virtual LAN. The VPN server will get 10.8.0.1 and the remote clients will get the next ones
ifconfig-pool-persist ipp.txt    # don't worry about ipp.txt - it will be created
push "route 192.168.1.0 255.255.255.0"       # this route will be pushed to a client which connects
keepalive 10 120
cipher BF-CBC        # Blowfish (default) encryption
comp-lzo
max-clients 100 # Assign the maximum number of clients here
persist-key
persist-tun
status openvpn-status.log
verb 1

Now, launch the VPN server. I find it easier to run it in non-daemon mode first to make sure there are no errors. So,

openvpn --config server.conf

Make sure openvpn is working and it does not exit.

Great. Now get openVPN running in daemon mode
/etc/init.d/openvpn restart
Make sure it is running by checking ps:
ps aux | grep openvpn

All good? Great. Your server is ready.

Step 3.5: IP forwarding – Don’t forget

Whoops, we almost forgot. You need to enable IP forwarding in your ReadyNas.


vi /etc/sysctl.conf:

Add the following line: (if it exists, make sure ip_forward is 1 not 0)

net.ipv4.ip_forward = 1

This will make sure IP forwarding is permanent across reboots. To apply it to the current session without rebooting:
sysctl -p /etc/sysctl.conf

Double check by
cat /proc/sys/net/ipv4/ip_forward

If it says 1, good. You are ready to focus on the client. If not, go back and trace your steps and see what you might have missed.

Step 4: Getting OpenVPN client working: The execution

The main thing here is you need to copy the certificates and keys you created for the client to your remote client as well and set up its conf file. The files you need to copy from /etc/openvpn to your client are:
Client01.crt
Client01.csr
Client01.key
ca.crt

In my case, I have a MacOS remote client. I use the excellent tunnel brick app (free) to connect. In the case of TunnelBrick, all the configuration files are stored in the path
~/Library/Application Support/Tunnelblick/Configurations so I just copied the above files here.

(Note: these Client01.crt, csr, key files can be found in /usr/share/doc/openvpn/examples/easy-rsa/keys directory where you created them as part of Step 3.2 – thanks Martyn)

Now all that remains is to set up a client configuration that can connect to the VPN server.

Here is my client.conf file (you can call it whatever-you-want.conf)

client
proto udp
dev tun
remote AA.BB.CC.DD 1194 # Replace AA.BB.CC.DD with the public IP of your VPN server (if you don't have one, this will be the public IP of your home router and port forward from your home router to the VPN server. The latter is my case)
resolv-retry infinite
nobind
persist-key
persist-tun
ca ca.crt
cert Client01.crt
key Client01.key
ns-cert-type server
cipher BF-CBC
comp-lzo
verb 3

Step 5: Configuring your home router
This last step can be forgotten very easily. If you don’t do this, things won’t work.

We need to do 2 things:
a) If your VPN server is not on a public IP, you need to use the public IP of your router and port forward all traffic to port 1194 to the router to the VPN server.
b) Set up a static route to make sure remote clients can reach other LAN terminals once connected via VPN.

For a) there is a better way – I use dyndns.org to assign a permanent hostname for my router. This is better than IP as if the wan IP of the router changes, the hostname in dyndns is automatically updated. Most routers allow you to specify a dyndns acct and it can automatically keep dyndns updated. Dyndns is free and this is very useful. Google around on how to do this, or, to start just use wan IP of the router in the client code. In my case, “AA.BB.CC.DD” in the conf file above reads “myhostname.dyndns.org”

Next, add the port forwarding:
a) Open the Port fowarding entry in your home router, and add a new rule (call it “openvpn”)
b) Start port:1194, end port: 1194, protocol:UDP
c) Server IP address: 192.168.1.10 (in my case, change to LAN IP of your VPN server)

What we did here is made sure that if the router receives any connections/traffic to port 1194 of its WAN IP, it will forward it internally to the VPN server (your readynas box). That takes care of the VPN server not having a public IP.

Next up, add a static route to your router: (Change IP addresses to match your setup)
Click on the static route option of your router and create a new route:
route name: name it whatever – I called it vpnroute
Destination IP address: 10.8.0.0 (This is the virtual LAN that the VPN server will create)
Netmask: 255.255.255.0
Gateway: 192.168.1.1 (This is my default LAN gateway)

And save.

(Note: I am not sure if you need the above step if you use tap because it is supposed to be an ethernet bridge. You can experiment by not doing this while using tap to see if you can still access other machines)

Step 6: Test
Now try and connect to your VPN server from a remote client.
Works? great, check a few things:

At the client type:
ifconfig

If you are using tun (ip p2p link), you will see something like this:

tun0: flags=8851 mtu 1500
inet 10.8.0.6 --> 10.8.0.5 netmask 0xffffffff
open (pid 2205)

Or, if using tap (ethernet bridge):

tap0: flags=8843 mtu 1500
ether x:x:x:x:x:x
inet 10.8.0.2 netmask 0xffffff00 broadcast 10.8.0.255
open (pid 3146)


Note the difference. In tap, your virtual interface works at layer 2 and creates a virtual ethernet mac address. While in tun mode, a routing path is established at the IP layer.

In both cases, it is telling you a virtual interface has been created with a 10.8.0.x address. (Remember I chose 10.8.0.0 as my VPN network range)
good.
Now ping the VPN server at its virtual LAN address:

arjun@~] ping 10.8.0.1
PING 10.8.0.1 (10.8.0.1): 56 data bytes
64 bytes from 10.8.0.1: icmp_seq=0 ttl=64 time=70.841 ms
64 bytes from 10.8.0.1: icmp_seq=1 ttl=64 time=48.327 ms

Great. Now ping the VPN server at its real LAN address (this won’t work if routes are not set up properly)

[arjun@~] ping 192.168.1.10
PING 192.168.1.10 (192.168.1.10): 56 data bytes
64 bytes from 192.168.1.10: icmp_seq=0 ttl=64 time=29.200 ms
64 bytes from 192.168.1.10: icmp_seq=1 ttl=64 time=46.460 ms


Finally, ping another machine on the LAN:

[arjun@~] ping 192.168.1.9
PING 192.168.1.9 (192.168.1.9): 56 data bytes
64 bytes from 192.168.1.9: icmp_seq=0 ttl=126 time=190.009 ms
64 bytes from 192.168.1.9: icmp_seq=1 ttl=126 time=30.312 ms


Great. All done.

Here is what we will be developing: Let’s assume you are planning a trip from Bethesda, MD to 90210, CA and you plan to drive (Yeah a road warrior!).  You can get the driving directions from many places, including Google. What you also want is, what “what is the weather along the route”. Not only that, you want it for the day you plan to drive (so maybe tomorrow, the day after, or the day after the day after…)

I often need this information. I don’t drive cross country, but I do drive and knowing the weather along the route and for the day I want to drive is very useful to me. I wish we had an app for that. Well, let’s not wish, let’s write one.

In the process, you will learn how to:

a) Use TBXML for XML parsing

b) Use Google Weather and Driving directions XML data

c) Use segmented controls

d) Use TableViews and custom cells

e) Write an app that brings all of this together

*** Credits: The fine folks at icodeblog started me off with this article. ***

First the customary screen shots:

First Screen: You enter your from and to and select which day you want the forecast for:

Second screen: We use a HUD to tell the user we are doing all the backend magic to get the route weather

Third screen: We display the results:

Now lets break up the design and code:

The following files will be explained:

• DrivingWeatherViewController.h/m: This is the main program. It is responsible for bringing up the first screen, accept user inputs and then invoke Google’s secret APIs to get driving directions and weather along the route. It subsequently invokes code in my next bullet point that displays all the retrieved data in a nice, friendly table.
• WeatherTable.h/m: This is responsible for displaying the parsed data in a TableView (The tableview controller is implemented in DrivingWeatherViewController)
• CustomCell.h/m: This is used by WeatherTable to display a custom table cell for each row (if you see the third screen image, you will notice we have 3 sub-rows of data in each TableView Cell along with an image on the right.
• WeatherDataClass.h/m: Just a data structure (wait, they are called Classes) that holds weather information for each location along the driving path. Used by DrivingWeatherViewController

I will not be explaining how to use the HUD. For that take a look at my other tutorial here.

Now let’s break up the code. Let’s target the main code first:

DrivingWeatherViewController.h

//
//  DrivingWeatherViewController.h
//  DrivingWeather
//
//  Created by Arjun on 10/29/10.
//  Copyright 2010 Hughes Systique Corp. All rights reserved.
//

#import <UIKit/UIKit.h>
#import "MBProgressHUD.h"
#import <MapKit/MapKit.h>

We are going to use a specific data-structure that is provided by MapKit.h called CLLocationCordinate2D. It is just a convenient structure to store a lat/long value.

@interface DrivingWeatherViewController : UIViewController <MBProgressHUDDelegate>
{

	IBOutlet UITextField *textFrom;
	IBOutlet UITextField *textTo;
	MBProgressHUD *HUD;
	NSString *escapedFrom;
	NSString *escapedTo;
	IBOutlet UIButton *goButton;
	IBOutlet UIButton *tableButton;
	IBOutlet UISegmentedControl *daySegment;
	int day;

}

@property (nonatomic, retain) UITextField *textFrom;
@property (nonatomic, retain) UITextField *textTo;
@property (nonatomic, retain) UIButton *goButton;
@property (nonatomic, retain) UIButton *tableButton;
@property (nonatomic, retain) UISegmentedControl *daySegment;

First, since we plan to use MBProgressHUD, we need to implement its Delegate methods. As I indicated earlier, see my tutorial on “WhoCalledMe” for more details on MBProgressHUD. Looking at the @interface part, textFrom and textTo are input textfields where the use will enter his source and destination locations. You can be pretty flexible, including adding approximations here. I noticed that the google API is very flexible to abstract input. It accepts all kinds of inputs and also guesses if it can’t figure out for sure. Fiddle around and test its limits. If the app crashes, then you know that’s an input Google barfed on :-)

The variable HUD contains the HUD activity indicator. escapedFrom and escapedTo are basically ‘sanitized’ versions of the input with properly escaped sequences for special characters. For example, “Bethesda MD” needs to become “Bethesda%20MD”. This is because we will be passing this as a URI parameter to google and it needs to be properly escaped to be able to do that.

goButton, is, well, when you hit the go Button :-p (sort of like explaining “i” in “for (i=0)”)

tableButton – well, as a matter of convenience, I’ve added a small button at the lower right that displays the last resolved weather condition along a given route. The logic there is that you may want to see it again, and re-computing it everytime is costly. So all you need to do is hit that button, we be show the previous table of weather along the route that was displayed. How thoughtful of me, wouldn’t you say?

Finally, daySegment (actually day) will contain the day for which you need the weather prediction for. If you notice, I’ve only allowed for 4 days look ahead. I don’t remember too well (its been a few months since I wrote this code, and I am positive my brain cells are dying due to which I have memory loss), but I think there may be a limit of how far ahead you can go with the hidden google HTTP API. Maybe I’ll remember this once I start explaining the .m file. Or maybe, I just really wanted to use a segmented control because it looked cute and doing more than more made no sense…

- (IBAction) goPressed: (id)sender;
- (IBAction) tableButtonPressed: (id) sender;
-(IBAction) textFieldDoneEditing:(id)sender;
-(IBAction) backgroundTapped: (id)sender;
- (void) getDrivingWeather;
- (void) displayError: (NSString *)ex;
-(IBAction) segmentedControlIndexChanged;
@end

The only explanation I need to put in here are:
a) getDrivingWeather – the main working function
b) displayError – just a convenience API to show a Alert message when a parsing error occurs

DrivingWeatherViewController.m

//
//  DrivingWeatherViewController.m
//  DrivingWeather
//
//  Created by Arjun on 10/29/10.
//  Copyright 2010 Hughes Systique Corp. All rights reserved.
//

#import "DrivingWeatherViewController.h"

#import "WeatherTable.h"
#import "DrivingWeatherAppDelegate.h"
#import "WeatherDataClass.h"
#import "MBProgressHUD.h"
#import "TBXML.h"

@implementation DrivingWeatherViewController

@synthesize textFrom, textTo, goButton, tableButton, daySegment;

// MBProgressHUD calls this when the progress bar is over
- (void)hudWasHidden {
	// Remove HUD from screen when the HUD was hidded
	[HUD removeFromSuperview];
	[HUD release];
}

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
	// Set up better looking buttons that the plain white ones that we get by default
	UIImage *buttonImageNormal = [UIImage imageNamed:@"whiteButton.png"];
	UIImage *stretchableButtonImageNormal = [buttonImageNormal stretchableImageWithLeftCapWidth:12  topCapHeight:0];
	[goButton setBackgroundImage:stretchableButtonImageNormal forState:UIControlStateNormal];

	UIImage *buttonImagePressed = [UIImage imageNamed:@"blueButton.png"];
	UIImage *stretchableButtonImagePressed = [buttonImagePressed stretchableImageWithLeftCapWidth:12  topCapHeight:0];
	[goButton setBackgroundImage:stretchableButtonImagePressed forState:UIControlStateHighlighted];

	UIImage *tableButtonNormal = [UIImage imageNamed: @"notepad.png"];
	[tableButton setBackgroundImage:tableButtonNormal forState:UIControlStateNormal];

    [super viewDidLoad];

}

-(IBAction) segmentedControlIndexChanged
{
	day = self.daySegment.selectedSegmentIndex;
}

// Just a convenient function to display an alert box

- (void) displayError : (NSString *)ex
{
	UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Error" message:[NSString stringWithFormat:@"%@",ex]
												   delegate:self cancelButtonTitle:@"OK" otherButtonTitles: nil];
	[alert show];
	[alert release];
	return;
}

// This is invoked when the user presses the notepad button on lower right
// Its just a convenient way to re-show the same table that you just saw (incase you want to go back to it)
- (IBAction) tableButtonPressed: (id) sender
{
	WeatherTable *wt = [[WeatherTable alloc] initWithNibName:@"WeatherTable" bundle:[NSBundle mainBundle]];
	[self presentModalViewController:wt animated:YES];
	[wt release];
}

// This is invoked when user presses the Go button, which means we need to take the inputs in the text fields
// and process the driving weather parsing
- (IBAction) goPressed: (id)sender
{

	escapedFrom = [[textFrom.text stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding] retain];
	escapedTo = [[textTo.text stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding] retain];

	NSLog (@"From:%@ To:%@",escapedFrom, escapedTo);

	// Now lets show a progress dialog, since parsing all lat/long and geocoding takes time
	HUD = [[MBProgressHUD alloc] initWithWindow:[UIApplication sharedApplication].keyWindow];
	HUD.mode = MBProgressHUDModeDeterminate;

	// Add HUD to screen
	[self.view.window addSubview:HUD];

	// Regisete for HUD callbacks so we can remove it from the window at the right time
	HUD.delegate = self;

	HUD.labelText = @"Working...";

	// Show the HUD while the provided method executes in a new thread
	NSLog (@"Just before showWhileExecuting");
	[HUD showWhileExecuting:@selector(getDrivingWeather) onTarget:self withObject:nil animated:YES];

}

// This is the main function. goPressed calls this to actually start the entire XML GET/parse etc.
- (void) getDrivingWeather
{

	CLLocationCoordinate2D coord[200]; // This should really be an NSArray...
	NSLog (@"Inside getDrivingWeather");

	NSString *drivingURI= [[NSString alloc] initWithFormat:@"http://maps.googleapis.com/maps/api/directions/xml?origin=%@&destination=%@&sensor=false",escapedFrom,escapedTo] ;

	[escapedTo release];
	[escapedFrom release];

	float progress=0.0f;
	float progressincr=0.0f;

	HUD.labelText = @"Getting Directions";
	NSLog(@"Google Driving URI is %@",drivingURI);

drivingURI is the base URL string that we need to invoke for Google to return the XML response (explained below). So we are setting up here – we display a HUD saying we are working on it, and then plan to pass the from and to values to this URL and fetch the responses (explained later).

A Diversion: Let’s first understand the XML format returned by Google’s driving directions APIs

Let’s analyze the output of the following REST URL invocation:

http://maps.googleapis.com/maps/api/directions/xml?origin=20876&destination=21704@&sensor=false

Here is a fragment of the output:

The output is organized as so:
a) The entire directions is encapsulated in a<route>  tag
b) Each ‘via point’ is encapsulated in a  <leg> tag (in our app, there will only be one ‘leg’ of the journey – from start to finish. If you instead did A to B to C, then A-B would be one leg and B-C the other.
c) Next, each leg has many ‘steps’. Each step is one instruction (example, step 1: Take left on ‘Foo’. Step 2: Take right on ‘Moo’)
d) Inside each step, you have a lat/long for the starting and ending point.
e) There other tags, you can explore – easy to understand

What is our strategy:

1. Iterate through this list and get to the lat/long values
2. Next, pass the lat/longs to another google API to return weather conditions
3. Next, convert the lat/longs to city names  so it can be displayed (If you know someone who sees a dump of weather and lat/long and finds it useful, you know a massive nerd)
4. Next, eliminate repeated cities (for example, there may be 5 steps within a single city or zip code)
5. Display it all in a nice way, including the weather icon pictorially showing the prediction (part of the weather API output from google)

Okay, now that you understand the structure and our strategy, lets get into execution

	DrivingWeatherAppDelegate *appDelegate = (DrivingWeatherAppDelegate *)[[UIApplication sharedApplication] delegate];

	// Each time we call this API, we need to clear the past table. Easy way is to free it and re-alloc it
	// I suppose I really should be just deleting all rows..
	[appDelegate.drivingWeatherArray release];
	appDelegate.drivingWeatherArray = [[NSMutableArray alloc] init];

	// Get the XML document that returns full driving directions
	TBXML *directionsParser = [[TBXML alloc] initWithURL:[NSURL URLWithString:drivingURI]];

	[drivingURI release];

	if (directionsParser == nil)
	{
		[self displayError:@"Error getting driving directions. Try again, or check your input."];
		return;
	}

The appDelegate variable is just a convenient method for us to exchange data between different classes. It may not be a good design practice, but heck, good design requires intelligent thinking and I’m just slapping code together here. I don’t claim to be an intelligent thinker. Basically, drivingWeatherArray will contain the parsed weather conditions for the route and it will be shared between this class and the WeatherTable class.

So here, we initialize the array, and then use an excellent open source, fast XML parser for iOS called TBXML. We pass it the driving directions URL that was composed using the base URL and the user input. the TBXML initWithURL instantiates a TBXML object, fetches the data in that URL and returns it to the directionParser variable. We now need to walk the XML chain from here.

TBXML is super easy to use and its instructions are really really simple. If you can’t figure out how to use it from my code, go to their website and read about it.

	HUD.labelText = @"Parsing locations";

	TBXMLElement *routeLegStep = directionsParser.rootXMLElement;
	routeLegStep = [TBXML childElementNamed:@"route" parentElement:routeLegStep];
	routeLegStep = [TBXML childElementNamed:@"leg" parentElement:routeLegStep];
	routeLegStep = [TBXML childElementNamed:@"step" parentElement:routeLegStep];
	int cnt=0;

	while (routeLegStep)
	{
		TBXMLElement *start_location = [TBXML childElementNamed:@"start_location" parentElement:routeLegStep];
		TBXMLElement *lat_node = [TBXML childElementNamed:@"lat" parentElement:start_location];
		TBXMLElement *long_node = [TBXML childElementNamed:@"lng" parentElement:start_location];

		NSLog (@"TBXML GOT Lat:%@ Long:%@", [TBXML textForElement:lat_node], [TBXML textForElement:long_node]);
		coord[cnt].latitude=[[TBXML textForElement:lat_node] doubleValue];
		coord[cnt].longitude=[[TBXML textForElement:long_node] doubleValue];
		cnt++;

		TBXMLElement *end_location = [TBXML childElementNamed:@"end_location" parentElement:routeLegStep];
		lat_node = [TBXML childElementNamed:@"lat" parentElement:end_location];
		long_node = [TBXML childElementNamed:@"lng" parentElement:end_location];
		NSLog (@"TBXML GOT Lat:%@ Long:%@", [TBXML textForElement:lat_node], [TBXML textForElement:long_node]);

		coord[cnt].latitude=[[TBXML textForElement:lat_node] doubleValue];
		coord[cnt].longitude=[[TBXML textForElement:long_node] doubleValue];
		cnt++;

		routeLegStep =[TBXML nextSiblingNamed:@"step" searchFromElement:routeLegStep];

	}
	[directionsParser release];

Next up, now that we have a XML document with the entire driving directions, we need to navigate down to the “route” tag, then get to the “leg” tag within in and then iterate though each “step” tag within it. Note that I’ve taken shortcuts – I know for sure there will only be one “leg” tag, so I don’t bother looking for others. I just focus on the series of “step” tags inside the one “leg” tag. Once I have the starting pointer to the first “step”, I iterate till I reach the end. For each iteration, I get the ‘lat/long’ for the start location as well as the ‘lat/long’ for the end location. Obviously, there will be many lat/longs for one ‘city’ or ‘zip’ and we need to filter them out. We will do all that later.
For now, we use TBXML to quickly iterate through all the start/stop lat longs and stuff them into a “coord” array. That’s all we need from the directions XML response. A list of lat-longs along the driving route. Now let’s get to the google weather APIs to work the next part of the magic.

NSLog (@"TOTAL LATLONG %d", cnt);
NSLog (@"Now getting weather for each LATLONG");

// This is used to update the progress pie. Basically, for each "cnt" (i.e. total list of lat/long)
// we are doing two network operations (weather, geocode). So we increment progress accordigly so it reaches
// 1 after 2*cnt operations are completed. MBProgressHUD class considers 1 to be complete.
progressincr = 1.0f/(2.0f*cnt);

// For each lat/long, we need to call the google weather API
// and then also call google geocode API
for (int i=0; i< cnt; i++)
{

HUD.labelText=[NSString stringWithFormat:@"Getting Weather (%d of %d)",i+1,cnt];
NSString *myLatString=[NSString stringWithFormat:@"%f", coord[i].latitude];
NSString *myLongString=[NSString stringWithFormat:@"%f", coord[i].longitude];

myLatString = [myLatString stringByReplacingOccurrencesOfString:@"." withString:@""];
myLongString = [myLongString stringByReplacingOccurrencesOfString:@"." withString:@""];

NSString *weathercoord, *revgeocode;
weathercoord = [NSString stringWithFormat:@"http://www.google.com/ig/api?weather=,,,%@,%@", myLatString, myLongString];

NSLog(@"Google Weather URI:%@",weathercoord);

For each lat/long in our array, we need to pass that lat/long to the google weather API URL to get its weather. This is a time consuming operation, so we display a HUD. We also use a Pie-chart HUD display that MBProgressHUD offers so the user can visually see how much more of parsing is left (Just as one example, driving from MD to CA involves 84 different steps, which means we have to call the weather API 84 times, plus, reverseGeoCode API (coming up later) another 84 times to get city names.

So really, the pie chart doesn’t just look cool. It serves a purpose.

The variable weathercoord contains the google weather API URL along with the lat/long we need data for.

Also, the XML URL does not accept “decimal points” in the lat/long. All you need to do is remove it and it works fine (discovered by some blogger – I don’t have the reference now)

Diversion: Understanding the Weather XML data

Here is an example of the output for http://www.google.com/ig/api?weather=,,,39341250,-77366200

Lets understand first on how we need to parse it and then go to the code. It’s very simple. First there is a “current_conditions” tag that tells you what is the current temperature at that lat/long. Next, there are “forecast_conditions” tags that tell you what is the expected low and high for the next 4 days (Aha! so that explains why I only let you select upto 4 days ahead. My ailing memory came back). Simple! One more thing – it also gives you a link to an image that pictorially shows the weather condition too. Now that’s some jazz that would look good…

Okay back to the code:

TBXML *weatherParser = [[TBXML alloc] initWithURL:[NSURL URLWithString:weathercoord]];
if (weatherParser == nil)
{
NSLog(@"Error parsing Weather URL for lat:%f, long:%f",coord[i].latitude, coord[i].longitude);
continue;
}

progress += progressincr;
HUD.progress = progress;

WeatherDataClass *wdc;
wdc = [[WeatherDataClass alloc] init]; // just alloc wdc object. member functions will retain memory from NSString below

</span>
<pre>@try
{

wdc.longitude = [[NSString stringWithFormat:@"%f", coord[i].longitude] retain];
wdc.latitude = [[NSString stringWithFormat:@"%f", coord[i].latitude] retain];

TBXMLElement *myElement = weatherParser.rootXMLElement;
TBXMLElement *myChild;

myElement = [TBXML childElementNamed:@"weather"  parentElement:myElement];

// first check if there is a tag called problem_cause_data. If it is, there was an error in the XML

TBXMLElement *problemData = [TBXML childElementNamed:@"problem_cause_data" parentElement:myElement];

if (problemData) // yes it found it
{
NSLog(@"(Problem_cause reported) Error parsing Weather URL for lat:%f, long:%f",coord[i].latitude, coord[i].longitude);
continue;

}

Like before, we use the trusty TBXML class to walk though the XML API we explained before. A minor nit – before you parse, look for a tag called “problem_cause_data” – if it is part of the XML, parsing failed. So before we burn and crash, check it first. If it was returned, something got foo bar’d.

// if it comes here, I think the XML should have everything

// now check what is the value of day. If it is 0, then look at current_conditions
// else iterate forecast_conditions

// Now get the date as well
NSString *forecast_day=@"Unknown";
if (day==0)
{
myElement = [TBXML childElementNamed:@"current_conditions"  parentElement:myElement];
//[forecast_day release];
forecast_day=@"Today";
//forecast_day=[[NSString alloc] initWthString:@"Today"];
NSLog(@"Today");
}
else
{
myElement = [TBXML childElementNamed:@"forecast_conditions"  parentElement:myElement];
NSLog(@"Next Day");
for (int i=0; i<day-1; i++)

{
NSLog(@"Next Day");
if (myElement) {myElement =[TBXML nextSiblingNamed:@"forecast_conditions" searchFromElement:myElement];}

}
if (i==0)
{
TBXMLElement *mDayOfWeek = [TBXML childElementNamed:@"day_of_week" parentElement:myElement];
if (mDayOfWeek)
{
//[forecast_day release];
forecast_day = [[TBXML valueOfAttributeNamed:@"data" forElement:mDayOfWeek] retain];
}
} // i==0
} //else

Now we need to figure out which weather data is of interest to us. That depends on what day the user selected in the segmented control (day variable). If the user selected “Today” then we need to parse the “current_conditions” tag. If not, then we need to walk through the “forecast_conditions” tags, once for each day ahead chosen.

if (i==0)
{
[appDelegate.drivingWeatherArray addObject:[NSString stringWithFormat:@"Weather Forecast is for %@", forecast_day]];
}
//[forecast_day release];

myChild = [TBXML childElementNamed:@"condition"  parentElement:myElement];
if (myChild) {wdc.condition = [[TBXML valueOfAttributeNamed:@"data" forElement:myChild] retain];}
NSLog(@"TBXML GOT condition:%@",wdc.condition);

myChild = [TBXML childElementNamed:@"temp_f"  parentElement:myElement];
if (myChild) {wdc.curtemp = [[TBXML valueOfAttributeNamed:@"data" forElement:myChild] retain];}
NSLog(@"TBXML GOT curtemp:%@",wdc.curtemp);

myChild = [TBXML childElementNamed:@"low"  parentElement:myElement];
if (myChild) {wdc.lowtemp = [[TBXML valueOfAttributeNamed:@"data" forElement:myChild] retain];}
NSLog(@"TBXML GOT lowtemp:%@",wdc.lowtemp);

myChild = [TBXML childElementNamed:@"high"  parentElement:myElement];
if (myChild) {wdc.hitemp = [[TBXML valueOfAttributeNamed:@"data" forElement:myChild] retain];}
NSLog(@"TBXML GOT hitemp:%@",wdc.hitemp);

myChild = [TBXML childElementNamed:@"icon"  parentElement:myElement];
if (myChild) {wdc.url = [[NSString stringWithFormat:@"http://www.google.com%@", [TBXML valueOfAttributeNamed:@"data" forElement:myChild]]retain]   ;}
NSLog(@"TBXML GOT url:%@",wdc.url);
}
@catch (NSException *ex)
{
[self displayError:@"Error parsing Weather. Try again or check input"];
NSLog(@"Error:%@",ex);
return;
}

Right, so the code above walks through the XML and picks up the current temperature ( if current day is chosen), or, the forecast high and low for a forecast day. We also pick up the image URL (its in the “icon” tag in the XML output). All of this goes into a data structure (wdc) for use later.

revgeocode = [NSString stringWithFormat:@"http://maps.google.com/maps/api/geocode/xml?latlng=%f,%f&sensor=true", coord[i].latitude, coord[i].longitude];
NSLog (@"GOOGLE GEOCODE URI:%@",revgeocode);

Finished! Now lets populate the table! Oh wait. One more thing. Our last operation is to convert all the lat/longs to cities and zipcodes, and then filter our repeating zip codes (I could have chosen to remove repeating cities, but my assumption is if zip changes, it may be far enough for weather to change). So here, we use the google geocode API, pass it a lat long and hope to get some human understandable city/zip in return

For this one, I am not going to explain the XML output in detail. It is a little voluminous. Take a look at the output for

http://maps.google.com/maps/api/geocode/xml?latlng=39.341250,-77.366200&sensor=true

as an example. Suffice to say, what we are looking for is the “postal_code” tag with a “formatted_address” tag inside it. Thats the value we want to display. So the next piece of code walks this chain and looks for it.

TBXML *geocodeParser;
@try
{
geocodeParser = [[TBXML alloc] initWithURL:[NSURL URLWithString:revgeocode]];

if (!geocodeParser) { [self displayError:@"Failed to get Google GeoCode XML!"]; [wdc release]; continue; }

TBXMLElement * rootXMLElement = geocodeParser.rootXMLElement;
if (!rootXMLElement) { NSLog(@"Error:Failed to get Root of Google GeoCode XML!"); [geocodeParser release];[wdc release]; continue; }

TBXMLElement *resultElement = [TBXML childElementNamed:@"result"  parentElement:rootXMLElement];
if (!resultElement) { NSLog(@"Error:Failed to get result tag. Continuing."); [geocodeParser release]; [wdc release];continue; }

TBXMLElement *typeElement = [TBXML childElementNamed:@"type" parentElement:resultElement];
if (!typeElement) { NSLog(@"Error:Failed to get type tag"); [geocodeParser release]; [wdc release]; continue; }

NSString *type_text = [TBXML textForElement:typeElement];
if (!type_text) { NSLog(@"Error:Failed to get text of type tag (odd)"); [geocodeParser release]; [wdc release]; continue; }

while (  (resultElement) &&  ( !([type_text isEqualToString:@"postal_code"]) ) )
{
resultElement = [TBXML nextSiblingNamed:@"result" searchFromElement:resultElement];
if (resultElement)
{
typeElement = [TBXML childElementNamed:@"type" parentElement:resultElement];
type_text = [TBXML textForElement:typeElement];
}
else
{
typeElement=nil;
type_text=nil;
}

NSLog(@"TYPE IS:%@",type_text);
}

if (resultElement) // you got to the area which has address
{
TBXMLElement *address=[TBXML childElementNamed:@"formatted_address" parentElement:resultElement];
if (address) { wdc.city = [TBXML textForElement:address]; NSLog (@"GOT Geocode %@",wdc.city);}
}
progress += progressincr;
HUD.progress = progress;
[geocodeParser release];
}
@catch (NSException *ex)
{
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"TBXML Error" message:[NSString stringWithFormat:@"%@",ex]
delegate:self cancelButtonTitle:@"OK" otherButtonTitles: nil];
[alert show];
[alert release];
return;
}

Right, now we have the city and zip for that lat long.

/* Now, iterate through the weather array and and check if city was already added. We can't do it before because different lat/longs map
to the same cities. So we first need to get all the latlongs and then compare the resultant city returned by the google geocode api */

int match=0;

if (wdc.city)
{
NSLog(@"**********************************************************");
for (int ndx=1; ndx<[appDelegate.drivingWeatherArray count]; ndx++) // start at 1, as 0 has header info
{
WeatherDataClass *w = [appDelegate.drivingWeatherArray objectAtIndex:ndx];

if ([w.city isEqualToString:wdc.city])
{
match=1;
}

} // for array match
if (!match)
{
[appDelegate.drivingWeatherArray addObject:wdc];
}
[wdc release];
}
} // for

HUD.progress=1;

WeatherTable *wt = [[WeatherTable alloc] initWithNibName:@"WeatherTable" bundle:[NSBundle mainBundle]];
[self presentModalViewController:wt animated:YES];
[wt release];

}

What we now do here is check the drivingWeatherArray object to see if this city+zip is already part of our list. If it is, its a repeat, so just skip and don’t add, else add to the object array.

And finally, display all of that data in a nice TableView. Done!

// used to make keyboard disappear

-(IBAction) textFieldDoneEditing:(id)sender
{
[sender resignFirstResponder];
}

-(IBAction) backgroundTapped:(id)sender;
{
[textTo resignFirstResponder];
[textFrom resignFirstResponder];
}

/*
// Override to allow orientations other than the default portrait orientation.
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
// Return YES for supported orientations
return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
*/

- (void)didReceiveMemoryWarning {
// Releases the view if it doesn't have a superview.
NSLog (@"******MEMORY WARNING***********");
[super didReceiveMemoryWarning];

// Release any cached data, images, etc that aren't in use.
}

- (void)viewDidUnload {
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
}

- (void)dealloc {

[textFrom release];
[textTo release];
[escapedFrom release];
[escapedTo release];
[tableButton release];
[daySegment release];

[super dealloc];
}

@end

The “remaining tail” of the main code – usual iphone skeleton code.

WeatherTable.h

//
//  WeatherTable.h
//  DrivingWeather
//
//  Created by Arjun on 10/31/10.
//  Copyright 2010 Hughes Systique Corp. All rights reserved.
//

#import <UIKit/UIKit.h>
@interface WeatherTable : UIViewController <UITableViewDataSource, UITableViewDelegate>{
	IBOutlet UITableView *weatherTableView;
	IBOutlet UIButton *doneButton;

}

@property (nonatomic, retain) UITableView *weatherTableView;
@property (nonatomic, retain) UIButton *doneButton;

-(IBAction) done: (id) sender;

@end

Nothing much – a standard TableView implementation…

WeatherTable.m

This class displays the parsed weather along your driving route in a nice table

//
//  WeatherTable.m
//  DrivingWeather
//
//  Created by Arjun on 10/31/10.
//  Copyright 2010 Hughes Systique Corp. All rights reserved.
//

#import "WeatherTable.h"
#import "CustomCell.h"
#import "DrivingWeatherAppDelegate.h"
#import "WeatherDataClass.h"

@implementation WeatherTable

@synthesize weatherTableView;
@synthesize doneButton;

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
	DrivingWeatherAppDelegate *appDelegate = (DrivingWeatherAppDelegate *)[[UIApplication sharedApplication] delegate];
	return [appDelegate.drivingWeatherArray count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
	DrivingWeatherAppDelegate *appDelegate = (DrivingWeatherAppDelegate *)[[UIApplication sharedApplication] delegate];
	static NSString *CustomCellIdentifier=@"CustomCellIdentifier";
		NSUInteger row = [indexPath row];
CustomCell *cell;

We are using a pointer to the appDelegate class to share the driving list Array between the two classes as explained earlier.
Also, each row of the Table will be filled with a custom cell which will accomodate an image and two rows of data.

	/* First row is special - I display forecast day, copyrights etc, so handle differently */
	if (row==0)
	{
		cell=(CustomCell *) [tableView dequeueReusableCellWithIdentifier:@"HeaderCell"];
		if (cell==nil)
		{
			NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"CustomCell" owner:self options:nil];
			cell = [nib objectAtIndex:0];
		}

		cell.cityLabel.text = [appDelegate.drivingWeatherArray objectAtIndex:row];
		cell.forecastLabel.text=@"All data \u00A9 Google,inc.";
		//[cell.forecastLabel setFont:[UIFont fontWithName:@"Arial-BoldMT" size:18]];
		cell.imageView.image = [UIImage imageNamed:@"icon.png"];

	}
	else
	{

		cell=(CustomCell *) [tableView dequeueReusableCellWithIdentifier:CustomCellIdentifier];
		if (cell==nil)
		{
			NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"CustomCell" owner:self options:nil];
			cell = [nib objectAtIndex:0];
		}

If you look at my sample screenshot for the results screen, the first row is “special” – it displays a copyright message attributing the data to google and my app icon. So we need to ensure that we use a different identifier in “dequeueReusableCellWithIdentifier”. If we did not, then iphone will start sharing memory of that row with other rows. that will mess up formatting the moment you scroll around because it will overwrite formatting data of the header row with the other rows (since you told it that it can be reused if needed) – try it out. So we keep them separate.

		WeatherDataClass *wdc= [appDelegate.drivingWeatherArray objectAtIndex:row];
		NSString *weathertext;
		NSString *nowtext, *lowtext, *hitext;
		nowtext=@"";
		lowtext=@"";
		hitext=@"";

		/* When you get weather from google, it shows current temperature for "today" but no high and low
		   Similarly, if you ask for temperature for other days (+1 to +4 days from today), it shows high and low
		   but current does not make sense, as it is future. So here, I just present stuff I get while keeping the null
		   values from being displayed. \xC2\xB0 is hex for the degree symbol
		*/

		if (wdc.curtemp) { nowtext = [NSString stringWithFormat:@"Now:%@\xC2\xB0 F",wdc.curtemp];}
		if (wdc.lowtemp) { lowtext = [NSString stringWithFormat:@"Low:%@\xC2\xB0 F",wdc.lowtemp];}
		if (wdc.hitemp)  { hitext = [NSString stringWithFormat:@"High:%@\xC2\xB0 F",wdc.hitemp];}

		weathertext= [NSString stringWithFormat:@"%@ %@ %@",nowtext,lowtext,hitext];
		cell.cityLabel.text = wdc.city;
		cell.temperatureLabel.text = weathertext;
		cell.forecastLabel.text = wdc.condition;

		NSString* imageURL = wdc.url;
		NSLog(@"IMAGE URL:%@",wdc.url);
		NSData* imageData = [[NSData alloc]initWithContentsOfURL:[NSURL URLWithString:imageURL]];

		UIImage* image = [[UIImage alloc] initWithData:imageData];
		[cell.imageView setImage:image];
		[imageData release];
		[image release];
	}
	return cell;

}

Next up, we iterate through the drivingWeather Array and set the table cell fields to the right values. Loose explanation, but I think its pretty simple what is going on up here.

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
	UIImage *buttonImageNormal = [UIImage imageNamed:@"whiteButton.png"];
	UIImage *stretchableButtonImageNormal = [buttonImageNormal stretchableImageWithLeftCapWidth:12  topCapHeight:0];
	[doneButton setBackgroundImage:stretchableButtonImageNormal forState:UIControlStateNormal];

	UIImage *buttonImagePressed = [UIImage imageNamed:@"blueButton.png"];
	UIImage *stretchableButtonImagePressed = [buttonImagePressed stretchableImageWithLeftCapWidth:12  topCapHeight:0];
	[doneButton setBackgroundImage:stretchableButtonImagePressed forState:UIControlStateHighlighted];

    [super viewDidLoad];

}

-(IBAction) done:(id) sender {
	[self.parentViewController dismissModalViewControllerAnimated:YES];
}

- (void)didReceiveMemoryWarning {
    // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];

    // Release any cached data, images, etc that aren't in use.
}

- (void)viewDidUnload {
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
}

- (void)dealloc {
    [super dealloc];
}

@end

No explanation needed above -standard stuff.

CustomCell.h and .m

.h:

//
//  CustomCell.h
//
//
//  Created by Arjun on 9/29/10.
//  Copyright 2010 Hughes Systique Corp. All rights reserved.
//

#import <UIKit/UIKit.h>

// This defines how each cell of the table will look

@interface CustomCell : UITableViewCell {
	IBOutlet UILabel *cityLabel;
	IBOutlet UILabel *forecastLabel;
	IBOutlet UILabel *temperatureLabel;
	IBOutlet UIImageView *imageView;

}
@property (nonatomic, retain) UILabel *cityLabel;
@property (nonatomic, retain) UILabel *forecastLabel;
@property (nonatomic, retain) UILabel *temperatureLabel;
@property (nonatomic, retain) UIImageView *imageView;

@end

CustomCell is a XIB file I created in Interface Builder. It has a label to display the city, forecast, temperature and an imageview to show the weather icon.

.m:

//
//  CustomCell.m
//  ViewSwitcher
//
//  Created by Arjun on 9/29/10.
//  Copyright 2010 Hughes Systique Corp. All rights reserved.
//

#import "CustomCell.h"

@implementation CustomCell

@synthesize cityLabel;
@synthesize forecastLabel;
@synthesize temperatureLabel;
@synthesize imageView;

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    if ((self = [super initWithStyle:style reuseIdentifier:reuseIdentifier])) {
        // Initialization code
    }
    return self;
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {

    [super setSelected:selected animated:animated];

    // Configure the view for the selected state
}

- (void)dealloc {
	[cityLabel release];
	[forecastLabel release];
	[temperatureLabel release];
	[super dealloc];
}

@end

Download Project Source

Grab it from HERE. Hope it helps you.

Damn. So now I am left guessing who just called me. It happened so often, I finally decided to do something about it. Or, I decided to solve the damn problem.

So I had to learn how to:

1. Access the call log, so I could check my recent call list and select the number I wanted to check

2. Access my address book and search for that number (substring search)

Well, as it turns out, “1″ is impossible, unless the phone is jailbroken. There are no APIs to access call log. Well, not much harm done – you can always enter the number in the app.

So here is what I came up with: (I’ve blurred the numbers)

And now, an explanation of the code:

Note: I am just going to explain the main parts of the program, the “WhoCalledMeViewController” .m and .h files. The rest are standard stuff. You can download my sources and explore.

WhoCalledMeViewController.h

//
//  WhoCalledMeViewController.h
//  WhoCalledMe
//
//  Created by Arjun on 4/1/11.
//  Copyright 2011 Hughes Systique Corp. All rights reserved.
//

#import <UIKit/UIKit.h>
#import <AddressBook/AddressBook.h>
#import <AddressBookUI/AddressbookUI.h>
#import "MBProgressHUD.h"

A few notes here: You need to include the AddressBook headers as well as add the AddressBook framework to your project. I don’t really think you need the AddressBookUI framework as we are not using the address book contact picker UI here. You can try removing it. Finally, MBProgressHUD is a great 3rd party activity indicator that is really easy to use. All you need to do is drop MBProgressHUD.h/m into your project and use away.

@interface WhoCalledMeViewController : UIViewController <MBProgressHUDDelegate>  {

    IBOutlet UITextView  *listOfMatches;    // will contain all the names & phones that match
    IBOutlet UITextField *number;           // holds the number you enter
    NSMutableArray* _addressBookNames;      // holds a list of all the address book names
    NSMutableArray* _addressBookPhones;     // holds a list of all the phone #s (there is a 1:1 between _addressBookPhones and Names)
    MBProgressHUD *HUD;                     // used to display an activity indicator

}

@property (nonatomic, retain) UITextView *listOfMatches;
@property (nonatomic, retain) UITextField *number;
@property(nonatomic, retain)NSMutableArray *_addressBook;

- (IBAction) bkgrndClick:(id)sender;        // make sure keyboard disappears on tap
- (IBAction) findPhone:(id)sender;          // the function that searches your address book for the number
-(void)loadAddressBook;                     // called at the start to load the contact book into an array for faster search
-(IBAction)initHudAndAB;                    // loadAddressBook is called by this function, actually

@end

I think the comments in the header file are clear. the bkgrndClick function is a typical trick people use to make keyboards disappear when you tap on the screen. Basically it involves add a custom button equal to the size of the screen behind everything and then detect when the user taps it – when tapped, we will have the keyboard disappear.

One quick note: When you use MBProgressHUD, you need to implement some of its required methods in your file. The <MBProgressHUDDelegate> instruction tells iOS that this file will implement these methods.

Okay, now lets get into the implementation:

WhoCalledMeViewController.m

//
//  WhoCalledMeViewController.m
//  WhoCalledMe
//
//  Created by Arjun on 4/1/11.
//  Copyright 2011 Hughes Systique Corp. All rights reserved.
//

#import "WhoCalledMeViewController.h"

@implementation WhoCalledMeViewController

@synthesize number;
@synthesize listOfMatches;
@synthesize _addressBook;

// This takes care of the keypad disappearing if you tap outside of it
-(IBAction) bkgrndClick:(id) sender
{
	[number resignFirstResponder];
}

Gee. I just explained this. The ‘tap in the background to make the keyboard go away’ trick.

- (void)dealloc
{
    [super dealloc];
}

- (void)didReceiveMemoryWarning
{
    // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];

    // Release any cached data, images, etc that aren't in use.
}

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad
{
        [super viewDidLoad];
}

- (void)viewDidUnload
{
    [super viewDidUnload];
    [_addressBookPhones release];
    [_addressBookNames release];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

Standard callbacks. Just making sure we release the global arrays on exit, and we only support portrait mode.

// MBProgressHUD calls this when the progress bar is over
- (void)hudWasHidden {
	// Remove HUD from screen when the HUD was hidded
	[HUD removeFromSuperview];
	[HUD release];
}

MBProgressHUD has some mandatory callbacks. This one is called when the HUD activity completes. the HUD is removed from the view and deallocated.

// this is called when you press the address book button
// it is also called by initHudAndAB for the first time
// the goal of this function is to iterate through the address book
// and suck out ALL phone #s associated to a ALL names
-(void)loadAddressBook
{
    // remember this function will be called each time you refresh the address book
    // by pressing the address book button, so make sure you release before alloc again
    if ( _addressBookNames) { [_addressBookNames release]; }
    if ( _addressBookPhones) { [_addressBookPhones release]; }

    HUD.labelText = @"Loading Address Book...";
    ABAddressBookRef _addressBookRef = ABAddressBookCreate();
    NSArray* allPeople = (NSArray *)ABAddressBookCopyArrayOfAllPeople(_addressBookRef);
    _addressBookNames = [[NSMutableArray alloc] initWithCapacity:[allPeople count]];
    _addressBookPhones = [[NSMutableArray alloc] initWithCapacity:[allPeople count]];

    HUD.labelText=[NSString stringWithFormat:@"Loading %d records",[allPeople count]];

    // now iterate though all the records and suck out phone numbers
    for (id record in allPeople) {
        CFTypeRef phoneProperty = ABRecordCopyValue((ABRecordRef)record, kABPersonPhoneProperty);
        NSArray *phones = (NSArray *)ABMultiValueCopyArrayOfAllValues(phoneProperty);
        CFRelease(phoneProperty);
        for (NSString *phone in phones) {
            NSString* compositeName = (NSString *)ABRecordCopyCompositeName((ABRecordRef)record);

            //so, if a name has multiple phone numbers, we create duplicate records
            // of the name and each phone #

            [_addressBookNames addObject:compositeName];
            [_addressBookPhones addObject:phone];

            [compositeName release];

        }
        [phones release];
    }
    CFRelease(_addressBookRef);
    [allPeople release];
    allPeople = nil;

}

Okay, so what we do is that when the app first loads, we read the entire address book and copy it into two global arrays. The first one contains the names and the second contains the phone numbers. We ensure they both have the same # of entries. In other words, if ‘Bob’ has 3 numbers, we populate the Names array with 3 ‘Bobs’ each with a single number.
You need to use the ABxxx (AddressBook) APIs of iOS to read/manipulate the address book. Also,
kABPersonPhoneProperty is used to retrieve _all_ the phone numbers associated to an entry. Note that a single records can have many phone numbers. So first, we iterate the address book and get each records, and then iterate each record to retrieve the phone #s associated to it. As we get each phone#, we populate our global arrays appropriately.

// This is called when you press the address book icon. Basically, it shows and activity indicator
// and loads the address book in a separate thread. It calls loadAddressBook
-(IBAction)initHudAndAB
{
    // Now lets show a progress dialog
	HUD = [[MBProgressHUD alloc] initWithWindow:[UIApplication sharedApplication].keyWindow];
	HUD.mode = MBProgressHUDModeIndeterminate;

	// Add HUD to screen
	[self.view.window addSubview:HUD];

	// Regisete for HUD callbacks so we can remove it from the window at the right time
	HUD.delegate = self;

	HUD.labelText = @"Working...";

	// Show the HUD while the provided method executes in a new thread
	[HUD showWhileExecuting:@selector(loadAddressBook) onTarget:self withObject:nil animated:YES];

}

Note however that we don’t directly call loadAddressBook when the app starts. This is because we want to display a HUD while the contact book is loading (because it may take some time). MBProgressHUD requires that we display the indicator, and then launch the ‘time consuming operation’ in a separate thread. So instead, when the user starts the app, we call initHudAndAB, which basically displays a progressHUD and then launches a thread which calls loadAddressBook. Caution: Make sure you don’t do an UI updates directly in a background thread – you will face all sorts of data sync and mutex lock problems. Google around if you want to know more.

// This function is called when you press the phone icon. It searches the address book (actually, array that
// was preloaded) for any substring match of the phone number you entered

-(IBAction)findPhone:(id) sender
{
    NSString *foundNames=@"";
    listOfMatches.text = @"Searching for Matches...";

    int maxCount=0;
    for (int i=0; i<[_addressBookPhones count];i++)
    {

            NSString *item = [_addressBookPhones objectAtIndex:i];

            // nifty  trick to remove all other characters in a phone #
            // remember 3015271111 can be stored in many ways using +, (, ), . etc characters.
            // we want to eliminate all characters that are not digits and them compare

            NSCharacterSet* nonDigits = [[NSCharacterSet decimalDigitCharacterSet] invertedSet]; // all characters that are not digits
            NSString *strippedPhone = [[item componentsSeparatedByCharactersInSet: nonDigits] componentsJoinedByString: @""]; // take them off

            NSRange textRange = [strippedPhone rangeOfString:number.text]; // substring search

            if(textRange.location != NSNotFound) // means found
            {
                foundNames = [foundNames stringByAppendingString:@"\n"];
                foundNames = [NSString stringWithFormat:@"%@%@ :%@",foundNames, [_addressBookNames objectAtIndex:i], item];
                maxCount++;
            }

        if (maxCount >1000) { i = [_addressBookPhones count]; } // just take the first 1000 matches

    } //for
    listOfMatches.text = foundNames;

}
@end

Okay, and this function does the job of searching the address book for the number you entered in the text box. Basically, it iterates through the global phone list array that was populated when the app started and checks if the number entered occurs anywhere as a substring. This is a further detail to this: the iPhone can store numbers in various formats like +1 (240) 1112222 or 1 (240) (111) (22) 22 or 1.240.111.222 or whatever else. Obviously, if the user enters 1222 we want it to match these records. So to do that, we strip the phone # of all non digits using a cute NSCharacter operation and then compare.

Finally, I took another short cut – I just used a UITextView to display the results – it is very convenient because it allows us to have a scrollable list display of data. If you prefer, convert this to a TableView yourself. Its a little more work.

Get the Source

Download the project HERE