Hi irach15,
you're right the gizmo API is not free anymore. But you can use the basic architecture from the TKB article and replace the gizmo API with the Github API.
I guess your custom component should request the API using AJAX and some other JavaScript magic. I think thats not possible during the Same Origin Policy. This will prevent your custom component from making successful request to third party APIs.
With the http.client context object such third party API request will work, but the object can only be used within endpoints or the initialization scripts.
So as described in the TKB you a 3-tier architecture:
Hopefully, my description helps a bit more.
Regards,
Christian
Hi cike,
when I started implementing the code, I've gotten confused how to connect the pieces, which one - EndPoint, what to call..
It's clear and working if I just do locally :-), not inside Lithium platform.
Cam you guide me how to...
I have a js piece:
$( document ).ready( function() {
get_watched_repos();
// RESET BUTTON
$("#reset").click(function()
{
$( '#result' ).html( "<h2>Click a button</h2>" );
}); // close reset click handler
//CLICK REPO BUTTON
$("#repo").click(function()
{
var html = "";
$( '#result' ).html( "" );
$.ajax({
url:"https://api.github.com/repos/irach15/jquery.linkit",
dataType: "jsonp",
success : function( returndata )
{
$('#result').html("");
var date = new Date(returndata.data.updated_at);
date.toDateString()
var month = date.getMonth() + 1
var day = date.getDate()
var year = date.getFullYear()
date_str = month + "/" + day + "/" + year;
var dateCr = new Date(returndata.data.created_at);
dateCr.toDateString()
var monthCr = dateCr.getMonth() + 1
var dayCr = dateCr.getDate()
var yearCr = dateCr.getFullYear()
dateCr_str = monthCr + "/" + dayCr + "/" + yearCr;
dateCr_str = monthCr + "/" + dayCr + "/" + yearCr;
console.log(returndata);
html +="<h2>"+ returndata.data.name + "</h2>";
html +="<p>Created: " + dateCr_str + "</p>";
html +="<h4>" + returndata.data.description + "</h4>";
html +="<p>Last updated: " + date_str + "</p>";
html +="<p>Owner: " + returndata.data.owner.login + "</p>";
html +="<p>Language: " + returndata.data.language + "</p>";
html +="<p>URL: " + "<a href='" + returndata.data.owner.html_url + "' target='_blank'>" + returndata.data.owner.html_url + "</a>" + "</p>";
$('#result').append( html );
}
});
return false;
}); // close repo click handler
//CLICK WATCHED BUTTON
$("#watched").click(function()
{
get_watched_repos()
return false;
}); //close watched click handler
function get_watched_repos()
{
$( '#result' ).html( "" );
var html = "<h2>Repos I'm watching</h2>";
$.ajax( {
url : "https://api.github.com/users/irach15/subscriptions",
dataType : "jsonp",
success : function ( returndata ) {
$.each( returndata.data, function ( i, item ) {
html += '<li>' +
'<h3><a href="' + this.html_url + '">' + this.name + '</a></h3>' +
'<ul>' +
'<li>' + 'Description: ' + this.description + '</li>' +
'<li>' + 'Language: ' + this.language + '</li>' +
'<li>' + 'Updated: ' + this.updated_at + '</li>' +
//'<li>' + 'Owner: ' + this.owner.login + '</li>' +
'</ul>' +
'</li>';
} );
$( '#result' ).append( html );
} // close success handler
});
}
}); //close document readyhtml piece:
<html>
<head>
<meta charset="UTF-8">
<title>GitHub APIs repos</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div>
<a href="#" id="repo" class="btn">Repos Info</a>
<a href="#" id="watched" class="btn">Repos I'm watching</a>
<button id="reset" class="btn">Reset</button>
</div>
<div id="result">
<h2>Github API Example</h2>
</div>
</body>
</html>I'm kinda lost here :-( What to call, where to call...
