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.

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 clients 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 DECLARATION APPRECIATION ABSTRAK ABSTRACT LIST OF CONTENTS LIST OF TABLES LIST OF FIGURES LIST OF ABBREVIATIONS LIST OF APPENDICES i ii iii iv v vi-xi xii xiii-xv xvi-xvii xviii

PROJECT INTRODUCTION

1.1 1.2 1.3

Introduction Problem Statement Purpose of Project

1 3 7

vii

1.4 1.5 1.6

Objectives of Project Scope of Project Justification of Project

7 8 9

LITERATURE REVIEW

2.1 2.2

Introduction What is Mashups? 2.2.1 2.2.2 Types of Mashups Mashups Genre

10 11 11 14 19 20 21 22 22 23 29 29 30 33 34 34 35 36

2.3

Mashups Architecture 2.3.1 2.3.2 2.3.3 API/Content Providers Mashups Site Clients Web Browser

2.4

Application Programming Interface (API) 2.4.1 Google Maps API Family

2.5

Google Maps JavaScript V3 2.5.1 2.5.2 2.5.3 Basic Map Types Create Web Application With Google Maps API Google Maps V3 API Justification

2.6 2.7

Web Protocols Web Scrapping 2.7.1 Scrapping Data Using PHP

2.8

Web Programming Languages

viii

2.8.1 2.8.2 2.8.3 2.8.1 2.9 2.10 2.11 2.12 2.13

Regular Expression Client Side Scripting (JavaScript) Server Side Scripting (PHP) Style Sheet Languages (CSS)

36 37 39 41 42 43 44 44 45 46 47 47 49 49 49 50 52 53 54

Web Server (Apache) Database (MySQL) Graphic Editor (GIMP) Definition of Weather Forecast Malaysia General Weather Conditions 2.13.1 Rain 2.13.2 Thunderstorm 2.13.3 Cloudy 2.13.4 Fine 2.13.5 Haze 2.13.6 Mist

2.14

Weather Map Mashup Research 2.14.1 Australian Bureau of Meteorology 2.14.2 Brunei Darulssalam Meteorological Services 2.14.3 Badan Meteorologi Klimatologi dan Geofisika Indonesia 2.14.4 Comparison of Meteorological Agencies 2.14.5 Comparison Conclusion

55 56

ix

DEVELOPMENT TECHNOLOGY

3.1 3.2

Introduction Web Development Life Cycle (WDLC) 3.2.1 3.2.2 3.2.3 3.2.4 3.2.5 3.2.6 3.2.7 3.2.8 Initial Consultation Project Specification Web Site Architecture Web Site Design Cycle Content Collation Web Site Project Development Testing and Quality Assurance Web Site Deployment

57 58 59 59 60 60 61 61 61 62 62 63 64 67 68 69

3.3

Chosen Project Methodology 3.3.1 3.3.2 Agile Web Engineering (AWE) Process Project Development With AWE

3.4 3.5 3.6

Project Methodology Justification Supporting Technique Conclusion

ANALYSIS RESULT AND DESIGN

4.1 4.2

Introduction Analysis Design

70 71

4.2.1 4.2.2 4.2.3 4.2.4 4.3

Login Manage Location View Weather Search Location

72 72 72 72 73 74 74 74 74 75 75 80 81 86

Process and Data Flow Design 4.3.1 4.3.2 4.3.3 4.3.4 4.3.5 Data Processing Module Data Storage Module Mashing Module Display Module Admin Module

4.4 4.5 4.6 4.6

Database Design System Architecture Design User Interface Design Conclusion

IMPLEMENTATION AND SYSTEM OUTPUT

5.1 Introduction 5.2 Development Environment 5.2.1 Development Environment 5.2.2 Installation MySQL, PHP, Apache Using Yum 5.2.3 Database Connection with PHP 5.3 Development Implementation 5.3.1 Loading The Google Maps V3 API

87 88 88 88 90 91 91

xi

5.3.2 Create and Set Password Login Page 5.4 System Evaluation and Result 5.4.1 Unit Functional Test 5.4.2 Web Scrapping Process Test 5.4.3 Push Data Process Test 5.4.4 Converter Data Process Test 5.4 Conclusion

93 94 94 96 98 100 101

DISCUSSION AND CONCLUSION

6.1 Introduction 6.2 Results and Achievement 6.3 Constraints and Challenges of System 6.4 Recommendations and Enhancements 6.4 Conclusion

102 103 105 106 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 OReilly Media and refers it as a web application that provides online participation, collaboration, social networking and interaction (OReilly, 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-serversidemashups-4/

110

EzineArticles.com, Internet and Businesses Online: Web Development, accessed on 06/02/2011 at http://ezinearticles.com/?expert=Charles_Kyriakou

OReilly, 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