Roundtrip [The voting story] frontend, backend, and REST – Mastering Plone 6 development

Roundtrip [The voting story] frontend, backend, and REST

Roundtrip [The voting story] frontend, backend, and REST#

You will enhance the Plone Conference site with the following behavior:

Talks are submitted. The jury votes for talks to be accepted or rejected.

In this part you will:

  • build your own Plone add-ons for backend and frontend.

Topics covered:

  • Storing data in annotations

  • Custom REST API service

  • Backend package creation with plonecli

  • Frontend package creation with Volto generator

  • Create React components to display voting behavior in frontend

  • Permissions

The voting story spreads about the next chapters:

Jury members shall vote for talks to be accepted or rejected.

For this we need:

  • A behavior that stores the vote data in annotations

  • A REST service for the frontend to communicate with

  • A frontend component that displays votes and provides the ability to vote

Create a backend package#

plonecli is a tool to generate Plone backend packages and several features of a Plone backend add-on. To install plonecli, run once:

pip install plonecli --user

We use plonecli to create a new package.

plonecli create addon backend/sources/training.votable

We press Enter to all questions except

--> Plone version [6.0.7]: 6.0.7

--> Python version for virtualenv [python3]: python

The new package is created in directory sources.

Integrate package in training setup#

Before we implement our feature, we integrate the add-on by

  • installing the add-on as a Python package

  • updating the Zope configuration to load the add-on

  • restarting the backend

Open requirements.txt and add your add-on to be installed as Python package.

-e sources/training.votable

Open instance.yml and add the add-on to tell Plone to load your add-on. With this the site administrator can activate the add-on per site.

    load_zcml:
        package_includes: ["training.votable"]

To apply the changes of the configuration, please build and restart the backend with:

make build
make start

The add-on can now be activated for our site Plone. Please head over to http://localhost:8080/Plone/prefs_install_products_form and activate / install the new add-on.

Create a Volto add-on#

We will use the Volto generator to create an add-on. Please install the tool once with:

npm install -g @plone/generator-volto

Now the frontend add-on can be generated. We call it 'volto-training-votable' to indicate that it is the corresponding part to our recently created backend package.

cd frontend
yo @plone/volto:addon

Choose "volto-training-votable" as name for your add-on.

Check package.json to include the add-on in your app:

"private": true,
"workspaces": [
    "src/addons/*"
],
"addons": [
    "volto-custom-addon"
],

Install and start

make install
yarn start

We are now ready to implement our voting behavior in our new frontend add-on created in frontend/src/addons/volto-training-votable/.

Contents