Project 2: Socket.IO Chat application

My final project was to create a simple chat application using the socket.io library. Socket.IO enables realtime, bi-directional communication between web clients and servers. It has two parts: a client-side library that runs in the browser, and a server-side library for Node.js.

The hardest part of this application was getting the socket-client set up and to accomplish this I read a lot and watched many tutorials. In the end I was able to produce a basic chat application that has room for advancements and alterations in the future. 

On the Angular side of this I felt that it really tied in a lot of the things I learned this semester about components and angular's structure. Below you will find a demonstration of my working application. You can see that two separate users in separate tabs are able to converse and the conversation is displayed in both in real-time.

Challenge 6: MapIt application using the Google Maps API

This application was not only my first look at using the GoogleMaps API but also my first time using the AngularCLI. The first thing I noticed? It was really nice not having to go clone the sample template from git and to have my project all made for me simply by running the "ng new projectname" command.

The Google Maps API was also surprisingly easy to setup simply by following the instructions at the link below: https://angular-maps.com/docs/getting-started.html

In this application I learned new Angular CLI commands such as the above mentioned: "ng new projectname", I also learned I needed to use ng serve to serve the project and that it would be at localhost:4200.

The marker entries are stored in local storage and this is similar to what we have done in class with vanilla JS, PHP and more. I plan to expand this project and use it to track places I have visited within Nova Scotia and abroad.

Below you will see a video demonstration of the application and my score results on the quiz at the end of the tutorial.

Challenge 5: Authentication using Auth0

For this challenge I wanted to learn how to implement an authentication system in Angular 2. I had previous experience with authentication during my co-op where I used passportjs for a token based authentication system. During this challenge I implemented Auth0 and used Twitter Bootstrap for styling. It was surprisingly much easier than I expected. Auth0 handled all of the user storage and signup without me having to worry about it.

I used the quickstart template to get the application up and running quickly and created a service to do the basic interaction with auth0. I also had to install Angular2jwt which is a helper library for autho0 and the lock widget.

One challenge I had was ensuring I included the extension when I added angular2 jwt component to the map object in systemjs.config.js. The component needed to be added to packages as well. Another challenge with the lock widget was that even though it was installed I still needed to add a script tag to index to html:
     <script src="http://cdn.auth0.com/js/lock/10.2/lock.min.js"></script>

Other than those package issues I found the application to be very straight-forward. Below you can see a video of my working challenge.

Here are my quiz results from the tutorial on Auth0:

Challenge 4: Spotify Application

Challenge 4: Spotify Application

My 4th challenge was to create an application using the Spotify API. In this application a user can search for a particular artist. Once they select an artist a list of albums is displayed. The user can click an album and see all songs on the album. They can also preview the songs AND visit the spotify page for the song/album. Below is a video of the working application:

The main problem I faced in the development of this application is that I would be copying similar functions and forget to change all of the variable names. This meant that I was doing things like looking for albums with the artist URL. From this problem I learned to be very careful when swapping out code.

The point of developing this application was to explore using Router Link. I did successfully use Router link for the navigation and feel as though I would be able to easily do so in the future. I also gained experience with another API. To date in my self-directed I've worked with both the Spotify/Github APIs. I would like to explore the Instagram API in the future.

Challenge 3: Ionic 2 Work-out Application

Challenge 3: Ionic 2 Work-out Application

My challenge for this week was to build a simple workouts application. In this application a user is able to add workouts that they have completed including a short description. They also select the type of workout complete. All workouts are displayed in a list on the main page. Their is tabular navigation and an About page also included. After the app is complete a user should be able to add/delete workouts and navigate through all pages. The video below shows my working application.

This application was built using Angular2 and Ionic2. Ionic2 is a new mobile framework which enables a user to easily develop both iOS and Android applications simultaneously.

When making an Ionic2 application most components go into a pages folder. I seem to be forgetting to add components to the app.module file. The steps are as follows:

1. Make new component
2. Add to app.module

When making this application I ran into one difficult issue. Data API access in MLab is disabled by default, this means I needed to go enable in manually. I found the solution to this problem doing some deep Google research. I also ran into an issue because I forgot to make sure in the constructor to state whether my params were private or public.

Useful commands & helpful information
When app is complete you can build for android!
cordova plugin add cordova-plugin-whitelist
cordova platform add android
cordova platform add ios

Allows access to outside urls

<allow-navigation href="http://*/*"/>

Publish apk file:

ionic build android

Below are my results from the end of tutorial quiz:

Project 1: ToDo List Application using the MEAN stack

On completion of this project I am now officially back on schedule.

The past two weeks were designated to the Todo list application using the MEAN stack. The MEAN stack uses MongoDb, ExpressJS, Angular2 & NodeJS. Express and & Node comprised the backend of my application while MongoDb was the noSQL database used. I also learned how to install bootstrap using bower. To create this application required me to learn about HTTP requests. I used GET, PUT, POST & DELETE requests in the app. Below you can see a video of the working project.

I used the MEAN stack to develop an application during my summer co-op and so I was familiar with Express, Node and MongoDb, the challenge was figuring out how to incorporate Angular 2 into the app. I also encountered a compiling issue. To solve this issue I retrieved the template package.json from Angular Quickstart and reinstalled the dependencies using npm install. 

While it was a good experience scaffolding out the application on my own, I think in the future I will use Yeoman to generate the skeleton of my projects. Figure 1. below demonstrates that I successfully completed the tutorials providing direction on how to achieve success with the application.

Figure 1. Demonstrated completion of the project tutorials

At the end of each section I complete a quiz to evaluate comprehension. Figure 2. shows my results from this sections quiz.

Figure 2. Quiz results for Todo App section

Challenge 2: Github Profile Searcher

As mentioned in the previously blogpost I had to adjust my schedule for the first three weeks due to an unforeseen flu and portfolio preparation for an interview. Upon completion of this project and pending I finish my next section before Sunday I am now entirely on schedule.

This week's task was to create a Github Profile Search using the GitHub API. In this section I created my first service in Angular 2. I also worked with data binding and learned a new syntax for if statements, for loops and how to call functions. The originally intended application does not have any form validation and I plan to add that on completion of my self-directed study. The screenshot in Figure 1. shows that I completed all video tutorials associated with the Github profile searcher.

Figure 1. Completion of Github Profile Searcher Tutorial Videos finished February 6th

I have included below a video demonstrating the functionality of the application that I created. A user may type in a user name and the information of the associated user is displayed on keyup. This was my first time using the API of a popular social media/ versioning website and it was very interesting to see the information made available to all developers.

A difficulty I faced in this challenge was to wrap my head around the syntax of the service requests. I did a lot of research into what was occurring to make sure I understood the process. I found that my knowledge of Angular1 was not particularly helpful in this tutorial because the syntax in Angular2 is quite different than what I am used to. 

Based off of this project I have decided to try to use the Twitter API to create a similar application. That application will not be a part of this course however this application motivated me to start a new project. I would say this application created that new opportunity for me.

I am becoming much more comfortable using Angular2 and feel as though I am learning a lot. The next section will be my first project, a ToDo app using the MEAN stack. It will be my first look at how to integrate Angular 2 with a database.