Overview
In this blog I'm going to recreate Slack using Firebase, HTML, CSS and Javascript.

In the first part of this tutorial, we looked at the basics of HTML, CSS and Javascript. In this section, I want to dig a little deeper into Firebase's data structure, and how you can create you own functionalities.

Similar to the first section, I have created short videos that you can follow along to, as well as diverge from to make something unique!

Structure of this Post

Under each video, if there were any sites that I used, I will attach a link. Or if there was any code that I created that was not explained in detail I will paste it below.

1) Revisiting the Data in Firebase

2) Saving Users Data

a) Creating the Users Node
b) Check if the User is New

NOTE: Please note that I am still learning as well and sometimes I do silly things. Especially if something works, it becomes a habit and some would say borderline superstition. Throughout these videos I tell you to restart your sever again and again and again every time you make a change. This is not necessary. Only when you change things in your backend do you need to restart the server. Please ignore this in this tutorial, and I will update the content in the future.

Revisiting the Data in Firebase

For more information on the getAuth() Function.

Saving Users Data

Creating a Users Node

Check if the User is New

This video is also a little rough to watch but hopefully I explain why we are using the exists function and how we can check for new users. If you have any questions, please leave me a comment!

For more information on the exists() Function.

Retrieving the User Data

So that covers the basic calls to our Database, you should play around with your chat application a bit more, create new functionality such as channels, and switching rooms, sounds when someone sends or recieves a message, ability to have private conversations, and favourite certain users etc.

If you are interested in learning more about Firebase, I strongly recommend checking out Code4Startup's Task Rabbit Tutorial which looks at Angular, Firebase and Bootstrap!

Overview
In this blog I'm going to recreate Slack using Firebase, HTML, CSS and Javascript. This is to help with the basics, so that you can create your own customized chat application with functionalities that are important and unique to you!

I have found it best to learn by watching short videos that I can pause and rewatch the parts that I found tricky and to skip over the parts that I already understand. Because this is my preference, I thought I would try to use this form to help teach HTML, CSS and Javascript.

Structure of this Post

Under each video, if there were any sites that I used, I will attach a link. Or if there was any code that I created that was not explained in detail I will paste it below.

1) Setting up Firebase

2) Getting comfortable with HTML/CSS

a) Getting to know Bootstrap
b) Customizing your CSS

a) Introducing the Javascript
b) Creating the Modal
c) Modifying the Modal

a) Creating Authentication with Social Networks
b) Creating Persistent Users (onAuth)
c) Logging Out

NOTE: Please note that I am still learning as well and sometimes I do silly things. Especially if something works, it becomes a habit and some would say borderline superstition. Throughout these videos I tell you to restart your sever again and again and again every time you make a change. This is not necessary. Only when you change things in your backend do you need to restart the server. Please ignore this in this tutorial, and I will update the content in the future.

Setting up Firebase

Setting up Firebase

Links:
Firebase - a service that deals with the backend database of apps in real-time.
Chat Tutorial - the starter code of our application (we will be making it better!)
localhost:8000 - you will be using a python server to quickly run your code. It will server you code to localhost:8000.

Note: if you close your terminal window, you will have to get back into the directory that is holding your Chat Project. (for example, cd Documents/dev/UITChat and then run your python command).

Code to start your server in the terminal:

python -m SimpleHTTPServer

To stop your server, you can press cmd+c in the terminal.

Getting Comfortable with HTML/CSS

Getting to know BootStrap
The code for including Bootstrap is under this video. You can copy and paste it into your head tag of you HTML.

Links:
Bootstrap - a front-end framework that helps you build a fully responsive project, easily and beautifully.
Codecademy - a course to familiarize yourself with Bootstrap.

To slash out your code (to make it comment instead of a command) command+/
For example, in HTML:

   <!-- FIREBASE (this is commented out)-->
   <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js' ></script>

Code to include Bootstrap (goes into the head tag of the index.html)

<!-- links to include BOOTSTRAP to your project-->

<link rel="stylesheet" href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css'  />
<link rel="stylesheet" href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css'  />
<link rel="stylesheet" href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' >
<script src='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap-modal.min.js' ></script>

Note: Right now if you make your webpage smaller, it is responsive until about 700px length and then it stacks intead of shrinks together. This is because I used col-md-10. The md means medium, so it works on medium sized devices, but if it gets smaller than a medium size (ie. a tablet or a phone screen size, it will stack).

To fix it so that this doesn't stack, we should use col-xs-10 and col-xs-2. This way it can be shrunk to the smallest preportions.

Awesome! So I will fix this in my code at the end of this tutorial, but you are welcome to make all your columns extra small now so that it is fully responsive.

Customizing your CSS

Creating Authentication Part One: Front-end

Introducing the Javascript
This video is a little rough to watch, and I'm sorry! I tried really hard to make it less clunky, but it refused to cooperate. On the bright side, it is only a minute long. Please don't less this video deter you from watching the rest, I promise the other ones are much better!

Creating the Modal

Code: CSS for the Modal (in the /css/style.css):

.modal {
    position: relative !important;
    margin-left: 30% !important;
    right-padding: 100px;
    margin-top: -400px !important;
    background-color: transparent;
    width: 50% !important;
}

Modifying the HTML of the Modal

Font-Awesome Icons - an icon set that I really like

Code to include Font Awesome

<link rel="stylesheet" href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' >

Creating Authentication Part Two: Backend

Creating Authentication with Social Networks

Creating Persistent Users (onAuth)

Logging out

Tidying Up and Next Steps

Tidying Up and Next Steps

Lastely, as a friend pointed out to me, if the webpage gets too small, the chat will stack rather than proportionally get smaller. To fix this, we should change all the col-md (mediums) to col-xs. You can double check your changes with mine below:

That should do it for the basics of a chat app! Next will be looking deeper into how information is saved and retrieved on Firebase and some different types of functionality we can do! Ideas for cool things we can do include (but are not limited to) Adding Channels, adding alert sounds, creating private messaging, adding emoji and "reactions", allowing files to be uploaded and shared.

In Part 1, we had an overview of design. Now that we have some of the basic principles down, we can start designing our application. In this project we are going to be creating a chat application using Firechat. When you initially download the chat, your application will look this:

Our goal this week will be to cutomize the chat to make it your own. We will do this by wireframing. Think about how you want the layout to look. For example, in the default Firechat, the Chat Rooms, Visitors, and current room you are in are all dropdown menues, which adds a barrier for the user to know where they are, who they are talking to and what their options are, conversly, Slack keeps all this information on their left side bar:

Slack uses a color to indicate who is available, and the current room that you are in rather than having .

Before we start delving into UI, we need to think about the vision. What do you want to be building? Who are you building it for? Will it be for a business, or an individual? Is it crisp and clean, or fun and whimsical?

Now that you have an idea and overall vision of what your chat application will look like we will start wireframing! But just before we begin, there are a couple of key design tips I want to touch on that I think can drastically improve your UI.

Details to Think About
There are five really key factors to think about when you are starting your wireframe: Color, Typography, Use of White Space, Sound and Icons. In this post I'm going to focus on the first three.

1) Color - Colors already have meaning and conventions associated with them, and evoke different feelings. Learn about what to use, what works well together, and Color Psychology.

You will probably choose 2 or 3 core colors for your application, but it is also really key to think about what you want your neutral colors to be. For example, I love that Slack has the time in a grey instead of a black, it makes it the name line less confusing but if I want to access the time information, it is no effort. It is present without being disruptive. Similarly, the unavailable people in the chat, I like that they are empty grey circles rather than solid red ones. Red draws your attention, whereas the grey is passive and unobtrusive.

Great resources for color palettes:
50 Beautiful Color Palettes
Play with colors

2) Typography - Especially with a chat application where the content will mainly be text, it is exteremly important to think about your typography. You want to encourage the user to keep reading, this should be enjoyale and light. Use different fonts, sizes, weights, line heights and colors to create a heirarchy of relavence.

Typography in ten minutes, is a great resource to get you started on the basic rules of Typography. Because I am a visual learner, I thought it would be good to show you an example of these guidelines at work:

So let's look at the differences between these two typographys:

a) Font Type, Size, Color and Weight:
Choose a beautiful font. Font size is super important. It should be effortless to read your content. Squinting, or enlarging the screen is a barrier to your message getting out there. Fonts on the web should be at least 24px. You can also adjust the weights (thickness of your font), I find choosing a larger size (28-30px), but thinner style makes your content look sleek and more inviting.

Great resources for fonts:
Google Fonts, is a great resource to test, play with and download fonts.
Top 100 Fonts for August 2015, a great list of current trendy fonts.

b) Line Spacing:
This is the distance between lines. It should be 120-145%. In the top example, the line spacing is 100%, meaning that where the top line ends is the same height as where the second line begins. Conversly, the second one has 130% spacing, making it easier and more elegant to read.

c) Line Length (This is also Use of White Space):
This is the width of the text block. Line length should be an average of 45–90 characters per line. I like to think of having the text to be about 35%-50% of the webpage. Haiving the text centered and short width, draws the readers attention to what is important, the content. It also keeps the user interested, as jumping to the next line is exciting and makes them feel like they have accomplished a lot. This positive feedback encourages the user to continue reading.

Now we can get started on wireframing.

Design is the way your product looks and feels. It is really important, both to get users interested and to keep users engaged with your application. When I first started, I neglected design, and this was a terrible mistake.

Luckily it makes for a great example of what not to do. Here is an image of one of my first mockups for a social network project:

What makes a bad Design?

Yes, this is a huge eye sore, but we can still learn a lot from this. Let's break down just some of the things that make it bad:

1) The colors are way too intense, and hard to look at. Also, the color on the pins don't make sense. Why are some blue and some blue and yellow? Does it correlate to air/water? This is confusing.
2) The size of the pins on the map are too big and it looks like I was using ClipArt (ugh...).
3) It is unclear how to add things to one of the three fields. Do I have to #air before I update my status for it to be put in that column? I created this and I don't know how to use it... That is a bad sign.

So this is a really good example of a shitty design. It is ugly and makes me want to shut it down. There is no clarity on how to use it or why I would want to (which I don't). It is neither inviting or engaging.

Components of Design

We can break design down into two important tasks:

1) User Interface(UI) - How it looks, the visual, the colors

2) User Experience(UX) - How it feels, how much do I want to use this app and does it move in a logical fashion.

Here is a great infographic of the difference between UX and UI designers that Darren MacDonald shared with me:

I like to think of Design as a restaurant. With the User Interface being visual: the way it looks when you enter, the colors, the use of space. The User Experience is everything else. It's the diversity of the menu, the service, the flavours, the cleanliness of the bathrooms etc. These two things are definitely dependent on one another.

Even if you loved the look of something you may have had terrible service which ruined your entire night. Equally, everything could be perfect, great service, great food, but it looked like such a dump you didn't even bother to go inside and give it a try.

Good User Experience is really important!

In other words, UX is the process which improves customer satisfaction and in turn, their loyalty. This can be done by easing usability, enhancing pleasure, and customer interact with the product. While UI is purely the make-up, how beautiful something is that makes you want to try it.

UX and UI are dependent on one another and must coordinate to make a solid and satisfying design.

So what is Good Design?

Now that we have seen an example of terrible design, let's look at what is good:

Instagram is a great example of good design. It is simple, informative and makes you want to interact with it. The photos are pretty and make you want to scroll through and see more, the photos are tailored to my interests. Also my attention is intentionally being drawn to the camera button. This entices me to create new content and share it on their app.

Design is important to get users interested and to keep them engaged with your application

You want your design to center around a users feelings, but more importantly you want to have your product evoke feelings. Design helps get users excited to use your application. If users are excited, they are more likely to use it, to return to it and to tell their friends about it.

Some Overarching Principles

1) Rule of Three :
This is a common rule in almost everything in life, writing, photography, lists. Humans remember things best in threes and it is aesthetically pleasing and comforting. Remember the rule of three while you are designing. Try to keep the number of core colors, display of articles, white space, etc. in threes.

2) Less is Better :
Having less forces the user to concentrate on the most important aspects of your application. You want to make your application intuitive. A Google study found that “visually complex” websites are rated as less beautiful than their simpler counterparts. Read more about this study and the importance of simplicity here: Why “Simple” Websites Are Scientifically Superior.

The design should make things apparent, and simple. Instead of being daunting to use or making the user feel stupid or incompetent, it should make their lives better. Dieter Rams is a master at this. Every time you add something to your app, double check if it is necessary.

... temper your use of heavy textures, 3D effects and multiple shadows. Instead, focus on functional colors, harmonious gradients, and beautiful typography.- Meng To

Check out Dieter Rams: ten principles for good design, to get a better understanding of simplistic design and elegancy.

3) Keep it Consistent :
It is important to keep things consistent both within your app and the real world. Within your app, keep the different types of fonts, icons, and sizes to a minimum. If you use a check mark as a symbol that the user has added an article, don't then use a thumbs up when the user adds a friend. The communication to the user is that their action was a positive one; don’t confuse them with multiple ways of communicating that.

Consistency in the real world is both in reference to other apps and what you see around you. For example, if you want to confirm that a process went through well, you wouldn't have a red banner saying: Friend Added!! Red is used as a color to communicate “STOP” or “NO” in the real world. It gives negative feedback. By making the banner red instead of green you are sending your user mixed signals. Mixed messages are inherently stressful. You should want your user to feel at ease. It should be fun and enjoyable to user your apps, not frustrating.

Colors and existing icons already have meaning and conventions associated with them on the internet. Learn and know what these conventions are (you probably already know what they are without thinking about it) and be consistent in using them.

Indifference towards people and the reality in which they live is actually the one and only cardinal sin in design.- Dieter Rams

I highly recommend that you check out this video The User is Drunk. This is a really fun example of why these principles are important.

Get Inspired!

Starting with design is hard. It is really easy to know what you don't like, but it is a little trickier to determine what will look good. As all good artists, get inspired by your peers.

Dribbble

You can select the designs that you like and it shows you the creator, the color palette they used, and more cool designs from that creator.

Adobe Kuler

The real world is beautiful and because it is something we know, it makes us feel good to see natural colors together. Adobe Kuler allows you to access the hex colors and palette of photos you take. This is a great way to get inspired by your surroundings. Here is an example of two photos that I like, and might want to use as my color scheme on a website:

As you can see the Kuler App takes the prominent colors in your photo and creates a color palette for you. You can also change and manipulate the colors to create your perfect palette. I love this app because it lets you take what you like in a photo and use it for the web.

Great Blogs for more resources:
1) Comprehensive reading list for Designers
2) The Best User Experience Design Links of 2014
3) Design+Code

Now that you have a general understanding on what design is and how to get started, lets take a look at some of the specifics of what design is in (Part 2).

Introduction:

After completing Leo Trieu's tutorial, Hero: Learn Ruby on Rails and Full stack by cloning Code4Startup - version PRO, I wanted to make my website live. Initially I tried to deploy using Heroku, as Leo had taught me in the Newbie Version. However, Heroku forces you to use PostgreSQL as the app’s database and some of the gems in the Pro version conflicted with this. Instead of changing all the gems to Postgres, I decided to deploy using DigitalOcean, which allowed me to continue using SQLite as my database.

I found it tricky to deploy my application on DigitalOcean, so I thought I should create a tutorial that would help others get their sites up and running easily. DigitalOcean, a virtual private server, has a 1-Click Droplet Set up for Ruby on Rails. This type of setup uses Unicorn and Nginx as the server for your project. You do not need to have a deep understanding of either Unicorn or Nginx to follow this tutorial. Hopefully I can show you where and how you need to alter your files to make this a simple and fast setup.

This tutorial will show you how to deploy your Ruby Application live using DigitalOcean in 8 steps:

1. Setting up a droplet on DigitalOcean
2. Finding your Bearings with Terminal
3. Installing your own App
4. Pointing Unicorn to your App
5. Reading Errors in Development Mode
6. Pointing Nginx to your App
7. Fixing the Permissions
8. Switching back to Production Mode

1. Setting up a droplet on DigitalOcean:

First, log into DigitalOcean and create a droplet (a cloud server) by clicking on the “Create a Droplet” button; give it a name, and scroll down to the Select Image section. Click on the Applications Tab and choose “Ruby on Rails”. This will set up the Rails Application using Unicorn and Nginx. Then confirm that you want to create the droplet.

Once you have set up the droplet, you will get an email with the IP address, username, and password. Then you can go into the DigitalOcean console and initialize your droplet.

You will have to login with your username and password that was emailed to you and change your password.

After you have signed into your application on the console, you can go to the IP Address and you will see the default Rails App:

2. Finding your bearings with Terminal:

Ok so now that you have initialized your server, you can ssh into your droplet from your terminal. You can also continue to code in the DigitalOcean console, but I think it is bulky and slow and find it much easier to code from the terminal. If you need to set up your ssh key with DigitalOcean please check out this tutorial How to set up SSH keys.

So in your terminal you can connect by:

ssh root@your_ip_address

When you first sign into your app, you are in the root folder, but as we can see on the default Rails App, the file is located in: /home/rails/app/views/home/index.html. So lets first get out of the root folder, and see where the app folder is held:

cd /home/rails
ls

Now that you know where the code that is affecting your app lives, you can pull down your own project. I used Github to save my code, which also makes it very simple to get the code into my application. In the current directory, home/rails, you will create a mirror project to the default app with your own code. First you need to install git:

//root@demo:/home/rails#
apt-get install git

Then from your git project page you can copy the link to clone your application:

And then clone it:

//root@demo:/home/rails#
git clone [your_git_clone_link]

So my code looked like:

So if you get the list of all the folders/files:

ls

You should see your project has been cloned:

Then you can go into your project:

cd [your_app]

Since my app is call code4startupPro, my code was: cd code4startupPro/

Once you are in your application's folder, run a bundle install to get all of your gem dependencies:

bundle install

Great! Now your app is set up! But if you refresh your browswer, nothing has changed. This is because the server (Unicorn) is still pointing to home/rails/app and you need it to point to home/rails/[your_app].

4. Pointing Unicorn to your Application:

So to have your application render instead of the default Rails App, you will need to point your server to home/rails/[your_app]. To do this you will need to change two Unicorn files. Both of these files are found in the /etc folder. To get to this folder, go back to your main folder, root@demo:/# and then into your etc folder, you can do this with this command:

cd /etc

And find the file unicorn.conf. To be able to view and edit this file you will use the command sudo nano:

sudo nano unicorn.conf

This will open up the file:

And you can see that the working directory is pointing to: "/home/rails" and you will need to change it so that it points to:"/home/rails/[your_app]". So mine looked like:

Then ctrl x to exit the file and press y to save your changes.

There is one more Unicorn file you need to change and it is in etc/default. Since you are already in the etc folder you can cd directly into default:

cd default/
sudo nano unicorn

Inside the Unicorn file, you can see that the app root is set to /home/rails, you will need to update it so it is set to /home/rails/[your_app]. So for me, it looked like:

Save and exit. Since you have altered the Unicorn files, you have to restart the Unicorn server to make sure all those changes get made:

service unicorn restart

Now if you go back to your browser and refresh, you will get this error:

5. Reading Errors in Development Mode:

This is really important to know. When you set up your application you can run it on production or development mode. Production mode is what you want your users to see, so if there is an error, it just lets them know something is wrong, it doesn’t give the details of what is wrong. This protects your website and code from hackers, but it also makes it hard to fix errors if you have any. Luckily it is easy to switch between the two modes. By default, Unicorn sets up your application in production mode, but to find out what the actual source of our problem is, let’s switch your mode from production to development. To do this you have to edit the same unicorn file where you changed the APP ROOT. Get back into that file to view and edit:

sudo nano unicorn

Then find the spot where the application declares that the environment is in production mode. Hash that out, and add in development mode:

#RAILS_ENV="production"
RAILS_ENV="development"

Now if you refresh the browser, you can see what the error is:

This means that there is a problem with your SQLDatabase. And that is because I haven’t setup the database yet. To setup the database you need to go back into your application:

cd /home/rails/[your_app]

And run:

RAILS_ENV=development rake db:migrate

You are currently in development mode so I ran it in development mode, but since you will switch back to production mode at the end, you can setup the database in production mode now as well:

RAILS_ENV=production rake db:migrate

Great now if you refresh the browser you get this new error:

This error means that there is a problem with the permissions in your tmp folder. Now if you go back to your application:

cd /home/rails/[you_app]

You can see that there is no tmp folder to give permissions to yet. To create this tmp folder you must point Nginx to your assets folder in your application.

6. Pointing Nginx to your Application:

There is only one file you need to change for Nginx and that is in:

cd /etc/nginx/site-available
sudo nano rails

Where it declares the root, you want to point it into the public folder of your app. So

root /home/rails/[your_app]/public

Save and exit. Then you can go back into your application:

cd /home/rails/[your_app]

For me this was: cd /home/rails/code4startupPro

Now you need to move your assets into the folder that Nginx is pointing to (public). You can do this with this command:

rake assets:precompile

Now if you go into your public folder and check the folders in it:

cd public
ls

You should see the assets folder has been added into your public folder, and that a tmp file has been created in your application:

Great! Since you have updated the Nginx files you should restart the Nginx server:

service nginx restart

7. Fixing Permissions:

So now that you have moved all of your assets over to where Nginx points to, you have created the tmp folder. This means you can give this tmp folder the proper permissions and solve your Error.

Originally I found this StackOverflow solution that solved this error by:

chmod -R -777 [your_app_path]/tmp

This code works fine, but I have recently found a better solution with Unix Stackexchange. The problem with the chmod command is that it opens the directory, giving read/write permissions to anyone. This is not safe. The alternative solution is to use chown, which gives permissions only to the owner (ie. only to you):

sudo chown -R [username] [directory]

For Unicorn, the username is rails and the directory you want to give permissions to is the tmp folder. So your code will be:

sudo chown -R rails tmp

Great, now you have to restart the Unicorn server:

service unicorn restart 

And if you refresh your browser, you should see your application up and working!

8. Switching back to Production Mode:

Alright, so now your application is up and running! That's awesome! The last thing you need to do is switch back to production mode. As I explained earlier, development mode helps us debug the application, but once everything is working it is best to put it back on production mode for safety. This is really easy to do:

cd /etc/default
sudo nano unicorn

Then you can hash out the development and unhash your production:

RAILS_ENV="production"
#RAILS_ENV="development"

Since you have changed a Unicorn file, lets quickly restart your Unicorn server:

service unicorn restart

Conclusion:

Awesome! So hopefully your application is live and everything is working perfectly! If you have any questions or feedback on how to imporve this tutorial, please feel free to leave me a comment in the discussion section.

Over the last couple of days, I have revisited Socket.io because I realized that I did not understand its power and coolness while I was doing the Chat-App Project. I have decided to implement a few new features, including: making it responsive, adding sounds when a user sends or receives a message, notifying that someone is typing underneath the input bar, etc.

You can chek out the live chat here.

I decided to write a tutorial on how to include the notification that someone was typing because it had some fun jQuery involved as well as a good demonstration of how sockets work in the chat application. As I have felt the most benefit from tutorials that have both video and text, I did both. The video can be watched on my site and here is my written tutorial.

The first thing I needed to do in order to add this feature was break the problem down into smaller steps:

1. To run a check if there was a change in the input field. If there was a change I would write something underneath the input box like : “the user is typing”
2. Check to see if the user stopped typing. If the user stopped typing I wanted to clear the message underneath the input box.
3. Broadcast to everyone these changes.

1. Check to see if there is a change in the input field:

jQuery has different event listeners. Two of those are keyup and keydown. Briefly the keyup event is sent to an element when a user releases a key, while the keydown event is sent when a user presses on a key. So when keys are being pressed we want to notify the HTML and change something in it. We already have out input box and submit button, so under that we want to create a spot that I can manipulate with jQuery in my HTML.

<!-- index.html -->
<form class = "col s12">
    <div class="row input">
        <div class="input-field col s9">
            <input placeholder="Rock on..." id="m" type="text" />
        </div>
        <div class="col s3">
            <button class="waves-effect waves-light btn send right">Send</button>
        </div>
    </div>
    <div class="typing"></div> <!--spot to manipulate -->
</form>

I also needed to add some CSS so the text went where I wanted it to go:

//style.css
.typing {
      margin-top: -33px;
      color: black;
      float: left;
      font-size: 11px;
      font-weight: bolder;
      margin-left: 30px;
}

Great so now that we have somewhere to change the text depending on what is happening, we first want to create a function that runs when the user starts typing. When the user starts typing into the input box (which has an id=‘m’) we want to say: “user is typing”. So the jQuery will look something like:

<!-- index.html -->
<script>
$('#m').keydown(function(){
    console.log('the user is writing something');
    var v = "user is typing";
    $('.typing').html(v);
  });
</script>

So the '#m' refers to the input box with the id='m' and the '.typing' refers to the div we added that can be manipulated with the class='typing'. So now when the user starts typing it should look like this on Chat Application:

2. Check to see if the user stops typing:

Now that we can change the text when the user starts typing we also want to change it when the user stops. This is a bit trickier but not too rough, we need to create a timer, and if that timer reachers a set time, then we want to change the text: I changed this to "empty" for right now so I could see the change and then will make it an empty string "" when I know everything is working well.

We need to create two variables:

<!-- index.html -->
<script>
//the keydownfunction//

var typingTimer;
var doneTypingInterval = 5000;
</script>

The typingTimer will count for us, and the doneTypingInterval is set to 5 seconds (5000 miliseconds). Once these are declared we can use them in our keyup function. So when the user releases a key, wait 5 seconds, then change the text to "empty":

<!-- index.html -->
<script>
//the keydownfunction//

var typingTimer;
var doneTypingInterval = 5000;

$('#m').keyup(function(){
    clearTimeout(typingTimer);
    typingTimer=setTimeout(doneTyping, doneTypingInterval);
    console.log("print that the user stopped typing");

    function doneTyping(){
      var v = "empty";
      $('.typing').html(v);
    }
});

</script>

There is one other important thing that I do here: run the clearTimeout(typingTimer) each time that there is a keyup function. That means that it resets the timer back to 0 each time there is a keyup event. If it is not cleared then "empty" will get printed even though the user is still typing (because it is checking every keyup event, not just the last one).

So now if we give this a test:

We can see that if a user starts typing it says "user is typing" and if they stop typing for 5 seconds, the text changes to "empty" which is what we wanted!!

3. Broadcast to everyone these changes:

Right now, we can only see the changes on the screen of the person who is typing (the person who is affecting the input box that we are running our jQuery checks on). This is where the fun part of Sockets come in!

So if we go back to the keydown function where we change the div to say: "user is typing", we can also send out an emit event that can be listened for on the server end:

<!-- index.html -->
<script>
  $('#m').keydown(function(){
    console.log('the user is writing something');
    var v = "user is typing";
    $('.typing').html(v);
    socket.emit('change');
  });

//the keyupfunction//

</script>

Then on the server side, I can listen for this "change" event (*sideNote at bottom explains how I name events) and send it out to everyone.

//index.js
socket.on('change', function(){
    socket.broadcast.emit('changed')
    //*sidenote on naming events at bottom
});

Now here I decided to use a broadcast emit, this means that all the sockets except the one from the user that is typing, will be get this event. If you would like to know more about the times of events that Socket.io has, I found this great list of events reference.

But for now, we will use this socket.broadcast.emit to send to all the clients except for the sender(the one typing). Now back on the client side we will have to listen for the "changed" event, to display the change in text for all the clients (except the one typing).

<!-- index.html -->
<script>
//the keydownfunction//

socket.on('changed', function(){
    var v = "someone else is typing";
    $('.typing').html(v);
});

//the keyupfunction//

</script>

So when you are typing, it will still look like:

But if someone else is typing, it looks like:

Pretty cool right? But its going to get so much better! Here is where it gets super cool! Because I have a variable for name which I link to the client(user) when they join, I can pass that variable through the sockets (no biggie).

<!-- index.html -->
<script>
$('#m').keydown(function(){
    console.log('the user is writing something');
    var v = "user is typing";
    $('.typing').html(v);
    socket.emit('change', name);
    //we pass the name variable here to go to the server
});

socket.on('changed', function(name){
    //we listen for the name from the servers changed event
    var v = name +" is typing";
    //then use the name variable in html
    $('.typing').html(v);
});

//the keyupfunction//
</script>

And equally on the server side:

//index.js

socket.on('change', function(name){
    //listen for the name coming from the change event
    socket.broadcast.emit('changed', name);
    //and then send it back with the changed event
});

So now it should work like this:

*SideNote: I like to make all events going from the client to the server to be present tense (ie. change), and all the events going from the server to the client to be past tesne (ie. changed). This makes it easier for me to read my code later and know what I was trying to do. But this is purely preference so you can name these events whatever you like as long as you are listening for what you are emitting.

In the last section, Linking XCode with Firebase, we linked XCode with Firebase, but we weren't able to test if what we had done worked. That is what we will cover here. We will look at how to set up your Firebase project, and how to save data from the XCode app to Firebase.

I learned Firebase from Leo Trieu, from Code4StartUp. I strongly recommend his tutorial on Task Rabbit which has a fantastic step-by-step of setting up Firebase with an Angular Application. Alot of what I will show you here I learned from him!

Setting Up Firebase :

We need somewhere to save the data we want to send from XCode. Login, or Sign-up for a free account with Firebase. Once you are in the Firebase Dashboard, we will create a new project, and name it whatever you would like:

Click Create New App, and a new app will be created! Then we will click on Manage App which will bring us to our XCode-Test-App Data Dashboard.

Awesome! Now that we have that created, we have a place to save our data that we will be sending from our XCode Application!

Overview of what we'll do:

As an example, let's save some data when the user moves from the first to the second tab in our application.

When we run the app (Command+r), the testApp loads the First View:

We want new data to be saved in Firebase, when the user clicks to the Second View:

Pretty cool, right? And to do this, it is not too difficult! All we'll have to do is two steps:
1) Connect our Test-App in XCode
2) Save the data when the user clicks on Second Tab

And that's it :D!

Connecting Our Test-App in XCode:

So back in our XCode Application, we need to tell it to send the data to this new Firebase Project we just created. Since we want the data to be sent when the user clicks on the Second View, we will do the coding in the SecondViewController.swift:

Inside the class SecondView Controller: UIViewController function, we will reference where we want to save the data we are sending:

var ref = Firebase(url: "https://xcode-test-app.firebaseio.com/")

We are sending the data to the root link of our xcode-test-app project. This url will be different for you, it is the link to your project:

Great! Now we've defined where we will save our data. Let's quickly create some dummy data to send so that we can test if it works!

var carol = ["full_name": "Carol Louie", "date_of_birth": "May 20, 1987"]
var brian = ["full_name": "Brian Best", "date_of_birth": "May 17, 1989"]

So our SecondViewController.swift should now look like this:

Saving Data :

When we save data to Firebase, we create a JSON tree. So we have to think about what that tree will look like. Let's say in our dummy data, carol and brian are two users of our test app. So we would want to create a node for users that hold the names of our users and their data:

To create that we will have to append a child node and name it users:

var usersRef = ref.childByAppendingPath("users")

We'll put this code inside the viewDidLoad() function so that it happens when we load the Second View. So our code now looks like this:

Now that we've created this users node for our users to live in, we can save our user data. Firebase uses the command setValue to save new data.

First we'll need to declare users are:

var users =["carol": carol, "brian": brian]

Then we can send that to the usersRef we created:

usersRef.setValue(users)

So our final SecondViewController.swift should look like this:

Now our data gets saved! Give it a test!

Cool things to keep in mind:

When we create the users variable, we are giving a name to call it ("carol"), then referencing the variable we created (carol). But we give any name, for example:

var users = ["paper": carol, "plane": brian]

Would create our JSON tree to look like:

This is cool because we will probably want to give these a unique id so that is easy to sift through them and reduce chances of error when trying to pull that data back (ie. if there are two users named carol).

It is also important to note that using setValue will overwrite the data, including any thing in the child nodes. It is good for creating a single instance but we will have to look at other methods if we want to be consistently updating our users while they are signing up! But as a demonstration of sending data to Firebase it works perfectly!

So now we know how to send data to Firebase to be saved! But this method is pretty useless. How often will you know what data you want saved before hand? So in the next blog post, we will look into saving data that the user inputs themselves (like their name and their birthday).

In this book, Meng To, details how to recreate the Designer New App, introducing how to manipulate the Storyboard, use Spring Animations and code in Swift. Meng covers how to make API calls to the Designer News Database which was tricky but very interesting. Last month at UIT, we were introduced to Firebase, a service that deals with the backend database of a web or mobile app in real-time.

During this week, I decided to link up these two amazing applications, so that I can build a native app using my own realtime data in Firebase.

Since I will be making a mobile app, I decided to create a Tabbed Application.

Setting Up Firebase with Xcode:

Adding Firebase to Xcode was pretty simple and is detailed well on the Firebase website. However, there were some tricky steps, and there are no pictures in the Firebase Guide to setting up with Xcode, so I thought I would do that now.

First you will need to signup for a free account on Firebase and Download SDK.

Note ~ Firebase suggests downloading the templates for easy set up, don't. They are not compatible with new versions of XCode and it is only confusing and time consuming.

Manual Install of SDK:

Once you have downloaded Firebase SDK, unzip it and drag and drop the Firebase.framework into your XCode Project.

A popup will appear, make sure to check off that you want to Copy items if needed and to Create groups

Other Dependencies:

Firebase depends on a number of other frameworks:

libicucore.dylib
libc++.dylib
CFNetwork.framework
Security.framework
SystemConfigureation.frame

I found this part a little tricky, it was unclear to me how to include these frameworks. I thought I was suppose to download these frameworks like I did with Firebase, but these dependencies can be included from within XCode. So on the far left side, there is a list of everything in our project. If we click on our whole project (mine is called test), it will take us to the Settings of our Xcode project.

At the bottom of the screen we can see Linked Frameworks and Libraries. Click on the plus (+) sign in, and then we can search and add the 5 necessary dependencies:

So the Linked Frameworks and Librarys should now look like:

Classes & Categories:

Along the top of our Project in our Settings there are a number of tabs, we are currently in General, let's move to Build Settings. Firebase makes use of Objective-C classes and categories, so we have to add it into our "Other Linker Flag":

Open the contents of Other Linker Flags by clicking on the arrow. Hover beside Debug until you see a plus sign, click on it and type:

    -ObjC

Do the same for Release:

Creating the Bridging Header:

Since Firebase uses Objective-C, we'll have to create a bridging header to make it work well with Swift. This was a little strange to do, but it's not difficult.

First we'll create an new File by right clicking on AppDelegate.swift and selecting New File.

We'll create an Objective-C File, click next.

Name it temp. File Type: Empty File. Click create. Then a popup will appear asking if you would like to configure an Objective-C bridging header. Click Yes!

This will create a bridging header file! Inside the header file, we'll import Firebase here.

    #import <Firebase/Firebase.h>

Now Firebase is connected and we can start sending and recieving data!

The final thing we can do is delete the temp Objective-C file, as we only needed it for the bridging. Just right click > Delete. Make sure to say delete Move to Trash. This will delete from our our project folder!

Great! Firebase is now linked to XCode! In the next section, Linking XCode with Firebase Part 2, we'll look at how to save data to Firebase from our XCode App.

I have taken far too long of a break from this blog and it is daunting trying to get back into it. Over the last two months I hae hyperfocused on code which has caused me to neglect other aspects of my life. Like everything, this has its pros and cons. I have learned a ton of cool stuff by obsessing over Angular. I have become more comfortable with creating, manipulating and modifying apps and using documentation and other resources to solve problems and challenges. This is both exciting and empowering. But I have also become less social, less diverse in my interests and less artistic. So in an attempt to reintroduce balance to my life, I would like to take some time to describe what I have been working on and what I plan to do.

Capture

I've been working on an idea that combines my love for photography and social interactions with my need to be competitive.

I've been developing this app idea using Ionic and Angular. There were many cool things that I have learned so far: how to create Ionic Popups, how to make calls to my api, how to install and user cordova camera, etc. But my code was getting bulking and confusing.

I was using the template Ionic tabs document, which had only one controller file and one services file. Since services were confusing to me, I had most of my code in my controller and it was taking me a long time to find and modify the code. I had gotten so excited about functionality I was ignoring best practices.

After a talk with Joe Patterson, I decided to revisit CodeSchool tutorials on Angular to become better aquainted with Services. And organization of my application. I spent a week trying to move allof my "business code" to my services and slim down my controllers file.

Then we had a live code session with Matt Creager, who showed us how to organize our files by operations. So each individual action should have it's own service, controller and html file. It was time to refactor again. Luckily around this time, we also began a Firebase Tutorial which gave us step by step instructions on setting up our Angular application.

The basic idea is to take photos of things you think are cool or unique, and challenge your friends to take a better one. Then people can vote on the photos and winner could get badges or trophies based on their successes.

I love taking photos and I like the idea of getting people excited about exploring their surroundings better. Rather than focusing on how you look for selfies, you can go outside and find quarky little treasures in and around your city and make a game of it.

Go find the tree with the most personality:

Or the best bookstore:

So once I had my idea solidified I began the planning. Since I've been terrible about planning in the past, I decided to write down exactly what I needed to do and try and define the scope of my project.

What I wanted to do with this app:
1) Allow users to take a photo
2) Allow users to submit a photo
3) Allow users to create a challenge
4) Display photos that have been submited
5) Vote on photos
6) Display winners
7) Login (so that they could get their badges for winning)

There are two ways we can customize our Ionic App: The first is through changing the content, and the second is through changing the design. In this blog, I will focus on customizing our content which will be done through Angular.js. I will go over some basics of Anugular.js but I recommend that you brush up on your Angular before you start customizing the content of your app. I used a great course through Code School which I really enjoyed!

Getting to know your App

I cloned an default project from Ionic called myApp. With myApp I got a bunch of folders and files. For customizing the content of myApp I will be looking mainly at the folder www. So if we open up the www folder we can see a ton of files and folders:

The folders are organized by type- the css, js, templates are what we will be focusing on. The the templates are all of our pages (or views), the app.js folder is what routes our application and the controller.js defines the controls.

Overview

The User Experience

Also if we click on one of the specific people in the chat or the friends list we can see the individual's information. This is cool becuase it means we can nest pages in pages.

So lets click on one of the people in my Friends:

When we click on Matt, we can see the individual data for Matt.

This is the basic functionality of this app. There is a tab bar at the bottom, which allows you to create different views, and within those views you can nest more specific information. So let's see how this work on the coding side.

The Code Side

So the way the application works (simply) is that the app.js file loads the initial html page, then when the user does something (a click or a submit), the loaded html page tries to change the view(page), it sends the change request to the app.js. The app.js specifies the routes, and the routes specify the templates(pages) that load and then controller.js populates the data when a page is loaded.

We will look first at the app.js file which does the routing. It sets up the url routes and that means that we are specifying each page of the app and then linking to them with urls. If we look at our app.js file we can see all of the pages (states) that our application has.

app.js

This seems daunting (because, well it's a wall of code!) but don't worry it will become clear. Let's just focus on a piece of it to begin; we'll start with the tab state.

This is a unique state because it is abstract. An abstract state is something that can have nested views (children) but cannot be a page by itself. In our case the bottom tabs bar is our abstract state. It can be seen on everyview but it does not have a page of its own (this is in contrast to say the Friends page that is a list of my friends, but also has nested pages with my friend's details on it).

So when we look at the tabs.html next to the views, we can see what it's connecting to:

And that it is constant on each page.

With the exception of the abstract state (tabs.html), all of our states are just like pages(or views) so when we do .state, we are defining the page:

app.js

Alright so that's a little easier to look at; so let's see what is happening. We configure the app and we pass it two arguments, the $stateProvider and the $urlRouterProvider. The urlRouterProvider is defined at the bottom and it gives a default page to load when the app starts. In this case it is telling out app to load the /tab-dash page which is our Dashboard.

*Note: The since we want our tab footer with the icons on each of our views, we need to create a tabs.html

The $stateProvider sets up the states, or the pages that our app with have.

app.js

Ionic is using an Angular UI router underneath which allows us to map urls and states to a template in a controller. What this means is that we are associating urls (ie. /friends) to templates and then using the controllers to fill in the data.

When the controller receives 'FriendsCtrl' it will do something.

controller.js

The controller.js will also have alot going on, because it controls each state that we defined in the app.js file:

controller.js

But once again, we will only be focusing on the Friends aspect of it. As we saw above the .state

We can see some of the templates on our dashboard page:

This bottom tabs bar is are tabs.html. If we take a quick look into the tabs.html:

The < ion-tabs > which is a ionic directive, it createse the tab bar at the bottom of our screen, and we can see that when say the Friends Tab is touched we get directed by href to #/tab/friends.

Then if we go into Friends, we can click into individual Friends information.

Super cool right?

So let's see what is really going on here behind the scenes.

What happens when we click on the Friends icon is that we are rerouting to the 'Friends' page. This is done through a combination of the app.js and the controller.js files.

Ionic is a front-end framework that is built on Cordova, Angular.js and sass. Cordova is a platform for building native mobile apps that use web based technology (ie. we will be building in HTML, CSS and JavaScript). Cordova then takes the developed website we've made and translates it into cross platform mobile apps (android, ios etc).

Ionic takes Cordova and puts some easy command line wrappers around it to make it easier and more intuitive to learn and build in Cordova. Ionic then stacks sass and Angular on top of it.

Building an App

First we want to install Ionic globally:

$ npm install -g cordova ionic gulp

Then we want want to clone a demo project:

Ionic makes it super easy to to clone default projects and it is instantly created in our directory. I cloned myApp tabs.

$ ionic start myApp tabs

Now lets cd into our myApp directory:

$ cd myApp

Remember that when we clone something from github, all the dependencies are listed in the JSON file but are not included. So we just need to quickly install the dependencies with:

$ npm install

Once we've installed cordova, our default project and our dependencies we just need to choose which platform we want to build on. I will be building with ios. So we just need to let the project know:

$ cordova platform add ios

Great now everything is set up and we can check out our app!

Testing the App

$ ionic build ios

This takes all of our documents (the HTML, CSS and JavaScript) and runs it together to create an app through an xCode ready project. It is now ready to be worked on and developed!

$ ionic emulate ios

The emulate command will display our app in a little phone emulator to show us what the project will look like on a phone.

The app itself has some dummy text and and different views, so if you click on Chats you will see a different page and if you click on Friends you will get to a Friends page.

Right now it looks a little bland with with washed out grey on white, but that's ok because we will soon get to customizing it!

As we can see when we run ionic emulate, it takes some time for the system to render our app. Because this is web based code, we can also run it in our browser!

$ ionic server ios

You don't have to use the browser view, but I recommend it for little changes and tweaks as it is much faster to see what you are doing! Also, if you are using Chrome, you can modify the view to mimic the screen size you are building on! As you can see here, the webpage is stretching out my app:

But if you go into Inspect Element, you can click on an icon that looks like a phone and then choose the type of sceen you want to view, make sure you refresh so that everything resizes to your new view and then you can edit just like the emulator!

And as you can see instead of the mouse arrow, it is replaced by a thumb circle, it now acts as your thumb on a touch screen! (so cool!!)

Great! Now we know that our app is working and how to check our edits, so let's start customizing!

I found this tutorial really helpful as I have been struggling with postgres and http requests over the last month or so, and Jeff does a great job at explaining alot of my questions throughout the tutorial. It also helped that he was on hand to ask questions to throughout each step of the process, and I had a lot of questions.

Through this tutorial I learned that in a REST API each HTTP Request responds to an action against a resourve serviced by teh API. This means that HTTP get function retrives a resourves object, and the post function creates a new resource object etc.

So when a user compiles some data, attaches it and sends it to our server, they are using the HTTP post request to create a new resource object. Here we need to use our route handles to read and use this data. We want to use the bodyParser middleware to handle and parse the newly created data. We want to make it so the bodyParse reads only JSON data and parses it for us.

We want to make sure that this information is valid to make sure that we aren't accepting files super large for our server. Validation happens with Express through our routes URI and through middleware.

Once we've created data we want to be able to display it easily and let the user choose what they want to see. This is where pagination comes in. Pagination allows us to display loads of data in a simple structure. We can choose how many items are to be displayed per page. (think kijiji).

We want to use multer, a middleware that is specific for photos to control the size of the file. Also since our user could be silly and name the file any number of things we want to make sure that we standardize it a bit. Therefore we use this magic code:

filename=filename.replace(/\W+/g, '-').toLowerCase();

therefore we will only get normalized filename. We will also add a Date.now() stamp to it so if multiple people want to upload a file called cat.jpg, as much as I hate them, I will allow it. With the datestamp it will not override or inform the user that this name is already in use.

Getting the photos uploadable was really exciting and I wanted to work on my app, ePic with it. Because I have been tinkering with passport and postgres over the last couple of weeks, I decided to revisit this. The way Jeff set up his code for photos made it really easy for me to see where I was making object errors in my users.js file for passport. So I went back and refactored/edited my users.js and linked up postgress, passport and this tutorial.

I had a really hard time with the integration testing and this is something I definitely want to work on. As far as I could tell this was way more work than just doing simple tests/refreshes. But that's probably becuase it was my first try at setting it up and in the long run will save me time! So the Integration testing is something I definitely want to get back to!

I am currently working on refactoring my code (i have photo.js but 1/2 that code is in index.js right now). I've linked up sessions to photos (i think) but i need to test this and I want to be able to print stuff to the profile page. I also have not done any of this in angular or ionic so i will work on integrating that now.

Configuring Passport

Passport with a New User

Because a user needs to signup with you app before they can login, we will start with how to handle authenticating a new user with passport.

First we need to create a LocalStragety, passport uses strategies to authenticate data. On our config/passport.js file we want to load the things we will use on this js file. We will load the passport LocalStrategy and we will also load the model of our user which we created in app/models/user.js.

config/passport.js

For right now we can ignore the section for passport sessions. I will cover this a little later and passport does most of the leg work here.

Once we've loaded the files we need, we can configure a new LocalStrategy. Strategies are created by using the passport.use() function.

So we call passport.use() and name this new LocalStrategy 'local signup'. Passport by default uses a username and password we will override this the user name to be the user's email.

Then using the User.findOne() function I want to check through my database to see if this email has been previously saved there (we are checking if this user's email already exists in the database! If it does we want to notify the user).

Passport is able to check the credentials by using a verify callback. The verify callback parses the credentials in the request (the email and password), and then uses them as arguments to check if they are valid.

*Note: As we can see in the function above, there are three return done(). Two of them have null passed through it and one of them does not.

return done(null, false)
return done(null, user)

For the return done(err) we know that the issue is with the server and not with the authentication process.

The verify callback invokes the done function to let passport know that it has completed the verification process.

If the user is found in the database, then it return:
return done(null, false, req.flash());

The false, indicates to passport that there was a failure in redicretion and sends the user back to the signup page with a message to let them know what the issue was. The req.flash() is the message that you want to send to your user to inform them that they have failed to log in and why. So in this case, they failed to log in because the email they tried to login in is already in the database, meaning they are a returning user, not a new one. So we could pass them a message like: "This email is not available" or "This email is already taken", just something so that the user knows what is going on and doesn't get frustrated.

If the user is not found in the database we want to save their credentials, their email and password as a new User and then send them along to their profile. Thus:
return done(null, newUser)

The newUser, indicates to passport that the authentication was successful and it should redirect to /profile, the secure profile page.

Review of the Passport Process

Steps to the passport process:

1. The user inputs their credential (email, password) and tries to sign in this data sets off the POST request which triggers the passport.authenticate() function.
2. We send the passport object to get authenticated at config/passport.js through a Passport Strategy which check to see if they are correct.
3. The strategy either returns a true (the user is verified) or a false (the user is unverified) and sends this information back to the POST request in the app/routes.js file.
4. If the POST request recieves successful(true), the user will be routed to their profile, and if the post request recieves failure(false), the user will be rerouted back to the signin page with a failure message.

Why do I want to use Passport?

Each social network (Twitter, Facebook, Instagram etc.) sends data differently from their server and the user information is encoded differently on each network. Passport normalizes this data so it is conformed to one standard. The standardized information becomes the profile object. Since the profile objects now have the same types of data, we can save them into our database.

I used a great tutorial to learn about setting up Passport as a way to authenticate users. This tutorial set it up through mongodb. I strongly recommend the Scotch.io: Easy Node Authentication Tutorial as it was very clear.

This post will more or less follow the Scotch.io tutorial to set up my database and my next post will look at connecting passport to postgres.

Structuring our Application:

So we have 2 files:

1. The package.json states all the dependences that we need.

2. The server.js sets up our application. It makes our dependencies that we declare in the package.json work together. It is important to remember that this is the glue of our application so it is best if we can set it up correctly at the beginning and make very little changes to it throughout our build!

And 3 folders:

1. The App folder contains the routes.js which tell the app where and when to change the 'view' or page. For example, if someone logs in they will go to their profile page. It also contains the models folder which holds our user.js which is the model or schema for our user.

2. The config folder holds all the configurations of the application. The auth.js will keep our client secret keys which we will have to obtain from the social networks we want to link to. The database.js connects us to the database we will be using. And the passport.js will outline the Strategies for passport.

3. The views folder holds all the views we could have, the index(our homebase), the login, the signup and our profile.

This might feel a little overwhelming right now but thats totally fine. We will go through each of these files to see what exactly they do and how they interact with one another!

Setting up the Dependencies

Our dependencies include:

Setting up the Application

First we want to require all of our dependencies that we have in are package.json file.

Then we want to do some configuration: we connect to our database, then pass the passport object to config/passport.js.

*Note: It is important to know the path that the passport object takes so we know what is going on. We create the object in the server.js, then we pass it to config/passport.js. Here the object gets configured through stragtegies and it is then passed on to the apps/routes.js to determine the page it will be routed to. I will touch on this again so don't worry too much but do keep it in mind.

Then we set up the middleware for express and for passport. Since we are using express we need to use passport.initialize() middleware to start passport (Passport docs).

Also, we want our login sessions to be persistent, so we need to use passport.session(). *Sidenote: express.session() must be used before passport.session() to make sure that the login sessions are restored in the right order (Passport docs).

Then we load our routes and launch our application on port 8080. Our application is now set up!!

You can run the server by typing in terminal:
node server.js

And go to http://localhost:8080 your application will be up and running! But we haven't written any code for what the pages will look like yet, so right now, it will be pretty unimpressive.

Connecting the Database

Click on the DATABASES on the left navigation bar. And click on +CREATE NEW DATABASE

Remember the username and password you create because you will need it for your connection string! Create the database and then enter it:

If you click on ADMINISTRATION on the left navigation bar, you will find your connection strings. Copy the connection url and paste it in the config/database.js file.

Replace the with your username and the with your password. So it looks something like:
Ok awesome so now we have mongodb set up! And we are ready to delve into the application itself.

Setting up the Routes

As a quick refresher we have 4 pages (or views) which are:

To set up the routes we must think about how things will flow with our application.
When the user enters our webpage, they will first go to our homepage (index.ejs).

Here the application gets the information from the index.ejs file and renders it. On the homepage there will be two buttons, one for login (if the user is an existing member) and one for signup(if the user is new).

So when user clicks the login button I want to route them to the login page. Or when the user click signup I want to route them to the signup page.

Once the user puts in their credentials, we will have to authenticate it (this will be done through passport).

*Note: This will be described in greater detail when we implement passport but for now I just want to touch on the difference between app.get and app.post:

app.get tells express to listen for requests and then retrieve data on our page and displays it, while app.post sends data on the page to get handled (through a function) if the data is verified it will redirect to the profile page, and if it is unverified then it will bring us back to the login page.

So I will stop the routing here. Currently our functionality for routing will allow us to get the homepage up on loading the application. Then either get the login form or get the signup form depending on which path the user takes. We cannot access the profile page until we authenticate our user.

So for right now our routes.js file looks like this:

Setting up the Views

The Homepage (the index.ejs)
Our homepage will just ask the user how they would like to signin: by logging in (if they have signed up in the past) or if they are a new user by signing up. For now we will stick to these two methods of logging in, later we will add using social networks as a way of logging in. Here's the code for the homepage (once again I would like to stress that this was created by the fine individuals at scotch.io):

And if we run our server (node server.js command into terminal) it should look like:

*Note: The href on the index.ejs files correspond to the app.get('/login', function()) and the app.get('signup', function()) on the router.js file. This means that when the login button is clicked, the app.get('/login', function()) runs and the login.ejs page is rendered.

The Login Page (the login.ejs)
So now lets say the Login button is clicked, it goes to the routes.js function and reroutes us to the login.ejs page. Here we want to ask the user for their email and password to verify that they are who they say they are.
And if we run our server (node server.js command into terminal) it should look like:

The Signup Page (the signup.ejs)

The Profile Page (the profile.ejs)
This page will only be available to individuals who have passed the authentication process!! For now we will just print out the user information so we know that everything has been logged and saved properly.

Setting up the User Model

Our user model will have multiple accounts, but for now we will focus only on the local ones. So for our local user we want to store the users email and password. For the social networks we'll keep track of the profile id and their token.

Once we've recieved the users password we will want to hash it before we save it into the database. Now everything is set up! We can start the Passport Process.