DEV Community

programequity
programequity

Posted on • Edited on

How to use LOB API and customize a form for a letter

- Saumil Dhankar

Brief note on LOB API
LOB API helps in automation of direct mails. Check out documentation on how to access the API using GET, POST, PUT and DELETE commands. We can even take help from POSTMAN to make these requests.

PostgreSQL
For this blog, we are using the PostgreSQL database to store information about campaigns, constituents, letters and stripe payments and using knex.js to query the database.

Amplify platform
Amplify platform improves accessibility for civic engagement. This blog will be focused on the feature where we use LOB API to request information about the letters to be sent to representatives. More specifically, we will edit the parameters in our API requests. The users will also have the option to edit the letter content on the front end. The letter is displayed on the platform for the users to customize before proceeding to submission and payment.

Other tools needed
We are using Codespaces to quickly set up our environment. In case there are issues with Codespaces, we can set up the dev environment locally as well. For Windows OS, I learnt about a few helpful packages like cross-env (helps in making npm scripts cross platform) and dot-env (helps with env variables). We would also need the cicero api key for testing purposes which can be updated in your .env file.

Customizing form for a letter and using LOB API (Body)

Issue background
We would like users to have the option to customize their letters. For this functionality, we would create a template with lowest possible cardinality which would cover all the scenarios. As a preliminary step on the front-end, we will capture user input using vue form and on the back-end we will add required parameters in the API requests and possibly update our database. The letter template would help keep our requests to the database at an optimal level.

Frontend changes
To facilitate users adding information to customize their letter, we are using v-textarea component to capture user input which will then be linked to a POST request and finally sent over to the back-end (See issue #370 for details related to the vue form). This issue gave me exposure to vue code and helped me learn how it integrates with backend and how to write the unit and integration tests.

Backend changes
We would update the body of our post request to create Letter API which is part of LOB API such that it contains a merge variable. Following line would be updated: Line 162 and the new code would look like:

const { description, to, from, template_id, merge_variable, sessionId } = req.body || {}

This change would be part of issue #183. Postman student learning program really helped me get up to speed with using APIs.

Looking up the data in tables in PostgreSQL

Consider using knex.js to query the database for testing as well as other requirements. I learnt a lot while researching how to use knex.js.

Summary

  • Used Vue.js to make changes on the front-end.
  • Used POSTMAN to make API calls to LOB API.
  • Used knex.js for making database queries and stored data in a Postgres database.

Conclusion

We learnt about the helpful tools available in Vue.js, POSTMAN, Postgres and knex.js to customize an application.

Resources

Next steps (pending completion)

  • Add merge variable to createLetter object in LOB API
  • Updating API ecosystem and database (PostgreSQL)
  • Encryption
  • Tests

Top comments (0)