Microsoft 365 Community Community Demos, 15 Dec 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building an ACE for showing real time trade prices of stocks

Description

In this 5-minute developer-focused demo, Kunj Sangani delivers an Adaptive card extension that displays prices of US stocks, forex and crypto in real time with the help of finnhub APIs. Simple change in property pane to see pricing in local currency. Code walkthrough. Uses finnhub APIs and WebSocket for fetching real-time data and Viva dashboard to target audience inside an organization. Samples available now and feedback greatly appreciated.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on December 15, 2022.

Demo Presenter
• Kunj Sangani (Cognizant) | @sanganikunj

Supporting materials
• Resource - Finnhub Stock API | https://finnhub.io/
• Sample - primary-text-card-stock-bitcoin-feed |https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-StockBitcoinFeed

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

A

Which is uh based on adaptive card extension, it is displaying a real-time stock prices, Forex and cryptocurrencies. So uh a little bit about myself, my name is kunj and I like to contribute in PNP Community I even do write blogs in C sharp corner, so you can check out and connect with me, and even if you face any issue in any of my sample, you can connect with me. I would be happy to help you, so this is the link where the sample is currently present.

A

So if you want to try it out, I would recommend you to please try it out and give me feedback if in case you want to change something or add something as a feature.

A

So what was the driving Factor was uh like in in my organization there was a new adaptive card extension which they were looking for, wherein they display the stock prices of the organization, uh because there were many uh esops which were given to employees and they want to calculate what was their actual amount and all those things, and they want to see it in real time.

A

So this was one of the driving factor and uh nowadays like because uh the cryptocurrency market is crashing right now, but previously everyone were investing in cryptocurrency and wanted to see what their uh Bitcoin or ethereums or cryptocurrency values were in real time. So this was another driving factor and that too, in a dashboard which, uh in in the Viva connection itself, so first, what we'll do is we'll see the demo and then and then I'll walk you through the code. So this is uh the Adaptive card extension which I have created it.

A

It displays the ethereum real-time data. As you can see, this is the Adaptive card extension, which displays the real-time data of the ethereum in the USD. So this data is coming from the coinbase uh crypto exchange. So if you see uh this is showing in INR, but if I change to USD, it would be the similar price which we see over here, which gets updated in real time.

A

Okay for this, we are using an API called as finhub API, uh we'll see this more in detail in the code section, but uh this adaptive card extension can even show uh not only the cryptocurrencies but uh even the uh the stock prices and the Forex Market as well. So if I go and change this, so what I have given in in the uh property pane is uh the finhub token. So this is used for uh getting the fetching the API and there is a symbol for each stock or Bitcoin.

A

So we can change from uh this and if I want to see what is the Euro to USD price. Currently, I can just change to Euro to USD republish it and go back to my SharePoint home page, wherein we can see the dashboard and it it should show us the price. So we we can even change the title as well as per our requirement, so this would show us uh the real-time data from onnada. So this is one of the Forex exchanges which gives us a converter from Euro to USD, okay.

A

So this now coming to the code part. So, as I mentioned, we are using the API provided by finhub, so you can get the free API key or else. If you want to use it for your organization, you can get a paid one as well for the real-time data. If I go to the code section, uh the first file, which we updated was the property pane. So we have added a few property pins called as fenhub token and fin Hub symbol.

A

So this we are using and if I go to the code itself, there's only one method which I have updated: nothing fancy. We are using primary text card only and on the init function. What we are doing is we are using websocket to get the real-time data and there is this token which we are replacing and uh there are few events which we are listening to. So one of them is opening the websocket and then getting the message from it.

A

So once we get the message, we get the trade prices and we display it in into our adaptive card so in the card view. So this is a very simple uh adaptive card extension, but it could be very helpful for your organization, so I would like to get feedback and I would like to here. Everyone uh like what what are your thoughts about it. So, yes summaries, we are using the finhub API, you can check the finhub API, uh and uh this is it. So. Thank you.

A

Thank you for giving me this opportunity for displaying the demo. Thank you kunjo. Thank you for your demo.