andrew-bell.com - University Project Log

week 12

It feels like I have run a marathon, of work, coding, development and design, the whole way stretching my skills beyond their normal limits. When I first began to think of my major project proposal and talking about how I was going to use the twitter api along with the google maps api, to develop a mash up, I didn't have a clue how I was going to complete the task which I had set ahead of myself.
Looking back now I feel that there is more I could have added to the website, or if I had left enough time at the end, I could have tried developing a web app for the iPhone.

My aim throughout this project was for me to learn skills I didn't already know, and see how easy it would be to teach myself what it was I needed to learn.

I feel like I have achieved something great, and will be able to show this project to potential employers and feel good being able to say I designed and developed

This last week has really been spent putting the whole project together, merging the two halves of the mashup. I managed to create one single file to read the twitter feed, and find any matching key parts of the tweets.

http://a2b-c.com/project/regex_tweets.php

Then after using some mysql queries, insert statements, updates etc I was able to start writing this information to the database. This process was not without its problems.

As I mentioned towards the end of last week, I got more accurate results from Google Geocoding, if I got users to tweet their town followed by their postcode, for their a and b locations. So I felt that the easiest way to find their town details would be to setup another regular expression "filter".

I have tried to keep as much as possible within the realms of the normal English language for users to construct their tweets. The regular expression which I constructed is as follows

"/(from|to)\s\w*/"

This will match the words from or to, followed by a space character, and the next word. Example if someone tweets from Belfast BT12PT to Lisburn BT...then this regular expression will match the strings Belfast and Lisburn.

When constructing the final database, I began to encounter a few problems, mostly my fault from thinking that I could get away with a single table in the database. By adding all the data to the end of the table after storing the tweet and associated details this proved to be complicated when users updated their statuses. So I began experimenting with more tables and primary, foreign key joins, so that the functionality of the system would not be interrupted and that the data would not be stored in more than one place unnecessarily.
The final layout of the database is as follows.
All the important information is held within two tables,
the map_tweet table which only has data entered to it, if the string contains a postcode or other key information.
If it doesn't contain any of the above then the tweet is not stored.
If it does contain some of the data which can be matched using regular expressions then the tweet information is stored in the map_tweet table, and the user information is stored in the user_info table.
This means that the minimum amount of information has to be sent off to return coordinates for the markers to be effectively generated on the fly.

I really feel like I have come so far in developing this project from start to finish, often feeling like it was never going to be physically possible to find the solutions to the problems I was encountering on a weekly basis, and wondering was I ever going to see a working project.
In some ways it feels quite nerve wracking to think that the functionality of A2B-C.com is fully automatic, relying on a database, user input, cron jobs, Twitter and Google Maps to make up the key part of the website.
In my previous experience I have never launched a project where there has been so little amount of input and effort required from me once it is up and running, also this project is controlled dynamically by applications, partly beyond my control. But in a sense the only part which I still feel a bit less confident with is the Google Geocoding service, I have more "control" over the Twitter API where, all the necessary information needed to run the project is stored in a database.

It has been a great twenty four weeks for this semester, I have learned so much, and already have vague ideas floating around my head for more Twitter/Google Maps Mashups.


week 11

This week was heavy on the regular expressions, I began to figure out how to return the "matched parts" of the tested strings. Instead of just echoing "match" or "no match". The print_r statement in php seems to be the main way of returning matches found using regular expressions.
Below are some screen shots of code and the pages which are produced by the code.

The first few screen shots don't actually involve any regular expressions but just use php to manipulate the strings, which I found to be a useful exercise. PHP string manipulation is a very powerful tool, one which I have just scraped the surface of. A useful resource which I found on the w3c schools website is the complete list of php string functions

learning regular expressions for a2b-c.com
The first file finds the length of the input string, in this case a seven character postcode, and adds a space to the postcode after the 4th character. This I felt to be necessary because Google's geocoding, unpredictable as it is seems to "fall over" if there is no space in the postcode, or if the space is in the wrong place.
The php script which I have written seems to be able to add the space to the correct place, but removes the remaining characters from the string.

learning regular expressions for a2b-c.com
The next file shows something similar but echoes the remaining characters instead of the first four, a space and then the remaining three.

learning regular expressions for a2b-c.com
The next file uses the print_r array statement, str_split, implode and str_toupper to produce the postcode in the correct format.

learning regular expressions for a2b-c.com
The next file actually uses a regular expression to match a postcode from a string, then passes it through the rest of the script to "format" the postcode to a working "Google Postcode". The first few times looking at regular expressions, it seems to be quite daunting but after a while and becoming more familiar with the syntax and special characters, it is something I have learned to love, and can see so many practical uses for. Form validation would become so much easier with using regular expressions, and improving database security by avoiding mysql injections.

learning regular expressions for a2b-c.com
The next file uses a text box as an input so you can actually enter your own "tweet" and see which matches are found if any, just to make sure the system is working.

learning regular expressions for a2b-c.com
The last file in this set is used to match two postcodes and match a status, example if the user tweets Join from bt125pt to bt843pn then they should appear on the map with a red marker to signify the join status. Try using the input box and see which matches if any can be found.

This has been quite a learning curve, for me personally, php string functions and regular expressions combined, I feel like I could build almost anything.

I noticed that throughout the geocoding tutorial from Beginning Google Maps Applications, to geocode the address accurately using the google maps api, there were other variables passed to the CURL request along with the postcode data. Since the tutorial was based around Geocoding addresses, I had to try and think of how the results could become more accurate when being plotted to the map, and still keep within the 140 character limit. It clearly wasn't going to work if I asked the users to type in two addresses first from point A second to point B. This would easily have exceeded the 140 character limit. The next solution which I began to explore was a town name. I had tried hard coding the values of postcodes and town names instead of pulling the values from a database.
There didn't really appear to be a list of what would work and what wouldn't work anywhere online on forums or books that I could see. I had tried keeping the details as general as possible, like send a postcode, along with "Northern Ireland as a value", but this proved to be unreliable results, where all markers would be returned with the same latitude and longitude values, which I knew were wrong since one postcode was for Omagh and the other was Belfast.
The latest brain wave I had was if i sent the value as a postcode and another value of town or nearest town name. This I felt could actually get me places, and another step in the correct direction. I looked for a list of town names and associated postcode data, and found this page on wikipedia, which seems to be accurate. http://en.wikipedia.org/wiki/BT_postcode_area This proved to get me more accurate results, and cause less duplicate markers, where if the CURL request didn't return any accurate results it seemed to plot a marker in a "default location" between Magherafelt and Ballymena.


week 10

Over the "Easter Break" I began to delve further into Google Geocoding. After much experimentation and back to the basics of the Google API book, which has become my first point of reference in the past few weeks, I realised that the original UK postcode geocoding tutorial which I followed from Tom Anthony's website might have been a good solution, but my JavaScript and AJAX skills are not as great as his and many people's posting comments/questions on his website. I tried modifying the code to the point where a postcode would have been "echoed" from the database using php, into the variable which was originally passed from the text box to the "Google Function" which returned coordinates and a marker, but it would only ever plot the first postcode stored in the database even with using a while mysql_fetch_array loop. example can be seen here

Problems are solved easiest in smaller chunks, so I decided to try and break down the whole project and just work on one small part at a time, get that working then add to it, to strive towards the final goal. Aim for the stars and you might hit the moon.

Following the tutorial, which loads the latitude and longitude data from a .xml file, I created my own .xml file, with relevant information for Northern Ireland. Eventually by using AJAX to read the data from xml I was able to plot markers on the map. Click here to view my example which is reading the marker data from this file

Next step towards the goal was custom markers, to make it easier for the users to identify different states of the car sharing "tweple"
custom google map markers for www.a2b-c.com Google Map with custom markers

I decided to keep it simple once again and just adding two custom markers for the time being, just to make sure it worked. My logic being that if it works for one it will work for four

It seemed to take me ages before I could see any results, and progress to the actual customising of the Google Map.
I felt that once I had mastered the "art" of plotting markers from xml, the next step would be to generate the map dynamically. This would mean setting up an xml file with postcodes as attributes, then using CURL to send a request to the google geocoding service which is pretty much the same as finding somewhere on their main mapping page.
xml and curl requests for google maps twitter mashup http://a2b-c.com

I put together a "dummy tweets" xml file, to pass through the CURL php file to return the coordinates necessary for plotting the markers.
xml file
the result file (displayed clearer if you view source)

To me this seems like great progress, but I feel that it could be quicker, from the fact that the postcodes are stored in a database, then passed to an xml file, then passed to the google geocoding service, then returned as another xml file and read by the AJAX into the map file. All this happens in the blink of an eye but I feel that it would probably be better programming practice if I was to cut out the "middle man" xml file and just pass the postcodes directly from the database to the curl request.

All this seems great, but the big question that I was pondering over easter was,

How am I going to separate the postcodes and other keywords from the original tweet text?

I began looking into php string manipulation regular expressions and completing some simple tutorials.

For the first while regular expressions tutorials seemed to not go much further than php statements like if (preg_match('/regex_here/', $string)) { echo "Found a match";}else{echo "No match";}
learing regular expressions for project http://a2b-c.com
This was a good start, I was able to begin to understand the basic syntax and how it should be set out for it to work properly. But what I really need it to do is return the values which were found using the regular expression. I came across an interesting piece of software which works as a web application or a desktop version called RegExr regexr software
http://www.gskinner.com/RegExr/


week 09

This week, after having sorted the twitter "hole in the net" with the change of the CURL request. I began looking further into the Google Maps API, to try and plot markers from postcodes. It seems like a simple enough idea, and having read the relevant parts of Beginning Google Maps Applications with PHP and AJAX I felt that this shouldn't prove to be a big problem. The logic of plotting markers on a map (according to the book) is quite simple, store an address/postcode in an variable, send the variable to a Google encoding service, return an xml file with latitude and longitude details for plotting markers. An example of which can be viewed and tested here Geocoding tutorial for a2b-c.com The tutorial which I followed to achieve this was found on Tom Anthony's blog

I found this to be surprisingly simple, after having been warned from the book, forums, and various other places that geocoding a postcode within the UK was quite complicated with the fact that Royal Mail own the copyright to postcode/address/latitude longitude data.
Quote from Tom Anthony's blog http://www.tomanthony.co.uk/blog/geocoding-uk-postcodes-with-google-map-api/

Google Maps API provides a geocoding feature, for finding the latitude and longitude of places or addresses; but it does not work for UK postcodes. This is thanks to Royal Mail who have a copyright on the data, and are very restrictive with their (expensive) licenses for it.

It turns out that it is not so simple. The general principal is but the logic and AJAX/JavaScript seems to become more complex when trying to send postcodes from a database to "the Google cloud". It really is pretty clear to me that this isn't going to be so simple. Google Maps code relies fully on JavaScript and AJAX, and the database which I am working with will rely on PHP and MYSQL.

CLIENT SIDE (JavaScript/AJAX) and SERVER SIDE (PHP/MYSQL) do not mix directly with each other.

At this point it feels like it may have made more sense to use JSON to read the twitter stream, but I feel since I have a working solution to read the twitter stream using CURL, that I should stick to what I know, as deadline day is fast approaching.

This week (on the design front) I tried to think of something completely different for a logo. Since the project is based around cars, vehicles, traffic, I began thinking of all shapes vehicle/driving related, that would work well with the letters A2B-C. The interweaving roads seemed to work well at the size they are below in the blogs. But when they are scaled down to fit in the top left corner of the website or fit within the header, it doesn't look so clear. I feel that something bolder and heavier would stand out better in the scheme of things. After initial brainstorming, it appeared that most parts of a car which can be easily represented in an area of 100px square, are circular. Steering wheels, tyres, gear sticks etc.
mind map of logo ideas for www.a2b-c.com

Something still on the road theme I felt could work, would be parking spaces. Setting aside one character from the A2B-C for each parking space. This logo would be slightly longer horizontally and less square for a favicon. But as you can see from the screen shots below it seems to work quite well as a small or large logo. car parking logo
I feel that this logo would also work quite well as a smaller portion of the header section, and merge into a road which would make up the rest of the header.

I began playing about in Photoshop with some filter effects to try and create a road texture. To me, it makes sense, if a logo is made of parking spaces then the underlying image/background should be made up of a road/dark grey/tarmac colour. Below you can see the general progression to the finished header. web page header for http://www.a2b-c.com
The noise filter I feel, adds a slight depth of field to the image and makes it feel less like a "flat" image.
progression of web page header for http://www.a2b-c.comLike most good roads, double yellow lines are common place, I feel this also breaks up the bottom of the header rather than just stopping the road and starting the main website content.
web page header for http://www.a2b-c.comKeeping with the whole road and car travel theme, I feel that the best option for primary navigation would be sign posts. Once the header was completed, I felt that there was quite a large space in the bottom left corner. I began to think that the only thing that should fill that space would be a car. Since my artistic/illustrative skills are very much limited, I decided to try and go for a toy car look. I was very pleased with how it turned out in Illustrator, I used an aerial view photograph of a real car to get the right colours gradients for the windows, to make it look more realistic.
illusrated car for http://a2b-c.com finished header image for www.a2b-c.comThe finished header for a2b-c.com
I thought that a nice extra would be if the car could move, and used some jQuery to animate the containing div, to make it appear as if the car is driving in and "parking" below the logo. screen shot of code to animate the car on http://a2b-c.com
Above is the code which I used to drive the car. I feel with all the problems I have encountered with the geocoding of postcodes, I have realised that the project will not be fully functional for soft launch. But now I know what exactly needs to happen over easter.

  • Solve the Geocoding of UK postcode mystery
  • Learn how to manipulate strings with php to find key parts of tweets
  • Learn Regular Expressions

Week 08

I feel like I have really made progress this week, the fact that I have been able to overcome the problems, which I have encountered in the past few weeks, setting up cron jobs and resolving the mysql error caused by the apostrophe. The one major problem which I have been left with this week is the fact that the twitter api will only allow me to make 150 requests per hour. And as mentioned in last weeks plog, this would mean only refreshing the page every five minutes to write the latest tweet to the database.

I was trying to think more like a programmer and play with functions and loops which would make the CURL request pull the last 10 tweets from the timeline.

http://twitter.com/statuses/friends.xml

I picked ten being optimistic, on the general assumption that I would only get up to around ten tweets in the space of five minutes. This attempted solution resulted in the latest tweet being repeated on the page ten times. This whole learning curve seems to be getting steeper but I feel like I have come so far, I'm not going to potentially let some tweets fall through "the net".
front cover of Twitter API Book I returned to the Twitter API: Up and Running book, where I learned that the problem was caused by the url query that I was running.

http://twitter.com/statuses/friends.xml

was getting me the tweets from my friend's timeline.

By changing the $url request path to its maximum return http://twitter.com/statuses/friends.xml?count=20

This would mean that unless by some major usage, no tweets would fall through the net. This proved to be the solution, where the twenty latest tweets would be returned. example can be viewed here Latest 20 tweets

As the 25th March/Soft Launch for major project is fast approaching, I felt it would be a good idea to do some wire-framing, and settle on a final logo. I still really like the concept of the interweaving roads to make a junction from the A2B-C, I feel like any attempt I make at the interweaving roads just results in a messy and unclear brand. The fact that a logo should be clear at billboard size and clear at favicon size, leaves me with a bit of a problem.
I feel that the wire-frame I used to describe the layout of the website in my viva still would be suitable and keep the clean clear simple feel to the project. I found an interesting tool online for creating wireframes http://gomockingbird.com/mockingbirdmockingbird wireframes

The less number of pages in this website, will hopefully mean the less confusion there can be for users trying to navigate it. I have recently been reading Steve Krug's book for the COM601 module and it has proved to be very useful and really made me re-think how a website should be designed. I feel that visitors to my website should not have to wade through vast amounts of text just to find the information they were looking for. If they want to know how to use the application then they should be able to find this information in less than two clicks. Having three pages means that this should be very easy. I am also aiming to minimise the amount of scrolling, the user will have to do. The fold shouldn't be a road block to any user but if most of the important content is above the fold then there should be no confusion, or reluctance to return to the website.

wire frame for the how pageAbove is the basic layout that I am going to use for the how page. Same header and footer for each page, the three columns will contain the full instructions for how to use the project.


week 07

Late Thursday afternoon of last week I found a solution to the apostrophe related problem. This probably seems really basic to many php/mysql programmers, but as I mentioned in the major project presentation (viva) and throughout the project logs, this is a whole new area of learning for me. Below is a screen shot of the code which solved the apostrophe MySQL syntax error.

screen shot of code which solved the problem www.atob-c.com

Using the "mysql_real_escape_string()" is pretty much another way of adding backslashes before the syntax which causes an error.
In my case the error was being caused by the special ' character, adding a \ before the ' wouldn't have caused the error. But since I was not able to predict where the ' may appear (if at all) this was the only way round the problem.

Tweet/Database problems solved? YES

Unfortunately no, the tweets can be stored in the database when the page with the MySQL query is loaded into the browser. However when there is no one accessing that script, then the database remains untouched since the last time the page was refreshed. Now comes the fun part.

  • Twitter API rate limits = 150 per hour
  • Exceeding this limit = Blacklisted from Twitter

Having done the calculations, 150(API calls) /60 (mins) = 2.5 - this means the page can be 'refreshed' every 2.5 minutes and I shall not be blacklisted. However I don't really want to sit infront of my computer and click refresh every 2.5 minutes in order to keep my database up to date with the latest tweets. The answer introduced to me by Nicklas:

"CRON JOBS"

Cron Jobs allow users to schedule a task (run scripts) automatically at a certain time or date. My hosting is provided by www.GoDaddy.com

screen shot of cron jobs I have created for my project www.atob-c.com

Above you can see the cron jobs which I have created at custom intervals of every five minutes. Each job runs twice an hour (30 minute intervals) which means I can automatically store the tweets into the database every five minutes throughout the hour.

This automated task seems to make everything much less stressful. I was thinking I was going to have to come up with some sort of php script to repeat this task, but the hosting service does it for me. One thing that I am still slightly worried about is the fact that if multiple tweets appear within that five minute window (between the script being repeated) my script still only stores the most recent tweet.

Overall I am very happy with the progress I have made in the last week. Storing tweets into a database, reading the tweets from the database then displaying the tweets within a .php page. This page reads the last ten tweets which have been submitted to the database.

Logo development
I am still trying to balance the level of web programming with design and layout, so I spent most of Saturday on the logo. This week I am intending to get wire-framing in photoshop and get a final layout so I can start the markup process.

screen shot of logo development for www.atob-c.com screen shot of logo for www.atob-c.com screen shot of brand development for www.atob-c.com

First logo is just the basic shape which I will use to create the flowing roads/letters. Second logo is the road layout with perspective applied to make it appear more like a road flowing off into the distance and coming closer at various points. Third logo incorporates the number two and the minus sign, to try and encapsulate the full brand name. A2B-C

Back to the programming - I have written a php script which will read a string variable (tweet) and find keywords within, then depending on the keywords it will echo an appropriate statement.

screen shot of if else statement

I am hoping to use this same principal for displaying the appropriate markers on the Google Map depending on the users keywords within their tweet


week 06

Towards the end of last week I became slightly single track minded by the viva presentation and spent most of two days preparing that and not really looking much more at the practical side of the major project.
This week I am back on track and have developed the logo slightly further.

logo sketch for atob-c.com

I showed my logo idea of a flowing road to Gabriel and he said to develop it further. We then discussed how it might look within the header of the page. One continuous road which starts off screen, then flows into the header loops round a few corners/junctions then continues off screen again. (Rough idea sketched out above)
Below is a further development of the logo and how it might look in more detail. I feel that number two is a more accurate/clearer representation of the letters and provides further opportunity to have more inter-connecting roads flowing throughout the design of the website.

logo development for atob-c.com

Not forgetting about the development side of the project, I am currently addressing the issues which I discovered when writing and reading tweets to and from the MYSQL database.
I am hoping to find some assistance to the encountered problems in a book (by Paul DuBois) which was recommended to me by a friend who is into developing database-driven web sites.

MYSQL Developer's Library by Paul DuBois

Last week when I encountered the un-predictable error which appears as:

"You have an error in your SQL syntax: check the manual that corresponds to you MySQL server version for the right syntax to use near"

then it would begin to display the part of the tweet that caused the error. At first inspection (last week), I thought it was something to do with ending the tweet with a punctuation character. A closer look tells me that it is not to do with the end of the tweet, but if an apostrophe ' is used anywhere in the tweet the database does not like it, and refuses to store the tweet or associated information.


week 05

Over the last few weeks most of my learning seems to have been coming from the Google Maps API, following through tutorials up to the database stage of development. This week I began to look into using the Twitter API. Nicklas advised me to look into the basics of reading from a twitter stream using the CURL library. screen shot of CURL basics So I set myself the following tasks, each time progressing and building on what had gone before.

  • Read XML from twitter stream and write on html page using php
  • Read XML from twitter stream and write to a database
  • Read Tweets from the database

For the purposes of ease, I used MAMP to run the php and curl scripts, but have taken screen shots to document my varied progress.

screen shot of my friends timeline as an xml file

Above shows the xml file I was reading from via the http://twitter.com/statuses/friends_timeline.xml

screen shot of my friends timeline as an xml file

Screen shot of my friends timeline statuses and the information I am reading from it. I read the Status ID, which is the user's unique identification number (never changes), the status id which is a unique number assigned to the tweet, the url of the avatar/profile image (which I have placed within an image tag so it is easier to identify the person when they tweet. I have also chosen to read the user_name and the actual text from the tweet.

screen shot of my friends timeline as an xml file

I encountered some problems when loading the page that displays the tweet and selected information - if I refresh the page when there is no new tweet, it is duplicated as the next row in the MySQL database which I have setup.

screen shot of my friends timeline as an xml file

Something else which I have encountered is when the last character of the tweet is not a letter or a number then it seems to cause an error in the SQL syntax.

screen shot of my friends timeline as an xml file

Above you can see the structure of the first database which I encountered these problems with.

So far all my focus has remained on the coding and developing aspect of the project. As time is moving too swiftly on, I have been coming up with rough sketches for a logo, which I could hopefully use for the project, to produce awareness at this early stage.

The concept for this project is based around people being able to get from one place to the next with minimal hassle while travelling, my logo idea, uses a network structure of roads which create the letter shapes out of road junctions and bridges etc.

initial branding sketch for atob-c

The A is made from a road disappearing into the distance, the B is made from an "underpass" road junction and the C is made from an overlapping roundabout.


week 04

After speaking to Nicklas about some of the technical api details to my mash-up, there was so much more to think about from where I left off in week 02/03. I am actually quite looking forward to seeing how this whole project will turn out. In my week two "users guide" I had just made too many assumptions like it will be a regular commuter who will be using my system. But even if it was there were some things which hadn't struck me, such as what if they are away for a few days and not travelling their regular route. Following Nicklas' advice I came up with a language/list of terms which can be tweeted to provide various actions within the mashup.

Details.txt


week 03

This week I was looking at a tutorial, from .net magazine which uses Twitter and Google Maps APIs to display markers according to the location they have been tweeted from. The title of the tutorial is "Master the GeoLocation API". The final result of the tutorial is for users to visit the website, share their location and then view the "tweets near them" within a kilometer radius specified by the developer.

The reason I decided to work on this tutorial was because it would show me more of the Google Maps API and Twitter API. Although it goes above and beyond what I actually need it to do. My idea is to place tweets on the map dependent on where the users wish to travel from and to, and not the way this tutorial displays the tweets, dependent on where their current location is. Even this doesn't necessarily work. According to the tutorial, the user needs to enable Geotagging on their twitter account settings.

twitter account screen shot for geotagging

I'm not sure if I can really measure the success of completing this tutorial, since there are so many variables which seem to affect the tweets displaying on the map. In some ways I am glad I don't have to add GeoLocation to my mashup as the results seem unpredictable.

screen shot of the .net magazine Geo Tagging Tutorial

Google Maps Twitter GeoTagging
(For some reason the Google Map can be slow to load)


week 02

Having found last week’s con a major road block, which I had partly tried to avoid until later, when I actually had the application running then be able to see what was I was capable of doing and creating. Then I would have adjusted the user interaction wire frames around this once it was finished. I have now learned from my mistakes and know this is the wrong way to achieve anything. But the key word in the previous sentence is LEARNED. I know that the twitter and Google Maps APIs are both so flexible almost anything is achievable in the way of a mashup, I am hoping and praying that I can achieve the intended goals by the final deadline.

  1. User lands on the homepage
  2. Main point of focus is the map
  3. Navigation links can allow the user to find instructions
  4. The user updates their twitter status with @atob_c and two #tags first one is their starting location, second is where they want to get to.
  5. Two points appear on the map with their twitter profile picture and username If they see someone near their locations on the map then they use twitter to communicate the necessary travelling arrangements etc. An example of which might be:

Blue Megane YDZ 5430 Leaving for Belfast 9:00 work finishes at 5:30 meet in Tescos Craigavon? @reallyverylongtwittername @atob_c

This week's experimentation

This week I further developed last week's example of GeoCaching instead of just adding a speech bubble with input fields to the map when the user clicks, there was no code attached to the submit button.
This week's experiment writes the necessary data to an xml file. (Basic database).
Write Marker Details to XML
The reason I have said basic database in the previous sentence is because it can be assumed that when data is written to an xml file and read back again (in my case for markers to be placed on the map), the xml nodes can roughly be equated to fields in a database. Going on this assumption I tried then to add the marker and associated information to a MySQL database, which proved to be slightly more difficult. And is still a work in progress.


week 01

front cover of Twitter API Book

This week I began to dive into the deep end of Google Map Applications. During the break after semester one deadlines exams etc, I began some “light” reading.
Having used twitter for a while just as a front end user and not really considering how powerful the “backend” can be, I am now amazed to see how much can actually be done with the Twitter API. Throughout the book it provides useful snippets of code, and examples of how the API has been used in the past. Some examples are very simple but really well implemented. Twitter Vision is an application that tracks tweets from around the world. Which plots temporary points on the map of a tweet, the user’s name and their profile picture. The only conditions that determine whether your tweet will appear on the TwitterVision map are, you must have a public account, custom profile picture and location text that can be parsed. Parsed is a word, which I have had to become familiar with. In order for a marker (of any kind) to appear on a Google Map, the location data must be of the appropriate format to convert it from a word or name of a location eg. New York to coordinates which is the key part of any Google Map.
New York becomes Latitude: 40.71455 / Longitude: -74.007124
These details can then be used by Google Maps JavaScript/AJAX file to create a marker and place it on the map.

front cover of Twitter API Book

The Google Maps Book began quite simply, creating a map using JavaScript functions, then adding controls, then progressed to click events and user interaction. They then move further with user interaction, where they teach you how to create a basic click event, and data transfer from a user input form. They use the example of a GeoCaching application where users find an object and leave another one in it’s place, the appropriate data is written to an xml file and can be accessed when the page is next loaded by another “GeoCacher." More information about geocaching

This week’s pros

Grasped an understanding of Google Maps

This week’s cons

Really need to set out the exact details of user interaction that my application will use, then I can have a better understanding of what the program/application needs to do.

Experimentation for this week

Basic Google Map
Zoom Controls
Add Marker Click Event
Speech Bubble Click
Input Forms