Stock price API - Alphavantage

[darren.james7518]

My goal is to display price charts for all stocks which have pulled back 20% from their recent highs.

I am using the free Alphavantage API to display the latest stock prices for specific stocks but can’t figure out how (or where) to add customer API information. For example, if I want to add this;

return await require("@pipedreamhq/platform").axios(this, {
  url: `https://www.alphavantage.co/query?`,
  params: {
    function: `GLOBAL_QUOTE`,
    symbol: `MSFT`,
    apikey: `${auths.alpha_vantage.api_key}`,
  },
})

Where do I put this? Also, how do I get the information viewable in a price chart (rather than text)?

[Jici]

You should have a look here
https://www.alphavantage.co/documentation/#
And use API Connector

[darren.james7518]

I have read that but I am not a programmer, I don’t know where to begin. If I have some code, such as function=TIME_SERIES_DAILY, where do I put that?

Bubble help said “You should be able to add that as a call in your API Connector” but, again, unless you are a programmer, how would that make sense! Has anyone done a simple step by step tutorial on this stuff?

[Jici]

In API connector
You will put in url something like
https://www.alphavantage.co/query?function=[functions]&symbol=[symbol]&interval=[interval]&outputsize=[outputsize]l&apikey=[apikey]

But there’s a lot of different way to achieve the same thing.
The best is to start looking for tutorial about API connector to understand hot it work

Basically, you could probably use Auth= private key in url
Key will be apikey and set your api key in value

and use this url
https://www.alphavantage.co/query
In anAPI call, and click to add parameters
Each thing befpre = sign are parameters. So just use the same parameters
(example function, symbol, interval…)

[launchable]

Hey @darren.james7518,

I’ve worked with this API in the past. It’s great, but with a couple of disclaimers I’ve put at the end of this post.

What you’ll need to do to call the API is set up API connector, in Bubble, to talk to the AlphaVantage API. There are different ways to do this. The way that I would do it is connect to AlphaVantage through RapidAPI, which is a marketplace that hosts various APIs. AlphaVantage is one of their most popular APIs. You can check it out here: Alpha Vantage API Documentation (alphavantage) | RapidAPI

Once you’re set up on RapidAPI, you want to create an API in API Connector, and set up the calls you need (like Global Quote), and pass the parameters you need (like symbol). I’ve posted a tutorial on using RapidAPI/API Connnector/Bubble, to do almost the same as what you’re doing. You can see it below. The RapidAPI intro starts around 5 minutes.

The disclaimers are as follows: for historical data (as opposed to just the most recent result), you’ll probably need to do some custom programming/parsing (though I’m not certain of this; the API may expose time-window filters you can use). And getting it into Bubble as a Time Series is a bit tricky, because you get back individual objects for each point in the time series. What I’ve done in the past is have an intermediate API that grabs the time series data from AlphaVantage, parses it (in Python, but could be any language) to be a single list, and returns that multi-value list to Bubble. You may, alternatively, be able to return a text object through API connector, and use client-side JavaScript (via the Toolbox plugin), to parse/display data as needed. This may make more sense once you’ve got an API wired up.

Hope this helps! If not, happy to clarify anything.

No-Code NLP - Analyze News Articles with Bubble.io & APIs (AYLIEN, USearch, RapidAPI)- API Deep Dive

[darren.james7518]

Thank you for the detailed reply, so appreciated. I followed your video but I get no API data back. See below my steps;

My API connector:

The code in my Bubble page:

And the result shows “price” instead of showing the actual stock price?

[launchable]

Glad it helped you get started
The time series data is tricky to work with. Notice that there are dozens or hundreds of returned values. That’s the disclaimer I was referring to above. If you’re just trying to get the most recent stock price, I think you’ll need to select “First Item” or “Last Item” from the Time Series list. Or maybe there’s a Most Recent item? I don’t recall the returned data structure off-hand, but if you paste it here, I may be able to offer more insight.

Cheers

[darren.james7518]

Thank you very much, I will give it another go!

[ajitsahu2]

I am too following your session. where do we get to enter the API key from Alphaadvantage?

I’ve tried to configure as per the snapshot. it gives me error 403 upon initializing the API. Can you please help to resolve?
Thanks

[launchable]

Hi @ajitsahu2,
You’re setup looks almost correct. I think you want to remove the API_KEY header from the query call, and use the x-rapidapi-key in the shared headers. So replace the bdfa… value with your GDWY… key.

Let us know if that works!

[ajitsahu2]

Hi launchable,

Idid try as per your suggestion by re-placing the x-rapidapi-key value with GDWY… Still getting the same error.

[launchable]

It looks like you haven’t subscribed the the API. If you open the RapidAPI site, and go to the AlphaVantage page, you can select “Pricing”, and from there register for the Basic plan (see attached screenshot; this is the Yahoo Finance API, but it’s the same structure). Once you’re subscribed, you can make calls. I would recommend trying a couple within the RapidAPI dashboard first, to make sure you have access.

Cheers

[ajitsahu2]

Thanks, I am now giving it a try with Yahoo Finance: Where do this field go in bubble API connector?

[ajitsahu2]

Got the API to work, thanks. Still curious about the usage of the field RapidAPI app

[launchable]

Whoops, missed this, sorry. Glad you got it working!

I don’t think you need the RapidAPI app identifier in your Bubble connection. You need x-rapidapi-host and xrapid-api-key headers, but I believe the RapidAPI App ID refers to an app that you have defined in your RapidAPI dashboard (I’d think, e.g., for project management, usage tracking, etc). I’d have to double check this in the docs though, so take this with a grain of salt.