How I Built a Hotel Platform With Unity3D and AWS | by Alexandre Bruffa | Apr, 2022

Illustration by Gianca Chavest

Some years in the past (pre-pandemic instances), a shopper of mine known as me very excited, he had a giant mission in thoughts and wanted my companies. He informed me: “Alex, I need to make a SuitePad for the Latam market”. Wait, what?

In case you have traveled and rested in luxurious motels or resorts, you need to have used the multifunctional pad or pill in your lodge room. This system primarily permits visualizing details about the lodge, telephone numbers, menus, costs, and occasions, and generally permits communication with room service or reception. An incredible instance of any such product is SuitePad.

And I lastly did it! Right here is an outline of the ultimate app:

On this article, I’ll clarify the right way to construct this sort of platform utilizing Unity3D for the visible interface and Amazon Internet Companies (AWS) for the server-side structure. This text will give attention to the right way to configure the companies and set up communication between them. As a matter of confidentiality, I’ll solely present fragments of code of the principal functionalities of the platform.

Vertical model of the ultimate app working on an Android pad

My shopper claims that he already had purchased some Android pads and he wanted me to construct the platform. The primary supply can be very fundamental: it solely would load lodge data from the server and present it on the pad. No communication with room service, nor different functionalities.

My shopper had many necessities for the primary supply:

  • The app must be a “white label” app: it may adapt to any lodge. Subsequently logos, app colours, textual content, media, and so forth. must be loaded from the cloud.
  • The app ought to have a login mechanism, with a username and a password. The username must be distinctive for every lodge room.
  • The app must be multilanguage and multi-currencies.
  • The app ought to run on each Android and iOS gadgets and considers horizontal and vertical codecs.
  • The app ought to obtain all of the accessible media (photos, texts, and so forth. ) after the consumer logs in.
  • The server ought to deal with a excessive quantity of shopper connections.

Let’s start.

For the shopper, we have to construct an app that may run on each Android and iOS. I selected to work with Unity3D, due to the pliability it affords (Unity apps can run on Desktop, iOS, Android, WebGL, tvOS, PS4, and PS5) and my common information of the platform.

For the server-side, we want a scalable structure constructed on a cloud platform. I selected to work with Amazon Internet Companies (AWS), primarily due to the reliability of its scalable companies and my expertise with it.

Right here is the final structure of our platform:

Observe: I cannot implement the AWS SDK; I want to keep up independence between shopper and server-side.

Cognito

The primary Amazon service we use is Cognito. Cognito is sort of a strongbox the place customers, customers’ attributes, and passwords are saved. It offers safe consumer authentication with usernames and passwords.

➡️ Person pool: First we create a consumer pool with consumer title auth and self-registration disabled. Observe that the Person pool ID will probably be robotically generated.

➡️ App: In the course of the Person pool creation course of, a Person pool App will probably be created. We selected consumer password authentication as the one allowed authentication move, and we create two customized attributes: hotel_name and room_number. Observe that the App shopper ID will probably be robotically generated.

➡️ Customers: We create the customers manually throughout the Person pool. The consumer title discipline is exclusive, so I set it as a concatenation of the lodge title and the room quantity.

RDS

RDS stands for Relational Database Service. Within the relational database, we are going to retailer all of the transactional data we want.

➡️ Database creation: First, we create a MySQL database with public entry, and we arrange credentials (database title, username, and password):

➡️ Safety guidelines: Now we have to entry the database to construct the tables and fill them with information. I selected to do it with a desktop MySQL shopper: Sequel Pro. So, we have to permit exterior connections to our database: we enter the safety group of our database and we alter the inbound guidelines to permit all connections.

We will now hook up with our database from the MySQL shopper with the credentials we arrange throughout the database creation:

DynamoDB

DynamoDB is the no relational database service of AWS. We’ll retailer in it all of the no transactional data we now have like titles, descriptions, image URLs, and so forth.

➡️ Desk creation: We create a DynamoDB desk. Our information will probably be segmented by the lodge so we selected this parameter because the Partition Key of the desk.

➡️ Merchandise creation: We create a brand new merchandise containing our JSON information.

S3

S3 is a scalable storage service for static content material, we use it to retailer photos that will probably be proven on the pad.

➡️ Bucket: We create a brand new bucket aka repository. Since we retailer no delicate media (photos of motels, menus, rooms, and so forth. could be discovered on the web), we set the bucket and its content material to “public”.

➡️ Bucket coverage: We edit the bucket coverage to permit bucket content material solely to be learn.

Observe: In our instance above, the ultimate URL of our repository can be: https://hotelmotelbucket.s3.amazonaws.com/

Lambda

Lambda is a superb serverless service that permits working code letting Amazon handle server assets for you.

➡️ GetData operate: This Lambda operate will permit getting lodge information saved in DynamoDB. First, we create a brand new operate from scratch working on the final model of Python supplied by Lambda (3.9 for now)

Right here is the operate:

Notes:

  • Because of the Authorizer we use, all of the consumer data will probably be accessible within the occasion variable. We will get the worth of the customized attribute hotel_name we outlined within the consumer pool software. In our instance, this worth must be “lotus”.
  • We use boto3, the AWS SDK for Python, to name different AWS companies on this case, DynamoDB. We use the get_item operate to retrieve the info from the desk “HotelMotel” with the important thing “lotus”.
  • Python native JSON library does not support Decimal type, so we create a DecimalEncoder class to forged Decimals to drift.
  • We use the attempt/besides clause to deal with potential errors.

By default, Lambda features shouldn’t have permission to learn or write DynamoDB tables, so don’t neglect to connect the AmazonDynamoDBReadOnlyAccess permission to the Lambda operate we now have simply created.

➡️ OnLogged operate: This Lambda operate will permit saving a brand new consumer login in our relational database. This operate will probably be known as straight by Cognito as a set off when a consumer logs efficiently.

The desk for saving login historical past within the relational database is the next:

login_history desk designed with the DBDiagram software

To write down within the relational database, we want first to make the reference to the PyMySQL library. Drawback: PyMySQL just isn’t a local Lambda library, so we now have to create a brand new layer and we import PyMySQL into it. The layer may very well be reused for different features.

Observe: a clear model of PyMySQL could be discovered on PyPI.

We will now add the layer we now have simply created for our operate:

And right here is the operate:

Notes:

  • As described within the AWS documentation, the occasion object comprises the consumer’s data just like the username.
  • We return the entire occasion object as described within the documentation.

Nicely, now again to Cognito. We create a brand new post-authentication set off in our consumer pool, and we assign the lambda operate we now have simply created:

API Gateway

The API Gateway service permits making a safe entry level for our app and connecting it to the opposite AWS companies we’re utilizing, on this case, Lambda.

➡️ API: We create a brand new REST API

➡️ Authorizer: We create a brand new Authorizer to permit solely customers who belong to the consumer pool to name the API assets we are going to create.

➡️ Useful resource: We create a brand new useful resource. The useful resource title will probably be a suffix of the ultimate URL of the entry level.

➡️ Technique: We have to specify how the useful resource will probably be known as, creating a brand new methodology. We create a POST methodology with Lambda integration, and we choose the Python operate we now have beforehand written. Observe that the Lambda Proxy integration must be activated to permit parameters to be despatched from the Unity shopper.

Within the methodology we now have simply created, we selected our Authorizer:

➡️ Deploy: Our API is prepared, we simply have to deploy it. We create a brand new stage, for instance, “prod”.

Our API has been deployed and is able to use! Observe that the URL that seems will probably be known as by our Unity shopper.

Let’s attempt the get information operate of our API with Postman:

It really works like a allure 🙌

Since I’m not a designer, I questioned how may I ship a well-designed product, taking into consideration consumer expertise, colours mixtures, right font measurement, and so forth. For a primary supply, I selected to work with a responsive HTML template: the Lotus Hotel template.

Nicely, I didn’t use the HTML code, I simply replicated the cellular template design into Unity UI elements (Canvas, Button, Picture, and so forth. )

Overview of Lotus template // HotelMotel app

The template affords a lot of photos and icons. By including photos from free photos inventory web sites like Pixabay, I may have a terrific demo app.

Login to Cognito

To carry out a login to Cognito, we are going to carry out a submit request because of the UnityWebRequest class. Since we’re working with JSON information, we use the ToJson operate of the JsonUtility class to stringify our login parameters. In the identical approach, we use the FromJson operate to parse response information.

First, we create the info courses following the construction described within the Cognito documentation and we use the Serializable attribute to cope with JsonUtility necessities:

Then, we name the Cognito service with the consumer parameters (username and password) to log in:

Notes:

  • UnityWebRequest class works inside a Coroutine.
  • The ClientId parameter is the App shopper ID generated by Cognito.
  • The login URL could be totally different when you have chosen one other area creating your consumer pool (us-east-1).
  • The Post operate of UnityWebRequest does not help JSON strings and makes use of a wierd HTML string encryption as an alternative. A workaround is to do a bizarre trick with a byte array and a Put request. In case you have a greater resolution in thoughts please let me know within the feedback part.
  • The request wants the Content material-Sort and X-Amz-Goal headers to work correctly.
  • We’ll use the IdToken worth returned by Cognito because the Authorization parameter in our GetData operate.

Get Lodge Information

Since we now have logged efficiently to Cognito, we will now get the lodge information we have to present it on display.

Notes:

  • We use the URL of the entry level we deployed in API Gateway.
  • We ship the IdToken we obtained from Cognito as a request header.

Load Picture from S3

We’ve got logged and we get the info we have to present on the pad. We will now obtain the media from the repository we created on S3 (hotelmotelbucket).

Notes:

  • We’re working with UI elements, so we use the UI Image class to indicate the photographs.
  • We use the GetTexture operate from the UnityWebRequestTexture class to obtain an image from the repository.
  • UnityWebRequestTexture class works inside a Coroutine.
  • We forged the incoming information with the DownloadHandlerTexture class to get a Texture2D object.
  • We create UI Picture sprite dynamically with the feel’s dimension.

Queuing and dequeuing duties

The Unity3D app will get the entire information for the lodge after the consumer logs in and downloads the accessible media (image of rooms, meals, and so forth. ) from the repository. The issue is the next: there’s plenty of media and the system the place the app is working cannot deal with a whole lot of simultaneous picture downloads.

The workaround is making a queue mechanism, utilizing the C# Enqueue and Dequeue strategies.

Notes:

  • The queue we create is a queue of Coroutines: we enqueue and dequeue the GetPicture operate we created beforehand.
  • When a Coroutine is dequeued, the related GetPicture operate is executed.

Horizontal and vertical codecs help

We’re working with responsive UI parts, however horizontal and vertical codecs are too totally different from each other to be thought of a part of the identical design, so we create two distinct Canvas, one for every format.

And we use the Screen class to indicate the satisfactory Canvas:

Bonus: clock system

The app comprises a clock made with Textual content objects, right here is the code:

Notes:

  • We use the InvokeRepeating operate to replace the clock each minute and to tinkle the factors each half second.
  • We use the Now operate of the DateTime class to retrieve the precise time of the system.
  • Every digit is managed individually to have extra management over it.

This text confirmed you the right way to construct a whole scalable cloud structure with Amazon Internet Companies, the right way to make these companies work together, and the way a Unity3D app can talk with these cloud companies.

Each code of this text has been examined utilizing Unity 2020.3.17 and Visible Studio Group 2019. The cellular system I used to run the Unity app is a Galaxy Tab A7 Lite with Android 11.

All ids and tokens proven on this article are pretend or expired, in case you attempt to use them, you won’t be able to determine any connections.

A particular because of Gianca Chavest for designing the superior illustrations.

More Posts