App screen 3 (UI + Backend integration)

 In this project, I have to develop three working page. The integration of two pages has been done. The third page is now in development. First, let me point out what things are needed to get it functional. These are as follows:

  1. It must respond to the results populated by search from page 2.
  2. It has to find other related information about that search result.
  3. Populate images of only relevant rooms.

The first point needed to work on page 2 and page 3 javascript. Page 2 has to send the clicked data, while page 3 has to receive the data and work on it. This answer helped me to understand how to do it. The problem I faced was that sessionStorage and localStorage were not accessible through file:// . The reason I got here is my third party site data and cookie were blocked. Since I was using through file:// , so there was no any site to check if data is from the third party or not.

The next thing which I have to do was a query request to fetch the other room related information. These pieces of information will have to populate in the table specified in front end UI. This was same as previously done searching. So, there were no big problems.

Populating images properly is very tricky. I used two libraries namely lightbox and fancybox. Both libraries are awesome. For the current situation, I liked fancybox more than the lightbox. You will see if you visit my app: http://roomlord.vivekjib.hasura.me/  The choice of image gallery is done. Now, I need to populate only related images to data showing in tables.

Hasura has a filestore like data and auth. I can be used to store any media type and have the streaming feature (if needed). To serve images, I put links in table named images. It contains two columns named id and images. The id column has the foreign key to the room table with column id. The images will be my primary key. The id can be repeated (Six times to be exact in my app). But, images link can not be repeated.

The next phase of my app will be user testing. I will gather feedback from fellow interns and make my app bug free and perfect. That will be my next blog. Till then 🙂

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s