Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

DSL (Domain Specific Language) for Maps Mashups


Published on

  • Be the first to comment

DSL (Domain Specific Language) for Maps Mashups

  1. 1. DSL (Domain Specific Language) for Maps Mashups by Ali Raza 05/17/09 Advisor Dr. Chen
  2. 2. Overview ► Abstract ► Keyword List ► Introduction  Definition of Problem  Project Objectives  Development Environment  Operational Environment ► Requirement Description
  3. 3. Overview (Continue..)  SRS for the project ► Use Cases ► DesignDescription for DSL ► Implementation  Data Retrieval Element ► Unit Testing of Data Retrieval Element  Mashup Adapter Element ► Unit Testing of Mashup Adapter  Call Google Service Element ► Unit Testing of Google Service Element
  4. 4. Overview (Continue..)  Call Flickr Service Element ►Unit Testing of Flickr Service Element  Call Yelp Service Element ►Unit Testing of Yelp Service Element ► Deployment ► Running Application ► Configuration File ► Exception Handling
  5. 5. Overview (Continue..) ► Conclusionand Recommendation for Enhancement ► Reference
  6. 6. Abstract ► The world-wide-web (WWW) has been constantly changing. In recent year major web services have opened their private networks to the public in the form of Web APIs. This allows the formation of the custom applications which use those APIs and local data sources called mashups. These mashups applications need some kind of unified model language by which users can create and reuse those mashups. The goal of this project is to build the unified language (internal domain specific language) for maps mashups which will satisfy the quality attributes such as modifiability and usability. The reason for this project is to display that industry needs a domain specific language for maps mashups. For this purpose the Domain Specific Language (DSL) will be introduced. This would be a framework, and by using this framework, organizations can build maps mashups in a uniform manner. As a result maintainability will become easier with quality output and, organizations can use fewer resources. Furthermore, this project also demonstrate how user can remix and reuse different APIs by using this framework, as a result mashups applications can be developed quickly and easily such as ‘Find a Dentist’ or ‘Find an restaurants ’. This project attempts to provide the framework about the DSL for maps mashups, and its implementation. It also outlines the architecture and design specification for maps mashups framework. For this purpose three major APIs have been selected, Google, Flickr and Yelp API. Also, for remixing with the user data, mySQL database has been selected.
  7. 7. Keywords ► Domain Specific Language for Maps Mashups, Maps Mashups, Mashups with Google, Mashups with Flickr, Mashups with Yelp, DSL for Mashups, Google Maps, DSL for Google Maps
  8. 8. Introduction ► Definition of Problem  How many times have we seen a website and said “This would be exactly what I wanted if only…” If only the website owner could take the address for those dentist or broker or agents and plot them on one map. How often do we wish that we could make all the different parts of our digital world – our email, word processor document, photos, search result, maps, and presentations- work together more flawlessly? After all, it’s all digital malleable information – shouldn’t it all just fit together?  In fact, all the data, web sites, and applications we use could fit together. We could do it by remixing information to create our own mashups. In web development, a mashup is a web application that combines data from more than one source into a single integrated tool; mashups seamlessly combine content from the web together into a new integrated experience. Content used in mashups is typically sourced from a third party via public interface or so called API. Mashups = API1 + API2 + API[n]
  9. 9. Introduction: Definition of Problem (Cont)  These Web APIs (or Web services) are in the form of Representational State Transfer (REST), Atom Publishing Protocol (APP), and SOAP services, as well as RSS and Atom data services. The world-wide-web (WWW) paradigm is also shifting towards program Web applications using dynamic programming languages and frameworks, e.g., JavaScript with AJAX, Ruby with Ruby on Rails (RoR), and PHP with Zend framework. These frameworks are facilitating web programming however none of them are focused directly on facilitating services mashups and helping deal with the common distributed systems issues that arise.  Domain-specific language (DSL) is a customized language built on top of any programming language. In addition, DSL is a computer programming language of limited expressiveness focused on a particular domain. It provides common syntax and semantics to represent concepts and behaviors of the particular domain. In general, by using or designing DSL, we can achieve these goals such as abstraction, terse code, simple and natural syntax, ease of programming and code generation. There are two kinds of DSL; Internal DSLs are written in host language –conventionally use of subset of host language syntax; External DSLs are separate to host language – needs a complier/interpreter to execute; Language Workbenches are IDE design DSLs. Such tools allow users to define the abstract syntax of the language together with editors and generator.
  10. 10. Introduction: Definition of Problem (Cont)  Currently there are some tools available in the marketplace which allows user to build mashups without even writing a code. However, it doesn’t always mean building mashups is easy. Those techniques employ a widget approach, where users select, customize and connect to perform complex operations [11].
  11. 11. Introduction: Project Objective ► This project will present an internal DSL (Domain Specific Language) and platform for services mashups that can improve some of the issues. In particular, (1) gives a uniform model for service operations’ interactions by using simple and natural syntax, (2) a common high-level implementation for maps mashups. ► The DSL for maps mashups project will be the framework that will wire Web APIs. Users (developers) can create any maps mashups quickly. Additionally, this framework will build the applications which satisfy the quality attributes such as modifiability and maintainability. To achieve those quality attributes, the DSL for maps mashups will apply the architectural and design patterns for each quality attribute. As a result, users (developers) can create any maps with minimum effort.
  12. 12. Introduction: Project Objective (Conti..) ► For instance, by using this framework users (developers) can create maps mashups which can find the dentists or agents or brokers functionality for the insurance company or find the dealer functionality for any car company. Moreover, this DSL framework will enhance the quality, productivity, reliability, maintainability, and reusability of the maps mashups applications by using the architectural and design patterns. ► The project will implement the ‘Find’ use case web application. For instance, by using this framework, user can easily create the mashups with the data, Google, Flickr and Yelp API. ► For this purpose, DSL for maps mashups will implement the Dentist Maps web application. This is because the existing dentist search web applications are using a legacy web application paradigm to find the dentists. Therefore, they are not very user friendly and intuitive because they are using Web 1.0 technology.
  13. 13. Introduction: Project Objective (Conti..) ► Moreover, in order to complete this project, I will be using the techniques and tools which I have learned in this program such as applying software requirement specification (SRS) as per IEEE standard, software architecture specification and detail design specification. Furthermore, this project will apply quality attribute tactics for the DSL framework as per SEI guidelines such as availability tactics, modifiability tactics, performance tactics and usability tactics by using the architectural and design pattern. So that ‘Find’ use case can be created and developed easily, quickly with quality output.
  14. 14. Introduction: Development Environment ► Operating System: Windows ► Runtime: Java Virtual Machine ► IDE: Eclipse ► Server Side Languages: Java, J2EE ► Clients Side Language: JavaScript ► Parsers: JSON, XML ► Web Server: Tomcat ► Technologies and API: AJAX, Struts, JDOM, JConnector for MySQL,
  15. 15. Introduction: Operational Environment ► Runtime: Java Virtual Machine ► Database: MySQL ► Browser: Internet Explorer ► External APIs: Google Maps, Flickr API and Yelp API
  16. 16. Requirement Description ► Project Scope  The DSL of Maps Mashups will present an internal DSL (Domain Specific Language) and platform for services mashups that can improve maintainability and productivity. In particular,  It gives a uniform model for service operations’ interactions by using simple and natural syntax  A common high-level implementation for maps mashups.  Optimize and Support for IE Browser  The project will implement the ‘Find’ use case web application. For instance, by using this framework, user can easily create the mashups with the data, Google, Flickr and Yelp API.
  17. 17. Requirement Description (Conti..) ► Project Perspective  There are many open source APIs available in the marketplace which allow users to build mashups functionality. However, there are few which only use the DSL concept which includes Yahoo Pips and Swashups by IBM product.  The DSL for maps mashups will be the framework which allows users to wire open source services. However, due to the resource limitation only Google Maps, Yelp and Flickr API will used to implement the DSL Maps Mashups. On the other hand, this initial version will be hopefully continued and in the future it will make use of other APIs services such as facebook login id, twitter APIs and so on and so forth.  At the same time other browser support will be added such as FireFox.
  18. 18. Requirement Description (Conti..) ► Product Features  Allow users to send the data  Allow users to use Google APIs  Allow users to use Yelp APIs  Allow users to use Flickr APIs
  19. 19. Requirement Description (Conti..) ► Design and Implementation Constrains  The product shall use the JavaScript technology for the mashups. This is because the solution should be platform independent, and developers simply add DSL framework. Additionally, this will help in maintainability and modifiability. This is because user can modify the mashups without even compile or deploy. Moreover, this solution is only optimized for Internet Explorer browser. ► User Documentation  Additionally, all the artifacts will be provided so that it can be modified in the future.
  20. 20. Requirement Description (Conti..) ► Assumptions and Dependencies  Optimize and Support for Internet Explorer Browser.  For Flickr, users of that DSL must have an user account on Flickr  User must retrieve a key from Flickr to use Flickr API, Yelp key from Yelp to use Yelp API and Google Map key to use Google API.  For Binding Google Map and Flickr, user must have Flickr tag Name stored into the database  For Binding Google Map and Yelp, user must have PhoneNumber stored into the database.
  21. 21. Requirement Description (Conti..) ► Software Quality Attribute  Availability  Maintainability  Portability  Testability
  22. 22. Use Case Diagram
  23. 23. Design Description ► Attribute Driven Design (ADD) has been selected for the architecture of DSL framework. ► Identify Candidate Architecture Drivers
  24. 24. Design Description (Continue..) ► Choose Design Concept that Satisfies Architectural Drivers  Identify design concerns
  25. 25. Design Description (Continue..) ► Capture Preliminary Architecture Views Dispatch Service Request such as Google, Yelp or Flickr for Request for Mashup Service Mashup with User Data Invoke Service Invoke Open Source API
  26. 26. Design Description (Continue..) ► Instantiate Architectural Elements and Allocate Responsibility DSL Framework Mashup Adapter Data Retrival Request for Mashups Call Google Service Call Yelp Service Call Flickr Service
  27. 27. Design Description (Continue..) ► Assign Responsibilities to Elements according to Patten Type
  28. 28. Design Description (Continue..) ► Allocate Responsibilities associated parent element among its children.  Mashups Adapter – This element is responsible for calling different various API. Also, the data such as user information from the database will be the passed into this element.  Call Google Service – This element is responsible for calling Google open Source Service.  Call Yelp Service – This element is responsible for calling Yelp open Source Service.  Call Flickr Service – This element is responsible for calling Flickr open Source Service.
  29. 29. Design Description (Continue..) ► Define interfaces for Instantiated Elements
  30. 30. Design Description (Continue..) DSL for Maps Mashups Logical View DSL for Maps Mashups Browser/ Get Values from Flickr (Photo URL) Client An Application which uses ‘Find Use Case’ Get Values Yelp (Business Side Reviews etc) Map Markers on Google Map XML for Google API Get Latitude Middleware and Longitude Get Data if address will Layer be provided by From MySQL user. Point Solutions Application Database
  31. 31. Implementation ► Data Retrieval Element
  32. 32. Implementation (Continue..) ► Steps for Data Retrieval Element  User invoke the action ‘’ or user can provide the address along with the action, For instance http://localhost:8080/DSLMapsMashups/  http://localhost:8080/DSLMapsMashups/  Then the application goes to action class, if user send address then set all the values into the customerAddress object, send this request to business delegate  In business delegate object if customer address is not null then get the latitude and longitude of the address which user would like to find, for instance dentist or restaurants, else send this request to DAO object. The latitude and longitude data is getting received by using GEOCoder class. In this class system is invoking Google API and along with user provided address and in return system is receiving coordinates, latitude and longitude.  In DAO object system connects to mySQL database and retrieves data, and set this data into the list.  This list then eventually will be sent into the request object in the Action class  Action class then calls servlet, XMLOutput.  XMLOutput then render this list object and transform this object into the XML layout.
  33. 33. Implementation (Continue..) ► Creating a Database
  34. 34. Implementation (Continue..) ► Unit Testing for Data Retrieval Element
  35. 35. Implementation (Continue..) ► Mashup Adapter Element  mapsMashupsWithFlickrYelp syntax  mapsMashupsWithFlickr syntax  mapsMashupsWithYelp syntax  mapsMashupsWithData syntax
  36. 36. Implementation (Continue..) ► mapsMashupsWithFlickrYelp syntax
  37. 37. Implementation (Continue..) ► Unit Testing of mapsMashupsWithFlickrYelp syntax  var mashupAdapter = new MashupAdapter();  mashupAdapter.mapsMashupsWithFlickrYelp(map, data);
  38. 38. Implementation (Continue..)
  39. 39. Implementation (Continue..) ► mapsMashupsWithFlickr Syntax
  40. 40. Implementation (Continue..) Unit Testing  var mashupAdapter = new MashupAdapter();  mashupAdapter.mapsMashupsWithFlickr(map, data);
  41. 41. Implementation (Continue..) ► mapsMashupsWithYelp Syntax
  42. 42. Implementation (Continue..) Unit Testing  var mashupAdapter = new MashupAdapter();  mashupAdapter.mapsMashupsWithYelp(map, data);
  43. 43. Implementation (Continue..) ► mapsMashupsWithData Syntax
  44. 44. Implementation (Continue..) Unit Testing  // Creating Mashup with MySQL Data only  var mashupAdapter = new MashupAdapter();  mashupAdapter.mapsMashupsWithData(map, data);
  45. 45. Implementation (Conti..) ► Call Google Service Element  setGoogleMap syntax  For setGoogleMap syntax, there are six parameters, such as map, set map’s latitude, set map’s longitude, set maps mid Point, set map Zoom level, set mapModel like G_NORMAL_MAP, G_HYBRID_MAP. Usage of this syntax is shown below.  map = googleMaps.setGoogleMaps(map, 33.913442, -117.933678, 10, 12, G_NORMAL_MAP);
  46. 46. Implementation (Continue..)
  47. 47. Implementation (Continue..) ► createMarker syntax  CreateMarker syntax, create the marker on the Google Map by using Yelp, Flickr and XML Data. For this purpose GoogleMakers class has been created. User must send points (latitude and longitude), name to display on the popup box, address to display on the pop box, flickr Image and yelpObj. This method must be invoked in the Mashup Adapter class, after parsing the data from the XML, calling Yelp and Flickr.  var googleMarkers = new GoogleMarkers();  var marker = googleMarkers.createMarker(point, name, address, flickrImage, yelpObj);
  48. 48. Implementation (Continue)
  49. 49. Implementation (Continue..) ► createMarkerYelp syntax  var googleMarkers = new GoogleMarkers();  var marker = googleMarkers.createMarkerYelp(point, name, address, yelpObj); ► createMarkerFlickr syntax  var googleMarkers = new GoogleMarkers();  var marker = googleMarkers.createMarkerFlickr(point, name, address, flickrImage); ► createMarkerData syntax  var googleMarkers = new GoogleMarkers();  var marker = googleMarkers.createMarkerData(point, name, address);
  50. 50. Implementation (Continue) Call Flickr Service Element ► For invoking Flickr API, first of all we need to retrieve Flickr tag name from the XML data. This tag name is for binding purpose between Google and Flickr. Therefore, DSL framework uses this tag name from the XML document, constructing Flickr URL, and invoke Flickr API sync call by using XMLHTTPRequest() object, as a result system would retrieve the result, image. ► So in otherwords, system is invoking Flickr API which is synchronized call. For this purpose, we must have an account in Flickr, uploaded all the images and set the tags for each images. Each data row contains the Flickr Tag, therefore for each row; system is invoking the Flickr URL [23] with the tags specified. For instance, ► " d=35651021@N05&tags=" + flickrTag +"&format=json ► As a result, system is getting a flickr response in the form of JSON, from which system is getting the image URL, for instance ► ► Then the system will use this URL and create the image HTML element. Additionally, for this element three anonymous function as been used 1) invokeFlickr, jsonFlickrAPI and flickr_photo_url. Invoke Flickr is invoking Flickr API and jsonFlickrAPI is getting the response back from the Flickr and calling flickr_photo_url for image URL.
  51. 51. Implementation (Continue)
  52. 52. Implementation (Continue) Call Yelp Service Element ► For invoking Yelp API, first of all we need to retrieve phone number from the XML data. This phone number element is for binding purpose between Google and Yelp. Therefore, DSL framework uses this phone number from the XML document, constructing Yelp URL, and invoke Yelp API sync call by using XMLHTTPRequest() object, as a result system would retrieve the result, business object, which will convert in the HTML. ► Similarly for the Yelp, system is invoking Yelp API which is also a synchronized call. For this purpose DSL is sending request to Yelp API by using Phone Number. This phone number must be provided to the DSL. For each row, system is sending the request to Yelp [24] by using following URL ► "" + phoneN + &ywsid=7bH2vBFox4rT2hgOqzwpWA"; ► As a result, system is getting a Yelp response in the form of JSON, from which system is getting a complete HTML, and sending this to the marker syntax. Additionally, for this element two anonymous function as been used 1) invokeYelp, and generateInfoWindowHtml. Invoke Yelp is invoking Yelp API and generateInfoWindowHtml is converting business object in the HTML
  53. 53. Implementation (Continue..)
  54. 54. Deployment
  55. 55. Running Application ► In order to connect to mySQL database we must deploy this application on Tomcat or any JVM Web Server. ► Since, this solution is a JavaScript Solution and we can provide XML manual instead of connecting to database, therefore this solution can be run without even deployment process. For this purpose we can simply go to UnitTest folder provided with source code, and click of any file which belongs to demoRestaurants*.html. This is because all demoRestaurants*.html files are using restaurantsData.xml file for the demo purpose. Please make sure that this solution has been optimized on Internet Explore browser; therefore please open those files in IE only.
  56. 56. Configuration File My SQL For mySQL, DSL application is using application resource properties, contains all mySQL configuration parameter. Please change according to user mySQL. # Database Configration Parameters database.userName = root database.password = welcome database.url = jdbc:mysql://localhost/data Keys User must get the key in order to reuse this framework. Currently those keys are used in two places for Yelp and Flickr they are in keyFile.js and for Google API it’s the part of the HTML file, script tag. Additionally, for GEO coding (latitude and longitude) Google API key has been used. ► keyFile.js ► var YELP_KEY = "7bH2vBFox4rT2hgOqzwpWA"; ► //Key for Flickr ► var Flickr_KEY = "3b7e491810eec61557ba160b4d93bf8d"; ► All HTML files, where map has been used ► <script src=" ► key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxTPZYElJSBeBUeMSX5xXgq6lLjHthSAk20WnZ_iuuzhMt60X_ukms-AUg" ► type="text/javascript"></script> ► GeoCoder Class in edu.fullerton.mashups.util package ► private final String BASE_GEOCODER_URL = ""; ► private final String ENCODING = "UTF-8"; ► private final String GOOGLE_MAPS_KEY = "ABQIAAAAjU0EJWnWPMv7oQ- jjS7dYxTPZYElJSBeBUeMSX5xXgq6lLjHthSAk20WnZ_iuuzhMt60X_ukms-AUg"; ► public CustomAddress getLatLong(CustomAddress customAddress) throws IOException { ► BufferedReader in = new BufferedReader (new InputStreamReader ► (new URL (""+URLEncoder.encode (customAddress.getAddress(), ENCODING) +"&output=csv&key="+GOOGLE_MAPS_KEY).openStream ()));
  57. 57. Exception Handing
  58. 58. Conclusions and Recommendation for Enhancements ► The DSL for Maps Mashups is the project in which users can reuse and remix the existing Web APIs, build mashups and implement ‘Find’ use case in the form of maps for any business domain by using this framework. As per this framework, user can easily invoke those APIs rather than complex widgets, and build sophisticated maps mashups effortlessly. As a result organizations will produce more quality output and achieve customer satisfaction. This is because DSL framework, can easily understand user instructions in simple English rather than complex widgets. For instance, instead of writing the entire code for Google Maps, Flickr and Yelp API, user can easily invoke those APIs by using simple interface and get the response back from those APIs. Similarly, for custom data, user simply needs to invoke the action and get the response back in the XML format. For mashups, user can just need to use the plain English language type methods and it will be build automatically.
  59. 59. Conclusions and Recommendation for Enhancements (Continue..) ► The first version of the DSL for Maps mashups meets all the requirement specifications as per section 2. This release is optimized for Internet Explorer browser and as a result any mashups can be created with Google, Flickr, Yelp and user data by using this framework. However, the next release of this framework should account for Firefox Browser. FireFox was not within the scope of this project. Additionally, this release was limited to three APIs, Google , Yelp and Flickr, however, in the future we can add more APIs such as Delicious, Youtube, Facebook and MySpace. To add this feature, we need to look into these application APIs specifications, come up with the expression and fit into this framework.
  60. 60. References ► [1] Raymond Yee 2008, Pro Web 2.0 Mashups: Remixing Data and Web Services. ► [2] Mashups, Wikipedia, ► [3] E. Michael Maximilien, Ajith Ranabahu and Stefan Tai. 2007. Swashup: situational web applications mashups (ACM) Paper ► [4] Find dentist web applications, ►,,,, ► searchType=findDentistMetLife&newSearch=true&referer=,1674,P 1078,00.html ► [5] PHP with Zend Framework, ► [6] Ruby on Rails Framework, ► [7] Len Bass, Paul Clements, Rick Kazman 2007, Software Architecture in Practice. Second Edition. SEI series in Software Engineering ► [8] Find the agent, ► [9] Find the dealer,, ► [10] Domain Specific Language, Martin Fowler, ► [11] Rattapoom Tuchinda, Pedro Szekely, and Craig A. Knoblock. 2008. Building Mashups By Example. ACM Press ► [12] IEEE. IEEE Std. 830-1998 IEEE Recommended Practice for Software Requirement Specifications. IEEE Computer Society, 1998 ► [13] ► [14] Software Engineering Institute Standard - Attribute Driven Design, v2.0 ► [15] Google API Key Sign up: ► [16] Google Map API: ► [17] Flickr Key Sign up: ► [18] Flickr Photo Search API ► [19] Yelp Key API ► [20] Yelp Phone API: ► [21] Pro JavaScript Design Patterns by Ross Harmes and Dustin Diaz ► [22] Google Map API: ► [23] Flickr Photo Search API ► [24] Yelp Phone API: