Month: March 2017

Here is the file structure I’ll be creating in the database:

• Speakers Corner
  • User
    • User id
      • Email
      • First name
      • last name
      • Account creation date
      • type (a value to allow permissions for moderators and allow for representative accounts later)
      • Posts
        • Post id’s created by the user
          • Post type (Origional Letter or reply)
      • Account deleted (true/false for soft delete)
  •  Posts
    • Post id
      • Created user id
      • Post creation date
      • Title
      • Letter
      • type (a value to allow permissions for moderators and allow for representative accounts later)
      • Topic/tags*
      • Replies
        • <created user id>
        • Post creation date
        • Letter
        • Post deleted (true/false for soft delete)
      • Post deleted (true/false for soft delete)

I want to separate the posts from the users so that one can be completely deleted easily without affecting the other, if someone wanted their information deleted permenantly from the database I’d just have to delete the ‘User’ folder without the posts they made or the replies being affected.

There may have to be more added to this file structure but as far as I can tell, this is all I’d need.

*Topic/tags is a difficult one to figure out, I need to create an indexing system that allows for any topic to be seen as easily as any other. I can’t account for every possible topic so I’m considering a tag system where the user adds their own custom tags for finding their post in the search. However this would have problems with people adding the most popular tags without it applying to their post, I’ll look into this more but it’s a difficult one to figure out. Allowing users to create topic catagories would be the best I think, but I cant allow anyone to create any catagory or I’d have a hundred catagories for the same thing. How do you catagorize qualatative data?

Over the past few weeks I haven’t worked on Speakers Corner so much, but recently I’ve followed a lynda tutorial and have successfully created the functionality for adding and removing data to firebase through the site. At the moment it adds and removes meeting names and displays them on the site but I’ll post the code to show how I’ll be changing this to fit my site.

meetings.js

myApp.controller(‘MeetingsController’ , [‘$scope’, ‘$firebaseAuth’, ‘$firebaseArray’, function($scope, $firebaseAuth, $firebaseArray) { var ref = firebase.database().ref();//reference to the firebase database var auth = $firebaseAuth(); //uses the authentication service and places it in the auth variable auth.$onAuthStateChanged(function(authUser) {//uses a method to run a function when a user logs in, which returns true and is stored in the authUser variable if(authUser) { //if authUser exists run the following: var meetingsRef = ref.child(‘users’).child(authUser.uid).child(‘meetings’);//goes to users/(userid)/meetings in firebase var meetingsInfo = $firebaseArray(meetingsRef);//pulls an array of info from the variable ‘meetingsRef’ $scope.meetings = meetingsInfo; //puts meetingsInfo into meetings $scope.addMeeting = function() { meetingsInfo.$add({ //$add is how to push data to the database name: $scope.meetingname, //pushes the input field meetingname from meeting.html date: firebase.database.ServerValue.TIMESTAMP //pushes the server time }).then(function() { $scope.meetingname=”;//clears the input from the meetingname feild });//promise }//addmeeting $scope.deleteMeeting = function(key) { meetingsInfo.$remove(key); //$remove is how to delete things from the database } }//Authuser });//onAuthStateChanged }]); //myApp.controller

Meetings.html

<div class=”card meetings cf”> <div class=”textintro”> <h1>Add Meeting</h1> <p> Type a meeting name and hit +</p> <form action=”” class=”formgroup addmeeting cf” name=”myform” ng-submit=”addMeeting()” novalidate><!–ng-submit use angular js to submit a form, use a method called addMeeting, novalidate stops the browser validating instead of angular–> <div class=”inputwrapper”> <input type =”text” name=”meetingname” placeholder=”Meeting name” ng-model=”meetingname” ng-required=”true”> </div> <button type=”submit” class=”btn” ng-disabled=”myform.$invalid”><!–$invalid checks a meeting name has been typed from ng-required=”true” above–>+</button> </form> </div> </div><!– meetings cf –> <div class=”card meetings cf”> <h2>Your Meetings</h2> <div class=”meeting” ng-repeat=”(key, meeting) in meetings”><!–ng-repeat is an angular directive that in this example pulls a key (key is the hash created in the Firebase Database) and the meeting infomation for every instance of the object (in this case the array) called ‘meetings’, created in meetings.js –> <button class=”btn btn-delete tooltip” name=”button” ng-click=”deleteMeeting(key)”><span>Delete this meeting</span></button> <!–ng-click executes a methood called deleteMeeting, and passes it the key (the hash) so it knows which one to delete.–> <span class=”text”>{{meeting.name}}</span> </div> </div>

So I can add more text fields to the “addMeeting()” input form, then add those input fields to the addMeeting function (these names will change). Then to display the information I just have to add more to the <span> contatining meeting.name at the bottom.

The issue with this is that the $remove command deletes the information from the database permenantly. I will be working out a way to structure the back end where a soft delete is done; having a deleted variable that changes on pressing delete, then adding a condition to the ng-repeat to not display any with the deleted variable as true.

I’ve designed a new logo to better go with the flat design I intend to use. I have’t chosen the colours yet but they will be synonymous with the rest of the website, each section will be coloured slightly differently.

I wanted to create an optical illusion with negative space, however I’ve been looking at other logos and I think the most well designed ones are self contained inside some kind of border. I’d guess that is so the logo can stand out and not interfer with whatever page its put on.

So I’ve worked out how comunication between the front and back end will work, which I think is great progress considering I had never touched javascript before starting this project.
Here’s the code I learnt and annotated, it is part of the register function after the username and password are created in the database:

            .then(function(regUser) { //Firebase returns information which we pass into a variable called reg user
             var regRef = ref.child(‘users’)// creates a variable called regRef, it uses the ref variable to link to the database and records data into firebase, .child creates a sub-directory called users.
                .child(regUser.uid).set({ //creates a sub-directory named the same as the user ID, pulled from regUser.uid
                   date: firebase.database.ServerValue.TIMESTAMP, //pulls the time from the server, more precise than getting the javascript date
                   regUser: regUser.uid,
                   firstname: user.firstname,
                   lastname: user.lastname,
                   email: user.email
});

As a side note, the register page is styled from a sample CSS file, the starter files for the lynda tutorial I’m following. It is not the sites design.

 

This is a screenshot of the firebase site for speakers corner, you can see a user in there from where I have successfully registered a user using my code.

This is of course following a tutorial on Lynda.com, however I think following it has given me a firm understanding of how I can use Angular for this project.