mayoiza / freetalk-app

FreeTalk-App

Technologies, Framework and Methodologies: At this application I used the following Technologies, Framework and Methodologies: 1- Asp.Net Web API (as a server side), 2- AngularJS (as client side script), 3- Entity Framework code first, 4- N-Tier architecture. Project’s Tiers: 1- FreeTalk_Model: Contains the models (User and Post) and the RepositoryInterfaces. 2- FreeTalk_API: The API of the Project 3- FreeTalk_UI: Client side built with AngularJS.

Project Explanation

Data Base Design: I made the design of the Database as the following: Two tables one for the Users and the other for the Posts. The relationship between the users and the posts is one to many as one user can have many posts while the post has only one Author (User). The Posts are either main post or Reply post for a main post and for this I made a Recursive relationship.

FreeTalk_Model As the above illustration I used Entity Framework Code first to implement the Data base, and the steps for implementing it were as the following: 1- I create a class library project “FreeTalk_Model” this project contains the model classes (User and Post) these classes represent the Tables of the database. 2- The User class contains properties each one represent a column at the database’s User table. The User’s properties are (user Id, user name, password, first name, last name, and navigation propertied to the posts to represent the “one to many” relationship). 3- The Post class contains properties each one represent a column at the database’s Post table. The Post’s properties are (Post content, post type, create date, update date, user Id “Foreign Key”, post Id “Primary Key”, Parent ID “This for the recursive relationship between the main post and the reply post”.  will explain later 4- Also I made a class the contains all the property that we will return from the Get method  will explain later 5- Finally I made RepositoryInterfaces for each class and these Interfaces contains the CRUD methods that will be implemented at the Repository classes

FreeTalk_API: 1- The next step is creating API project that will contains the API services 2- After creating API I created Repository class for Post and User each class will implement its Interface. 3- Build the project. 4- I created the controllers by scaffolding the Model classes 5- At the Nuget console write the command “Enable migrations” to create the configuration class 6- At the Seed method of the configuration class I added Hardcode data that will be inserted at our data base for tests purposes. 7- I wrote at the Nuget Console the command “Add-Migration Initial” then “Update-Database”. “Update-Database” command executes the code generated by "Add-Migration Initial" command and creates the database. Note: By default the database is created using localDb and I left it this way At this point in Web.Config ConnectionStrings section the connection string points to LocalDb. This same connection string can be changed before executing the above commands to point to Sql Server Express instance to create the Database tables in Microsoft Sql Server. “I preferred to leave it at the local” 8- At the repository classes I added the logic for all needed CRUD methods Note: I separated the methods that deal with the data base from the properties for “Separation concerns” purposes, and this technique is called Repository design pattern.

• Most of the queries are straight forward and doesn’t need much explanation except the method of retrieving the Main posts and the reply posts and here I explain the logic of it: As I said earlier there is a recursive relationship between the main post and the reply post, so I added column at the posts table called Parent ID this column is nullable. If the post is Main post, that column will be null for this pods, and if the post was a reply for a main post, then the parent id column for the reply post will contains the primary key of the main post that it is replying on. So at the Retrieve methods if we want to retrieve all the main posts we will write a query to retrieve all the posts that has null parent id. API Controllers: API controllers contain all the needed services that will receive the request from the client side and send the response to it. Important note 1: Due to using N-tier architecture we had to use Cross-origin resource sharing (CORS) which is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the resource originated. Important note 2: Because C# best practice suggests using Pascal case in writing the properties and Javascript best practice suggests writing variables with Camel case there would be a conflict during passing the data. So to change the properties to Camel case to solve the conflict between the API and Angular I used serialization formatter

FreeTalk_UI: User Authentication and Authorization:  I made Login function at “UsersController” that takes User name and Password and return userId “from the database”, this userId will be saved at variable at the front end “showed at the URL”.  If the user tried to make any action like (Edit, Delete) the system check first if the userId of the post equals the userId that saved at the url, if they are equal the action will be done successfully and if not a validation message shall display.  User can Register with UserName and Password or enter the News Feed page as a visitor.  I used RouteProvider for the routing between the login page and the newsfeed page  Visitor Can’t Post, Reply, Edit or Delete. Can only filter the posts  Proper validation message displayed if unauthorized user tried to make any action