Step 1: Using GitHub to Access/Modify an Application
In this section, you will navigate to GitHub Enterprise and access the code for your application. IBM has GitHub Enterprise which provides the social coding experience that developers love. In most development environments,
there’s a lot of collaboration involved regarding code and changes to code. Enabling a team of developers to manage these changes and subsequent versions requires some form of source control, or git.
In this lab, you will gain some insight on the process, and even make small code changes that will render your application unique.
Reference:
Indicated as text with light blue background.
Example:
It's important to read each step carefully and in order.
Skipping sections, reading too fast, or not clicking to read
may result in incomplete learning.
✅ Review the drone application repository
✅ Make a configuration change
✅ Commit change to the master branch
Step 1 In Progress ☑ Access GitHub Enterprise ☑ Review the drone application repository ☑ Make a configuration change ☑ Commit change to the master branch |
→ |
Step 2 ☑ Access IBM Cloud ☑ Access RedHat OpenShift cluster ☑ Open RedHat OpenShift web console ☑ Explore OpenShift web console |
→ |
Step 3 ☑ Add an application to OpenShift ☑ Link OpenShift to GitHub repository ☑ Generate token and create application |
→ |
Step 4 ☑ Explore topology ☑ Check build status ☑ Access deployed application |
→ |
Step 5 ☑ Explore user interface ☑ Consider industry use cases |
1.1 Access GitHub Enterprise
The use of GitHub in this project is important because it allows developers to track code changes and version deployments across the entire project. From specific features to full production releases, GitHub can be used for change and management control.
Like logging into IBM Verse and IBM Cloud, you should be able to log into GitHub with your w3id. GitHub Enterprise is where the repository of application’s code resides. To learn more about how IBM uses GitHub Enterprise, visit https://www.ibm.com/garage/method/practices/culture/tool_github.
In your browser window, switch to the GitHub tab.
(Repo for the IEL 2020 Lab 1) |
1.2 Review the drone application repository
Let’s review the code repository’s structure. Every application has source code which is stored in a repository. A repository contains a set of files, as well as the history of changes made to those files.
Repositories can contain folders and files, images, videos, spreadsheets, and data sets – anything your project needs. At the top level, you notice public and src folders, followed by a set of files. These files typically contain a README.md and can also include licensing info, contributors, deployment configuration, etc. You may even notice that the README.md is open for viewing below the files/folders, where you can learn some facts about this application.
The public folder often contains the HTML file so you can tweak it, for example, to set the page title. You can also add other assets to the public folder, as is the case for this lab repository, where there are some configuration files that allow customization of certain aspects of the user interface. Visit https://github.com/kmindi/special-files-in-repository-root/blob/master/README.md for more information on typical files you’d find in any repository and https://create-react-app.dev/docs/folder-structure/ to learn more about the use of the public and src folder in React development.
Find the public folder (see image below). Within this directory, you will be able to see config.json, a JSON file where certain UI elements can be changed. This data structure was designed to be easily edited and will dynamically change the UI. You will edit the code and deploy that code change soon.
Once in the public folder, you should see config.json file.
GitHub allows users to see code directly in the webpage and even interact with it. You can create, edit, move, and delete files on a GitHub repository from the webpage. GitHub has support for navigation of code for many programming languages like Python, Java, JavaScript, and more. Visit https://help.github.com/en/github/managing-files-in-a-repository/managing-files-on-github to learn about all the capabilities of GitHub and what you can do with your code.
1.3 Make a configuration change
Many developers do not edit code on GitHub directly. Instead, they use a range of different Integrated Development Environments (IDEs) and code editors like Visual Studio Code, XCode, Eclipse, etc. Then, developers use tools like GitHub Desktop, SourceTree or git commands on a command line to push code changes and commits to the remote code repository. However, for this lab, you will edit directly within the GitHub web interface to avoid installing these programs.
Let’s edit the code in the config.json file, your application’s configuration file, which adds customization to your application’s user interface.
In some later example screenshots, you might see that the word "Walkthrough" was added in front of “Remote Operations Console”. Any name or phrase (like the name of your pet, your name, etc.) are options for ConsoleDisplayName. 🙂 For reference, you will later see this phrase at the top of your Remote Drone Dashboard application.
Be careful! Any value you change for a field should contain only alphanumeric characters and/or spaces. Keep your values to under 16 characters total, but at least one character.
You may notice that there are other fields/values also shown in the config.json editor. These fields represent the physical drones that may be available for a given user to operate in their remote drone application console. In the default code, you notice that there are three drones available.
You may edit the values for the fields “friendly_name” and “drone_serial_no” as well (the bolded values below), and the changes will later be reflected in the application.
"friendly_name": "Lab User Drone",
"drone_serial_no": "A12345"
"friendly_name": "Damage Inspection Drone",
"drone_serial_no": "A123456"
"friendly_name": "Surveillance Drone",
"drone_serial_no": "A123457”
NOTE: It is not necessary to change these fields for the lab - but you can if you’d like to.
1.4 Commit change to the master branch
Currently, you are editing directly on the master branch. The master branch is the default branch that your repository starts out with. As you continuously edit your code on your branch, those changes are reflected as commits. Commits include a summary message of what was changed, along with the files that were changed as a result of edited code.
A situation could occur when you want to create different versions of your application - for example, when adding a new feature to the current code, you do not want to interfere with the version that others may be working on. Creating these versions are called branches – you could create a new_feature branch that is based on the master branch. Once satisfied with code changes in the new branch, the new_feature branch could then be merged into the master branch for all collaborators to use as their working copy. Visit https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell for more information on git branch structure and architecture.
You will be committing your change you just made to the master branch.
Once you commit your changes, the page will refresh. In order to be prepared for the coming steps, make sure your GitHub tab is at the root level.
You have now completed Step 1 by viewing the root level of your repository with your latest commit. It is ready for the remaining steps of the lab.
Finish Step 1
You successfully made a unique change to your application using relevant development skills and utilizing GitHub.
✅ Review the drone application repository
✅ Make a configuration change
✅ Commit change to the master branch
In the next steps, you will move onto deploying your remote drone dashboard application with RedHat OpenShift through IBM Cloud. In Step 2, you’ll learn about these services, access your project in a cluster, and explore the OpenShift web console.
Step 1 Completed ✅ ☑ Access GitHub Enterprise ☑ Review the drone application repository ☑ Make a configuration change ☑ Commit change to the master branch |
→ |
Step 2 Next ☑ Access IBM Cloud ☑ Access RedHat OpenShift cluster ☑ Open RedHat OpenShift web console ☑ Explore OpenShift web console |
→ |
Step 3 ☑ Add an application to OpenShift ☑ Link OpenShift to GitHub repository ☑ Generate token and create application |
→ |
Step 4 ☑ Explore topology ☑ Check build status ☑ Access deployed application |
→ |
Step 5 ☑ Explore user interface ☑ Consider industry use cases |