Internship at Hasura — 4.1
This is the fourth week of the internship and the time has come to code up our Restaurant App using Hasura APIs and other web technologies. In this blog, I will be describing the Landing Page of my project. I highly recommend this tutorial video, as it will help you to get the overall idea of what’s going on here!
Creating Custom Service and Authorized SSH Keys
This is the “Add a Custom Service” section of the Hasura platform which lets us create new services for our project. As you can see in the picture, it is very easy to create a new service, just give a Name, Enable the Git Push and click on create button at the bottom. Wait for a minute or so and your custom service will start running. After creating the service we need to add an Authorized SSH key to it, so that not everyone can directly access it. For that we need to first generate the ssh key by executing the following command :
ssh-keygen -t rsaThen copy paste the rsa key to the Authorized SSH Keys section present in the Advanced Settings and click on Save button. Now we are already to push codes to our hasura repository.
Landing Page Development
First, we need to download the hasura-quickstart-docker repository to our local machine. This repository contains the basic code required to create the backend server through different technologies like nodejs, python-django etc. For my project, I will be using nodejs, specifically express module, for the backend web server development. Hence copy paste the “nodejs-express” directory and create a git repository. This is the repository which will be pushed to Hasura later.
***Follow the tutorial video mentioned above for a better understanding***
The Landing page of my Restaurant App in two different states :
→ No Logged in User : When none of the users is logged In, the App has two options in the navigation bar, i.e Menu and Login, about which I will describe in the next blog. There are two buttons to place an order and to check the previous order. Further, it displays a message to Login or SignUp to see your Favourite Dishes. I have used JavaScript Cookies to decide whether a user is logged in or not.
→ Logged in User : When a user is logged In, he/she shall see their favourite dishes right on the Landing Page, which will enhance the User Experience. The JavaScript Cookies contain the authentication token and the user id which is used to send an HTTP request to the Hasura Data API to fetch the favourite items and name of the logged in user. Then it is displayed on the screen using AngularJS. Further, it also has a button to Logout, which deletes all the JavaScript Cookies.
The buttons to “Place an Order” or to “Display the Previous Order” are actually triggers of two modals. The first modal to place an order is actually a form that takes the input from the user. I have used AngularJS, specifically Promise API, which takes the input data and sends an HTTP request to the Hasura Data API. I have also used Form Validation API of AngularJS to validate the form on the client-side itself. As soon as the user clicks on the submit button, a message will pop up displaying the confirmation message, if the entered data is correct. Here, anyone can place an order, whether he/she is logged in or not. If a user is logged In, then in the schema his/her user id will be recorded. But if no one is logged In, then null value will be placed.
If the entered data is incorrect, the app will display a pop up stating — “Unable to Place Order. Entered Data is Invalid”. This is done using Form Validation API of AngularJS.
The second modal, i.e the Previous Order Modal will display all the information related to the last order placed by the logged-In User.
If no user is logged In and Previous Order button is clicked, then the app will ask the user to first Login through a pop up.
Exposing your local hasura project over internet
With Hasura we can even expose our local development over internet and share the project publicly. To do this, login to your beta dashboard, go to https://beta.hasura.io/local-development, and modify the Public URL. After this, you can execute
hasuractl local expose Now, you can access your project at the Public URL you’ve configured.
Internally Hasura uses a technology called “hgrok”. hgrok is a fork of ngrok for developers to expose their local hasura projects to the Internet via a secure tunnel. For more information, click here.
You can check out the Landing page of my project here. But it won’t be always available, as the server is my local machine! Please comment below any suggestion or issue.
