If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

What are we going to build?

In this tutorial, you’ll learn how to integrate GitHub, the best place to share code with friends, co-workers, classmates, and total strangers, into your mobile app. Over three million people use GitHub to build amazing things together.

Our GitHub API Plug-in can make it easier for you to use the GitHub API. It comes with a ready-to-run sample application.

The ready-to-run app makes it very easy to start using the GitHub API. To add the plug-in:

  1. From the builder, select CREATE NEW > From Plug-in.
  2. Find the Programming section, then check “GitHub API”.
  3. Click “Import selected plug-ins”.
  4. You’ll be asked whether you want to set the file containing API keys used by the service. Check the box and click “Apply settings”:
    WarningMessage

After applying settings, go to Project > App Settings > General, set the default start page to GitHub_Search and check the “Render all pages in one HTML file” checkbox:
AppSettings

To use the API, you also need to have a GitHub account (https://github.com/users). Under your account, you should create an application to get your client_id and client_secret keys. You also have to specify the GitHub_Search page URL as the callback URL:
GitHub

If you’re using libraries version 3.0 or higher, the URL will look as following:

You should set your client_id and client_secret keys in Services>GitHub_settings:Services_GitHubSettings

Application

When the application starts, you’re directed to the login page. After a successful login, you’ll see a search page where you can search for users, repositories and gists:
SearchPage

You can click any user to view his/her repositories, gists, followers and users who are followed by him/her. To view your own repositories, click the “My Git” button:
MyGit

If you tap the repository you’re interested in, you’ll see a tree of folders and files:
Repo

You can open any file available:
FileTypes

On the Gists tab, you’ll see a list of your gists (if any), and if you tap any of them, you’ll see its content and comments.

Under the hood

Services

Let’s have a look at one of the services used in the GitHub plugin:

  • The GitHub_getRepos service:

The GitHub_getRepos service gets all repositories. This service doesn’t have input parameters.
Services_GitHubgerRepos

The service can be instantly tested, and the response structure can be created automatically, based on the returned response (JSON):ServiceTest

Response parameters:ResponseParams

Other services are defined in a similar manner.

Mapping the UI to the Services

The final part of the app design is to map the service parameters to the UI components.

Here’s an example showing the Response parameters mapped to the output components:Mapping

JavaScript

All the custom functionality can be found in JavaScript/GitHub_helpers.