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”:
   

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:

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:

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

1	https://appery.io/app/view/<YOUR_APPERY.IO_APP_ID>/app/GitHub_Search.html

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

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:

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:

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

You can open any file available:

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.

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

Response parameters:

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:

JavaScript

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