Forum Discussion

irach15's avatar
irach15
Maven
9 years ago

Custom Component: connect to and render a Github distribution

I'm looking for how to create a Custom Component to connect to and render a Github distribution. Think about as I'm new to render from Github :-). I know how to create a custom component in Lithium....
irach15's avatar
irach15
Maven
9 years ago

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.

  • cike's avatar
    cike
    Champion
    9 years ago

    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

    • irach15's avatar
      irach15
      Maven
      9 years ago

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

      • cike's avatar
        cike
        Champion
        9 years ago

        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