Coffee Jukebox

The App is ready for testing purposes now and the app can be accessed here . But before you start using the app, I recommend you going through this post which explains in detail the functioning of the app. Since our app is to be run on a local server in a shop, it is not possible to actually show you the full functioning of the app. So, the best we could do was upload our app online for the user feedback. Now, you can access all the functionalities of the app(all pages can be accessed by anyone) but in the real life scenario, only the song queue and song database pages will be accessible by the customers of the shop, the admin login page and admin console page will be accessible by the shop owner and the player page will be just opened by the shopkeeper on a window and that will automatically play the songs either from the queue or if the queue is empty, a random song will be played. Now, I will explain the pages in detail and the flow of the pages: Customers: The first screen yo...

The 3rd screen UI was done by my teammate Mayank Padhi and the details can be found in his blogpost . The admin, after logging in, should be able to access two things: The feedback by the customers. The song requests by the customers. So, a different user is created within the Hasura project and selection and deletion rights have been assigned to the tables "songrequests" and "complaints" tables. So after the login, the page is loaded by two menu's, one beside the other populated by the queries made in the background. Each complaint and song request is along with a button to delete it too, since if the issue is resolved, it is no longer required by the owner. The first view of the admin console Deleting a complaint Deleting a Song Request Along with these screens, we have also developed a "player" for our app that actually interacts with the database and plays the songs in the queue and if the queue is empty, it plays a ra...

The 2nd screen UI and authentication was dealt by my teammate Mayank Padhi and the details can be found in his blogpost . The backend part of the second screen is similar to the first page. The request is made to retrieve the song details from the database with the necessary authentication and the response is passed through template and the Song list is populated. Something like this: The 2nd screen of the Webapp However, unlike the first page's accordion bar, this accordion has an extra button (Add): Expanding an accordion in songlist page This helps in users to add their choice of song easily. Clicking on the add button adds the song to queue. Also to prevent adding same song in queue twice, an alert is shown if the song is added to queue or if the song is already in queue. This is done by checking if the song is already in queue first by a simple count query before the actual insert request. If the count is 0, the song is inserted else an alert is displayed that it is...

The 1st screen app's UI and authentication part was dealt by my teammate Mayank Padhi and the details can be found in his blogpost . After the sample UI design, it is time to get real and get the real data from the database and use that to populate our first page( the songs queue page). So, as soon as the authentication takes place, another request is sent to get the songs list in queue via the data endpoint of our project. The response data of each song is then sent passed through a template creating function that fills all the details of songs at the right places and an accordion tab is ready. Similar process occurs with the rest of the data and then the HTML is then populated with our queue list, something like this: First look of our Home Screen Now, if you click on any of the song tabs, you will get the song details of that particular song. Like this: Song details on clicking a tab The "Get the List" button would take you to the app's 2nd screen. the s...

After the data modelling , we needed to test our database for some Authentication requests to the Hasura auth endpoint. The registeration can be done by going to the /signup endpoint and login with the appropriate details can be done by going to the /login endpoint. The sample requests are as follows: Sign Up request to auth endpoint using username, password parameters Login request to auth endpoint using username, password parameters The link to the collection of authentication requests using Postman is here .

The previous blog covered the data modelling of our app. Now it is the time to test the working of our database using some sample queries to the data endpoint of the database. Some of the sample queries made through Postman are: Insert to Song Queue Select all songs in the song database Select all songs in the songs queue The link to the API query collection is here .

After the app idea  and wireframing of app , the next task is the Data Modelling for the app. You need to have a clear idea of what data you are going to need and how to reduce redundancy of data in your tables. In our case, we developed the database schema using Dia , a free software for designing schema using simple tools. The final database schema is as follows: Database schema for Coffee-Jukebox The musicdb is the main table that contains all the song details in the shop's database. The table songsqueue has m_id as the foreign key to musicdb's m_id so that only songs in the database can be added to the songs queue. Also, since we limit one song queue per user, the userdevice acts as primary key to songsqueue table. To maintain the queue order, the timestamp addtime has been added as a column to this table. The tables also have been developed in the hasura development environment.

The Hasura Local Development setup's latest instructions are available here . The latest instructions have been simplified. The instructions below had helped me set the local development on Windows earlier: Open Command Prompt. Type minikube start. The first time you type in this command, the minikube ISO will download. After the download and install inside VirtualBox, you get a message saying that kubectl is now configured to use the cluster. Something like this: Fig 1. First time starting minikube Type minikube ip to get your local cluster's ip address. This will help you in accessing the kubernetes cluster via Windows. Go to  https://beta.hasura.io/settings  to get your API token and open your Command Prompt and type  curl -H 'Authorization: Bearer <API_TOKEN>' -d '{\"ipaddr\": "\MINIKUBE_IP\"}' https://cloud.beta.hasura.io/v1/localdev , where <API_TOKEN> is replaced by the token you got earlier and MINIKUBE_IP is ...

What is Git? Git is a version control system which means that we can develop our project in more than one way and later if needed we can merge the branches to the development. How is this useful? This helps us in collaborating with other people and work together on different parts of project without conflicting with other's work. Also, each commit made is added with a message which helps us remember the changes made in the latest commit. Who should learn Git? In my opinion, any group project(technical or not) can be done using git. So, since git is also easy to learn, I think everyone should learn git so that it becomes easy to do collaborative tasks when required. Links to learn Git easily Tutorial by tutorialspoint Do It Yourself by Github

For any app development, it is necessary to have certain setup done before starting off building the project. For my development, I chose to develop in Windows 10 itself since all the required tools for developing my app were available to install on Windows. Since I am developing a webapp, I need a text editor for those HTML, JavaScript and CSS files. I choose Notepad++  since it is a very user friendly editor that supports syntax of several languages. Apart from the editor, I also installed curl , minikube , kubectl and VirtualBox , all required for the set up of local development of Hasura platform.

After the Idea comes the logic part where you need to set up the pages in such a way that they fit your requirements and look good too. This part is easily achieved through wireframing tools by some websites like  Proto.io . This helps you in focusing the basic structure of your app without writing codes and simply by drag-and-drop functions. For our app, these are the three screens after prototyping:   Screen 1: Current Song Queue   Screen 2: The Shop's song database Screen 3: The admin console for viewing the  feedback  and requests by the customers

The beginning of a new project is always tough, especially if you don't have a clue on what app you are going to build. We need to come up with an idea that is helpful in real life and something that people are interested in using. So, my friend and teammate for our internship project, Mayank Padhi, and I started thinking and researching on the internet ideas that we can develop into apps with our skill set. After a week or so, we had our own list of 3-5 ideas each that we thought were good. We shortlisted our ideas and ranked them according to our preferences and at the top of the list was a " Blood Donation App ".     We both loved the idea of making a blood donation app where people would register themselves along with their location details and when a needy person requested for blood, our app would send requests to the registered people if they would be free to donate and help another person in need. But after some research online, it turned out that the idea was a...