Food Search with Elasticsearch, Spring Boot + Thymeleaf Search By Query DSL Web App

In summer internship, as a second project (first one here) on Bilişim A.Ş. @Cyberpark Bilkent i coded a food search engine website like Yemeksepeti with Elasticsearch based on Java Spring Boot. HTML pages powered by Thymeleaf. I completed the main function and left it as “work in progress”.

Elasticsearch and Spring has serious compatibility problems. Lots of function is deprecated. I’m using all of their latest versions. There wasn’t many sources for latest guides. So I spent lots of hours for researching connect Elasticsearch+Spring. Inspected JSONs. Added users to DB. Researched Elesticsearch’s structure like nodes, index, indices, types. Tried some Elasticsearch GET, POST methods of searching on ElasticVue on Firefox without installing Kibana.

Elasticsearch provides a full Query DSL (Domain Specific Language) based on JSON to define queries.

image

image

I did Spring+MySQL+Elasticsearch connection and sync. Added users to DB & by sync Elasticsearch. FindbyID REST and name is working at the moment.

http://localhost:8080/user/find-all works.

image

image

image

REST of query result “te” in users index

image

findAll() homepage

image

Then I completed the search results by query which is the key and hardest part of the project (with Elasticsearch). Firstly did manually accessing the url like without writing to search bar. Like go to https://www.google.com.tr/search?q=hava instead of searching by search bar. It was hard to do with Java+Thymeleaf to get entered value then redirect url. So I did it with JavaScript. Added 1 keyevent (for pressing enter key) and clicking search icon. Now it shows the results by query as http://localhost:8080/searchresults/ENTERED-VALUE but i have a new problem. It doesn’t show as table on Thymeleaf because it is not object, it’s JSON. So I have to convert to object. Searched how can I do it and found GSON and Jackson. GSON has vice versa feature of convert JSON to object and object to JSON. Also, I asked and tell this, then got an answer, pass it firstly to a DTO with GSON.

image

image

I finally figured out show JSON elements without DTO in Thymeleaf HTML it was too hard and key trick. Due to lots of version compatibility, deprecations I had to do hardest and longest way. Converted Elasticsearch query result to JSON Array & Object then assign elements to models to show in Thymeleaf HTML, created some pages like new index, enabled autofocus and added some new CSS. So now query search is fully working. Added restaurants & foods too in MySQL (auto sync to Elasticsearch). Hard part is over.

image

Homepage

Food Search with Elasticsearch, Spring Boot + Thymeleaf Search By Query DSL Web AppI’m planning to add other functions.

About Elasticsearch Cloud + Kibana

Signed up Elasticsearch Cloud Trial (ELK Stack – ES+Kibana) (https://www.elastic.co) then checked out the dashboard, menus, settings on Kibana. It’s easy to check demo data. But when it comes to adding the data ourselves, it’s too complicated and hard. I really had a hard time with it.

Found some COVID19 daily country datas on Github (https://github.com/CSSEGISandData/COVID-19/tree/master/csse_covid_19_data/csse_covid_19_daily_reports), added some of them to Elasticsearch and see statics bars. Created custom dashboards. Added a JSON code to refresh the data everyday, convert (pull) raw data to columns.

Since it is a difficult and comprehensive subject, my research is still ongoing. On internet, most of the source is outdated, this is a very bad situation, it makes things difficult. I have to use latest versions. Lots of dependency have compatibility problem with version conflict.

 

image

image

image

image