Custom Component: connect to and render a Github distribution

Question

I'm looking for how to create a&nbsp;Custom Component&nbsp;to&nbsp;connect to and&nbsp;render a Github distribution.Think about as I'm new to render from Github :-). I know how to create a custom component in Lithium.The component can be:-&nbsp;configured "talk to" a Github distribution/pull, render a link to the bits, possibly provide a tree-control/representation of prior versions, as well as other logical elements to enable a community visitor to see a download and initiate it from community&nbsp;(vs. leaving to visit GitHub) to get &nbsp;posted tool/script...----------------------------------any ideas? Samples?as more details as possible,I have no idea how to start...

cike · Answer

Hi&nbsp;irach15,&nbsp;first you should take a look into the Github API:&nbsp;https://developer.github.com/v3/This is where you can request information of Github repos, commits and so on.&nbsp;To include this Third-Party API to your Lithium community you can use the steps written in the following TKB:&nbsp;http://community.lithium.com/t5/Developers-Knowledge-Base/Using-the-http-client-Context-Object-to-Integrate-with-a-Third/ta-p/91640&nbsp;Regards,Christian

irach15 · Answer

Hi&nbsp;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 &nbsp;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 &nbsp;to get the data I need without getting to EndPoint, is it possible?Thanks.

cike · Answer

Hi&nbsp;irach15,&nbsp;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.&nbsp;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.&nbsp;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 resultsAn endpoint which takes the request from the component and redirects this request to the Github API using the http.client context objectGithub API (These are only the URLs of your requests)&nbsp;Hopefully, my description helps a bit more.&nbsp;Regards,Christian

irach15 · Answer

Hi&nbsp;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&nbsp;guide me how to...I have a js piece:$( document ).ready( function() {
  
  get_watched_repos();
  
  // RESET BUTTON
  $("#reset").click(function()
  {
    $( '#result' ).html( "&lt;h2&gt;Click a button&lt;/h2&gt;" );
  }); // 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 +="&lt;h2&gt;"+ returndata.data.name + "&lt;/h2&gt;";
        html +="&lt;p&gt;Created: " + dateCr_str + "&lt;/p&gt;";
        html +="&lt;h4&gt;" + returndata.data.description + "&lt;/h4&gt;";
        html +="&lt;p&gt;Last updated: " + date_str + "&lt;/p&gt;";
        html +="&lt;p&gt;Owner: " + returndata.data.owner.login + "&lt;/p&gt;";
        html +="&lt;p&gt;Language: " + returndata.data.language + "&lt;/p&gt;";
        html +="&lt;p&gt;URL: " + "&lt;a href='" + returndata.data.owner.html_url + "' target='_blank'&gt;" + returndata.data.owner.html_url + "&lt;/a&gt;" + "&lt;/p&gt;";
       
        $('#result').append( html );
      }
    });
    return false;
  }); // close repo click handler
  
  //CLICK WATCHED BUTTON
  $("#watched").click(function()
   {
    get_watched_repos()
    return false;
   });   //close watched click handler

}); //close document ready&nbsp;html piece:&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;GitHub APIs repos&lt;/title&gt;

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;

&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;

&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;script src="app.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;

&lt;a href="#" id="repo" class="btn"&gt;Repos Info&lt;/a&gt;

&lt;a href="#" id="watched" class="btn"&gt;Repos I'm watching&lt;/a&gt;

&lt;button id="reset" class="btn"&gt;Reset&lt;/button&gt;
&lt;/div&gt;

&lt;div id="result"&gt;

&lt;h2&gt;Github API Example&lt;/h2&gt;

&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;I'm kinda lost here :-( What to call, where to call...

cike · Answer

Hi&nbsp;irach15,&nbsp;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.&nbsp;Tip: While Lithium comes with a bundled jQuery library, it is not necessary to include jQuery via a &lt;script&gt; tag.&nbsp;Regards,Christian

Forum Discussion

Custom Component: connect to and render a Github distribution

Related Content

Delete an SDK @override Component?

What is the component for blog contributors?

Aurora Storybook - Component Library

Help with Editing a Component with Freemarker

Change heading tag in core components

Recent Discussions

How to convert Endpoints to GraphQL queries?

Error message when adding a query to handlebars component (Aurora)

API v1 docs gone since Atlas migration to Aurora

Does anyone know how to change the display title of Custom Fields in Aurora?

Can someone walk me through authenticating and using Postman with Aurora?