Category Archives: Websites

Day 3 geolocation

My aim today was to use my new locally hosted website to test geolocation.  Again, success, thanks largely to this excellent tutorial on using geolocation in HTML5. I even have a Google map appearing showing my current location – it’s all so easy!  But, I have yet to get my head around javascript (there are clearly functions, but I am told there are no local variables, which has put me off a little). It’s making a little more sense as I dive in and just use it.

Questions.

Native iPhone apps can access geolocation data in the background.  Can HTML5? Based on this stack overflow posting, I suspect not.

  

Phone gap on a locally hosted server

Mark and I worked together today, and the aim was to get the camera working in the app, using code on the server.

  • Putting the phone gap javascript libraries (cordova_1.6.0.js) on the server was no problem.  We created a file camera.js on the server too and included it using the <script … src=’camera.js’></script> construct. We also had to remove all javascript from the index.html file in Xcode – somehow the code on the server was calling those routines in preference to the same-named routines on the server.  The on-success routine was getting properly called at one point in the day but somehow this stopped working by the end of the day.  We also have yet to work out how to use the resulting image. Any ideas?
  • I learned that Chrome has a “javascript console” which comes in handy for debugging!  Does Safari have one?

We also decided to host a local version of the server on my Mac, to streamline testing.  It was getting a bit cumbersome to use Filezilla to transfer changes to the server code back to the server every time we wanted to test a bug.  This was pretty tricky to get working with phone gap, so here’s a summary of how we did it:

  • We downloaded MAMP (Macintosh, Apache, PHP and MySQL packaged together).
  • We then needed to transfer both the server web pages and the server database to my Mac, and then point the local copy of the web pages and the phone gap shell to the local host.
  • Go to the server’s phpMyAdmin and export the relevant database.  We found that gzipping it did not work, but zipping it did.
  • On the MAMP local host homepage (localhost:8888) there is a link to phpMyAdmin, where you can import the above file.
  • MAMP looks for the webpages at Applications/MAMP/htdocs by default.  We chose to put all our local copy of the server webpages there (though in retrospect I should probably have put them in a subdirectory), and then add a new project in Eclipse using existing files in that directory (though the workspace remains elsewhere).
  • Note that files that start with a dot, like .htaccess, do not display by default in the Finder, so when copying files around, they can get left behind. I needed to recopy .htaccess into the htdocs directory.
  • In our local webpages, we changed the mysql_connect statement to use localhost:8889, with user root and password root.  Obviously we will not put this change on the server.
  • To run this on a physical device (whether it’s a phone gap app or a regular objective-c app), we cannot refer to ‘localhost’ but the actual local IP address. We looked this up in the terminal (although it is also in the System Preferences -> Network, or you can search the Mac for Network Utilities – it is not the same as you find at whatismyip.com) and added it to the whitelist, and referred to it in the source code instead of racingtadpole.com.  To complicate matters, this address has changed for me over time.

Voila!  Dinner is ready, so I must end there.