Skip to main content

6.1 App Screen 3 (UI + Backend integration)

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 random song from the database. For the player, only the backend is developed since it is to be just opened in a tab by the owner of the shop and the songs will be played by the browser. A separate role is created for the player with update access to play count column of music database table, the delete access to songs queue and select access to music database for getting size of database. The screenshot of the player in it's running phase is given below:
The music player in action


Comments

Post a Comment

Popular posts from this blog

3.2 Hasura Data API + Postman Collection

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 .
Post a Comment
Read more

4.1 App Screen 1 (UI + Backend integration)

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...
Post a Comment
Read more

1.1 The Three Screen App Idea

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...
Post a Comment
Read more