Content
Open APIs
Here is a list of lists of open APIs that might be useful when solving assignment 2.
Using React
Development in React
If you chose to solve assignment 2 using React then there are two options for developing your application. You can either develop your app using a online code editor such as CodeSandbox or run it locally using npm. We strongly recommend using npm as it provides a more comfortable development environment.
How to create React App using NPM
To create a local React project you’ll have to:
- Install Node and NPM
- In the command line type, «npx create-react-app myApp»
- cd my-app
- npm start
- Go to http://localhost:3000/ in your browser, and your site should appear!
Any changes you make to your code will be automatically reflected in localhost as long as npm is running.
How to create React App using CodeSandbox
Using CodeSandbox is simple. Go to https://codesandbox.io, click on Create Sandbox, then React and you’re good to go! Form the right bar you can select existing files and create your own, and install any dependencies you wish. When you’re ready to deliver your solution simply click the download icon in the top header and unzip the folder. To continue working on your CodeSandbox project locally, navigate to the project folder and run « npm install», followed by « npm start». This will install any dependencies located in the node_modules subfolder and start the application.
Delivery
When you’re ready to hand in your assignment, push your app folder to your UiO-Github account and to Devilry as a zip-file . The group teacher will be running your application using npm , so make sure your solution works. If you choose to work with plain JavaScript, the procedure is the same: push the folder containing all your JavaScript, HTML and CSS code to your UiO-Github account and to Devilry as a zip-file .
Git Guide
In Assignment 2 we will require you to deliver the assignment in both Devilry and the UiO Github. The reason for this is that Git will be used during your group assignment later in the
course, and it’s useful to get to know the tool early.
If you have used Github before, this should not be a problem. But if you haven’t, we have made a short guide to help you get started. Github could be a complicated tool to use for some, and it’s useful to go through how it works multiple times, as well as testing it in practice before using it on a real project.
- Make an account on github.uio.no by using your UiO login credentials.
- As a first introduction to Github, we recommend to read and follow this official guide, by using your github.uio.no account.
- After that, you might find it useful to read the uio.no Github guide (only in Norwegian, see Github Handbook for an English substitute). This guide goes more in depth when it comes to generating a ssh-key to authenticate the Github account in the terminal, as well as using Git itself from the terminal.
- If you have followed the above steps, you will probably be good for now. However, as the group project develops, a more thorough understanding of Github might be necessary. Use the guides on github to learn more. If videos are more your cup of tea, here is a good playlist.
- If you have further questions, we recommend asking Google, your fellow students, your group teacher or our Piazza class page.
- As a last personal tip, I find it useful to use an IDE that has some GUI support for Git, like Visual Studio Code.
If you struggle, help is available at the seminar groups.
Good Luck!
Git with SSH
Introduction
Git is a version control system for tracking changes to source code. You work with it by fetching, committing, and pushing changes to a repository. Depending on how the repository is set-up, you might need to authenticate yourself when performing some of these actions. By default, git will prompt you for a username and password when this is the case. In the long run, this might become quite a cumbersome task.
An alternative way of authenticating yourself is to use an SSH-key. By setting up the keys and configuring your local repository to use SSH, all authenticated actions can be performed without needing to specify your username and password. Additionally, if no passphrase is supplied when generating the SSH-key, then the authentication process can happen seemlessly in the background.
What is an SSH-key?
An SSH-key is actually a pair of keys: a public key; and a private key. They are like a keyhole and its matching key. By handing someone your public key, you will later be able to prove your identity to them—authenticate yourself—using your private key. Note that you should never expose your private key to anyone.
How to generate an SSH-key
GitHub has a great guide on how to generate an SSH-key pair. In short, you run a single command in the terminal (Windows users will probably have to run the command in GitBash, which comes installed with git for Windows.):
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
It will prompt you for a location to save the keys. Just press ENTER to accept the default location. Next, you’ll be asked to enter a passphrase. This one is strictly not required, and you can leave it empty (If you don’t leave it empty, git will prompt you for the passphrase on every authenticated action. An SSH-key without a passphrase is still secure, as long as your private key remains a secret.).
The program should generate two files for you: "id_rsa.pub", the public key; and "id_rsa", the private key. They should both be located in the "~/.ssh" directory, if you didn’t change the location.
How to use your SSH-key
Since we’ll be working with the UiO version of GitHub, you’ll need to log in and upload your public key there. Again, GitHub has a guide on how to add a new SSH key to your GitHub account. You can follow the instructions exactly—just make sure you carry them out on UiO GitHub instead.
Finally, you’ll have to configure your local repository to use SSH. The easiest way to do this is just to clone the repository using an SSH link. On UiO GitHub, you can find this link by clicking on the green Clone or download button on a repository site, followed by the link Use SSH if it’s not already the selected option.
What if you already have an SSH-key for GitHub?
Great, then you can skip the generation process and reuse that key. Or if you don’t want to reuse the same key, it is also possible to configure your SSH agent to use different keys for different hosts. You can do that by following these steps:
1. Navigate inside the ".ssh" folder located in your home directory:
cd ~/.ssh
2. Create a file named "config" if it does not already exist:
touch config
3. Open the just created file in any text editor.
4. Add the following content:
Host github.com IdentityFile ~/.ssh/github Host github.uio.no IdentityFile ~/.ssh/uio-github
5. Modify the "IdentityFile" paths to point to your own private keys.
6. Save the file and exit the text editor.
With the above configuration file, git should be able to automatically use the correct SSH-key for both normal GitHub and UiO GitHub.
CORS Cross Origin
Due to restrictions in most browsers, you might get a Cross Origin or CORS error when running your app in localhost and fetching from APIs. This happens because one domain tries to access another in your browser, and is blocked for security reasons (unless the API allows it).
There are different ways to get around this issue. We have listed a few of the options here that can be used in this assignment.
1. React with proxy
In React, you can setup a proxy using npm that will redirect specific URLs through the proxy and therefore circumventing CORS. In package.json, add the following layout:
"proxy": {
"/todos": {
"target": "http://jsonplaceholder.typicode.com",
"changeOrigin": true
},
"/api": {
"target": "https://oslobysykkel.no",
"changeOrigin": true
}
},
This will redirect any API call starting with "/todos" or "/api" to these URLs. Remember that you have to change the app's URL to only contain the last part of the url:
axios.get('/todos')
...
axios.get('/api/v1/stations')
...
If you have two different APIs that both start with '/api' you will have to find a way to separate them. See devServer proxy specs to find out different ways to do that.
When changing the package.json file, you have to restart the app with 'ctrl c' and 'npm start'. (sometimes, running 'npm install' might also be fixing some issues).
2. URL middleman
Another option is to use another URL as a middleman. https://jsonp.afeld.me/ is one alternative.
3. Other
You might find other ways of solving the CORS issue. If you do, thats fine, just make sure that it works properly and works in Google Chrome. Though we recommend using one of the other solutions above.
One example is the Chrome Extension. The solution should involve as little as possible work for us correcting the assignment. If the solution requires any work from the group teachers to correct, the delivery must contain a description of this in a readme file.