DEV Community: Lucca Biagi de Paula Prado

Creating an geolocation app

Lucca Biagi de Paula Prado — Mon, 07 Nov 2022 21:55:16 +0000

Hi! In this tutorial I'll (try to) teach a little about connecting to rapidAPI apis and mainly creating an app that returns a list of places in defined range, so at the end of this tutorial, you will have an ionic app that can get user coordinates and list places in range.

What is RapidAPI hub?

RapidApi Hub is an is an online marketplace of rest APIs, in there it's possible to find APIs about almost anything. I strongly advice to take sometime to have a look on it, in there you'll find a lot of cool stuff for your own projects. In this post I'll use my own API Geolocation-Utils.

Near me application

In this tutorial, we'll use Ionic (Angular flavor) as it is multi platform. The main objective is build an application that is capable of get user coordinates and exhibit the response of requests.

To generate the base application, simply (and after installing the cli) run:
ionic start XyzNearMe list

After running that, you'll have an application that looks like this:

Ok, it's nice (thanks Ionic!) but isn't exactly what we want, so let start modding this base!

On our home component we need to get user coordinates. To do that we can user the browser api!

I used it in this way (I'll definitely rename this functions):

ngOnInit() {
        const userLocationConfig = {
            enableHighAccuracy: true,
            timeout: 5000,
            maximumAge: 0
        };
        navigator.geolocation.getCurrentPosition((suc) => this.manipulateUserCoordinate(suc),
            this.errorAcquiringLocation, userLocationConfig);
    }

    manipulateUserCoordinate(pos) {
        const crd = pos.coords;
        this.lat = crd.latitude;
        this.lon = crd.longitude;
    }

    errorAcquiringLocation(err) {
        console.warn(`ERROR(${err.code}): ${err.message}`);
    }

So it is really simple to acquire the user coordinates. Here I used it on OnInit to be sure that it is called when component loads, aside that, it's worth mentioning that I used the manipulateUserCoordinate as an arrow function to keep my acessibility to this.lat and this.lon.

Ok, now we have our coordinates, so we can make requests using that. As we created our project using the "list" option, we can took advantage of boilerplate code.

I started refactoring the getMessages to getPlaces and included latitude and longitude as parameters and removed the list making. So it got something like that:

public getPlaces(lat: number, lon: number){

    }

After I got this method to be called after acquiring user position, I started to mod it including the request:

public getPlaces(lat: number, lon: number, distance: number) {
        const httpOptions = {
            headers: new HttpHeaders({
                'X-RapidAPI-Host': 'geolocation-utils1.p.rapidapi.com',
                'X-RapidAPI-Key': 'MY_KEY'
            })
        };

        return this.httpClient.get<any>(`https://geolocation-utils1.p.rapidapi.com/place/search/list?distance=5&lon=${lon}&lat=${lat}`, httpOptions);
    }

But there's an important step, I created all classes to map properly this response (they can be found at this project repo). So now, I'm returning an Observable of PlaceResponse.

So in our home component we use our html like this:

 <app-place *ngFor="let place of placeResp" [place]="place"></app-place>

and the place component (that you can get by refactoring message component name) is like that now:

<ion-item *ngIf="place" [detail]="false">
  <ion-label class="ion-text-wrap">
    <h2>
      {{ place.content.name }}
      <span class="date">
        <ion-note>{{ place.distance.value | number: '1.1-1'}}KM</ion-note>
      </span>
    </h2>
    <h3>{{ place.content.address }}</h3>
  </ion-label>
  </ion-item>

Now it looks almost like this:

So now we have an app that acquires user location, does an request and display its result on list. I created this tutorial because for me, this is complicated, and I only got to get this running after a few days, so I hope that this helps a little who is trying to do something with Ionic and Angular.

You can get the final version of code here on my github repo.

Have you ever used ArangoDb? Why? Why not?

Lucca Biagi de Paula Prado — Thu, 25 Aug 2022 20:33:07 +0000

Hi! I recently came across ArangoDb and used in some POCs, but I really want to know if someone here already used it in a Real World environment or even if chose to not use in a production environment. So... have you ever used ArangoDb? Why? Why not?

Trying an new framework without internet

Lucca Biagi de Paula Prado — Sat, 29 Feb 2020 16:29:51 +0000

What?

I'm a backend developer and I'm working on a new personal project, the rest API is almost done and I thought "It's time to make my app". As it is one of my dreams, I concluded "Do it all by myself", but, I just know a little bit of Angular and just it, meanwhile, I started my search for an cool framework that even working with angular would look as mobile app.

When my hopes was already lost, I found the incredible, Onsen Ui an beautiful "way" to achieve my goal.
I found it just in the night before an three-day weekend in my country, that i would travel to my country house, where, we don't have internet or mobile signal, it's just the place to 'recharge the battery".

How?

As I would be offline for some days, I started the preparation, that is, downloading all sample and documentation (that don't have pdf avalaible, i was forced to download pages from their website) that was possible and obviously, run npm install on my starter project.

Then it began... I noticed that their tutorial is really simple and started to make some fields and the tabs, but, the problem started when I was trying to consume my local api.

CORS... I was intrigued, because, on the response header the cors header was present and I faced the problem that is we are Google and Stack Overflow addicted there was no one that could help me offline. Tried for hours to change the way that I was including my cors header on api. Finally I got my mistake.

I was passing the wrong url and the browser just saying that was Cors error, but actually was an "you are dumb" error. Fixed that and my journey continued, until the first epic was complete.

What I Learned?

I faced a lot of errors (the saddest one was the "cors" that was not cors) and managed to fix them without help, then I realized that this is the real way to learn, If I was on internet, would took some hours to make what I spent 2 days to do, but, if I tried this again in one or two weeks, I would re-spend this time, because wouldn't be me resolving problems, would be the internet.

The point is, we are starting to loose control about what we need to search and what we can think about to solve. If you, reading that, really want to know some new tech, download the docs, set an goal and go offline.

Thanks for reading!