Reverse Engineering Paper

sprocketexponentialΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 11 μήνες)

67 εμφανίσεις


Reverse Engineering Paper

For CrimeBaltimore.com

Esti Gerson Livingston

UNIVERSITY OF BALTIM
ORE

HYPERMEDIA PRODUCTIO
N FALL 2010


For my reverse engineering paper, my site was CrimeBaltimore.com, a crime data
aggregator launched in June 2007. The main aspect for the site is the interactive
map, which

displays icons and information for a variety of crimes in a chosen search
area. User
s can enter search information in the input boxes, click the checkboxes on
particular crimes, and search by keywords. Additionally, as I was researching the
source code, I came across the realization that the site was created dynamically with
Ext
JavaScrip
t
.


Google Maps API


Crime Baltimore hired Mashup Technologies to create their interactive map.
Mashup Technologies wrote both MapObject.js and mapobject
-
all.js. The latter being
their
JavaScript

Mapping Library, while the first is the scripting for
overla
id

Google
Maps with a crime API. I believe they used Google maps to embed a Google map into
the CrimeBatimore Site. Mashup Technologies then
overlaid

the Baltimore Google
Map with Crime API and user created content. Crime Baltimore “draws
approximately 90%

of its data from local police records, and, in cities where that
information isn’t released, they gather it from local news sources”.
1

They also
employ staffers to plot the locations of 400,000 crimes a month.
2


The crime JSON they use is filtered into:


HTML

Title

Type of Crime, Date, Time, Address and “Crime Details”.

Text: Type of Crime, Date, Time, Address and the crime details such as
“Shooting/Stabbing. Adult male stabbed in back inside a dwelling. Txptd with
life threatening injuries. Homicide req”




In the code it looks like this:


<li><a href="/crime/14017988
-
e6fa5e6eafe0f10a170d2eb1f0b7310a"
title="Assault
-

11/25/2010 07:28 PM
-

44XX BELLVIEW AVE,BALTIMORE
-

Crime Details">Assault
-

11/25/2010 07:28 PM
-

44XX BELLVIEW
AVE,BALTIMORE<br/>Shooting/
Stabbing. Adult male stabbed in back inside
a dwelling. Txptd with life threatening injuries. Homicide req.</a></li>


The JSON code is pulled directly into the HTML source (they used inline scripting
code), and set it to be constantly updated with the late
st 30 crimes.


Entering Your Location with Search Boxes:


Using the Geocoder widget, Google translates the crime addresses into longitude
and latitude coordinates (google.maps.LatLng), and places them on the map.
3

Similarly when users search their addresse
s (Id = geocodeAddressInput), the same
technology is used to locate their position on the map. So when users enter their
address and click the “Address Search” button, the coding captures the address and
uses the Google function to send a request to the Ge
ocoding API. The response from
Google with the longitude and latitude returns from http://maps.static.com (as seen
in the source).


Searching with Clickable Boxes:


Along the top of the website there are a number of clickable checkboxes with a
variety of c
rime icons, from theft to vandalism. Users mark off which crimes they are
interested in and the date range of their search. When selected, instead of clicking a
“submit” button, they click “Refresh Map” button... and the page changes without
refreshing the

page.


The whole search area is coded as an HTML form. Each of the checkbox choices are
labeled with unique ext
-
gen Ids (see Ext
JavaScript

below), while the Refresh Map
Button is coded as btnSearch. It should also be noted that the icons used on the
crim
e map were attached to the map with the “google.maps.MarkerImage class” by
using the constructor: MarkerImage(url:string, size?:Size, origin?:Point,
anchor?:Point, scaledSize?:Size)
4

All icons must have a LatLong property in the
description. It's my belie
f the designer used a class consisting of the icon URL for
each crime instance. Then set the code to read which crime it was in the JSON file.


As for the Refresh Map Button, known as “search” button in the coding, it has
several events attached to it. If
the site is down, the function LiveSearchDisabled is
fired. The user gets the alert “Due to high traffic our Crime Search is not working at
the moment. Please signup for our crime alerts for updated crime information.');“. If
the user is not logged in, the

user receives an alert that says only authenticated
users may use this function. They check if the user is logged in by using the variable
“this.authenticated” in the code startup. It's later called on by the “if” statement
when the user tries to select t
he checkboxes:


if (!this.authenticated) {

var old_OK = Ext.MessageBox.buttonText.ok;

var old_Cancel = Ext.MessageBox.buttonText.cancel;

Ext.MessageBox.buttonText.ok = 'Yes, I
\
'd like to signup for crime alerts
now';

Ext.MessageBox.buttonText.cancel = 'Not

interested';

Finally, if the user is logged in, and the site is not down, the evtSearch function is
fired, which fires “this.dataInitialized = false”...finally loading the API data that
pertains to the search items.


Ext
JavaScript
:


The Crime Baltimore s
ite, although the front end looks clean and simple, has
extremely complex HTML source code. While I recopied and examined the coding, I
kept seeing “Ext
-
Gen
-
###” as a prefix for ids and div names in the code. For
example, the “to” field in the email regist
ration had a container id “ext
-
gen19”, while
the div tag within “ext
-
gen19” was identified as “ext
-
gen20” and so on. Writing this
code out would be fairly time consuming. I believe the programmers used a custom
Ext
JavaScript

library to dynamically create
the site. Ext.js enables the programmer
to generate a unique Id with this part of the
JavaScript
:


id : function(el, prefix){

prefix = prefix || "ext
-
gen";

el = Ext.getDom(el);

var id = prefix + (++idSeed);

return el ? (el.id ? el.id : (el.id = id)) : id;

},


Ext
JavaScript

(ExtJs), developed by Sencha, is a way to build
JavaScript

frameworks
and applications quickly and efficiently for the web. Using their library, clients
create custom widgets and framework components. Since I did not see ext
-
gen in
the r
ight hand column code and the header code, I believe Crime Baltimore used this
library to create their framework with space for the map, crime grid, and search
forms. The user experiences a clean, dynamic site that works smoothly on most
browsers, includin
g Safari and Opera.


All in all, I believe this is a fairly
straightforward

site. Using a Mashup of Police
Department Feeds and Google Maps, Colin Drane was able to make a
user
-
friendly

site for any level
Internet

user. Plus, using Police Department feeds and Google Java
Libraries, there is little upkeep needed. Due to it's immense popularity,
CrimeBaltimore now has an app in the iPhone store and as of 2008 covers 125 cities
worldwide.
5




Resources
:



Jon
sson, Olle. "Record and Assert Ext JS." Confluence. OpenQA, 10 Feb. 2010. Web. 2 Dec.
2010. <http://wiki.openqa.org/display/SIDE/record+and+assert+Ext+JS>.


"Sencha
-

Learning Center." Mobile JavaScript
-

Ext JS, Ext GWT and Sencha Touch. Sencha,
30 Sept.
2010. Web. 02 Dec. 2010.
<http://www.sencha.com/learn/Learn_About_the_Ext_JavaScript_Library>.

Source Material:


1:


Kincaid, Jason. "SpotCrime Keeps You On The Right Side of The Tracks." TechCrunch. 21
May 2008. Web. 29 Nov. 2010. <http://techcrunch.com/2
008/05/21/spotcrime
-
keeps
-
you
-
on
-
the
-
right
-
side
-
of
-
the
-
tracks>.


2:
Smillie, Dirk. "Data
-
Mapping Crimes." Forbes.com
-

Business News, Financial News, Stock
Market Analysis, Technology & Global Headline News. Forbes.com, 11 Mar. 2010. Web. 30
Nov. 2010. <h
ttp://www.forbes.com/forbes/2010/0329/marketing
-
media
-
spotcrime
-
colin
-
drane
-
technology
-
plotting
-
crimes.html>.


3:


http://code.google.com/apis/maps/documentation/Javascript/reference.html#Geocoder


4:
h
ttp://code.google.com/apis/maps/documentation/Javascri
pt/reference.html#MarkerIma
ge


5: Glazowski, Paul. "SpotCrime: Mapping The Criminal Landscape [The Startup Review]."
SpotCrime: Mapping The Criminal Landscape. Mashable


The Social Media Guide, 1 Dec.
2008. Web. 01 Dec. 2010. <http://mashable.com/2008/05/
22/spotcrime/>.