Φτιάχνουμε ένα Weather app σε AngularJs
Επειδη στο επομενο update του εταιρικου website θα συμπεριλαβουμε και το AngularJS αυτες τις μερες αφιερωνω λιγο χρονο στο να κατανοησω αυτο το framework για το οποιο τοσοι πολυ μιλουν. Η αληθεια ειναι οτι εχει αρκετα θετικα στοιχεια και το οτι μας ερχεται απο το Google team του δινει bonus points. Οπως στη jQuery εχουμε την method .getJson() ετσι και στο angularjs θα βρουμε την $http.json ή την $http.jsonp που θα δουμε παρακατω. Για οσους δεν γνωριζουν η τεχνικη του jsonp ειναι ενα trick για να αποφευγουμε τον περιορισμο CORS. Θελωντας να πειραματιστω εφτιαξα ενα μικρο application το οποιο πρωτα βρισκει την ip του χρηστη και επειτα την περναει σε ενα weather api. Τα στοιχεια που μας επιστρεφει το api μετα τα χρησιμοποιω για παρουσιασω την κατασταση του καιρου την τρεχουσα μερα αλλα και προβλεψη των 2 επομενων ημερων. Παρακατω ειναι ενα screenshot του app που δειχνει τον καιρο εδω που βρισκομαι… Αυτο ειναι που θα φτιαξουμε. Στυλιστικα βεβαια μην με κρινετε, δεν τα παω και πολυ καλα με συνδιασμους χρωματων, γραμματοσειρων κλπ.
Για αρχη λοιπον δημιουργειστε δωρεαν τον δικο σας λογαριασμο στο weatherworldonline.com. Μολις ολοκληρωσετε την εγγραφη θα σας δωθει ενα key το οποιο θα χρησιμοποιουμε οταν κανουμε request. To οριο των request ειναι 500 ανα 24ωρο , 3 ανα δευτερολεπτο. Μεσα απο το control panel του account σας μπορειτε να ρυθμισετε διαφορα settings οπως ποσες ημερες θελετε forecast κλπ. Σημαντικο ειναι να ρυθμισετε το api να επιστρεφει σε json format.
Αυτα για να παρουμε τις πληροφοριες του καιρου, ομως οπως θα ειδατε πρεπει να περασουμε στο api καποιες πληροφοριες οπως την τοποθεσια που θελουμε να μαθουμε τον καιρο. Το συγκεκριμενο api δεχεται εκτος απο πολη και ip, οποτε μεσω παλι μιας δωρεαν υπηρεσιας, του freegeoip.net μπορουμε να μαθουμε την ip του χρηστη και να την περασουμε στο request του weather api. Συνοψιζοντας λοιπον αυτο που θα κανουμε ειναι οταν ο καποιος επισκεπτεται την σελιδα μας μαθαινουμε την ip του και την περναμε σε ενα weather api. Αυτο μας επιστρεφει αποτελεσματα σε json φορματ τα οποια χρησιμοποιουμε για να δημιουργησουμε τον html κωδικα.
Στο συγκεκριμενο app επισης προσθεσα το Bootstrap καθως και την jQuery για ευκολια. Κατεβαστε λοιπον το angularjs , την jquery και το bootstrap και δημιουργειστε/οργανωστε τους φακελους σας καπως ετσι:
Οπως βλεπετε υπαρχει και ενα folder με εικονες. Αυτες τις χρησιμοποιω για background στα div. Σιγουρα χρειαζονται περισσοτερες απλα για τις δοκιμες εβαλα μονο αυτες προσωρινα. Ας ξεκινησουμε λοιπον με τον controller (το αρχειο controller.js) που στην ουσια κανει την περισσοτερη δουλεια:
function weather($scope,$http) {
var url = "http://freegeoip.net/json/?callback=JSON_CALLBACK";
$http.jsonp(url).success(function (data) {
console.log(data);
var ip = data.ip;
console.log(ip);
var urlw = "http://api.worldweatheronline.com/free/v1/weather.ashx?q=" + ip + "&format=json&num_of_days=2&callback=JSON_CALLBACK&key=2c4sjqp899stjg69yys3epxn";
$http.jsonp(urlw).success(function (dataw) {
console.log(dataw);
$scope.freegeoip = dataw.data.current_condition[0];
var forecast = [];
for (var i = 0; i < 2; i++) {
forecast.push(dataw.data.weather[i]);
}
$scope.forecast = forecast;
});
});
}
Επειδη το κεφαλαιο AngularJS ειναι αρκετα μεγαλο θα σας παραπεμψω σε link που εξηγουν αναλυτικα τα σημαντικοτερα στοιχεια των παραπανω σειρων. Δειτε τι ειναι το $scope , το service $http.jsonp και διαβαστε αναλυτικοτερα για το Jsonp και τις callback functions.
Kαι ο html κωδικας ειναι αυτος:
<html ng-app="">
<head>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<title></title>
</head>
<body ng-controller="weather">
<div style="font-family: 'Lobster';" id="currentW" class="span2 weatherDiv pagination-centered">
<h3 class="gradient">Today</h3>
<h4 class="wFonts" id="wDesc">{{freegeoip.weatherDesc[0].value}}</h4><br />
<h4><strong>Temperature: {{freegeoip.temp_C}}</strong></h4><br/>
<span>Wind Direction: {{freegeoip.winddir16Point}}</span><br/>
<span>Wind Speed(km): {{freegeoip.windspeedKmph}}</span>
</div>
<div style="font-family: 'Lobster';" ng-repeat="day in forecast" class="span2 weatherDiv pagination-centered">
<h3 class="gradient">{{day.date}}</h3>
<h4 class="wFonts" id=fday{{$index}}>{{day.weatherDesc[0].value}}</h4><br />
<h4><strong>Temperature: {{day.tempMaxC}} - {{day.tempMinC}}</strong></h4><br/>
<span>Wind Direction: {{day.winddir16Point}}</span><br/>
<span>Wind Speed(km): {{day.windspeedKmph}}</span>
</div>
<script src="js/angular.min.js"></script>
<script src="js/controller.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function () {
setTimeout(function() {
var t = $('#wDesc').text().split(" ").join("");
$('#currentW').addClass(t);
$('h4[id^="fday"]').each(function(i, obj) {
var x = $(this).text().split(" ").join("");
$(this).parent().addClass(x);
});
}, 1000);
});
</script>
</body>
</html>
Εαν εχετε κατανοησει το $scope τοτε δεν θα πρεπει να εχετε δυσκολια στην κατανοηση των παραπανω. Ισως θα παραξευνευτηκατε με το ng-repeat. Διαβαστε περισσοτερα εδω. Επισης ενα φρεσκαρισμα της $.each() ειναι χρησιμο.
Και τελος καποιες εξτρα classes που προσθεσα στο bootstrap.css. Δεν ειναι ολες οσες χρειαζονται, αλλα για τις δοκιμες αρκουν.
.weatherDiv{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:solid 1px grey;
padding: 5px;
margin: 20px;
}
.PartlyCloudy {
background-image: url('../img/Partly Cloudy.jpg');
}
.Sunny {
background-image: url('../img/Sunny.jpg');
}
.Cloudy {
background-image: url('../img/Cloudy.jpg');
}
.Lightdrizzle {
background-image: url('../img/Light drizzle.jpg');
}
.Patchylightrain {
background-image: url('../img/Patchy light rain.jpg');
}
.wFonts
{
font-family: 'Lobster', helvetica, arial;
font-size: 18px;
color: rgba(0,0,0,0.6);
text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}
.gradient{
font-family: 'Lobster', helvetica, arial;
font-size: 20px;
font-weight: 600;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));
}
Aν θελετε κατεβαστε ολοκληρο το app και πειραματιστειτε(μην ξεχασετε να βαλετε το δικο σας key στο αρχειο controller.js). Have fun!