Home Page
Sorting is enabled for all options except station_image
On Clicking show only 10 records
On Clicking create a new Station
Similarly update and delete functionality is also present... Have fun testing the application 🤗.
-
The entity is Station which has following attributes : =>attributes = {private Long station_id,private String station_name,private byte[] station_image,private Double station_pricing,private String station_address} Here the station image will be mapped to the database as a large object(BLOB). Rest all the attributes will have the same data type as defined in model class.
-
There is a StationRepository Interface defined to interact with the table in the database.
-
There is a StationService Interface which consists of all the required crud method prototypes,namely :
=> List<Station> getAllChargingStations();
=> Station getChargingStation(Long id);
=> String addChargingStation(String station_name,String station_address,Double station_pricing,byte[] gg);
=> String changeDetailsStation(Long id, String station_name,String station_address,Double station_pricing,byte[] gg);
=> String deleteStation(Long id);
=> List<Station> getStationsByPagination(int pageNo, int pageSize);
=> List<Station> getStationsBySorting(String order,String parameter);
- The StationServiceImpl class implements the StationService interface. It has the following methods defined to perform various tasks->
=> List<Station> getAllChargingStations() : It finds all the stations present in the database using StationRepository and returns their list after decompressing the image bytes.
=> Station getChargingStation(Long id) : It finds the station with given id from database and returns its object after decompressing the compressed image in bytes.
=> String addChargingStation(String station_name,String station_address,Double station_pricing,byte[] gg) : Adds the given Station object to table after compressing the image bytes.
=> String changeDetailsStation(Long id, String station_name,String station_address,Double station_pricing,byte[] gg) : Updates the details of the station with provided id
=> String deleteStation(Long id) : Delete the station object from table of DB as per the record id provided.
=> List<Station> getStationsByPagination(int pageNo, int pageSize) : It gets the list of stations object from table leaving pageNo rows from the top and pageSize rows afterwards from the DB table.
=> List<Station> getStationsBySorting(String order,String parameter) : Returns the list of stations sorted as per the provided parameters and order for which they are sorted.
- There is a StationController class defined to accept the end point requests. It has the following end points defined for accepting requests from the frontened :
=> GET | http://localhost:6012/api/v1/getAllStations : this end-point calls the service method "List<Station> getAllChargingStations()" which returns all the stations.
=> POST | http://localhost:6012/api/v1/addStation : this end-point calls the service methods "String addChargingStation(String station_name,String station_address,Double station_pricing,byte[] gg)" which adds the station in the DB.
=> PUT | http://localhost:6012/api/v1/updateStation/{id} : this end-point calls update request for station object having id passed in PathVariable using calls service method "String changeDetailsStation(Long id, String station_name,String station_address,Double station_pricing,byte[] gg)" for updating the station in DB.
=> GET | http://localhost:6012/api/v1/getStation/{id} : this end-point calls request for getting station object having id passed in PathVariable using service method "Station getChargingStation(Long id)".
=> DELETE | http://localhost:6012/api/v1/deleteStation/{id} : this end-point calls request for deleting Station object from DB having id in the PathVariable which in turn calls service method "String deleteStation(Long id)".
=> GET | http://localhost:6012/api/v1/getbylimit?limit=10 : this end-point calls request for fetching only top 10 entries from the database and presenting to frontend. It uses "List<Station> getStationsByPagination(int pageNo, int pageSize)" where pageNo is 0 by default and pageSize is passed in parameters.
=> GET | http://localhost:6012/api/v1/getbysorted?sort=asc¶m=station_id : this end point returns the station objects sorted by given param and order by calling "List<Station> getStationsBySorting(String order,String parameter)" function.
- It has a default home page which represents all the stations images,name,address and price by fetching all from the DB table.
- Each station can be updated,deleted and created in the DB table by REST APIs call.
- There is a button which says only 10 records are to be fetched from DB table. It will fetch and display top 10 records from table.
- Each attributes in the display table can be toggled to sort except station_image, update and delete buttons.
- Whenever the JSON is received from backend, before rendering it on frontend, the image is base64 decoded and then rendered on the page.
- clone the repository.
- go to the backend folder and run the java-backend server using any of your favourite IDE(STS 4 preferred).
- Now go to frontend folder and open the code in VS-Code. Now run
npm iso that all the required node modules are downloaded from the npm repository. Now just fire the commandnpm start. - Now move to the frontend react web page which is running by default on port 3000. You can test the application now.
- One more important thing is connecting a MySQL DB to the Java Backend. So Create a DB from MySQL workbench and change the application.properties file as per the database connection and database name.
- Table creation will be taken care of by JPA repository.
- Now you can perform crud operations nicely from the frontend.
Hence all the use cases have been covered as per the question statement in Veridic HireSprint2023.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent