BUILDING MALAYSIA WEATHER FORECAST MAP

USING MASHUPS AND GOOGLE MAPS

LILLIAN NASHARITAH BONEY ABDULLAH

UNIVERSITI TEKNOLOGI MALAYSIA

BUILDING MALAYSIA WEATHER FORECAST MAP USING MASHUPS AND GOOGLE MAPS

LILLIAN NASHARITAH BONEY ABDULLAH

A project report submitted in partial fulfillment of the requirements

for the award of the degree of Computer Science (Software Engineering)

Faculty of Computer Science and Information System

Universiti Teknologi Malaysia

APRIL 2011

iii

APPRECIATION

All praise to Allah, the one and only, for giving me the strength to complete this

final year project. Alhamdulillah. This project could not have been accomplished

without the help of many individuals. First and foremost I would like to take this

opportunity to thank my project supervisor, Dr Ismail Mat Amin for his critics, advices,

ideas and persistence encouragement. Without his continual support and guidance, this

project report would not have been the same as presented here.

Besides, I would like to thank all my lecturers in Universiti Teknologi Malaysia

for their sincerity in contributing their best knowledge and stimulating my learning

development. To my entire course mates who were very helpful in giving valuable ideas,

encouragement and criticism.

Finally, thanks to my family for their never ending love and support, and to my

husband for his support, for bearing with my long hours of work and for bringing into

my life happiness, love and perspective.

iv

ABSTRAK

Kebanyakan laman web hari ini menggunakan teknologi Web 2.0 untuk

menghasilkan antaramuka aplikasi laman web yang lebih menarik dan interaktif. Projek

ini mengkaji pelaksanaan salah satu teknologi interaktif Web 2.0 yang dikenali sebagai

Mashup. Generasi pengaturcara aplikasi laman web hari ini menggunakan Mashup untuk

mengabung kandungan atau beberapa perkhidmatan lain bagi mewujudkan satu

perkhidmatan yang baru. Bagi memahami konsep Mashup, satu prototaip web mashup

iaitu MyWeatherMap telah dibangunkan. Ia berfungsi untuk memaparkan maklumat

ramalan cuaca di 27 bandar dan 13 buah pusat pelancongan utama di Malaysia. Terdapat

tiga komponen utama yang menjadi asas pembangunan MyWeatherMap. Pertama,

Application Programming Interface (API) atau sumber maklumat utama cuaca.

Komponen ini akan memaparkan maklumat cuaca dalam bentuk yang interaktif pada

Google Maps. Sementara itu, maklumat cuaca diperolehi daripada laman web rasmi

agensi kerajaan iaitu Jabatan Meteorologi Malaysia dengan menggunakan teknik Web

Scrapping. Komponen kedua adalah mashup site iaitu aplikasi web yang menggunakan

teknologi server-side dynamic content generation seperti Hypertext Preprocessor (PHP).

Komponen ketiga adalah browser yang digunakan untuk melihat paparan aplikasi laman

web MyWeatherMap. Hasil pembangunan projek ini diharap mampu memperbaiki dan

meningkatkan mutu penyampaian maklumat ramalan cuaca menggunakan teknologi

Web 2.0. Kertas kerja ini akan membincangkan analisis, rekabentuk dan implentasi

pembangunan prototaip MyWeatherMap.

v

ABSTRACT

Nowadays, many websites are relying on Web 2.0 technologies to build rich

interfaces and more interactive web applications. This project explores one of the

interactive Web 2.0 technologies called Mashup. Current generation of web developers

used Mashup to combine content or services from multiple origins to create new

services. In order to understand the Mashup concept, a prototype of web Mashup known

as MyWeatherMap is build. This web mashup is utilise to display weather forecast for 27

major towns and 13 main tourist destinations in Malaysia. There are three main

components that construct this web mashup. Firstly is the Application Programming

Interface (API) or content provider. This component visualises weather forecast

information on an interactive Google Maps. Meantime, weather forecast information as

the content is extract from a government official website, Malaysian Meteorological

Department by using Web Scrapping technique. Secondly is MyWeatherMap, a mashup

site where it implemented as a traditional web application using widely use server-side

dynamic content generation technologies such as Hypertext Preprocessor (PHP). The

third component is the client’s web browser. This is the place where MyWeatherMap is

rendered graphically on Google Maps for user to view. The result of this project is

hopefully can improve and facilitate the delivery of weather forecast information in

Malaysia using Web 2.0 technologies. This paper describes the foundations, design and

implementation process involve during the development of MyWeatherMap prototype.

vi

TABLE OF CONTENTS

CHAPTER CONTENTS PAGES

THESIS ACKNOWLEDGEMENT

SUPERVISOR ACKNOWLEDGEMENT

PROJECT TITLE i

DECLARATION ii

APPRECIATION iii

ABSTRAK iv

ABSTRACT v

LIST OF CONTENTS vi-xi

LIST OF TABLES xii

LIST OF FIGURES xiii-xv

LIST OF ABBREVIATIONS xvi-xvii

LIST OF APPENDICES xviii

1 PROJECT INTRODUCTION

1.1 Introduction 1

1.2 Problem Statement 3

1.3 Purpose of Project 7

vii

1.4 Objectives of Project 7

1.5 Scope of Project 8

1.6 Justification of Project 9

2 LITERATURE REVIEW

2.1 Introduction 10

2.2 What is Mashups? 11

2.2.1 Types of Mashups 11

2.2.2 Mashups Genre 14

2.3 Mashups Architecture 19

2.3.1 API/Content Providers 20

2.3.2 Mashups Site 21

2.3.3 Client’s Web Browser 22

2.4 Application Programming Interface (API) 22

2.4.1 Google Maps API Family 23

2.5 Google Maps JavaScript V3 29

2.5.1 Basic Map Types 29

2.5.2 Create Web Application With Google Maps API 30

2.5.3 Google Maps V3 API Justification 33

2.6 Web Protocols 34

2.7 Web Scrapping 34

2.7.1 Scrapping Data Using PHP 35

2.8 Web Programming Languages 36

viii

2.8.1 Regular Expression 36

2.8.2 Client Side Scripting (JavaScript) 37

2.8.3 Server Side Scripting (PHP) 39

2.8.1 Style Sheet Languages (CSS) 41

2.9 Web Server (Apache) 42

2.10 Database (MySQL) 43

2.11 Graphic Editor (GIMP) 44

2.12 Definition of Weather Forecast 44

2.13 Malaysia General Weather Conditions 45

2.13.1 Rain 46

2.13.2 Thunderstorm 47

2.13.3 Cloudy 47

2.13.4 Fine 49

2.13.5 Haze 49

2.13.6 Mist 49

2.14 Weather Map Mashup Research 50

2.14.1 Australian Bureau of Meteorology 52

2.14.2 Brunei Darulssalam Meteorological Services 53

2.14.3 Badan Meteorologi Klimatologi dan Geofisika 54

Indonesia

2.14.4 Comparison of Meteorological Agencies 55

2.14.5 Comparison Conclusion 56

ix

3 DEVELOPMENT TECHNOLOGY

3.1 Introduction 57

3.2 Web Development Life Cycle (WDLC) 58

3.2.1 Initial Consultation 59

3.2.2 Project Specification 59

3.2.3 Web Site Architecture 60

3.2.4 Web Site Design Cycle 60

3.2.5 Content Collation 61

3.2.6 Web Site Project Development 61

3.2.7 Testing and Quality Assurance 61

3.2.8 Web Site Deployment 62

3.3 Chosen Project Methodology 62

3.3.1 Agile Web Engineering (AWE) Process 63

3.3.2 Project Development With AWE 64

3.4 Project Methodology Justification 67

3.5 Supporting Technique 68

3.6 Conclusion 69

4 ANALYSIS RESULT AND DESIGN

4.1 Introduction 70

4.2 Analysis Design 71

x

4.2.1 Login 72

4.2.2 Manage Location 72

4.2.3 View Weather 72

4.2.4 Search Location 72

4.3 Process and Data Flow Design 73

4.3.1 Data Processing Module 74

4.3.2 Data Storage Module 74

4.3.3 Mashing Module 74

4.3.4 Display Module 74

4.3.5 Admin Module 75

4.4 Database Design 75

4.5 System Architecture Design 80

4.6 User Interface Design 81

4.6 Conclusion 86

5 IMPLEMENTATION AND SYSTEM OUTPUT

5.1 Introduction 87

5.2 Development Environment 88

5.2.1 Development Environment 88

5.2.2 Installation MySQL, PHP, Apache Using Yum 88

5.2.3 Database Connection with PHP 90

5.3 Development Implementation 91

5.3.1 Loading The Google Maps V3 API 91

xi

5.3.2 Create and Set Password Login Page 93

5.4 System Evaluation and Result 94

5.4.1 Unit Functional Test 94

5.4.2 Web Scrapping Process Test 96

5.4.3 Push Data Process Test 98

5.4.4 Converter Data Process Test 100

5.4 Conclusion 101

6 DISCUSSION AND CONCLUSION

6.1 Introduction 102

6.2 Results and Achievement 103

6.3 Constraints and Challenges of System 105

6.4 Recommendations and Enhancements 106

6.4 Conclusion 107

REFERENCES 108

APPENDICES 112

CHAPTER 1

PROJECT INTRODUCTION

1.1 Introduction

Weather forecasts information plays a significant role to provide information on

public in tourism expansion as well as to protect life and property. Today, Internet and

website are widely used to publish online weather data because it can be easily access at

any time and can display large amounts of valuable information. Regardless the

abundance of available online weather data, creativity to make use of Web 2.0

technologies to present weather data effectively is necessary. The term Web 2.0 was

invented by O’Reilly Media and refers it as a web application that provides online

participation, collaboration, social networking and interaction (O’Reilly, 2010).

Nowadays, there are ranges of technologies that facilitate Web 2.0. These include blogs,

wikis, syndication feeds (RSS and Atom), lightweight Web services, Ajax and Mashups.

This project development will focus on Mashups where weather data is mash into

Google Maps and produce the resulting mashup into a new service known as

MyWeatherMap.

CHAPTER 2

LITERATURE REVIEW

2.1. Introduction

This chapter presents a study or research that has been done on essential topics

for instance Mashups, Google Maps V3 API and Web Scrapping. The purpose is to

gather some guidelines and understanding on how to development a mashup web with

various technologies and techniques. Apart from that, this chapter reviews other related

elements for this project implementation such as scripting languages, web server, and

database type. Meanwhile, general information on weather forecast is added to

comprehend meteorological terminologies in a way to best describe weather forecast

information on MyWeatherMap. In the last part of this chapter, a comparison result of an

observation research of other meteorological agency website and their approach to

deliver weather forecast information are presented.

CHAPTER 3

DEVELOPMENT METHODOLOGY

3.1 Introduction

In recent years, web applications development turn out to be more complicated

due to rapid growth in web programming languages, tools and other related web

technologies. Without having a suitable planning, structure and application model, the

trend and techniques to develop web application can be further sophisticated. Over the

past years, a lot of methodologies have been presented to guide and deal with problems

associated in web development process. Nevertheless, there is no general accepted

process model for web based application development. During this project, it is found

that a good lifecycle model for web based application development does not merely

follow the traditional software engineering lifecycle. According to Altarawneh research,

these days the main web application development methodology is an expansion of the

standard software engineering methodologies (Altarawneh, 2008). Therefore, this

chapter is presented to review and justify a development methodology for

MyWeatherMap.

CHAPTER 4

ANALYSIS RESULT AND DESIGN

4.1 Introduction

This chapter attempt to give brief descriptions of object-oriented analysis and

design that applied to the simulation of MyWeatherMap. As mentioned earlier in

Chapter 3, this project used the Unified Modelling Language (UML) as a graphical

language for envisaging, identifying, assembling, and documenting the basic concepts

and principles of object orientation within MyWeatherMap. After the statements of

requirements are completed, the process proceeds through analysis, overall design, and

detailed design and implementation. Through this phase, requirements are described in

details using Use Case Modeling and Data Flow Diagram (DFD) which is used to

present the flow of data that through the developed web application. Meanwhile, system

design is implemented to ensure all system requirements are translated to meet the user

requirement and satisfaction. System design is an artistic process to transform problems

into a solution because it includes a complete description of MyWeatherMap functions

and interactions.

CHAPTER 5

IMPLEMENTATION AND TESTING

5.1 Introduction

This chapter presents the general system implementation and testing for

MyWeatherMap web application. It described the system development environment and

translated all designs that have been constructed in the previous analysis and design

phase. In the first section, description on chosen technology use in this project are

presented such as installation of Apache web services, MySQL database and other

required services setup. Further on that, unit testing is executed to ensure the system

functionality and processes are working and complete accordingly the requirements

specification. Details on the system implementation and testing are described in the

following sections.

CHAPTER 6

DISCUSSION AND CONCLUSION

6.1 Introduction

The primary goal of this project is to build a prototype of an alternative web

application using Web 2.0 technologies such as Mashup and Google Map API. The

Mashup web application is expected to serves as a platform to view Malaysia weather

forecast updates conditions in 27 major towns and 13 tourist destinations. This chapter

describes the overall project achievement, obstacles faced during the development and

future enrichment for MyWeatherMap.

103

6.2 Results and Achievement

Figure 6.1: MyWeatherMap Mashup Web

Based on the output in Future 6.1, this project has successfully demonstrated the

integration of Google Maps API and Web Scrapping into a web Mashups application.

The development is delivered on schedule and accordingly within the project scope and

objective. In this project, AWE methodology was chosen as the development

methodology and it has effectively leaded the project development. At first, the project

was started with business analysis where the MyWeatherMap goals and requirements are

treated as project elements. Activities such as feasibility study and risks associated with

the project are evaluated because it is necessary to describe appropriate technical

approaches for the development. The outcome of this task is a broad list of scheduled

activities for the subsequently requirements phase.

104

In requirement phase, the activities continue with web application description

workflow production where the web application functionalities and constraints are

describes. In order to achieve this, actors, and use cases for the web application are

identified to represent the behavior of the system. By using uses cases, the web

application is more likely relevant to the users. In every use case that has been created, it

described in details to show how the web application interacts step by step with the

actors and what the web application actions are.

In the analysis and design phase, the task on how the web application is going to

perform during the implementation phase is realized within a specific implementation

environment. The task and functions are specified in the use case descriptions to ensure

it fulfill the requirements. The result of this activity is design models of the web

application with ranges of diagrams. It is used to best describe the web application

processes and data flow and becomes the reference on how the source codes are

structured and written.

In implementation phase, all codes and components of the web application are

defined. Test implementation on units and integration is implemented to verify the

interaction between objects and to verify all requirements have been correctly

implemented. The final achievement for this project is the deployment of

MyWeatherMap web application. It is distributed as a package of system or web

application after conducted testing activity. Then, it is proceed with the installation of

the web application in the dedicated machine ready for presentation and live of the web

application.

105

6.3 Constraints and Challenges of the System

While this innovative web application provides comprehensible benefits to user,

there are also consequences with arguments which require better understanding and

strategy to tackle the issues. The identified constraints and challenges are as bellow:

i. Limited time to do more in depth research about the main subject matters such as

Mashups and Google Maps API. This project is inspired due to personal interest

so it requires understanding from the subject root. Better result is expected to

achieve if project time period is extend.

ii. The confidentiality issues are to rise when using information from other specific

website and mixing it with other APIs potentially will impact the value of

original information.

iii. Web Scrapping technique is not applicable for cases with authentication

processes and menus selection. The main reason is it involves a series of

exchange process with the server prior to reach the process window. For

example, if the window layouts of the target application are changed or the

displayed content varies, the information may not be able to be extract.

106

6.4 Recommendations and Enhancements

In order to provide better services for users in future, there are some identified

recommendations that can be extended to achieve users’ satisfaction. The identified

recommendations are as follows:

i. Add more locations on Major Towns and Tourist Destinations because more

users are expected to use this web application if more coverage on location is

provided.

ii. Use available tools to implement scrapping process such as IRobotSoft and

GreaseMonkey instead of manual programming to create the scrapper agent.

107

6.5 Conclusion

With present assorted kind of web technology, this project enables users to blend

existing various applications and services to build new applications. This project has a

great potential to inspired and facilitate future map Mashups for private and government

agencies. However, an issue such as data ownership and privacy protection remain

requires further explanation and solution before adopting the implementation. It is clear

that in order to build a web Mashups application, the extent of open APIs provided by

government are also essentials. Through the openness of government in sharing their

services data, more new generation of web mapping services are produce. This great

expansion may imply map Mashups in a number directions to present information

creatively. For instance, the governments are able to improve their e-services for public.

Besides, government agencies are expected to follow the concept and develop more

open APIs to its own data so that others can make use of the developed APIs.

Meanwhile, private agencies may have the opportunities to innovate and extend their

creativity to lead their future plan in producing a new breed of web Mashups. Finally,

serious studies and investigations are require to see how best we can take advantage of

this new compilation of concepts and technologies to develop web Mashup services.

REFERENCES

Eric van der Vlist and colleagues, Professional Web 2.0 Programming, Wrox, 2006.

Ian Sommerville, Software Engineering 8th Edition, Addison-Wesley, 2006.

Keil, M. Cule, P E. Lyytinen, K. And Schmidt, R., A Framework for identifying

Software Project Risks, Communications of the ACM, 1998.

Leffingwell, Dean; Widrig, Don, Managing Software Requirements - A Unified

Approach, The Addison-Wesley Object Technology Series, 2003.

McDonald A. and Welland R., A Survey of Web Engineering in Practice, University of

Glasgow, 2001. Mohamed Haneefa, 2009. Interactive Information Dissemination: Web 2.0 and Beyond,

7th International CALIBER, 2009.

Powell, T.A, Web Site Engineering: Beyound Web Page Design, Prentice Hall, 1998.

Shu-Wai Chow, PHP Web 2.0 Mashup Projects, PACKT Publishing, 2007.

109

Stellman, Andrew; Greene, Jennifer, Applied Software Project Management, O'Reilly

Media, 2005.

Tuchinda, R., Szekely, P., Knoblock, C. A.: Building Mashups by Example. In

Proceedings of UI 2008, ACM Press, 2008.

Agilemanifesto Website, Principles behind the Agile Manifesto, accessed on 20/01/2011

at http://agilemanifesto.org/principles.html

Artic Climatology and Meteorology, Haze, accessed on 25/10/2010 at http://nsidc.orga/arcticmet/glossary/haze.html

Ask Bob Rankin, What is a Mashup?, accessed on 25/10/2010 at http://askbobrankin.com/what_is_a_mashup.html

Build4u Website, What is PHP?, accessed on 27/10/2010 at http://www.buildwebsite4u.com/advanced/php.shtml

Ed Ort, Sean Brydon, and Mark Basler, Mashup Styles, accessed on 27/01/2011 at http://www.mendeley.com/research/mashup-styles-1-serverside-

mashups-4/

110

EzineArticles.com, Internet and Businesses Online: Web Development, accessed on

06/02/2011 at http://ezinearticles.com/?expert=Charles_Kyriakou

O’Reilly, T. What is Web 2.0, accessed on 18/10/2010 at http://oreilly.com/web2 /archive/what-is-web-20.html

PCMAG.com, Application Programming Interface (API), accessed on 25/10/2010 at http://www.pcmag.com/encyclopedia_term/applicationprogramminginte

rface.asp

Programmableweb.com, What is a Mashup?, accessed on 19/10/2010 at http://www.programmableweb.com/faq#Q1

Web Development Lifecycle (WDL), Charles Kyriakou, accessed on 20/01/2011 at http://ezinearticles.com/?Web-Development-Lifecycle-

%28WDL%29&id=4508001

Wikipedia, Web 2.0., accessed on 18/10/2010 at http://en.wikipedia.org/wiki /Web_2.0

Wikipedia, Mashup (web application hybrid), accessed on 18/10/2010 at http://en.wikipedia.org/wiki/Mashup_%28web_application_hybrid%29

111

Wikipedia, Functional Requirement, accessed on 22/10/2010 at http://en.wikipedia.org/wiki/Functional_requirement

Wikipedia, Haze, accessed on 22/10/2010 at http://nsidc.org/arcticmet /glossary/haze.html

Wikipedia, Web 2.0, accessed on 22/10/2010 at http://en.wikipedia.org/wiki /List_of_wiki_software

WMO-No. 1024: Weather, Climate and Water Services for everyone, accessed on

22/10/2010 at ttp://www.wmo.int/pages/publications/showcase/ .../1024_E.pdf