Sei qui:   Contenuto / Strumenti Per Sviluppatori / Documentazione Plugin / Esempi E Tutorial

Plugin Example : Weather by Geolocation

In this example of a plugin, we will make a request to the API REST of the site Weather Underground   to display the current weather conditions as a function of the user's geographic location.

We will therefore attempt to search for the current location of the terminal (gbGetLocation method) and send the requests to the network (gbRequest method).

This plugin is rather simple, it's purpose is to illustrate how to use the methods of the GoodBarber Plugin API.

Please note: This plugin uses the GoodBarber JavaScript ToolKit. 


1

Architecture of the plugin

This plugin won't implement a navigation as it is only intended to display three different types of information on one page, therefore, one will not find the page index.html.

We have a CSS sheet (style.css), as well as several images for the plugin (in the following formats: .gif, .png, and .jpg).

Finally, there are two JavaScript files: The GoodBarber JavaScript ToolKit (GBJSTK.js) and the file of functions specific to the plugin (plugin.js).

Please note: In order to ensure the optimal showing regardless of different screen types (particularly Retina and non-Retina screens) we have used media queries in the CSS sheet. By convention, the images in double size (for Retina screens) carry the suffix "@2x", just like with native developments.

picture

2

How the plugin works

The operation of this plugin is relatively simple: Once it's instantiated, it will trigger it's refresh method, which will send a cascade request to obtain the geolocation of the user.

If this request is successful, a request will be sent to the Weather Underground API.

If the API works correctly, the page will be refreshed with the current information. Otherwise, the user will be informed that an error has occurred during the update process.

A click on the refresh button will re-start the refresh process. 

picture

3

How can I test this plugin?

In order to test this plugin in your GoodBarber app, download it from GoodBarber's GitHub profile, and then import it to a plugin page in your GoodBarber backend.

You can then modify it in order to discover the possibilities provided by the GoodBarber Plugin API and the GoodBarber JavaScript ToolKit.

You simply need to sign up (for free) on Weather Underground (http://www.wunderground.com/weather/api/ ) to get an API key, which you will then need to insert at the top of the file plugin.js.