Building Location-Aware Applications with Typesense
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.
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. This is where Typesense comes in – a search solution that allows you to integrate search functionality into your project without having to write your own custom search logic.
What is Typesense?
Typesense is a search-as-a-service solution that enables you to outsource the search component of your project. It uses a similar model to other third-party services, such as Heroku and Firebase Authentication, which handle infrastructure and authentication concerns, respectively. With Typesense, you’re allowing an external agent to handle your search logic while you focus on other aspects of your project.
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. We’ll use Typesense to abstract the location comparison task and make it easier to implement.
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 Typesense Server
To use Typesense, we need to create a cluster, which is essentially the space on Typesense 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.
Populating Our Typesense 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:
- Connecting to our Typesense server
- Preparing the data to be uploaded (in this case, our list of hotels)
- Uploading the prepared 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
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 Typesense server.
By leveraging Typesense’s geolocation feature, we can build custom, location-aware applications without having to set up our own backend component that deals with all the geospatial-related logic.