Browser Testing Mobile Applications

Posted on by
Reply

Warning: This article is targeted at OS X, not Windows.

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.

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.

Setting up JQuery Mobile and CodeIgniter (on Godaddy)

Posted on by
Reply

Playd8.mobi will be written using PHP, CodeIgniter, MySQL, and JQuery Mobile. I am hoping to compile it to iPhone and Android using PhoneGap, which was just acquired by Adobe.

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.

Getting Started with Playd8.mobi

Posted on by
Reply

I decided to begin work on a software application today. I have little time for things like this. Two kids under the age of five.  A director-level position at a web startup. The thing is that I love programming. So I am going to do this.

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!

iTunes