Custom Component: connect to and render a Github distribution

Hi irach15,

first you should take a look into the Github API: https://developer.github.com/v3/

This is where you can request information of Github repos, commits and so on.

To include this Third-Party API to your Lithium community you can use the steps written in the following TKB:

http://community.lithium.com/t5/Developers-Knowledge-Base/Using-the-http-client-Context-Object-to-Integrate-with-a-Third/ta-p/91640

Regards,

Christian

Hi cike,

I've seen this implementation for a survey, which is not working bz it's not free anymore to play with.

Also,

I'm  not sure it works for us cz we don't need an EndPoint page to be created. (or this is the only way to get it?....)

We need a custom component, showing how many people downloaded files and what files from GitHub aka repository to show.

Any close enough ideas how to do that?

........................

I'm actually thinking to try GitHub APIs  to get the data I need without getting to EndPoint, is it possible?

Thanks.

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:

• A custom component which sends an AJAX request to an endpoint and renders the results
• An endpoint which takes the request from the component and redirects this request to the Github API using the http.client context object
• Github API (These are only the URLs of your requests)

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 ready

 html 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...

Hi irach15,

from a birds view the source code looks well. Did you receive some error messages on your JS console when using the code within the Lithium platform?

Maybe you could add some more information what went wrong. As you said, locally everything works fine.

Tip: While Lithium comes with a bundled jQuery library, it is not necessary to include jQuery via a <script> tag.

Regards,

Christian