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.

Self-Directed Study: Angular 2 - Introduction

For my self-directed studies course I have decided to learn Angular2. As someone looking to pursue front-end web development this framework seems like integral part of my learning if I am to succeed in the industry.

Many companies in Nova Scotia develop using AngularJS, because of this I will spend the duration of this course working through tutorials and projects to demonstrate my Angular 2 learning. By the end of the semester I hope to have many new additions to my portfolio written in Angular 2.

For my introductory session I began a PluralSight course "Angular 2: Getting Started". As can be seen in figure 1, on January 18th I took a quiz to assess my knowledge of Angular2 and scored a 3/10. I expected to score low on this quiz because I had not yet had experience with Angular2 and what answers I did get right were from my knowledge of AngularJS.

Figure 1. Initial Assessment

I then began the PluralSight course. I completed the first 3 sections and 8/9 parts of section 4(figure 2) on January 25h & 26th(see figure 3 to verify) but found I was blindly typing and not actually learning as I worked through the course.

Figure 2. Sections of course that were complete

Figure 3. Days in which I participated in the course

On January 26th I decided it would be beneficial to alter my learning plan and complete the CodeSchool course for learning Angular 2 rather than the initially intended course. The CodeSchool course was including as a resource in my learning plan and nearly equal in terms of length of course.
Below in Figure 4. you can see the course was officially completed on February 3rd, 2017.

Figure 4. Completion of CodeSchool Course in Angular 2

You'll notice the course was not officially completed until February 3rd, indicating I am a week behind schedule. I caught a cold which developed into a chest infection that was an unforeseen setback. To compensate for this setback I had originally designated 2 weeks to work on Project One and will be cutting that time back to 1.5 weeks to complete the project.

After completing the CodeSchool course on February 3rd I began the program "Learn Angular 2 Development by Building 10 Apps" at https://www.udemy.com/learn-angular-2-development-by-building-10-apps/. As outlined in my learning plan I will not be completing all 10 applications but a selection meant to teach me the most I can learn in the course period. Figure 5 and 6 demonstrate that I reached a level of knowledge that would allow me to advance to the next stage.

Figure 5. Beginning Quiz 1 at completion of first section

Figure 6: Proof of adequate knowledge level to proceed

In figure 7 below you see a screenshot of my first Angular2 application. It has a navigation menu, complete with routing as well as a header, jumbotron and content on the pages. This simple application is composed of 2 page components as well as a jumbotron and navigation component. The source code will be available in a private repository for my instructor to see.

To date I have found the most difficulties with unforeseen setbacks such as illness and a course that, in spite of prior research, did not match my learning still. I also had a lengthy delay when I could not figure out why my webpage was blank. The result? I spelled jumbrotron instead of jumbotron. What I learned? Spelling is crucial!!!

Currently I am enjoying Angular2, I find the class structure much easier to use and have enjoyed the many improvements over AngularJS to date. Over the weekend I will be starting my second challenge in an effort to get back on schedule so that Monday I can begin Challenge 1: MEAN Stack TODO App.

Using a LAMP "Staging" server, create a WordPress site!

In this tutorial we will demonstrate how to create a WordPress website on a LAMP "staging" server. The tutorial will walk you through setting up a website on the server from start to finish including  *******insert more blah here ******