First, we will need to create the project from the terminal using the following command.
cordova create weather com.example.weather Weather
The cordova create command bootstraps a basic app using the supplied folder, app ID, and name. The new app has the following directory structure.
├── config.xml
├── hooks
│ └── README.md
├── platforms
├── plugins
└── www
├── css
│ └── index.css
├── img
│ └── logo.png
├── index.html
└── js
└── index.js
7 directories, 6 files
Most of our work will be focused on the files in the www folder. Since a Cordova application is a web app, most of the development can be done in a browser before testing on a phone. Let's get started with writing our basic weather app.
index.html
First, open up www/index.html in your favorite text editor, and replace the default HTML with the following:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Weather</title>
</head>
<body>
<div class="app">
<img src="" id="icon">
<div id="info">Loading...</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
The HTML above sets the title of the page to 'Weather', adds a couple div elements to hold our weather info, and adds the latest version of jQuery to the page.
index.css
Next, open up www/css/index.css in your text editor, and replace the existing CSS with the following:
* {
-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}
body {
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
background-color:#000;
font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
font-size:12px;
height:100%;
margin:0px;
padding:0px;
text-transform:uppercase;
width:100%;
color:#fff;
}
/* Portrait layout (default) */
.app {
position:absolute; /* position in the center of the screen */
left:50%;
top:16%;
height:50px; /* text area height */
width:225px; /* text area width */
text-align:center;
padding:180px 0px 0px 0px; /* image height is 200px (bottom 20px are overlapped with text) */
margin:-115px 0px 0px -112px; /* offset vertical: half of image height and text area height */
/* offset horizontal: half of text area width */
}
/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
.app {
padding:75px 0px 75px 170px; /* padding-top + padding-bottom + text area = image height */
margin:-90px 0px 0px -198px; /* offset vertical: half of image height */
/* offset horizontal: half of image width and text area width */
}
}
#icon, #info {
text-align: center;
}
#icon {
width: 50%
}
h1 {
padding: 0;
margin: 0;
}
The final modification in the www folder we will need to make is to the www/js/index.js file.
var app = {
zip: 10013, // nyc. feel free to change
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
// grap weather info
$.getJSON('http://api.openweathermap.org/data/2.5/find?q=' + app.zip + ',us&units=imperial', function(data) {
var info = $('#info'),
icon = $('#icon'),
result;
// no results. bail
if(data.count < 1) {
info.html('could not load weather');
return;
}
// set result var to first result
result = data.list[0];
// show icon if we have a result
if(result.weather.length > 0) {
icon.attr('src', 'http://openweathermap.org/img/w/' + result.weather[0].icon + '.png');
icon.show();
}
// add info to page
info.html('<h1>' + result.name + '</h1><br>');
info.append(result.main.temp + '° F<br>');
info.append(result.main.humidity + '% Humidity<br>');
info.append(result.wind.speed + ' MPH');
});
}
};
app.initialize();
Now that we have added all of our code to the project, we can test our app.
Text editor powered by tinymce.
