DEV Community

Remi Desreumaux
Remi Desreumaux

Posted on • Edited on

2

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.

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay