DEV Community

Remi Desreumaux
Remi Desreumaux

Posted on • Updated on

First week of 100 days of code

Hello there, welcome to my first article!

I love running and coding and one way to map the two together was to participate in the 100 days of code playing around the Strava api : the most popular social platform for runners.

It's been a week that I joined the challenge and it's time to recap and share a feedback.

So far, I have:

  • a static API exposing a list of activities of an average runner
  • a website running on azure http://remstrava.azurewebsites.net with:
    • A single pie chart displaying the activities breakdown per week day
  • a local environment setup with Visual Studio Code with the following extensions:
    • Azure Account
    • Azure App Service
    • Azure Functions
    • Bracker Pair Color

image

This is not much so far and here is my feedback:

  • learning curve with azure cloud, angular + highchart, typescript
  • back and forth between my personal desktop and laptop
  • framework choice is questionable, I could have used power bi for this purpose
  • deployment was taking > 30 minutes long before I realized I should just build the solution

The 2 challenges I faced so far were:
1) the introduction of CORS in my API. Although I had activated Azure Function CORS from the portal, it did not take it into account after publication

image I had to manually add the headers in the response of my api like this:

        headers  = {
                "Access-Control-Allow-Origin": "*",
                "Access-Control-Allow-Methods": "Get, Post, Options"
        }
        return func.HttpResponse(str, headers=headers)
Enter fullscreen mode Exit fullscreen mode

This should show in the response headers
image

otherwise you would run into a Cross Origin Resource Sharing error..

EDIT 2020-05-04 : the CORS settings of the DotNet Function App level are sufficient.

2) Update the highchart after data retrieval from the API, the trick was to use Highcharts.charts and also make sure that the component was already available.

   //TODO should type the data
   updateData(data : any){  
      Highcharts.charts[0].series[0].setData(data);
   }

Enter fullscreen mode Exit fullscreen mode

I am sharing my daily progress here.

See you next week.

Top comments (0)