An Ionic 2 app which in turn will be using Angular 2 that will implement the PWA behavior. It will retrieve the contents from the Plone site using the Plone REST API. Based on the proposal given in GSoC '17 by Noel Varghese. Link to the proposal.
- Login Screen
- Main menu
- Global Navigation(Side Nav)
- Options Popover accessible on each page
- Settings page
- Toast to indicate offline mode is active
Plone Content Types
- News Item
- Search results page
- Sorting results
- Filtering results
- Comments page
- Offline comments
- Action sheet for editing and commenting opens on pressing the edit FAB in the bottom right corner of views that are editable.
- Medium editor in edit view
See documentation folder.
The nodejs version being used is 7.7.3.
Clone the repository, in the project's root directory, run the command:
npm install or npm i
This will install all the necessary node modules required to run this project.
this runs the app in development mode. Open http://localhost:8100 to view it in the browser.
Use the credentials admin:admin to login in to the app.
Setting up the backend
The app is by default using http://angular-plone.herokuapp.com/Plone as the backend, it is recommended you change this for your personal development and testing purposes. There are two ways you can do this, either by hosting on the plone instance on your local machine or deploying an instance on heroku. It is favourable to use the former method as heroku will have storage restrictions.
To set up Plone + plone.restapi you can follow these steps:
Checkout https://github.com/plone/plone.restapi then set up a Python virtualenv and then: python bootstrap.py bin/buildout -Nv -c plone-5.0.x.cfg and you will get a Plone instance with restapi
The plone instance will be run on http://localhost:8080/Plone, replace the default backend by this.
To set up the backend on heroku, go to https://github.com/plone/heroku-button-plone, clicking on the deploy to heroku button will take you to the heroku dashboard. Select the app name and deploy the plone instance. It will run on [AppName].herokuapp.com/Plone, replace the default backend by this one.
After you get the plone instance running, go to site setup -> add-ons, and enable the plone restapi add-on.
- Ionic 2 - Framework to create cross-platform mobile applications
- Plone Restapi Angular - Package to help build Angular application based on Plone Rest Api
- Angular2 schema form - Angular2 module allowing you to instanciate an HTML form from a JSON schema.
- Angular Medium Editor - Angular2 component for medium editor