Slideshow shown on SUSI.AI homepage helps SUSI.AI client showcase interesting and new features integrated into the platform. It helps to display the capabilities of SUSI.AI and other interesting areas. The slideshow can be configured from the Admin panel of SUSI.AI.
For storing slideshow data, images, information, redirect to link on slideshow click, we need to implement a servlet to store data on server-side.
The endpoint is of GET type, and accepts:
- redirect_link(compulsory): redirect link if a user clicks on the slider image
- image_name(compulsory): The image relative folder path on the server
- info: Any relevant information about the slider
- deleteSlide: True, if the user wants to delete slider
For implementing slideshow service, we need to store the image on the backend using uploadImage service and using the uploaded image file path in the backend to store the full slider details using skillSlideshowService service.
For setting the slideshow, the minimum permission required is ADMIN
Let’s have a look at how it is implemented, the redirect_link and image_name are necessary parameters and if not passed throws exception. If appropriate parameters are present, get the user query data using query.call. Access the data on the server side through DAO.skillSlideshow, if slideshow key is present in JsonTray skillSlideshow, get JSONObject with key “slideshow”.
If deleteKey is false, create a new JSONObject and put the query call data inside it and add to skillSlideshow object with redirectUrl as the key.
If deleteKey is true, remove the object associated with redirect_link and create a new object and add.
For fetching the slideshow data on frontend, GetSkillSlideshow servlet is implemented. The minimum userRole required in ANONYMOUS.
For fetching the slider data, access DAO.skillSlideshow, and get the JSONObject associated with key slideshow and put it in result response, put accepted key as true and return the response
3 types of endpoints are required for achieving the slider slideshow functionality. First, when a user creates or edits a slider, the user first needs to upload the image on the server using uploadImage.json service.
Image Suffix is the suffix of the file name stored in SUSI.AI server, susi_icon is the suffix in the image shown below.
Once the image is uploaded on the server, the API returns the relative path to the server location. The path on the server gets filled in ImagePath field on client-side(disabled to users).
With GetSkillSlideshow and SkillSlideshowService implemented, the admins can now manage and control the slideshow shown on the SUSI.AI home page, directly from the admin panel. The client can now easily discover new, exciting features as well.
- Introduction to Java Servlets: https://www.edureka.co/blog/java-servlets
- Data access object pattern: https://www.tutorialspoint.com/design_pattern/data_access_object_pattern
- Creating API to Upload Images in SUSI.AI Server: https://blog.fossasia.org/creating-api-to-upload-images-in-susi-ai-server/
- Link to PR on server side: https://github.com/fossasia/susi_server/pull/1294
SUSI.AI, FOSSASIA, GSoC`19, SUSI.AI Server