How did the idea start?
Our client, the Hotel Castilla Alicante, floated the idea as a way to inform their guests about the new Covid-19 rules, and the precautions they have taken to guarantee their safety. Also, as has become the norm nowadays, they needed to digitize their various menus, as physical menus are not allowed anymore.
There are various services available for this, but they wanted a bespoke solution that we could add more functionalities to, and also a simple solution to offer the information in other languages.
Once we had a basic concept, there was an idea exchange between us and the client where we came up with various new sections that would enhance their guests’ stay by offering them useful, up to date information.
Sections
Restaurant
The hotel offers two daily menus, one for the café and one for the restaurant, together with an à la carte menu, that need to be updated every day. The hotel can change the information via our simple content management system (CMS).
Covid info
Up to date information about the latest rules & regulations, and the measures taken by the hotel to guarantee guest and staff safety.
Tourist guide
A small tourist guide with various amenities, tourist spots, beaches, museums, sports facilities, etc… near the hotel, with text, photos, external links and links to Google Maps to open their location.
The weather
Real time weather reporting for San Juan, with sunrise & sunset times, relative humidity, and wind speed & direction.
Timetables
Timetables for all the hotel’s services.
Auto check-in
Button that links to the hotel’s auto check-in service so that guests can check in with their smartphones.
Directory
Download the latest service menu for room service.
¿Why a web app?
Our first instinct was to create a standard smartphone app, one for iOS and one for Android, but we finally decided to develop a web application, for various reasons:
- Ease of access. With a native app, the user has to access their app store to download and install the app, and then open it. With a web app, we just send their browser to the app and they can start using it, whether it be via a standard URL address (https::/app.hcastilla.com/) or via a QR code, that simply codifies the URL address.
- Less development time, thus less cost. Native apps are more time consuming to develop and are more complex to publish and update. With a web app, we just have to push new versions to the server, and everyone is updated.
- With a web app we have more freedom to choose the technologies that suite us best.
- No need to update two different versions of the app.
- Seeing as this app does not need to access client data or internal smartphone functionality, there really are no advantages to developing a native application.
Technologies used
To create the web app, we used the web’s most standard languages: HTML, CSS, JavaScript, PHP and MySql.
To get the most out of these languages, we added a series of frameworks and libraries that help us to create applications faster, with a solid and secure, well defined infrastructure, as well as various tools that simplify tasks and boost productivity.
CSS:
To speed up our CSS styles development (CSS is what we use to add graphical styles to websites and applications), we used the Skeleton CSS framework. Skeleton CSS provides us with a simple base on which to build on and tools to define the responsive layout, so we can adapt it to different smartphone and tablet screen sizes.
We chose it for its powerful responsive functionality, without adding anything extra, allowing us total flexibility and freedom, which is how we like to work at BE Creativos.
JavaScript:
Today, there is a bewildering number of JavaScript frameworks and libraries. JavaScript is the fastest growing programming language at the moment and it is what gives the app it’s functionality. Every click and every action is controlled via JavaScript.
We chose the Vue JS framework to develop our code with, because of its simplicity and flexibility. Even though it is very powerful, it does not impose rigid workflows or app structures like its competitors React JS and Angular JS do, giving us more freedom to develop in our own style.
It also gives a flexible, modular structure, allowing us to easily and cleanly add more functionality.
PHP:
Unlike JavaScript that runs in the phone’s browser, PHP runs on the server and allows us to access and model the application data and serve it to the JavaScript front end.
To facilitate the PHP development, we opted for Slim microframework. Slim, like our other choices, offers us a simple but powerful environment, without imposing structures or workflows, and offers us powerful tools, allowing us to develop with ease and freedom.
To Slim we added tools from other major frameworks, like the Twig templating system from Symfony and the Eloquent ORM (database modelling tool) from Laravel.
MySql
Data is fundamental for any application, so handling it correctly is essential. For data management and modelling we use the Eloquent ORM, which forms part of the popular Laravel framework. Eloquent allows us to read and process the data with a simple and natural approach, instead of the old, cumbersome approach of gluing together SQL strings.
Conclusion
The result is an app that was created from a close collaboration with our client, with a fluid interchange of ideas that have resulted in a useful tool for their guests, adding value to their client services and relations.
