Mini Project - Phase 2 Connexus Website

Transcription

1 Mini Project - Phase 2 Connexus Website The url to Connexus Website: Here is my github repository: The second phase is in the MiniProject-Phase2/Connexus subdirectory New features and modifications in this version: 1. regular uploader replaced by jquery multi-upload a. an Image class added containing name, blob_key, date, latitude and longitude b. each stream has a reference to its images c. addition of images are done within a transaction. So, no image will be lost. Also the transactional part is as minimal as possible to improve the level of concurrency 2. regular linear search replaced by autocomplete search with cache a. Google s Documents and Indexes API is used. Both the search and the autocomplete now use this efficient way of querying instead of linear search! b. upon creation of a stream : I hash its unique name with MD5 and use it as the doc_id for my document. I also keeps that as a field of my stream so that I can later remove the document from index, upon removing the stream! I find all the substrings for the stream name and I store them in my document as a single tokenized field I add the document to my search index and persist that index c. upon autocomplete request (the AJAX request from the client): A handler for autocomplete performs that query. The result is sorted according to the names. I also cache the result on a map (query -> res) on the client side. d. upon removal of the stream The document will be removed from the index using the MD5 hash ID stored in step b. e. there is no need to rebuild the indexes! Since, indexes are built and stored upon creation and deleted upon removal. So, there is no separate process for that! f. one cool thing I have done extra: you can search for streams by author s ! The syntax is -> author: test@example.com I use a query for retrieving the top 5 results. No linear search is performed! (Fast and efficient) 3. Geo View: a. the latitude and longitude are generated randomly for each image upon uploading. This is better than generating them randomly in geo view page! Because the places of them will be consistent and they are computed only once! 1

2 b. in the geo view request, the time interval will be sent to the server. A handler then returns the images for that specific stream which are in the desired time range. c. the shown map is in the clustered mode d. by hovering over each marker, the image will appear and upon mouseleave it will vanish! (No click required) e. when the user changes the time range, a timer will be activated and timed out within 1 s of no contact from the user. Then an AJAX request will be sent to the server backend. 4. Other modifications in this version: a. some regular posts replaced with jquery AJAX: delete and unsubscribe in the management page creating the stream in the create page subscribe and unsubscribe in the stream page trending page! (Changing the update rate) autocomplete and geo view b. lightbox2 is used to show images on the browser c. more responsiveness: some tooltips and popovers are added. Go for the question marks in the search page and in the stream page (while you are the owner). It will give you some hints in a very nice format! (Placing html inside the title tags took some of my time but it totally worths it!) in the view all streams and view a single stream the images will glow on mouseover I used this cool buttons library in my pagination (stream view) The format of the captions used in the first phase are now nicer! You can see them by hovering the mouse over the <i> buttons below each image in a stream! d. the error page almost completely is replaced by some beautiful bootstrap alerts. e. in form submissions, I do a validation check on client side (by jquery) to save server s resources if there is a problem in the users inputs. In such a case, I will alert the user. However, I also perform all of these validation checks at the server side! This way, if a malicious user generates the request without using the GUI, I am prepared for that! f. I also checked my website against some injection attacks. For example, to avoid Cross site scripting (XSS) I use the autoscape provided in Jinja in specific html pages. g. some bugs are fixed, and the application is now much more robust! h. I reformatted the files in my project! I now have a single file for each handler and my html files is inside the templates directory. The structure of my project is now better and more readable. (My first phase was just a single.py file!) i. the about this website link at the bottom of each page is now generated dynamically and loaded via jquery! This way, I just have one instance of its content rather than keeping a separate instance statically inside each.html file! So, there is just one instance of it and it is always consistent. 2

3 Here are some images to clarify my website: 1. Creating a new stream (via AJAX) In this example, because the operation is successful, I removed all the entered fields by jquery so that the form becomes clear for creating more streams! 2. Errors in create stream (via AJAX) 3

4 4

5 3. Multi Upload Only available when you are the owner. Otherwise, you can only subscribe/unsubscribe Hints to upload (on mouse hover) Several files selected 5

6 One of them is uploading All of the files are now uploaded: 6

7 4. Stream The middle image is shining due to mouseover! Also, you can see the info about it! 5. Management (All AJAX) 7

8 If one of the selected items is already deleted from another tab the server returns an error! 6. Geo View 8

9 There is no need to click! Just hover/leave the mouse over the markers... When there is no images in the desired time interval: 9

10 7. Search The Hint while you hover over the question mark. Search results 10

11 Autocomplete: Search by author, which is pretty cool :D It is done by an indexed query -> super fast! 8. Trending (Now via AJAX) 11

12 9. View all streams, now more responsive and shinier than before! The Video Games stream is now glowing (the mouse is over that): 10. Lightbox 2 You can go to next/prev image by pressing right/left arrows. The name of the image is also shown at the bottom. 12

13 11. The tools and technologies used: Click the About this website to see the bootstrap modal I also started the extra credit chrome extension part. Unfortunately, I could not complete it by the due date. Here is a sample image of my partial work: Thank you for reading this document! All in all, my goal in this project was to create a robust and efficient website. I also accompanied my website with a user friendly GUI to make it more usable and attractive. Nima Dini October 17, 2014 P.S: This document is created by Google Docs 13