After the blog post, I received messages and comments from people who were using the Virtual Machine image for every day development. Today I created a virtual machine for the same reasons. Those reasons are:

1. Ruby is hard to configure on Windows, and can be nasty elsewhere too.
2. My system stays nice and clean
3. I can create and destroy as many environments as I want
4. I can snapshot an image and go back to it quickly if I mess up along the way
5. It’s easy to organize VMs by what I am doing (NodeJS VM, Rails VM, Etc.)
6. There are VMs available online to make my life easier

Last year I used VirtualBox to do all of this work, but as an employee of VMWare, I am compelled to eat my own dog food. When it came time to browse the Guest VM website from the host I looked around for Fusion’s Port Forwarding settings, but came up empty handed. Did VirtualBox offer something that Fusion did not?

Maybe. But as I learned more about Fusion, I realized that I didn’t need to use Port Forwarding a year ago and I didn’t need to use it now. Both VirtualBox and Fusion use NAT, which means you just need the guest’s IP to browse from the host.

The only hitch in using NAT is that the guest IP address might change, so you can’t create a host name on the host and type “my-guest” in your browser. And so, let’s make the IP fixed. And let’s create that host name. Then we can use the Ubuntu image and be happy.

Here’s what you do:

Login it your guest.

Open a terminal

Display your routing table:

/sbin/route -n

You should see something like this…

mreider@ubuntu:~$ /sbin/route -n
Kernel IP routing table
Destination     Gateway         Genmask         Flags Metric Ref    Use Iface
192.168.114.0   0.0.0.0         255.255.255.0   U     1      0        0 eth0
0.0.0.0         192.168.114.2   0.0.0.0         UG    0      0        0 eth0

Edit your network interfaces:

sudo nano /etc/network/interfaces

Add the settings

Find the line iface eth0 inet dhcp and remove it (ctrl-k)

Create a static IP address. It has to be in the range of xxx.xxx.xxx.3 to xxx.xxx.xxx.127 – your current IP will not be in this range as it was assigned via DHCP, but use the same nine numbers (xxx.xxx.xxx)

iface eth0 inet static
address 192.168.114.3
netmask 255.255.255.0
network 192.168.114.0
broadcast 192.168.1.255
gateway 192.168.114.2

Restart your network

sudo /etc/init.d/networking restart

Assuming you have a web server running, you should now be able to open a browser from your host and view 192.168.114.3, which is your guest VM’s IP address.

Now let’s create an easy to remember name for the guest.

Open your local hosts file (this is for OSX – for Winblows go here)

sudo nano /etc/hosts

Add your IP and a host name to the bottom and save the file:

192.168.114.3   my-guest

It has been many months since I have written anything in this here blog. I have never been a very active blogger – maybe because I put pressure on myself to write something that is related to a project, or a piece of work, and it is rare that I have time to both see the project through AND write about it. Seeing it through is hard enough.

So I will make an attempt to write about little things, and not have such lofty goals.

As I begin building my mobile web application I would like to see how it looks on both Android and iPhone. To do this, I need to install both the Android SDK, and Xcode from Apple.

Installing the Android SDK to browse mobile websites.

• Head on over to http://developer.android.com/sdk/index.html and download the SDK for OS X
• Unzip the .zip file and put it in your home directory
• Change the directory name to android-sdk
• Open up Terminal

cd
nano .bash_profile

• The nano editor will open.
• Paste this into your editor

export PATH=${PATH}:~/android-sdk/tools
 

• Press control-x and enter to save the file
• Restart your terminal session with…

bash

• Then start the android SDK with…

android

• Once the Android SDK opens, click on Available packages
  
•  As of this post, there are a number of packages available, but I prefer some of the older ones as they load faster and still offer a contemporary browsing experience. I chose API 8, along with the Samples for API 8.
• Click Install Selected
• After the install is finished, click on Virtual Devices and then New
• Name your Virtual Device whatever you wish (I called mine Andy).
  
• Click Create AVD
• Click Start
• Your Virtual Device will boot up. Click on the Browser icon, and you can surf the internet Mobile style.
  

Using Dashcode to browse in Mobile Safari

The best way to test the mobile browsing experience for iPhone’s Safari is to use Dashcode, which comes as part of Xcode, available in the Desktop App.

• Open the App Store and install XCode. Warning: If you are on Lion there are issues with XCode as of fall 2011.
•  After installing XCode, go to Spotlight and search for Dashcode
• When Dashcode opens, choose a Browser template and uncheck the Safari checkbox – leaving only Mobile Safari checked
• Once the example template loads starts click Run
• The iPhone Simulator will open
• Once the example application loads, click in the address bar and enter whatever URL you wish!
  

Now that I can test the browsability of the web application on the only two platforms that matter (sorry RIM & Microsoft) – I can continue developing my application and keep Safari Mobile and the Android Browser within reach.

The first place I want to start is to create a semi-to-non-functional prototype in JQuery Mobile and CodeIgniter. I downloaded the latest version of CodeIgniter, and uploaded it to my pathetic GoDaddy hosting account, which is so inexpensive that I don’t mind going without root access.

To get CodeIgniter running on GoDaddy Deluxe:

• Per the CodeIgniter User Guide, modify the application/config/config.php file and set my base URL
• Modify the application/config/database.php and put in your MySQL database credentials
• Next, create a blank .htaccess file at the root directory of the CodeIgniter application.
• Do not use the CodeIgniter User Guide’s .htaccess example. Instead, use this…

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*) index.php?/$1

Next, I started to build my JQuery Mobile templates according to CodeIgniter’s Model-View-Controller design pattern. In the application/views directory I created a header and a footer. These will stay the same throughout my application.

application/views/header.php

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Playd8.mobi</title>
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css” />
<script src=”http://code.jquery.com/jquery-1.6.4.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js”></script>
</head>
<body>

application/views/footer.php

</body>
</html>

Next, I edited the welcome_message.php file and turned it into a JQuery Mobile page. I also added a link to a second JQuery Mobile page home.php for kicks.

application/views/welcome_message.php

<section id=”welcome” data-role=”page”>
<div data-role=”header”>
<h1>Welcome to Playd8.Mobi</h1>
</div><!– /header –>
<div data-role=”content”>
<p>We are psyched you are here!</p>
<p><a href=”/home/”>Go to the second page!</a></p>
</div><!– /content –>
<div data-role=”footer”>
<h4>&copy; Matt Reider 2011</h4>
</div><!– /footer –>
</section>

application/views/home.php

<section id=”home” data-role=”page”>
<header data-role=”header”>
<h1>Main Menu</h1>
</header>
<div class=”content” data-role=”content”>
<p>What’s up chicken butt?</p>
</div>
<div data-role=”footer”>
<h4>&copy; Matt Reider 2011</h4>
</div><!– /footer –>
</section>

Now we can edit the welcome and home controllers and test the application.

application/controllers/welcome.php

class Welcome extends CI_Controller {
public function index()
{
$this->load->view(‘header’);
$this->load->view(‘welcome_message’);
$this->load->view(‘footer’);
}
}

application/controllers/home.php

class Home extends CI_Controller {
public function index()
{
$this->load->view(‘header’);
$this->load->view(‘home’);
$this->load->view(‘footer’);
}
}

That’s that. Of course this is a really basic example of what can be done in JQuery Mobile.

The first page:

The second page:

I will be expanding on it as I get farther along on my little project.

The app will help me, and people like me. These are the best kinds of apps to build, and they have the greatest chance for success. As Vince Veneziani writes, “if you are not the target user of your web app, proceed with extreme caution.”  No need for extreme caution here. This is going to help parents at my preschool plan play dates with other kids at school.

I have also been watching apps appear that do this already. Right now there are four apps that do pretty much the same thing that I want to do, including one called “Play Dates” that didn’t come up in this search for some reason. Ya know what though? I don’t care. I want to build it anyhow.

I hope to blog about the application over the next few weeks. I have tried blogging before and I never seem to make it a priority, but maybe this will be the time. Away we go!