We are building Github profile finder, in our app, we have a search bar and based on the name we supply. App will search following information on that particular user
- User profile information and avatar
- Follower info
- Github repository info
Important: As from Angular point, we are learning ngIf to control the display, at first we set user to false, as this result our page is blank with only search bar and once we type any character it will set user to that character and find information on that user , as we can see on image above.
What we are learning
- Retrieving Github API through HTTP get method .
- Making service provider
- Importing form module for searching information through form
Step 1: Getting Github Client Id
To use the Github API, we need to get a client id and client secret, that we will get from github.com/settgins/developer and register for a new application.
Step 2: Setting the App in Angular
ng new githubse
npm install (install the dependency)
Check on browser on url localhost:4200
Step 3: Creating Profile component
Create a folder components inside the app folder and add new two new files as profile.component.ts and profile.component.html. Inside the profile.component.ts add the following code [app/components/profile.component.ts]
We are importing the GithubService service provider and calling its method through the instance of GithubService and subscribing the observable which we will define in step 5. What we are doing.
- Calling Github user information through GithubService method getUser()
- Retrieving user repository through getRepos()
- Search different user through updating or change new username through updateUser() of GithubService
Step 4: Add the view for profile.component.html, add the following code in [app/components/profile.component.html]. In this code, we add a search bar to retrieve Github user information like profile, avatar, followers and repository details information.
In app/app.component.ts we will replace following code
To new code, where we add our custom tag profile and wrap in container div and add nav bar code from bootstrap starter code and add the provider as in highlight in the code
Step 5: Creating Service for Github API
We will create Github services so that it can interact with Github API. In the app, folder creates a folder called services, inside this folder add a new file called app/services/github.service.ts. Add the following code
In above code,
- we are retrieving user information in JSON format through HTTP module and we have to supply client ID and secret key.
- Import injectable so we can create dependency on service into whatever component we need.
- Import rxjs, observable with the reactive extension will return the response to observable, then we can subscribe to the observable component to display the information.
Step 6: Define user interface through Bootstrap
Add the following link in src/index.html, this is not best practices.
In app.modules.ts, we have to define imported module, the custom component which we had used in our application.