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
Code Integration
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.
SkillSlideshowService:
For setting the slideshow, the minimum permission required is ADMIN
@Override public UserRole getMinimalUserRole() { return UserRole.ADMIN; } @Override public JSONObject getDefaultPermissions(UserRole baseUserRole) { return null; } @Override public String getAPIPath() { return "/cms/skillSlideshow.json"; }
cms/SkillSlideshowService.java
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.
public ServiceResponse serviceImpl(Query call, HttpServletResponse response, Authorization authorization, final JsonObjectWithDefault permissions) throws APIException { if (call.get("redirect_link", null) == null || call.get("image_name", null) == null) { throw new APIException(400, "Bad Request. No enough parameter present"); } String redirectLink = call.get("redirect_link", null); String imageName = call.get("image_name", null); String info = call.get("info", null); boolean deleteSlide = call.get("deleteSlide", false); JsonTray skillSlideshow = DAO.skillSlideshow; JSONObject result = new JSONObject(); JSONObject skillSlideshowObj = new JSONObject(); if (skillSlideshow.has("slideshow")) { skillSlideshowObj = skillSlideshow.getJSONObject("slideshow"); } if (!deleteSlide) { try { JSONObject slideObj = new JSONObject(); slideObj.put("image_name", imageName); slideObj.put("info", info); skillSlideshowObj.put(redirectLink, slideObj); skillSlideshow.put("slideshow", skillSlideshowObj, true); result.put("accepted", true); result.put("message", "Added new Slide " + call.get("redirect_link") + " successfully !"); return new ServiceResponse(result); } catch (Exception e) { throw new APIException(500, "Failed : Unable to add slide with path " + call.get("redirect_link") + " !"); } } else { try { skillSlideshowObj.remove(redirectLink); skillSlideshow.put("slideshow", skillSlideshowObj, true); result.put("accepted", true); result.put("message", "Removed Slide with path " + call.get("redirect_link") + " successfully !"); return new ServiceResponse(result); } catch (Exception e) { throw new APIException(501, "Failed to remove Slide: " + call.get("redirect_link") + " doesn't exists!"); } } }
cms/SkillSlideshowService.java
GetSkillSlideshow
For fetching the slideshow data on frontend, GetSkillSlideshow servlet is implemented. The minimum userRole required in ANONYMOUS.
@Override public String getAPIPath() { return "/cms/getSkillSlideshow.json"; } @Override public UserRole getMinimalUserRole() { return UserRole.ANONYMOUS; } @Override public JSONObject getDefaultPermissions(UserRole baseUserRole) { return null; }
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
public ServiceResponse serviceImpl(Query call, HttpServletResponse response, Authorization rights, final JsonObjectWithDefault permissions) throws APIException { JsonTray skillSlideshow = DAO.skillSlideshow; JSONObject skillSlideshowObj = skillSlideshow.getJSONObject("slideshow"); JSONObject result = new JSONObject(); try { result.put("accepted", true); result.put("slideshow", skillSlideshowObj); result.put("message", "Success : Fetched all Skills Slides!"); return new ServiceResponse(result); } catch (Exception e) { throw new APIException(500, "Failed : Unable to fetch Skills Slides!"); } }
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.
Resources
- 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
Tags
SUSI.AI, FOSSASIA, GSoC`19, SUSI.AI Server