This post describes my work effort to add a random quote to my Wix hosted website. I discuss the technical effort to accomplish my goal and I include the site code. Here is what my finished work product looked like:
My user story was simple:
As a web site user I want a random daily quote on every site web page to use for motivation and inspiration.
These Quote of the Day (QOD) requirements were defined to satisfy the user story and other self-identified functional items.
The QOD should:
Appear in the header so it can be available on all pages
Come from an available well documented public API
Update once a day
Be relatively easy to implement and troubleshoot
The QOD should not:
Prevent other web page features from working
I found and looked at a few publicly available web sites that have motivational and inspirational daily quotes served through widgets or an API (or both). I settled on the TheySaidSo web site because of the well defined public and private widgets and API. The public API is rate limited. As long as the consuming web site provides attribution, the service is free.
I implemented the code as a backend web module. Web modules are exclusive to Wix Corvid and enable developers to write functions that run server-side in the backend and call them in client-side code. Server-side code is usually needed because:
It includes an API key to the third-party service which shouldn't be exposed in the client
Calling a third-party web service, which can only be done server-side because of cross-origin resource sharing (CORS).
I am using a public API without an API key and the TheySaidSo public API supports client side calls so technically I don't need to use a backend web module. But this was a good exercise to:
Learn more about how to implement a modular and secure Wix architecture
Learn more about working with JavaScript promises
Implementation
QOD Text
I created a Text box with an ID: qodHeaderText and placed that in the header. All pages that show a header will show the Quote Of the Day.
Backend Module
I created a backend module called dailyQuote.jsw. This code uses the TheySaidSo API web service call to return the daily quote in JSON format. The complete code is shown below.
If in the future I add an API key, the key will be in the backend code hidden from the client (the browser).
Client Code
The client code is a call to the backend code, setting the value of the Text element to the returned data from backend/dailyquote.jsw on every page load.
Easy. Simple as Pie. If you know how.
Conclusions
There are things I discovered or learned during this development effort:
A significant number of Wix programming APIs rely on asynchronous JavaScript using Promises. Learning about JavaScript asynchronous architecture with Promises and await is crucial.
Simple projects can benefit from agile project methods
I haven't yet met the the user story objective. Every page load results in a 3rd party API call and that's not performant.
TheySaidSo places a rate limit of 10 API calls per hour which is good for testing but not good in my application in the site header.
Working with the API was good practice working with Promises but I need to review and revise my approach to work around the 10 calls/hour limit and improve page performance.
Comments