ITEC 4610 - Project Development and Portfolio Defense

Gitpod.io - Developing Your Portfolio in the Cloud

Gitpod.io is a cloud-base virtual machine that you create to run your develop and test your portfolio. The virtual machine is not permament...you load it each time you want to work on your projedt. The idea is that you send your Github code to Gitpod. In Gitpod you create/update/run your code. You then save your changes back to Github. The virtual machine is then deleted after a couple of days of inactivity.

Create a Gitpod.io Account

  • You will only have to crete a Gitpod.io account one time
  • Go to https://gitpod.io and Click "Sign Up"
  • On the left, clik "Continue with GitHub"
  • In the middle of the page, again click "Continue with Github"
  • You are now prompted to sign into your Github account
    • Enter your Github Email (your UA Little Rock email)
    • Enter your Github Password (hopefully you saved it)
  • You are now going to authorize Gitpod to access Github. Click the green "Authorize gitpod-io" button.
  • Now your are going to give permissions to Gitpod. We will accept all of them. Click the green "Authorize gitpod-io" button.
  • Now Gitpod has been configured, you can close the Gitpod page

Using Gitpod to Edit Your Repository

  • Login to Github and click on the repository that you want to edit. You will see all of your files.
  • In the browser URL, you will see something like https://github.com/username/portfolio. To startup Gitpod, type "gitpod.io#" in front of the URL, so that it looks like: https://gitpod.io#https://github.com/username/portfolio. Press Enter.
  • You should see the Gitpod machine start up (it takes a few seconds). In a while you will see you code editor page.

Setting Up Your Local Web Server

  • You will need to add a web server to your development system. Normally you will only have to do this once.
  • Click the "extensions" icon, search for "LIve Preview", and install the extention.

Setting Up Your Local Web Server

  • You will need to add a web server to your development system. Normally you will only have to do this once.
  • Click the "extensions" icon, search for "Live Preview", and install the extention.

Editing Your Files

  • Click on the explorer icon to toggle seeing your files.
  • Click on the file name to edit your file. Open index.html, edit the file and add your name.
  • Click on the "hamburger" (three horizontal bars), hover on "File", then click "Save"
  • Note over in the left pane:
    • "u" indicates an unsaved file
    • "m" indicate a file that has been modified

Saving your files back to Github

  • You know that you have unsaved files because the soure control icon had a number
  • Press the source control icon. It will prompt you for some text to comment the upload. Type in "First Files"
  • Press the checkmark (Commit) icon. Click "Yes" to upload all changed files.
  • Finally, press Sync Changes to send all of your changes to Github. Press "OK".
  • Go to Github and look at your portfolio repository. You should be able to see your new files and comments.

What Happens If You Lose Your Gitpod Connection

Things happen. The internet goes down. Your laptop battery dies. Your browser freezes. You close your browswer. Now you have become disconnected from Gitpod, and you did not have a chance to save your work. How to I get my work back?

No worries, you can get your work back.

  • Go to https://gitpod.io. (login if necessary)
  • Click on "Continue with Github"
  • At the top, click on "Workspaces"
  • You will see a list of your workspaces for the last 14 days. The top one is last workspace that you opened.
  • Click on the three verticle dots, then click "Open"
  • You will be reconnected to your workspace.
  • Now would be a good time to save your work to Github

Sharing Your Blackboard Screen

When you are working with the instructor, it is often beneficial to share your desktop so the instructor can see your code. To share your desktop:

  • On your Blackboard screen, click on the fuchsia left arrow located in the lower right of your screen
  • Click the middle icon (box with an arrow)...it is labeled "Share Content"
  • Next, click on "Share Application/Screen"
  • You will see a pop-up. Click "Entire Screen" and you will see a copy of each of your monitors (you will probably have only one
  • Finally, click on the image of the monitor that you want to share. The "Share" button will turn blue and you can click it.
  • You will see a message at the bottom of the screen that says Collaborate is sharing your screen.
  • When you are finished sharing your screen, click "Stop sharing"

Sharing Your Gitpod Application

Sometimes, the instructor may want to see the error messages and be able to change your code. In Gitpod, you have the ability to share your application. As you make changes to your code, the instructor can see the changes. Also, you can see changes to the code made by the instructor. You are literally sharing the same file.

  • At bottom, center of your Gitpod screen, click "Share"
  • You will see a pop-up letting you know you about to share your workspace. Click "Share"
  • At the bottom, center of your screen, "Share" has changed to "Shared"
  • You will see another pop-up that says your workspace has been shared. Click "Copy URL to Clipboard".
  • In a new tab, open your UA Little Rock email, create a message to the instructor, and paste your clipboard containing the Gitpod application URL into the message.
  • When the instructor receives your email, they will connect to your Gitpod application using the URL. Now you can both work and run the same code. You will still need to save your code as needed.