What We’re Building<\/h2>\n
In this guide, we will embark on a journey to create a simple voting up and down system using Spring Boot, and NoSQL, and packaging the application into a Docker container. We aim to empower users to express their opinions on blog posts, fostering a vibrant community of discussion and feedback.<\/p>\n
Requirements<\/h3>\n
Based on the previous overview, we will have the following functional requirements:<\/p>\n
- \n
- Create a blog in the simple form<\/li>\n
- Cast votes (upvote or downvote) on blog posts. No login\/logout, we will generate random users<\/li>\n
- Visualize vote results in a static and real-time chart<\/li>\n<\/ol>\n
The out of scope: * Reverse\/change the votes * Change users * User management (register, login, etc) * Blog management (create, edit, delete)<\/p>\n
The database<\/h3>\n
The choice between SQL and NoSQL databases depends on specific requirements. However, here are some reasons why NoSQL databases are preferred over SQL databases for this system:<\/p>\n
- \n
- Horizontal scalability: NoSQL databases typically provide easy horizontal scalability.<\/li>\n
- Query Structure: In this case, there is no need for complex relational operations such as table joins.<\/li>\n
- NoSQL databases are typically built with a distributed and decentralized architecture, enabling easy scaling by adding more nodes to the cluster.<\/li>\n<\/ol>\n
Project Setup<\/h2>\n
What you need to install<\/h3>\n
- \n
- Java 17 or later<\/a>, Maven 3.5+<\/a>, Docker engine<\/a>, and your favorite text editor (Intellij IDEA<\/a>, or VSCode<\/a>)<\/li>\n<\/ul>\n
Create a Spring Boot Project<\/h3>\n
Spring boot offers a fast way to build applications. Spring Boot does not generate code to make edits to your files. Instead, when you start your application, Spring Boot dynamically wires up beans and settings and applies them to your application context. With Spring Boot, we can focus more on the business features and less on the infrastructure.<\/p>\n
Navigate to start.spring.io<\/a>. This service pulls in all the dependencies you need for an application and does most of the setup. Click generate, it will generate the Spring Boot project and download it as a zip. Now unzip this project and import it into any IDE.<\/p>\n
To interact with GridDB, we need to add a GridDB Java Client to this project. Add the following dependency into maven
pom.xml<\/code>. xmlcom.github.griddb<\/groupId> gridstore<\/artifactId> 5.3.0<\/version> <\/dependency><\/p>\n Database design<\/h3>\n
Now, let’s write down the database schema according to the functional requirements. We will have the following entity classes:<\/p>\n
- \n
- \n
User<\/p>\n
This holds the user’s information in the system. It has the following attributes:<\/p>\n
- \n
String id<\/code>: System generated unique identifier. It is the primary key.<\/li>\nString email<\/code><\/li>\nString fullName<\/code><\/li>\n<\/ul>\n<\/li>\n- \n
Blog<\/p>\n
This entity stores the blog posts. It has the following attributes:<\/p>\n
- \n
String id<\/code>: System generated unique identifier. It is the primary key.<\/li>\nString title<\/code>: The title of the blog post<\/li>\nInteger voteUpCount<\/code>: The count of vote up<\/li>\nInteger voteDownCount<\/code>: The count of votes down<\/li>\nDate createdAt<\/code>: System-generated timestamp when the blog post created<\/li>\n<\/ul>\n<\/li>\n- \n
VoteMetrics<\/p>\n
This entity captures the voting history. It has the following attributes:<\/p>\n
- \n
Date timestamp<\/code>: System generated. It is the primary key for the time series container (table).<\/li>\nString blogId<\/code>: The blog ID voted by the user<\/li>\nString userId<\/code>: The user ID makes voting<\/li>\nInteger voteType<\/code>: The voting type, 1: Vote Up, 0: Vote Down <\/li>\n<\/ul>\n<\/li>\n<\/ul>\nData access with GridDB<\/h4>\n
First, we create Java POJO classes that represent the underlying table or container in GridDB. We annotate a class with Lombok @Data, which automatically generates getters for all fields, a useful toString method, and hashCode and equals implementations that check all non-transient fields. Also generate setters for all non-final fields, as well as a constructor.<\/p>\n
We will create the data access class according to the previous database design.<\/p>\n
\n\n@Data\npublic class User {\n @RowKey\n String id;\n String email;\n String fullName;\n Date createdAt;\n}\n\n@Data\npublic class Blog {\n @RowKey\n String id;\n String title;\n Integer voteUpCount;\n Integer voteDownCount;\n Date createdAt;\n}\n\n@Data\npublic class VoteMetrics {\n @RowKey\n Date timestamp;\n String blogId;\n String userId;\n Integer voteType;\n}<\/code><\/pre>\n<\/div>\nNext, we create the
GridDBConfig<\/code> class as a central configuration for database operation. The class will do the following: * Read environment variables for connecting to the GridDB database * Create a GridStore class for managing database connection to the GridDB instance * Create GridDB Collection’s container (Table) to manage a set of rows. The container is a rough equivalent of the table in a relational database. * On creating\/updating the Collection we specify the name and object corresponding to the column layout of the collection. Also for each collection, we add an index for a column that is frequently searched and used in the condition of the WHERE section of TQL.<\/p>\n\n\n@Configuration\npublic class GridDBConfig {\n\n @Value(\"${GRIDDB_NOTIFICATION_MEMBER}\")\n private String notificationMember;\n\n @Value(\"${GRIDDB_CLUSTER_NAME}\")\n private String clusterName;\n\n @Value(\"${GRIDDB_USER}\")\n private String user;\n\n @Value(\"${GRIDDB_PASSWORD}\")\n private String password;\n\n @Bean\n public GridStore gridStore() throws GSException {\n \/\/ Acquiring a GridStore instance\n Properties properties = new Properties();\n properties.setProperty(\"notificationMember\", notificationMember);\n properties.setProperty(\"clusterName\", clusterName);\n properties.setProperty(\"user\", user);\n properties.setProperty(\"password\", password);\n GridStore store = GridStoreFactory.getInstance().getGridStore(properties);\n return store;\n }\n\n @Bean\n public Collection<String, User> userCollection(GridStore gridStore) throws GSException {\n Collection<String, User> collection = gridStore.putCollection(\"users\", User.class);\n collection.createIndex(\"email\");\n return collection;\n }\n\n @Bean\n public Collection<String, Blog> blogCollection(GridStore gridStore) throws GSException {\n Collection<String, Blog> collection = gridStore.putCollection(\"blogs\", Blog.class);\n collection.createIndex(\"title\");\n return collection;\n }\n\n @Bean\n public TimeSeries<votemetrics> voteMetricContainer(GridStore gridStore) throws GSException {\n TimeSeries<\/votemetrics><votemetrics> timeSeries = gridStore.putTimeSeries(Constant.VOTEMETRICS_CONTAINER, VoteMetrics.class);\n timeSeries.createIndex(\"blogId\");\n timeSeries.createIndex(\"userId\");\n return timeSeries;\n }\n}<\/votemetrics><\/code><\/pre>\n<\/div>\nService class<\/h4>\n
Next, we create a service class with @Service annotation for handling business logic and convert the Entity class into DTO.<\/p>\n
BlogService.java<\/code> is responsible for finding, and creating blog posts in GridDB.<\/p>\n- \n
create<\/code>: Creating a new blog.<\/li>\n<\/ul>\n\n\npublic Blog create(CreateBlogRequest createBlogRequest) {\n Blog blog = new Blog();\n blog.setId(KeyGenerator.next(\"bl\"));\n blog.setTitle(createBlogRequest.getTitle());\n blog.setVoteDownCount(0);\n blog.setVoteUpCount(0);\n blog.setCreatedAt(new Date());\n try {\n blogCollection.put(blog);\n blogCollection.commit();\n } catch (GSException e) {\n log.error(\"Error create blog\", e);\n }\n return blog;\n}<\/code><\/pre>\n<\/div>\n- \n
fetchAll<\/code>: Fetching all blog posts.<\/li>\n<\/ul>\n\n\n public List<blog> fetchAll() {\n List<\/blog><blog> blogs = new ArrayList<>(0);\n try {\n Query<\/blog><blog> query = blogCollection.query(\"SELECT *\", Blog.class);\n RowSet<\/blog><blog> rowSet = query.fetch();\n while (rowSet.hasNext()) {\n blogs.add(rowSet.next());\n }\n } catch (GSException e) {\n log.error(\"Error fetchAll\", e);\n }\n return blogs;\n }<\/blog><\/code><\/pre>\n<\/div>\n- \n
updateVoteUp<\/code>: to save the vote-up action. In this method, on fetching row, we use theget(key, forUpdate)<\/code> method to lock the row we want to update making other update operations wait until the transaction completes or a timeout occurs.<\/li>\n<\/ul>\n\n\n public void updateVoteUp(String blogId) throws GSException {\n blogCollection.setAutoCommit(false);\n Blog blog = blogCollection.get(blogId, true);\n blog.setVoteUpCount(blog.getVoteUpCount() + 1);\n blogCollection.put(blog);\n blogCollection.commit();\n }<\/code><\/pre>\n<\/div>\nExample of vote metrics rows.<\/p>\n
\n\nVoteMetrics(timestamp=Sun Jan 21 03:48:10 GMT 2024, blogId=bl_0EWG3KRE8H95G, userId=us_0EWQES1BVRJAN, voteType=1)\nVoteMetrics(timestamp=Sun Jan 21 03:48:03 GMT 2024, blogId=bl_0EWG3KRDCHBEM, userId=us_0EWQER8KKRHDF, voteType=1)\nVoteMetrics(timestamp=Sun Jan 21 03:48:02 GMT 2024, blogId=bl_0EWQ49HPKRKWB, userId=us_0EWQER2KVRJCJ, voteType=1)\nVoteMetrics(timestamp=Sun Jan 21 03:48:00 GMT 2024, blogId=bl_0EWG3KRE8H95G, userId=us_0EWQEQV6FRKKV, voteType=1)<\/code><\/pre>\n<\/div>\nServing Web Content with Spring MVC<\/h3>\n
Spring’s web MVC framework is, like many other web MVC frameworks, request-driven, designed around a central Servlet that dispatches requests to controllers and offers other functionality that facilitates the development of web applications. By using Spring MVC Framework we got the following advantages: * The Spring MVC separates each role, where the model object, controller, command object, view resolver, etc. can be fulfilled by a specialized object. * It uses a lightweight servlet container to develop and deploy your application. * It provides a robust configuration for both framework and application classes that includes easy referencing across contexts, such as from web controllers to business objects. * It provides the specific annotations that easily redirect the page.<\/p>\n
In this tutorial, we will follow a standard MVC architecture. We will have a controller (
VotesController<\/code> class), views (votes.html<\/code> Thymeleaf template), and a model (a Java map object) for passing data into the view. Every method of the controller is mapped to a URI.<\/p>\nVotes page<\/h4>\n
In the following example,
VotesController<\/code>, methodvotes<\/code> handles GET requests for\/votes<\/code> by returning the name of a View (in this case,votes<\/code>), also adding attributeblogs<\/code> toModel<\/code> via itsaddAttribute<\/code> method.<\/p>\n\n\n@Controller\n@RequestMapping(\"\/votes\")\npublic class VotesController {\n \n @GetMapping\n String votes(Model model) {\n List<blog> blogs = blogService.fetchAll();\n model.addAttribute(\"blogs\", blogs);\n return \"votes\";\n }\n\n @GetMapping(\"\/up\/{id}\")\n public String voteUp(@PathVariable(\"id\") String blogId, Model model, RedirectAttributes redirectAttributes) {\n try {\n String userId = KeyGenerator.next(\"us\");\n voteService.voteUp(blogId, userId);\n redirectAttributes.addFlashAttribute(\"message\", \"Voting successful!\");\n } catch (Exception e) {\n redirectAttributes.addFlashAttribute(\"message\", \"Oh no!\");\n }\n return \"redirect:\/votes\";\n }\n}\n<\/blog><\/code><\/pre>\n<\/div>\nAfter creating the controller class, we need to define the template for the views to be generated. We are using
Thymeleaf<\/code>, a modern server-side Java template engine for both web and standalone environments. The HTML templates written in Thymeleaf still look and work like HTML.<\/p>\nWe define an HTML table for displaying a list of blog posts and use
th:each<\/code> tag attribute to iterate over a collection of blog posts, andth:text<\/code> tag for displaying the value.<\/p>\n\n\n <tbody>\n <tr th_each=\"blog : ${blogs}\">\n <th scope=\"row\">[[${blog.title}]]<\/th>\n <td>\n <a th_href=\"@{'\/votes\/up\/' + ${blog.id}}\" title=\"Vote Up\" class=\"btn btn-outline-success\"\n role=\"button\">\n <i class=\"fa fa-thumbs-up\"><\/i>\n <span type=\"text\" th_text=\"${blog.voteUpCount}\" class=\"btn-label\"><\/span>\n <\/a>\n <\/td>\n <td>\n <a th_href=\"@{'\/votes\/down\/' + ${blog.id}}\" title=\"Vote Down\" class=\"btn btn-outline-danger\"\n role=\"button\">\n <i class=\"fa fa-thumbs-down\"><\/i>\n <span type=\"text\" th_text=\"${blog.voteDownCount}\" class=\"btn-label\"><\/span>\n <\/a>\n <\/td>\n\n <td>[[${blog.createdAt}]]<\/td>\n <\/tr>\n <\/tbody><\/code><\/pre>\n<\/div>\nHere is a preview of the votes page. Users should be able to click the
thumbs-up\/down<\/code> icon to vote a post up or down.<\/p>\n![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2024\/03\/votes_page.png\")
<\/a><\/p>\nDashboard page<\/h4>\n
For the real-time dashboard, we use Server-Sent Event. With server-sent events, the server can send new data to a web page at any time, by pushing messages to the web page. These incoming messages can be treated as Events + data inside the web page.<\/p>\n
To open a connection to the server to begin receiving events from it, create a new EventSource object with the URL(
\/votes\/chart-data<\/code>) of a script that generates the events.<\/p>\n\nscript\nconst ctx = document.getElementById('charts');\nconst voteChart = new Chart(ctx, config);\n\/* A small decorator for the JavaScript EventSource API that automatically reconnects *\/\nconst eventSource = new ReconnectingEventSource(\"\/votes\/chart-data\");<\/code><\/pre>\n<\/div>\nHere the EventSource listens for incoming message events and updates the chart dataset.<\/p>\n
\nscript\neventSource.onmessage = function (event) {\n console.log(\"Received event: \" + event.data);\n const data = JSON.parse(event.data);\n config.data.labels.splice(0, config.data.labels.length, ...data.map(row => row.label));\n config.data.datasets[0].data.splice(0, config.data.datasets[0].data.length, ...data.map(row => row.count));\n voteChart.update();\n};<\/code><\/pre>\n<\/div>\nThe server-side script that sends events must respond using the MIME-type text\/event-stream. Each notification is sent as a block of text terminated by a pair of newlines.<\/p>\n
\n\n@GetMapping(\"\/chart-data\")\npublic SseEmitter streamSseMvc(@RequestHeader Map<String, String> headers) {\n SseEmitter emitter = new SseEmitter(Duration.ofMinutes(15).toMillis());\n ExecutorService sseMvcExecutor = Executors.newSingleThreadExecutor();\n sseMvcExecutor.execute(() -> {\n try {\n for (int i = 0; true; i++) {\n SseEventBuilder event = SseEmitter.event()\n .data(voteMetricService.getVoteAggregateOverTime())\n .id(eventId);\n emitter.send(event);\n Thread.sleep(Duration.ofSeconds(30).toMillis());\n }\n } catch (Exception ex) {\n emitter.completeWithError(ex);\n }\n emitter.complete();\n });\n return emitter;\n}<\/code><\/pre>\n<\/div>\nIn this project, we sent the event forever until SseEmitter got a timeout. The server will send new data every 30 seconds.<\/p>\n
- \n
- Java 17 or later<\/a>, Maven 3.5+<\/a>, Docker engine<\/a>, and your favorite text editor (Intellij IDEA<\/a>, or VSCode<\/a>)<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2024\/03\/votescount_dashboard_realtime.png\")
<\/a><\/p>\n![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2024\/03\/sse_eventstream.png\")
<\/a><\/p>\n