Photo by Hasan Almasi on Unsplash
My first API integration experience
I bit off more than I could chew with this one. But learned so much.
I'm trying to combine the concepts of what I have been learning with Frontend plus Laravel and testing into a single project.
The project
In my offline life, I noticed my dog has been suffering from allergic reactions and on his vet's advice, I've been noting environmental changes and symptoms to try and find his triggers.
Naturally, I started looking at the existing pen-and-paper system as a prime target for some digital transformation.
Hmm, I wonder how many future practice projects will be dog-related? ๐
My mini app MVP basically cross-references environmental data and symptoms to give an at-a-glance view to help users spot patterns, but it also has scope for expansion as my skills increase. I'm thinking of charts, filtering, alert systems, medication tracking, log-in systems and more.
Part way through I started thinking about tracking pollen count and how I could link to a pollen count website covering my area so I could manually take note of it in a form I'd had set up.
But wouldn't it be better to just bring the data in directly? So I searched around for an API I could use that would let me do just that and stumbled upon the Ambeedata free climate and environmental data API.
Not that I have any clue how to use an API.
API's have always sounded challenging and way ahead of what I'm capable of. I've no idea what's involved but having had some tutorials on installing packages with Composer and making use of those packages, it feels intuitively that an API call would work similarly, right?
I guess I'm feeling confident
I opted to jump right in instead of waiting for my mentor.
The documentation makes no sense (because I'm at that stage where I don't know what I don't know) it talks about headers, postman etc.
Undettered I ask an AI to explain it to a beginner.
It does an alright job and even gives me some instructions to get started which is great as I'm in the mindset to experiment.
First I learned I need to create a class in my Services folder in the app directory, a quick Google search confirms that the Services directory is not an out-of-the-box thing with Laravel and I just need to make it.
I was given the following code for this new class:
I was also given code for the API call
namespace App\Services;
use GuzzleHttp\Client;
class PollenService
{
protected $client;
protected $apiKey;
public function __construct()
{
$this->client = new Client(['base_uri' => 'https://api.breezometer.com/']);
// Replace 'YourApiKey' with your actual API Key
$this->apiKey = 'YourApiKey';
}
public function getPollenData($lat, $lon)
{
$response = $this->client->request('GET', 'pollen/v2/forecast/daily', [
'query' => [
'lat' => $lat,
'lon' => $lon,
'key' => $this->apiKey
]
]);
return json_decode($response->getBody()->getContents(), true);
}
}
Of course, I adapted my controller to receive the request but that has been overridden now.
Allas it does not work.
I was able to track all the parts in action and from the error I could see it fell over right at the point
I tried changing the base URL and refreshing my API key, but since the error is 403 them later with some tweaking 401 I was convinced the real problem is something related to authorisation and my API key.
Deep down I knew it was the AI code
Later when chatting with my Mentor David Carr we go over it in detail.
He teaches me about concepts like headers, how to make a request specifically working with JSON and what Postman is used for.
Also I saw a demo of insomnia (a Posman alternative) in action which also looks pretty handy to look inside an API.
And even he had to consult the Laravel documentation at one point.
First, he gets it to work (the code was overridden.)
Then he refactors to this.
<?php
namespace App\Services;
use Illuminate\Support\Arr;
use Illuminate\Support\Facades\Http;
class PollenService
{
public function get($lat, $lon)
{
$response = Http::withHeaders([
'x-api-key' => 'key goes here'
])
->get("https://api.ambeedata.com/latest/by-lat-lng?lat=$lat&lng=$lon");
// response is stored as data, in this use case it stores the particular station
$data = $response->json('stations');
//using Laravel's ARR helper class get the first row of array so you don't need to do $pollenData[0]['column']
// first makes the array easier to work with by starting the first index from 1
return Arr::first($data);
}
}
And makes use of it in a project like this.
public function index(PollenService $pollenService)
{
$dogName = 'Hecktor';
$pollenData = $pollenService->get(40.7128, -74.0060);
return view('dogtracker.index', compact('dogName', 'pollenData'));
}
David Says "Almost there and not a lot needed to be done to get it working, the original code was sending API token in a query string but it needed to be sent in a header also it was using the wrong name for the token. After this some refactoring was needed.
Overall working with API's for a beginner is an advanced topic but it was a nice easy API to work with ".
So after a little tweaking now my project has the pollen count.
I'd love to say I did it all on my own, but that's not such a big deal when considering that working with an API is no longer this big scary concept.