Building Location-Aware Applications with Search-as-a-Service

In today’s digital landscape, location-aware applications have become increasingly popular. These apps can simplify tasks such as finding nearby businesses and services. Think of popular apps like Uber and Airbnb, which rely heavily on geolocation features to provide users with a seamless experience.

Challenges of Building Location-Aware Applications

When building these types of applications, the bulk of the work lies in coding the location comparison logic that returns a set of results based on predefined criteria. However, writing custom logic for this task can be time-consuming and tedious.

Introducing Search-as-a-Service

A search-as-a-service solution allows you to integrate search functionality into your project without having to write your own custom search logic. This enables you to outsource the search component of your project, focusing on other aspects of your application.

Building a Nearby-Hotels Web Application

In this tutorial, we’ll build a simple nearby-hotels web application that lists the hotels closest to a user’s location using a search-as-a-service solution.

Prerequisites

• Basic knowledge of JavaScript
• Experience with Vue
• Node.js installed locally
• Vue and the Vue CLI installed
• Any IDE of your choice (we’ll use VS Code)

Setting up Our Search-as-a-Service Server

To use our search-as-a-service solution, we need to create a cluster, which is essentially the space where we can store and access our data. We’ll create a cluster that will store a list of all the hotels available on our platform.

curl -X POST \
  https://api.search-service.com/v1/clusters \
  -H 'Content-Type: application/json' \
  -d '{"name": "hotels-cluster"}'

Populating Our Search-as-a-Service Server with Data

Once we have our cluster set up, we can add the data we need to our cluster. In terms of search engines, this step is called indexing. We’ll break down our indexing task into three sub-tasks:

1. Connecting to our search-as-a-service server
2. Preparing the data to be uploaded (in this case, our list of hotels)
3. Uploading the prepared data

const hotels = [
  { id: 1, name: 'Hotel A', latitude: 37.7749, longitude: -122.4194 },
  { id: 2, name: 'Hotel B', latitude: 37.7858, longitude: -122.4364 },
  //...
];

const data = hotels.map(hotel => ({
  id: hotel.id,
  fields: {
    name: hotel.name,
    location: {
      lat: hotel.latitude,
      lon: hotel.longitude
    }
  }
}));

fetch('https://api.search-service.com/v1/ clusters/hotels-cluster/documents', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data)
});

Building the Interface

To get a fully working UI, we’ll create three Vue components:

• HomePage: Our index page
• Hotel: Used in rendering each hotel to the DOM
• NearbyHotelsPage: Displays a list of ten hotels closest to the user

<template>
  <div>
    <h1>Nearby Hotels</h1>
    <ul>
      <li v-for="hotel in nearbyHotels" :key="hotel.id">
        <Hotel :hotel="hotel" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nearbyHotels: []
    }
  },
  mounted() {
    fetch('undefined.search-service.com/v1/clusters/hotels-cluster/search', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        query: {
          filter: {
            location: {
              nearby: {
                latitude: 37.7749,
                longitude: -122.4194
              }
            }
          }
        },
        limit: 10
      })
    })
   .then(response => response.json())
   .then(data => {
      this.nearbyHotels = data.hits;
    });
  }
}
</script>

Caveats for Real-World Applications

While our basic application works well, there are certain things we wouldn’t dare do in an application that would actually be used by people. For example, we’d need to handle the user’s coordinates more dynamically, rather than hardcoding them. Additionally, we’d want to add a UI through which hotel owners or system admins could add new hotels to our search-as-a-service server.

By leveraging the geolocation feature of our search-as-a-service solution, we can build custom, location-aware applications without having to set up our own backend component that deals with all the geospatial-related logic.