In this series, we will work through creating a basic LoopBack 4 application that exposes REST APIs; calls out to GitHub APIs through octokat.js (a GitHub API client) to get the number of stargazers on a user-specified GitHub organization and repository; and persists the data into a Cloudant database.

Overview of the LoopBack GitHub app

The series is organized as follows:

Part 1: Scaffolding a LoopBack 4 application and creating REST API

Part 2: Adding logic to a controller to talk to GitHub API

Part 3: Persisting data to Cloudant database using DataSource and Repository

Before You Begin

Make sure you have Node.js v8 or higher installed. Since we will be using the LoopBack 4 CLI to get started, install @loopback/cli as well.

Run the following command:

npm i -g @loopback/cli

Let’s Get Started

Step 1: Scaffolding a LB4 Application

Use lb4 command and follow the prompts to create a new LB4 application.

$ lb4
? Project name: loopback4-github-app
? Project description: LoopBack4 application that calls GitHub for data
? Project root directory: loopback-4-github-app
? Application class name: GitHubApplication
? Select project build settings:  Enable tslint, Enable prettier, Enable mocha, Enable loopbackBuild

<<some more output>>
 
Application loopback4-github-app is now created in loopback-4-github-app.

Next steps:

$ cd loopback-4-github-app
$ npm start

Follow the next steps above and try out the http://127.0.0.1:3000/ping endpoint, you’ll get something like:

{  
   "greeting":"Hello from LoopBack",
   "date":"2018-03-19T17:22:16.159Z",
   "url":"/ping",
   "headers":{  
     ...
   }
}

Step 2: Generating the Controller for Creating REST APIs

A Controller is where you implement the business logic. We are going to generate the controller for our REST endpoint /repo/{org}/{repo}/stars, which will get the number of stargazers for the user-specified GitHub organization and repository.

Run the lb4 controller command as follows:

$ lb4 controller
? Controller class name: GHRepo
? What kind of controller would you like to generate? Empty Controller
   create src/controllers/gh-repo.controller.ts

Note: the class name will be suffixed with Controller.

Step 3: Create REST Endpoints in GHRepoController

Go to GHRepoController (in controllers\gh-repo.controller.ts) that was generated in the previous step, and add the following function that corresponds to the GET /repo/{org}/{repo}/stars endpoint:

@get('/repo/{org}/{repo}/stars') 
getRepoStargazers(
  @param.path.string('org') org: string,
  @param.path.string('repo') repo: string
): string {
  //Add some simple logic here for now to test out the API
  console.log('org/repo', org, repo);
  return '100';
}

You also need to add the import statement below:

import {get, param} from "@loopback/openapi-v3";

Step 4: Testing the REST Endpoint

Before adding in more logic, let’s test the endpoint we’ve just created. Run the command npm start to start the application.

Go to a browser and type:

http://localhost:3000/swagger-ui

This will bring you to the API explorer where you can test your API. Try out the newly added REST API Under GHRepoController.

Screenshot of ghRepoController

The response body should be 100 regardless of the value of the input parameters.

Tip: If you want to look at the corresponding OpenAPI specification, type in the browser:

http://localhost:3000/openapi.json

What’s Next

In part 2, we will add more logic in GHRepoController to talk to GitHub APIs through octokat.js, a GitHub API client.

Code Repository

The code for this GitHub example application can be found here. The part1 branch has everything accomplished in this article.

git clone https://github.com/dhmlau/loopback4-github-app.git
git checkout part1

Call for Action

LoopBack’s future success counts on you. We appreciate your continuous support and engagement to make LoopBack even better and meaningful for your API creation experience. Please join us and help the project by: