Boήθεια για λειτουργία ΑPIkey μέσω JS σε HTML

[TheDevGirl]

Καλησπέρα!Χαρά μου που σας βρήκα και βρίσκομαι στην κοινότητα!!Αυτή είναι η πρώτη μου δημοσίευση 

Μου ανατέθηκε λοιπόν η εξής εργασία : ένα weather report site,το οποίο θα γραφτεί σε Html/Css/Javascript.

Μέσα στο αρχείο.js θα παίρνω δεδομένα από openweathermap.org όπου και μου δίνεται ένα API key.

1.Δημιουργήσα το layout με Html και το παραμετροποιήσα με Css στο DW.

2.Πήρα ένα API key από το παραπάνω site και για να τσεκάρω εαν δουλεύει το έβαλα στο url μαζί με άλλα στοιχεία

3.η διεύθυνση εμφανίζει τα αποτέλεσματα σε Json.

4.κατέβασα από λοιπόν από το chrome την extension  : json formatter.

(από εδώ και πέρα ξεκινάει το μπέρδεμα)

5.Μέσα στην html έχω δημιουργήσει ένα script όπου μέσω AJAX καλώ τα δεδομένα της javascript συνάρτησης μου

6.Tώρα στο scriptaki μέσα:

             a)Xρησιμοποιώ το ip-api (βρίσκει την location μέσω ip) ως εξής:

                      $.getJSON('http://ip-api.com/json', function(ipAPI) {
                      var latitude = ipAPI.lat;
                      var longitude = ipAPI.lon; });

 

                b)Με αυτή τη συνάρτηση καλώ τα δεδομένα του openweather με βάση το γεωγραφικό πλάτος και μήκος

                       $.getJSON('http://api.openweathermap.org/data/2.5/weather?id=' +
                       latitude + '&lon=' + longitude + '&APPID=0d1dd3486d3e7e445990f1d4b669e825',
                       function(ow) {
                        });

 

Τα ερωτήματα μου είναι τα εξής:

1.Δεν έχω πολλές γνώσεις στην javascript αλλά το scriptaki πρέπει να το συνεχίσω έαν θέλω να δουλέψει.(true or false);

2.Eνώ έχω wamp server γιατί δεν μπορώ να τεστάρω?

3.Από την στιγμή που δεν μπορώ να τεστάρω το scriptaki μέσα στην html είναι ο σωστός τρόπος για να πάρω τα δεδομένα?

Ρωτάω γιατί παρακολούθησα και ένα tutorial όπου και χρησιμοποιούν php. 

 

Οποιαδήποτε καθοδήση προς το που θα πρέπει να κινηθώ είναι ευπρόσδεκτη γιατί έχω μπερδεφτεί! (εαν και φαίνεται κάτι πολύ απλό να κάνει κάποιος)

Σας ευχαριστώ πολύ!

 

 

[unseen]

Καλησπερα,

 

Τα λες λιγο μπερδεμενα και δεν καταλαβαινω ακριβως που ειναι το προβλημα γι'αυτο αν σου ειναι ευκολο ανεβασε το κωδικα σου στο https://jsfiddle.net/  να δω τι εχεις κανει μεχρι στιγμης.

 

Php δεν σου χρειαζεται.  To παρακατω δουλευει.

 

<div class="weatherModule">
  <p class="currentConditions"></p>
  <div class="currentIcon"></div>
</div>

 

$.ajax({
  url: 'http://api.wunderground.com/api/36b799dc821d5836/conditions/q/GR/Thessaloniki.json',
  dataType: 'jsonp',
  data: 'url',
  success: function(data) {
    var icon, index, result, results, temp, weather;
    results = [];
    for (index in data) {
      result = data[index];
      temp = (Math.round(result.temp_f) - 32)* 5 / 9;
      icon = result.icon_url;
      weather = result.weather;
      $('p.currentConditions').html("Currently  " + temp.toFixed(2) + " ° C and " + weather);
      results.push($('div.currentIcon').html("<img src='" + icon + "' >"));
    }
    return results;
  }
});

 

[TheDevGirl]

Mπερδεμένα τα έχω στο κεφάλι μου ακόμα..τώρα μαθαίνω μέσα από tutorials & examples.

https://jsfiddle.net/TheDevGirl/87Lbsymy/ αυτό είναι το link που μου ζήτησες.

Τουλάχιστον προσπαθώ αυτό μετράει! 

[unseen]

12 hours ago, TheDevGirl said:

Mπερδεμένα τα έχω στο κεφάλι μου ακόμα..τώρα μαθαίνω μέσα από tutorials & examples.

https://jsfiddle.net/TheDevGirl/87Lbsymy/ αυτό είναι το link που μου ζήτησες.

Τουλάχιστον προσπαθώ αυτό μετράει! 

 

Και βεβαια η προσπαθεια μετραει

 

Λοιπον σου λεω εν τροχαδι τι ηταν λαθος και τι να διαβασεις για να αποφυγεις στο μελλον παρομοια προβληματα

 

1. Η μεθοδος ajax__get_json δεν χρειαζονταν. Δεν την χρησιμοποιουσες και πουθενα αλλωστε. Κωδικα που δεν χρησιμοποιουμε τον κανουμε comment με ενα //TODO, //FIX αν υπαρχει λογος η τον σβηνουμε τελειως.

2. Προσοχη στις αγκυλες,παρενθεσεις. Μπορεις να χρησιμοποιεις ενα καλο IDE που θα σε βοηθησει να βλεπεις αμεσως που ειναι το προβλημα. Προτεινω atom.io, sublime, visual code

3. Προσοχη στο που δημιουργεις τις μεταβλητες σου. Αν τις φτιαχνεις μεσα σε functions τοτε δεν ειναι προσβασιμες εκτος. Διαβασε περισσοτερο για scopes. https://github.com/getify/You-Dont-Know-JS/tree/master/scope%20%26%20closures 

4. Οταν κανεις πολλαπλα request θα πρεπει να περιμενεις τις απαντησεις πριν τις χρησιμοποιησεις καπου. Αυτο γινεται στην jQuery με τo defered object. Θα δεις προσθεσα στο κωδικα σου ενα .done Αναλυτικα εδω: http://api.jquery.com/category/deferred-object/

5. Το jsfiddle δεν αφηνει να εισαγεις http content επειδη ειναι https. Επισης δεν εκανες load την jQuery.  

 

Εδω το διορθωμενο http://codepen.io/anon/pen/BKyYdG 

 

Καλο ξεκινημα!

 

[TheDevGirl]

Aπ΄ότι φαίνεται έχω  πολύ διάβασμα μπροστά μου και ταυτόχρονα να δημιουργώ.Μόνο στην πράξη εμπεδώνεται η συνάρτηση  

Εκτός απο javascript , φαίνεται και απαραίτητη η jquery!!

To notepad++ και το dreamweaver που έχω κατεβάσει δεν ενδείκνυνται?

Θα προσθέσω μέγιστη και ελάχιστη θερμοκρασία και θα το ανεβάσω

Ευχαριστώ πάρα πολύ για όλα τα λινκ!!