You can view and test our responsive prototype for a commerce web app here.
Used technologies and frameworks
For developing this prototype, we used Gaelyk and we have written a Groovy application using Google App Engine. Confused? No reason for that. Gaelyk is rather simple to use. And here is what you need to know in order to understand how the responsive UI works.
- the .gtpl files – Gaelyk view templates (similar to JSPs or PHP) – are simple templates without any additional logic in this case (in our app, they just contain the content of a html page)
- the .groovy files – or the Groovlets – are Groovy scripts, sort of controllers
- the routes.groovy file – for defining the URL routing
Besides Gaelyk for writing the whole app we used a bunch of cool technologies and frameworks for the front-end:
- Bootstrap – a front-end framework for easily developing a web application, containing a lot of ready to use components (such as buttons, sliders, carousels, navbars, etc)
- less – a dynamic stylesheet language (We had nothing to do with the CSS files and styling of the app, SNK Interactive took care of everything.)
So, now that you have a rough idea about what we used, let’s see how they are actually linked together, then we will dig deeper in the structure of the code, the more important files and in the end some tips & tricks about how to quickly modify the code.
System structure and design
As said, the responsive UI is a Gaelyk app and consists of the following main components:
- the Groovlets for handling some of the tasks that cannot be handle by front-end technologies alone (e.g.: logging in, registering to the hybris server, Facebook login)
- the gtpl templates for defining the static views
- the semantic templates for constructing and rendering the views with the content received using AJAX requests from the OCC API
Running and modifying the project
For running the project, run the following command in the command line opened in the root folder.
For changing the used server, modify the footer.gtpl file, located in the /WEB-INF/includes/ folder. You will need also to modify the server URL in the groovy files, and also the server name in oauth.js file. For testing purposes, after all these you can modify the occTestRequire.gtpl file with the new server name and run the unit tests.