codingtrain / intro-to-data-apis-js Goto Github PK

• Make another graph but with your own data
• Make a graph with p5.js instead of chart.js
• Make a graph with multiple lines on the same chart(add temperature data for the Northern Hemisphere & the Southern Hemisphere)
• Styling the chart differently(Don't think this one is necessary)

• Have size of international space station icon size change with zoom level
• using p5.js and Mappa.js to make your own custom ISS representation without leaflet

From @joeyklee!

• Maybe one thing to note is maybe to change the file name to remove the crazy characters in the csv file name. It seems to be working fine, but standardizing file names is helpful for the future I guess.

Oftentimes, an api will be available in REST format without a Stream option, so you have to query the REST api every so often to get updates from it. It would be nice to see this included - working around rate limits and such in order to convert a REST api into your own Stream to use.

Hi @shiffman!

I made an updated version of the weather application for module 3 that makes use of the node environment variables using .env and making use of a config.js file to take care of things like PORT and USERNAME and PASSWORD for adding a simple authentication layer - similar to using an API key. We can use the version without authentication, but just wanted to bring this to your attention in case this makes sense for you.

See: https://github.com/joeyklee/the-weather-here/tree/with-authentication

Post with fetch() does not work on my localhost on both Apple and Windows.
This line of code const response = await fetch("/api", options); throws a 405 error saying that the method is not allowed. So, no data is sent to the server. Any ideas?
Here is the larger snippet let lat, lon; const button = document.getElementById("submit"); button.addEventListener("click", async (event) => { const data = { lat, lon }; const options = { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(data), }; const response = await fetch("/api", options); const json = await response.json(); console.log(json); });

#60

From our discussion here -- #12 (comment) -- and here -- #12 (comment)

We should consider a few things:

1. Making a "classic" chart using a charting library
2. Making a chart with p5 w/ all things considered (e.g. axes, labels, etc)

Some charting library examples:

• https://naver.github.io/billboard.js/
• https://eventbrite.github.io/britecharts/
• https://www.chartjs.org/

The altitude and velocity are in kilometers when returned with the Latitude and Longitude for the ISS position.

{ "name": "iss", "id": 25544, "latitude": -48.454232517203, "longitude": 139.35666682131, "altitude": 438.82147463579, "velocity": 27526.889664381, "visibility": "daylight", "footprint": 4602.0052932888, "timestamp": 1678852751, "daynum": 2460018.6660995, "solar_lat": -2.259260610592, "solar_lon": 122.47565276751, "units": "kilometers" }

1d13325

I copied this over from your coding topics issues as I had added this there by mistake.

This is a suggestion for your new Intro to Data APIs playlist. This could be a good first video because of how simple the API is. This API returns the GPS location of the ISS in real time. This is useful for tracking because the ISS's boosts itself into a higher orbit every few weeks to fight crashing back to earth. This causes the orbital period to change making future location predictions invalid.

http://api.open-notify.org/iss-now.json

The video 3-4 needs a complete README file.

Mentioned at 11:00 of video 3-4 in playlist

• Using a different CSV dataset and log the data in the console.

It would be nice to have a lesson about designing and maybe creating an API. Maybe with some examples of good and bad APIs.

One example you could use would be a fictional API for a stock keeping service, that would allow for things like checking and updating an amount of a product, adding and removing products etc.

An example of a good API definition

GET /api/v1/storages/by-id/[storage id]/products #lists all products in a specific storage. Results: 200 and JSON array of products or 404 if no storage with id [storage id] exists
GET /api/v1/storages/by-id/[storage id]/products/by-id/[product id] #shows all information about a specific product in a specific storage. Results: 200 and JSON object describing the product or 404 if no storage or product with a specified id exists
# Similar thing could be done for using just the name of a storage instead of and id by changing by-id to by-name
POST /api/v1/storages/new # creates a new storage. Request body: JSON object describing the new storage (things like name, location etc.). Results: 201 and an id of the created storage, 400 and JSON array of all errors if the body has some elements missing or 403 if the user is not allowed to create new storages
POST /api/v1/storages/by-name/[storage name]/products/add # adds a product(s) to storage. Request body: JSON array with products to add in an object containing the id of a product and the count. Results: 200 if everything was added, 400 if something was wrong with the request and 403 if user doesn't have permission for that
PATCH /api/v1/storages/by-id/[storage id]/products/by-id/[product id] # modifies a product in storage. Request body: JSON object with fields and values that will be overridden in the product. Results: 200 on success, 404 if either storage or product doesn't exist and 403 if user doesn't have permission for that 

An example of a bad API definition:
All routes use only GET and and always return 200, even if there was an error. The result is always a JSON object that look like this:

{
    "error": true,
    "body": {
        "code": 404,
        "message": "Not found"
    }
}

Routes:

GET /getStorageById/[storage id]/getAllProducts # Returns all products
GET /getStorageById/[storage id]/getProductById/[product id] # Return a specific product
GET /createNewStorage/[storage name]/[storage location/[etc.] # Creates a new storage
GET /getStorageById/[storage id]/addNewProductToStorage/[product id]/[count] # adds a product to storage with specified count
GET /getStorageById/[storage id]/updateProductCount/[product id]/[count] # Changes the count of product

Drawing App With REST API

Creating a basic drawing app with some server-side features like getting drawings from a database with REST API or Saving user created drawing in database.
basically a CRUD (Create, Read, Update, Delete) drawing application.
we can implement this with 12: Web Sockets and p5.js Tutorial

Expected Features

• Saving User drawing
• Loading User Drawings
• Viewing Public Drawings
• Updating Drawings
• User Auth? (might be little overwhelming)

Tools We Can use

• P5js for Client Side
• Nodejs for Back-End (Express)
• Firebase / MongoLab for Saving Drawings
  • Firebase: provides real-time database features
  • Firebase: provides user auth
• Heroku for Nodejs Deployments

Clicky Stuff

• https://medium.freecodecamp.org/building-a-simple-node-js-api-in-under-30-minutes-a07ea9e390d2
• https://codeburst.io/writing-a-crud-app-with-node-js-and-mongodb-e0827cbbdafb
• https://firebase.google.com
• https://mlab.com
• https://mongoosejs.com/
• https://www.mongodb.com/
• https://heroku.com/

Simple polling app i created using Nodejs, React, mLab
demo : http://quickerpoll.herokuapp.com
source-code: https://github.com/anuraghazra/QuickerPoll

• Not an exercise, but I need a screenshot of iTerm
• Serving more than one page in express (with sub-directories)

Similar to the Spotify API, with the Strava API you could get data that you created on your own by uploading runs or rides.

It would be interesting to learn how any user could authenticate on the fly with the application to visualize the users' own data. Then everybody with a Strava account could see visualization with their own data.

**
With the Google Local Guides Program it could be interesting to track all photos someone uploaded within a certain timeframe, map them out or print them on a timeline. Same thing applies here, if the authentication to the data could be dynamic and part of application, it may have a big impact.

They start off as an empty array and then get added to so the cannot be const and should be var or let instead.

Just starting! And already hitting a minor roadblock. Both the code I wrote and the code from Github lead to an error in my browser when it tries to fetch the image:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///home/bbausch/js-working-with-data/1.1-fetch/rainbow.jpg

This is Firefox 68 on Xubuntu. I solved the problem by hosting the picture on a web server (the node.js/express.js web server from video 2.1 :)), but I wonder why I am the only one with this problem?

EDIT: Dan uses live-server, and on its web site, I read

AJAX requests don't work with the file:// protocol due to security restrictions, i.e. you need a server if your site fetches content through JavaScript.

So I feel validated! But my question remains - is everybody using live-server or are there other methods to get around cross-origin problems?

Spotify has an API where you can get all the songs you listened to and all your Playlist. It would be very interesting to see how it can be used.

• add leaflet.js map to geolocation
• button to geolocate

The code examples need to be ported to use a different weather API, due to the sunsetting of the Dark Sky API.

https://darksky.net/dev

We are no longer accepting new signups. The API will continue to function for existing users till March 31st, 2023.

Alternatives:

• OpenWeatherMap

From the third to the fourth video some things changed in index.html. Basically it is the introduction of the POST request. What I do not understand is the flow of the JavaScript in exercise_04_array_button/public/index.html.

We are passing the data-object to the fetch-Post request in line 28. The two variables latand lon were first declared, however not initialized, in line 17. Then they were used to build the data-object in line 20 which is eventually passed into the fetch-function in line 28.

What I do not understand is how these two variables can hold the values of the geolocation. Because the geolocation we are obtaining only below in the lines 35-40. Probably this has to do with how the async and await logic works, but I just wanted to ask because it feels that I missed this piece😅

Incredible Video Series btw!!!

• Using altitude of the ISS to control its size on a map
• Making the ISS icon the center of the map and have the map move around it instead of the icon move.
• Using p5.js for custom drawing (maybe a path with a velocity vector)

There are often over 100,000 up to 200,000 flights per day. It would be such a mesmerizing thing to visualize even a few thousand moving around the globe with possible interactivity in P5.js. Something like this but in 3D

I've found this free API which can give up to 3000 and potentially more. But I think even this is surplus. It returns JSON, of course, and it shall be a pretty interesting beginner-friendly area to start with.

Here is my API_KEY 🙈 to save you the time.

Consider this as it may be more rich content wi$e. [Non-Free]

• sorting database logs in HTML page (switch between alphabetical by mood or by timestamp)
• pagination on logs
• save the image as a file and path to file in database
• draw on the image with p5 canvas?
• use face-api.js somehow?

• Tracing a path between check-ins
• Rewrite text for text bubbles (can be same joined with exercise from 3-2)

Check out video in playlist for reference

Please Help me out of this error...

Fetch API cannot load file:

///C:/Users/91894/OneDrive/Desktop/Data%20and%20API/Client-Side%20Basics/1/1.1%20Image(one)/Seita.jpg.

URL scheme must be "Http" or "https" for CORS request.

Hi Dan,

This is quite likely for another time, but I found that a lot of students generally are looking for some basic authentication. Express has a handy basic-express-auth library for handling simple authentication.

I made an example which "protects" an application with a simple username and password. The example shows what this looks like for NeDB and mongodb

https://github.com/joeyklee/very-basic-express-auth-example

This example pairs with this live coding video tutorial

• https://youtu.be/kLv9J0KLeCQ

• Using different API to display different data on the webpage (velocity per example)

Telegra.ph is a minimalist publishing tool that allows for creating richly formatted posts and push them to the Web. It has an API to which queries must be served over HTTPS. It can be used by anyone and not just Telegram users.

To know that virtually anyone, can create a 'webpage' completely for free is pure bliss by its own and even more useful than so because it can be done more flexibly with code and not requiring manual maintenance. Take a virtual stock for an online marketing store for instance. You can update your inventory with say a local .csv and a code can update that for you. The applications are endless of course and it would be great to see how such an empowering API can be used. 🤗

• Storing data in array on server (mentioned at 14:45 in the video)
• Adding a button to the HTML to send data (mentioned at 15:22 in the video)

Things I maybe should have mentioned to note for the future:

• I don't need to split latitude and longitude string since it stays as comma-delimited for both dark sky and openAQ!
• I should have been more specific once I start using URL query string with openAQ and tied that back to how I'm doing the GET request with URL parameters in my node server.

Thank you @willgeary!

https://transit.land/

• add an input box and save that to database

![Capture](https://user-images.githubusercontent.com/51162936/62928620-7b40b500-bdd6-11e9-9a5b-a8cdb8ff281b.JPG
I am using Windows 10 with IIS enabled. I am running node.js and live-server. I had tried to follow the tutorial and make the app but the point when we fetch it through the '/api' route, I cannot seem to get it working. I even changed the name of the route and tried but no luck...
Am I missing any configuration or anything else is needed? However, Chrome does not show any error when the website is first loaded...

I say "STOM element" by accident in 1-5. cc @blinkityblank

Filing some notes in case I want to record an extra video to go in between 1.1 and 1.2.

• mentioning try/catch as error handling option next step
• pointing out that this is just to demo fetch() of course just say <img src="rainbow.jpg">
• Noting that if you use return in getData() it’ll come back in the promise as response.

I found these two huge list of API Collections, which i think might be useful to look into it.

• https://apilist.fun/
• https://any-api.com/

• Better Error Handling
• Better Design or rewriting the paragraph
• Adding/Pulling Different data from Open AQ API

Check out video in playlist for reference

Telegram has a bot API where users can interact with them by sending them messages, commands and inline requests and one can even control bots using HTTPS requests to Telegram's bot API. Many enticing areas can they be applied on, ranging from services (like GmailBot, GitHubBot) to tools, to games and many more

It would be great to see how the bot API can be used with WebHooks or even long polling for the instant messaging giant with active monthly users of over 200 million! And heavenly, to see how the unique & handy functionality features (perks) work.

💚💛❤

Creating a basic RESTfull API with tools like

• Nodejs
• Express
• MongoDB

and for deployment we can use Heroku.
and for saving data to cloud we can use Database as a service (DBaaS) for example mLab / MongoAtlas.
this will be a good kickstarter to get started with APIs and understanding how APIs works behind the scenes