Week-4 App Screen 1


Week-4 App Screen 1 (UI + Backend integration)


Screenshot of screen 1


First screen of my App deals with confirming Roll number of student. When students register to this app, they will enter their basic information like roll number, class, branch . This information is retried and shown to the students when they click Proceed button.

In the back-end, nodejs queries student table to fetch entries from the database. If unknown roll number is entered (roll number of non-registered student), system throws Roll number not found error.

For login purpose, login page was built. For new registration of an user, signup page with incorporation Google reCAPTCHA feature was build. It was fun building these pages for my app

 Screenshot of Login Screen

Here user will log in to feedback system with username or password. If the user do not have credential, he may sign up with this system. Google reCAPTCH has been used to verify human against robot. Onnce the user is verified , he is redirected to signup page.


Screenshot of Signup page

On this page, login name and password of student is collected.. Apart from this, students roll number, class and branch is obtained. Using this information, sigup REST request and insert REST request are executed on appropriate tables to register user.


Comments

Post a Comment

Popular posts from this blog

Three Screen App Idea

As a part of Introduction to Modern Application Development NPTEL online course, I was fortunate to be selected for two month off-site internship programme. This internship is meant to consolidate software development concept and deliver a working product on Hassura platform within a period of two month. After a long thought and looking at department requirement I decided to develop a Student Feedback  Analysis  Web App. The main concept of this web-app is to allow students to give feedback about teaching learning process of departmental faculty. I am planning to devise this app with three screen (Excluding login/logout/register screen) First Screen:   Take student roll number and retrieve his/her information from database. Check whether the student already provided feedback. Second Screen: Allow student to provide feedback based on various parameters. Third Screen: Display analysis of students feedback in Graphical format (Pie Chart / Bar Cart) 
Read more

Week 8 - Final App

Image
Week 8 - Final App Finally its time to complete my App on Student Feedback Analysis System. Thanks to all members of Hasura team  for their kind support in completion of my app. Here are the final screenshot of my App.. Login Screen Screen 1 Screen 2 Screen 3 Apart from these functionalities, provision for signup using Google Captcha was also provided.
Read more

Setup dev environment

Image
Setup device  environment As per recommendation from Hasura team, I decided to install Ubuntu 16.04 on desktop Computer. Hardware and software  configuration of my PC are shown in screen-shot.   I downloaded  Ubuntu 16.04 image from http://releases.ubuntu.com/16.04/ubuntu-16.04.2-desktop-amd64.iso, created bootable pendrive(using Startup Disk Creator), and installed plain ubuntu 16.04 operating system on my PC. Now I thought to install an editor. As suggested by @tanmay during his first webinar, I decided to install vim on my system. So next step was to install vim by giving command $sudo apt-get install vim . Used vimtutor to learn basic vim commands. Updated .vimrc file for colors, indentation, numbering lines etc. The screen-shot of .vimrc file is
Read more