How I Used HarperDB Custom Functions To Build a Web App for My Newsletter

Manage a newsletter on Whatsapp Where I share useful resources and articles about products and startups. But the problem with Whatsapp Newsletter is that new subscribers cannot access old content.

So I decided to Create a simple project where you can Access to all articles/resources which you have shared with the group, divided into different sections.

the summery of project

Building a structured website like this is very easy.

By following this tutorial you will do Create your own organizational website And He will learn about creating different endpoints in the background to access data on HarperDB.

For the background, I was planning to use an Express server and deploy it to a Digital Ocean instance.

Fortunately, we don’t need to spend extra money on running another instance elsewhere.

Because HarperDB recently announced custom functions that allow you to write endpoints to access and manipulate data. It runs a Fastify server behind the scenes and can be deployed in the same instance as your database. So I will be using this as the background for our website.

Things to do

Here are some of the things we need to prepare to build our organizational web app:

  • Create an instance of HarperDB Cloud
  • Create a chart and table of our data
  • Create a custom job project
  • Create different endpoints

Create an instance of HarperDB Cloud

Register first here studio.harperdb.io

Creating a New HarperDB Cloud Instance - Snapshot 1

Then click Create a new HarperDB Cloud Instance:

Creating a New HarperDB Cloud Instance - Snapshot 2

Here we will choose cloud states:

Creating a New HarperDB Cloud Instance - Snapshot 3

There are different Instance plans here, and I’ll choose the free option for now:

Creating a New HarperDB Cloud Instance - Snapshot 4

our end! You have successfully completed the first step of creating a cloud instance. You are now the owner of your own HarperDB Cloud Instance!

Create chart and table

Now let’s create a table -> create a schema and -> add data.

Open a cloud instance and create an outline of your schedule. I’ll call it an “example”:

Create a chart and table - snapshot 1

Now create a table, I’ll call it ‘resources’ and for the hash attribute I’ll use ‘id’:

Create a chart and table - snapshot 2

It’s time to add the data…click the plus icon:Create a chart and table - snapshot 3

And here you can either send a single JSON object or multiple items in an array. I will paste the JSON below:

[
  {
    "url": "https://matthewmcateer.me/",
    "title": "A Blog on AI and Blockchain",
    "description": "Biologist-turned-ML-Engineer in San Francisco. I blog about machine learning, biotech, blockchain, dogs, and more.",
    "cover": "https://matthewmcateer.me/photo-large.png",
    "category": "AI"
  },
  {
    "url": "https://future.a16z.com/a-taxonomy-of-tokens-distinctions-with-a-difference/",
    "title": "Designing Internet-Native Economies: A Guide to Crypto Tokens - Future",
    "description": "Crypto protocols, social apps, online communities, and marketplaces will need to deeply understand the interplay between fungible and non-fungible tokens to create their own internet economies.",
    "cover": "https://future.a16z.com/wp-content/uploads/2021/06/V7_GenericTopic_Crypto.jpg",
    "category": "Crypto"
  },
  {
    "url": "https://www.youtube.com/watch?v=R9ch1Jvaj7A",
    "title": "How to Create a Killer Marketing Message",
    "description": "how to go to any event n leave with potential clients",
    "cover": "https://img.youtube.com/vi/R9ch1Jvaj7A/maxresdefault.jpg",
    "category": "Marketing"
  }
]

Now we have successfully added the data to our table. It’s time to create some API endpoints that we can use on the front end.Overview of the table with data

Create your first custom job

Head over to the Jobs section and create a project. I will name the API for my project.Create a custom HarperDB job - snapshot 1

This gives you a file to add paths, a file to add help functions, and a static folder. I’ll discuss helper functions later in the tutorial, now head over to the example.js file in the methods folder and you’ll see some template code provided. Let’s remove it for now and send “Hello world” as a response to check if our endpoint is working.

{ return “Hello World!” ; }}); } “data-lang =” “>

'use strict';


module.exports = async (server) => {

  server.route({
    url: "https://dzone.com/",
    method: 'GET',
    handler: () => {

      return "Hello World!";
    }
  });

}

This will send Hello World as output when we reach our endpoint. You can access this endpoint at -> {baseURL} / {projectName}

In our case this is jobs-cloud-hsb.harperdbcloud.com/api

Welcome out the world

Awesome, it works!

Now let’s create a path to fetch the data by getting classes of parameters.

{baseurl}/api/resources/: category

Here we are using an SQL query to select all the documents in the table resources which come from the ‘example’ schema where the ‘class’ comes from our parameters.


server.route({
    url: '/resources/:category',
    method: 'GET',

    handler: (request) => {
      request.body= {
        operation: 'sql',
        sql: `select * from example.resources where category="${request.params.category}"`
      };
 return hdbCore.requestWithoutAuthentication(request);

    }
  });

Also note that HarperDB allows access to the database without authentication in its built-in style. If you are making a POST request, create some validation routine that checks the auth token, etc.

To display this, I will create a simple pre-checker like throwing an error if a certain category is not available in our list.

For this, we can use auxiliary functions. Let’s create one called “checkForCategory”Create a helper function

Now import the job and submit the application through pre-check:

'use strict';
const checkForCategory = require('../helpers/checkForCategory');

  server.route({
    url: '/resources/:category',
    method: 'GET',
    preValidation: (request) => checkForCategory(request, logger),


    handler: (request) => {
      request.body= {
        operation: 'sql',
        sql: `select * from example.resources where category="${request.params.category}"`
      };



      return hdbCore.requestWithoutAuthentication(request);


    }
  });

our end! You have successfully created a few endpoints to get the data from your database. While it is also hosted in the same state. So, there is no need to publish the backend elsewhere.

You can also do pagination here like so:

server.route({
    url: '/resources',
    method: 'GET',
    handler: (request) => {
      const size = request.query.size|| 10;
      const page = request.query.page || 0;
      const skip = parseInt(page)*parseInt(size);



      request.body= {
        operation: 'sql',
        sql: `SELECT * FROM example.resources ORDER BY category LIMIT ${size} OFFSET ${skip}`
      };
      return hdbCore.requestWithoutAuthentication(request);
    }
  })};

end of introduction

I’ve drawn a simple UI using excalidraw:Simple user interface graphic



import './App.css';
import { useState,useEffect } from 'react';

function App() {
  const [items, setItems] = useState([]);
  const [activeIndex, setActiveIndex] = useState("Marketing");
  const [selectedTag,setSelectedTag] = useState("Marketing")
  useEffect(()=>{
    function fetchData () {

      fetch(`https://functions-cloud-hsb.harperdbcloud.com/api/resources/${selectedTag}`, {
    method: 'GET', // or 'PUT'


  })
  .then(response => response.json())
  .then(data => {
    setItems(data);
  })
    }
    fetchData()


  },[selectedTag]);



  const tags=["Marketing","Startups","Podcasts","Product","Crypto","Learn"];



function ChangeResource(tag){

  setSelectedTag(tag);
  setActiveIndex(tag);
}

  return (
    <> 
    <div className="row">
     <div className="Boxtitle">
      <h1> Curated List of Best Articles and Resources </h1>
     </div>
     </div>

     <div className="Boxcontent">

     {tags.map(tag=>(
       <div onClick={() => ChangeResource(tag)} key={tag} className={activeIndex === tag ? "sectionType active" : "sectionType"}> 
       <h3  > {tag} </h3>
       </div>
     ))}

     </div>
<div className="gridWrap"> 
 {items.map((item,key)=>{


    return(
        <div key={item.title} className="GridView">
     <a href={item.url} >
     <img   className="ImageStyle" src={item.cover} alt="" /> 
     <h3 style={{color:"white",width:"100%",maxWidth:"400px",textAlign:"center",display:"absolute"}}>  {item.title}  </h3>
     </a>
  </div> ) }
  )} 

    </div>





    </>
  );
}

export default App;

Here is the code for the front end repo.

Here it is posted at vercel->smart-internet.vercel.app

(Fun fact: You can publish your frontend to HarperDB as well if it’s static. Read the FAQ section to learn more). You can find the backend code here.

Miscellaneous

Can we upload our custom jobs?

Yes you can. Your local code should have proper project paths and structure. You can start by cloning the official repo and changing the code along the way.

How to upload custom jobs to HarperDB?

At the time of writing this article, the best way to upload your local code to your cloud instance without running a local instance is by creating a .tar file using 7zip or any tool and then converting it to a base64 string by uploading your tar to that location.

Then you need to make a POST request to your cloud instance. You’ll find the authentication header and instance URL in the Configuration section of your HarperDB instance.

POST request for Cloud Instance

Here is the request body with the project property as api (since our project name was api) and the payload will be a base64 encoded long tar. The file partition is dummy but necessary, so just copy what you wrote.

{
    "operation": "deploy_custom_function_project",
    "project": "api",
    "file": "/tmp/144275e9-f428-4765-a905-208ba20702b9.tar",
    "payload": "aGVscGVycy8AAAAAAAAAAAAAAAAAAAAAAA........"
}

Successful deployment of cloud functionality from an on-premises project

Congratulations, you just posted a cloud job from your on-premises project.

I hope you learned something new today. If you did, give this a like. Let me know how you will use HarperDB to build your next project.

.

Leave a Comment