Table of Contents:
- Part 1 - Creating the Database Model
- Part 2 - Opening the KeystoneJS API
- Part 3 - Displaying the Widget on the Front End
- Part 4 - Editing the Widget on an Artificial Back End
- Part 5 - Password Protecting the Artificial Back End
This part of the tutorial is based on this GitHub Gist by Jed Watson. In it, he desribed how to open up an API to read and write KeystoneJS blog post data via an AJAX request. This post tweeks it slightly and instead opens up an API to our new front end widget.
Start by logging into the Admin UI of KeystoneJS and populate the database with three new widgets. In my case, I named them Widget 1, Widget 2, and Widget 3 and gave them an image URL and Alt tag description like so:
Add the following lines to
routes/index.js. This handles the routing the API URL.
Now that the router is configured, you need create a view/handler for the API. Create the directory
routes/api and create the following file
routes/api/frontendwidget.js by pasting in the following code:
Restart KeystoneJS to make the changes go live. You can now 'list' the JSON data for the front end widgets in your browser by going to:
http://<your ip address>:3000/api/frontendwidget/list