SecretMessage

1. Webapp Description

SecretMessage was developed as a project for a Third Year Software Development Module, Data Representation and Querying.

SecretMessage's aim is to provide a service for creating confidential messages that are encrypted and decrypted on the client side. It allows users to generate a URL for a message that they have created. This URL will then be used to access and decrypt the message.

When creating SecretMessage, I aimed to provide a very minimalistic and easy to use user interface and for SecretMessage to do exactly what it says on the tin.

2. Webapp Developers

Name	GitHub Username	Student ID
Ervin	ImErvin	G0031115

3. Project Overview

I have created a Single-Page Web Application (SPA) that allows the users to send confidential messages. This application was selected because I was very interested in how websites use URL generation to display data. This resulted in further consideration of existing web apps that implement this feature. The following apps were considered: * A Pastebin replica * A Collabedit replica * A Privnote replica

I ruled out Collabedit because it would be very tough to get working as it would allow multiple users to access one file. After that ruling, I was left with Pastebin and Privnote. I was torn between Pastebin and Privnote but after better inspection I saw that Privnote not only generated a link but also generated a decryption key too. This really sparked an interest.

4. Planning Phase

5. Outlining Tasks:
   Once I chose Privnote as my project base I began to reverse engineer it. The following tasks were clearly outlined:

   • Allow the user to enter a message into a text area.
   • Generate a URL for the message.
   • Allow the user to open a message using a URL.
   • Delete a message once it has been seen.
   • Encrypt and Decrypt the message.

6. Outlining Technologies:
   After considering the tasks above I had to consider the technologies I would have to implement to complete the tasks outlined. I came up with the following technologies:

   • Python
   • Flask Back End Framework
   • Bootstrap Front End Library
   • AngularJS Javascript Library
   • CouchDB Database

   Python
   Python was selected as we needed to use Python to develop our SPA. Referring to the project requirements:
   

   You are required to develop a single-page web application(SPA) written in the programming language Python using the Flask framework. You must devise an idea for a web application, write the software, write documentation explaining how the application works, and write a short user guide for it.

   Advantage: Python allows you to run your server locally and it implements Flask.
   Disadvantage: I had to learn Python which added to development time.

   Flask
   Flask was selected as we have been using Flask in our lectures and labs in college. Flask is a pretty obvious choice as it's a framework for Python that aims to make development of web applications a lot more developer friendly. The fact that we thoroughly used flask during our labs meant that I had a substantial knowledge base on how flask worked
   Advantage: Flask implements great libaries for developing a web app.
   Disadvantage: I had to learn how to use Flask and the libraries it provides.

   Bootstrap
   Twitters Bootstrap was selected as it provides an abundant amount of CSS and useful Javascript widgets to make your webpage look good. It was an obvious choice as it is implemented by a lot of websites, and is top tier when it comes to a front end library that's easy to use.
   Advantage: Abundant front end components reduces development time by providing pretty code necessary for a pretty website.
   Disadvantage: Bootstrap is a heavy library and includes components you may not use thus bulking up your directory.

   AngularJS
   AngularJS was selected because I really admired the data binding side of AngularJS. AngularJS is very employable for front-end development positions and so I decided to try to implement AngularJS and further learn how to use it. I also had a substantial knowledge base on how AngularJS works from my Mobile-App Development module in Second Year.
   Advantage: AngularJS allows easy data binding and can handle all the routing. It also updates asynchronously adding to the SPA side of things.
   Disadvantage: AngularJS isn't straightforward and it conflicts with jinja2's databinding.

   CouchDB
   CouchDB was selected as the database to use. MongoDB and CouchDB were head to head when it came to database technology planning as I wanted to use a nonsql database. After struggling to choose between the two I decided to go with CouchDB as it was much easier to implement and I had already learned how to query it and set it up in one of the Labs which in return saved me some development time.
   Advantage: CouchDB is very easy to set up and use.
   Disadvantage: Data is bulky as it's in JSON format.

7. Outlining Relevant HTTP Methods:
   By referencing relevant course material and using knowledge I gained from doing the labs, I came to the conclusion to use the following methods:

   • GET
   • POST

   GET: GET will allow my Python API to return JSON objects to be processed by my AngularJS.
   POST: POST will allow my AngularJS to send JSON to my python API and allow python to process the data.

8. Setting up enviroment

   Before I could jump into development, I had to set up a development enviroment. These are the steps I took to achieve a working enviroment.

   • Install Python3 and use pip to install Flask.
   • Create a directory and set up my webapp python file.
   • Install NodeJS to use the npm to install Bower.
   • Initiate bower in my project's static directory.
   • Create a bowerrc and set the directory to lib to download the libaries to that directory.
   • Ran the following command to install angular with bootstrap libaries to my lib directory.
     

      $ bower install bootstrap angular#1.2.16 angular bootstrap --save

   • Now that bower imported the libaries I needed, I downloaded CouchDB and was set to go.

9. Architecture

   The web app uses the technologies above to provide an stable architecture. Python 3 is used with Flask to run the back end of the application and provide routes that the front end will query. The front end consists of Bootstrap and AngularJS libraries with miniature implementation of fontawesome for the footer.

   The Python Architecture is designed to synergies each route. Each route will directly reference another in one way or another. Further details in comment block in my webapp.py file.

   The AngularJS Architecture is designed by allowing the factory to make all the AJAX calls in functions and return those functions to the controllers. The controllers then act as a bridge between the functions in the factory and the HTML to allow the user to use them.

   The Directory Architecture is designed to correspond to Flasks static methods and template methods.
   
   The Static directory will hold static files such as CSS,Javascript files,Image files separated into relevant directories. It also holds the index.htm and about.html as they are retrieved from flask which looks for them in the static folder.
   
   The Template directory will hold template HTML files that will display unique data (sent from Jinja2) everytime they're queried. Holds messageTemplate.html and messageErrorTemplate.html

10. How to run the application

    Install CouchDB
    Install Python3

    Once you have installed the prerequisites above open any Bash command prompt to run the following commands.

    Clone this repository to a desired directory.

    $ CD Desktop
    
    $ git clone https://github.com/ImErvin/SecretMessage 

    Change your directory to SecretMessage.

    $ CD SecretMessage

    Install required plugins for Python.

    $ pip install -r requirements.txt

    Set up the database by running setup.py

    $ python setup.py

    Start up your app locally by running webapp.py

    $ python webapp.py

11. Conclusion:

    By doing this project I achieved my personal goal of learning about all the new technologies I implemented into my web app. It has been a great learning experience and was very acomplishing to create a fully working website that I can display on my Github Profile.

    The main differences I'd make to the project if I were to start again are:

    • To make a better use of AngularJS and to use Angular to handle the routings and handle the front end completely as a seperate app.
    • Get a better understanding of RESTful APIs and implement my Python to act as the RESTful API and server host.
    • I would make better use of AngularJS's $http requests thus making jQuery redundant.
    • Make a more efficient implementation for dynamically updating content on a single HTML page.

    The secondary differences I'd make to the project if I were to start again are:

    • Make bower redundant by using CDN links to libaries.
    • Decrease the amount of GET requests made when a new page is loaded by implementing the point above.

12. References

    Through the development phase I sampled code from the following websites:

    • Github
    • Stack Overflow
    • Bootstrap
    • Flask
    • CouchDB with Python