Hao Zhao(haz92), Zhehao Lin(zhl140), Zhehao Guo(zhg26)
Nowadays, people are increasingly using the social media to communicate with the world. The team decides to develop a social media website for our student to chat with friends, post texts, thumbs up and share images.
At first, we design the log in/ sign up functions for the website. People can sign up their own account with customized password longer that 5 digits.
If the users enter the wrong password, the system will give them a notification with: Password is incorrect to let them input a new one.
After succussfully entering in the main page, it has following functions for user to use: seeing friends moment, posting texts and images, uploading profile, and following information.
The information about the users, the moments’ text and images are stored in the MongoDB with Atlas. If people want to log out their accounts, they can directly click the “Logout” button and the page will jump back to the login page. Next, the team implement all of the features in the main page. All of these functions are written by RESTful API and beyond the project assignment requirement, especially the real-time chat part.
See others post and user's own post
The frontend need to get the image and text information which has been posted into the database and then show them on the page.
The users can text in the text field and click “POST”, then the text will be post into the moment part and also stored into the database.
User should click “IMAGE” button first and then click “POST” to upload their images into the moment.
Users have the privilege to upload the image they like to be their profile. This function will store the image information into the MongoDB database by using the Cloudinary API.
This is the most important feature and the most difficult feature for the whole project. The team use Socket to implement the real-time chat systems.
Angular JS: Login, Signup components(html + css + typescript)
Backend: Controller—login, signup, including token, hash code to
password
Deploy Heroku
Making slide and report
MongoDb design
Angular JS: auth-tabs, comments, followers and other components
Backend: Controller-function of sending friends, commenting, chatting etc.
Server: socket for real-time chat
Angular JS: toolbar, sidebar components Backend: use cloudinary api
We build our project based on MEAN stacks, which is MongoDB, Express.js, AngularJS (or Angular), and Node.js. Node.js and Express are used as backend. For the front end, we use Angular JS 7. And MongoDB is used as database.
The high level process of the framework is described in the following. Firstly, client makes a request by front end which is Angular. And then, Node.js parses the request to Express.js. After that, Express.js gets database from mongoDB which stores our data and returns data. Then, Express.js returns corresponding data to Node.js. And Node.js returns the request to Angular which, finally, displays the response to client. The process is showed like the image below.
Also, we use the API named Cloudinary to store the image information created by our website into the MongoDB database. Cloudinary is a SaaS technology company, which provides a cloud-based image and video management solution. It enables users to upload, store, manage, manipulate and deliver images and video for websites and apps. Thus, we try to use it to store the images users store in our website.
We deploy our project to Heroku which is a cloud platform. Heroku is a cloud platform as a service (PaaS) supporting several programming languages.
First of all, from the overall structure of the front end, we have established three folders, namely components, modules and services.
In the components folder, all front-end pages such as sidebar, login, toolbar, etc. are stored in html, css, and typescript. We use Materialize--A modern responsive front-end framework to design the overall page frame.
The second folder is modules, which will configure sub-routes for all the pages in the previous components folder, then we will define app.module.ts to tell angular how to assemble our application.
The third is the service folder, which has all the services that need to interact with the backend. Here we use the restful API to post and get the data.
For the backend, we create four folders, where the secret.js under the config file contains the configuration file for connecting mongodb.
The controller folder contains the business logic for all backend processing data, and writes the processed data into the database.
We designe the database code in the model folder, which contains the attributes of all tables and the type and default values.
We also create sockets on the back end, so that the backend automatically refreshes the page each time it sends data to the front end, so users can receive new messages in real time.
In addition, we also use the socket to detect whether the user is typing in the chat.
The most challenges is how to design the database, so that the clients will receive the correct message from the website.
We can see from the user's table, we store the basic information when the user logs in and register it in the database and in order to be able to find every user’s information correctly we also store the related information such as follower, following, notifications, etc. Additionally, the chat list that the user sends to the friend each time and the id of the friend are stored in the chatlist in the table.
The second table records the post message sent by each user. We associate this table with the previous users’ table so that we can correctly find all the messages sent by each user.
In the conversation table, we store the records of each user and different people chatting, and associate with the subsequent, message table.
The specific chat information in each conversation is recorded in the message table.
For the upload image part, we use cloudinary picture management API to manage our picture.
The problem is every time we upload user’s profile image like the picture shows below. We have to update all of the page from the website. In order to solve this problem, we have to set a new attribute in the database.
The image attribute will be stored every image they post. This attribute doesn’t need to be updated. However, we have to update the data about the “picId” and “picVersion” whenever user upload new profile image. So that each time when we get data from backend, we have to check whether the user have updated the profile image. If they did so we need to refresh the page automatically by using socket.
We would like to add a function about the group chat. This function will let users chat with many people together in the same chat room and it will be easy for them to discuss or communicate with each other.
Nowadays, more and more users like to use the short videos to record their life. Therefore, we would like to provide an interface for users to share their short video to friends.
When chatting, sometimes people might send the wrong sentence. Therefore, we would like to implement a recall button for users to retrieve the message send no more than 2 minutes.
We have learned a lot from this course. The course covers all part of the web development, from the history of web, the frontend development and the backend part. The activities and assignments are very useful for us to better understand how to develop a website step by step. We think that in the future, the course can introduce more programming language about the backend development, because nowadays many backend frameworks and technical stacks are popular.
All information are from the internet.