Building your Developer Profile – GitHub + UI5

It’s #APIFriday y’all! This week I’m in Virginia, so feeling a little southern ?

A few weeks ago, we looked at incorporating StackOverflow data into a UI5 app that will become our Developer Profile. So what else is important to show off as a developer? Your GitHub repos (and contributions). We’ll keep using DJ Adams as our guinea pig for our profile, but feel free to use yourself as well!

If you didn’t try the StackOverflow #APIFriday blog, you might be a little lost here. Check that out for context, and come on back to add some new features here!

So we have our base profile built and while we wait for some APIs from the SAP Community, we’ll round it out with other developer tools. This week, it’s going to be GitHub.

To get started, make sure you have a GitHub account. If you don’t already have one, where are you versioning/backing up your code base?!?!?!

GitHub is currently undergoing an API update. They’re moving from v3 REST APIs to v4 which will be Graph APIs. If you get a little lost in the documentation, that’s why. But for today, I’ll point you exactly where we want to go.

We’ll start by looking at the Users endpoint. Here we can learn how to get specific information about a user, like their repos.

After reading through the documentation, you’ll see that if you are authenticated, you can already get information about yourself out without specifying a user. To save time, I won’t be going through authentication, but feel free to give it a go if you want. Instead, we can just provide a username to get information about a specific user.

What we are most interested in today for your profile is the User Repos. (As a refresher, repo = repository)

Make sure you have at least one repo in your GitHub profile. Otherwise, this won’t be as fun! Go ahead and try to make a call to the API either via the browser or a tool like Postman. Check out the data structure returned as it’s helpful to know this when building out our app.

Let’s head to our code base for our developer profile. We need to add a new resource for the GitHub API. If you are working in the SAP Web IDE, head to your SAP Cloud Platform account so we can create a new Destination.

In your SAP Cloud Platform cockpit, under Connectivity, click Destinations. Click New Destination.  Provide the following details for the Destination:

Add 2 additional properties:

Click Save.

Now, let’s actually head over to the code.

First we need to update the neo-app.json file. We have to add the new GitHub destination to the routes array. Add the following to your routes array. If you named your destination something else, make sure to reflect that in the name property.

,
    {
      "path": "/github",
      "target": {
        "type": "destination",
        "name": "GitHub"
      },
      "description": "GitHub REST API"
    }

SAVE your changes.

Now we can use the GitHub API in our controller, so let’s head over there.

In your controller file (i.e. Profile.controller.js), we can add a new AJAX call. Load in the GitHub resources by calling the user/____/repos endpoint using your amazing AJAX skills.

Need some help? Here’s a reminder.

$.ajax({
	type: 'GET',
	url: "/github/users/qmacro/repos",
	async: true
}).done(function(results) {

});

Once the results returns, we want to bind it to the view. Create a JSON model to bind to the view, and then set a new model for the view in the done() callback. To make it easier to bind to a table in the view, I created a container to hold the results array in the model.

var repos = new sap.ui.model.json.JSONModel({
	"repos": results
});
that.getView().setModel( repos, "repos");

SAVE your changes.

Last thing to do is to update the view. In the main view file (i.e. Profile.view.xml), I added a new IconTabFilter to the IconTabBar for GitHub. You can repurpose one of the other tabs if you prefer.

<IconTabFilter
	id="iconTabBarGitHub"
	icon="sap-icon://accelerated"
	tooltip="{i18n>iconTabGH}">
	<content>
		<Title text="GitHub Repos" />
	</content>
</IconTabFilter>

For the content of the IconTabFilter, I created a new Fragment. You could also create the table inside the <content> tags. If you want to create a new Fragment, you can copy the StackOverflow fragment we created last time. Then we will make some updates. Our GitHub table will have a new column, and we’ll rename all the columns.

First thing is to update the title of the table. Change the name to GitHub Repos.

<Title id="tableHeaderGH" text="GitHub Repos"/>

NOTE: If you did copy the StackOverflow fragment, make sure to update the ID fields so they are not duplicates of other ideas. This will cause you app to not render.

Now, let’s update the columns. Here are the 4 fields I decided to highlight on the GitHub page: Name + Description, Watchers, Forks, Link.

<columns>
  <Column id="nameColumnGH"  width="500px">
    <Text text="Repo Name" id="nameColumnTitleGH"/>
  </Column>
  <Column id="watchColumnGH" hAlign="Center" >
    <Text text="Watchers" id="watchColumnTitleGH"/>
  </Column>
  <Column id="forkColumnGH" hAlign="Center" >
    <Text text="Forks" id="forkColumnTitleGH"/>
  </Column>
  <Column id="unitNumberColumnGH" hAlign="End" >
    <Text text="Link" id="unitNumberColumnTitleGH"/>
  </Column>
</columns>

And then lastly, we have to bind the fields to the items in the table.

<items>
  <ColumnListItem>
    <cells>
      <Text text="{repos>name}: {repos>description}" />
      <Text text="{repos>watchers}" />
      <Text text="{repos>forks}" />
      <Link target="_blank" href="{repos>html_url}" text="See Repo" />
    </cells>
  </ColumnListItem>
</items>

SAVE your changes.

Let’s go ahead and run our app now!

You will have a new (or updated) tab for GitHub. If you click the tab, you will see a list of your GitHub repos!

Our Developer Profile is getting pretty cool now ? What would you like to see us add next for #APIFriday? Show me what you got, and I’ll feature it for next my blog!