The Cloud and The Video

I am currently in the homestretch here at Telegraph Academy and time has flown during the senior portion of the cohort. I attribute it mostly to working on projects opposed to just sprints and lectures, which is great as I am able to create while applying the vast amount of knowledge I’ve learned. Over the past week and a half we have been working on our pièce de résistance a group project that allows free reign to work with the taught frameworks and technologies or jump into unexplored territory…naturally my group and I agreed to delve into the latter.

My thesis project is a web application that relies heavily on video integration and streaming, which up to this point no student had explored in TGA history. We knew that it wouldn’t be easy but remained confident that it could be tackled and implemented within the amount of time we were allotted.  We made it happen and this is how…

Video implementation in our web application touches every element of the our stack which is the NERN (Node.js, Express.js, React.js, and Neo4j) stack. I must note that if you were to try and implement what I have here for you own app don’t be thrown off if you’re not using the exact same stack, this post is about the concept in addition to showing how we did it.

First thing we did is find somewhere to store our video since storing the whole of the video into the database was not an option it was necessary to do some exploring. After much research we decided that Amazon Web Services (AWS) Simple Storage Services (S3) would be best for what we needed to accomplish.

I created a bucket and made a new user with AWS Identity and Access Management (IAM). This is important because once a user is created IAM supplies you with an access key ID and a secret access key that is need to access your bucket. It  is not necessary to create an IAM user but it is STRONGLY recommended for security reasons. If you do go the route of making an IAM user then you must give that user access to your bucket. You do this by going to “Permissions” and clicking on “Create User Policy”.

Screen Shot 2016-05-23 at 12.06.11 PM

then enter the following:

Screen Shot 2016-05-23 at 12.16.15 PM.png

My suggestion for this part of the process is to test your bucket manually uploading a file (image/video) to see if it makes it into the bucket, make sure the file you uploaded is set to public by clicking the “Set Details” button then clicking “Set Permissions”, checking “Make Everything Public” then clicking “Start Upload”:

Screen Shot 2016-05-23 at 12.57.49 PM.png

if your file is uploaded successfully a http link will be generated. You can access this link simply clicking on the file then clicking the “Properties” tab, you should see the following:

Screen Shot 2016-05-23 at 1.02.15 PM.png

In your html make a simple html5 <video>  or <img> with that link as the source.

Screen Shot 2016-05-23 at 1.43.18 PM.png

 

Below is what renders on the page.

Screen Shot 2016-05-23 at 1.42.16 PM.png

Now that testing is done it is time to get into the nitty gritty. For our app it is essential to post our file into our S3 bucket utilizing our code instead of doing so manually. We used Node.js and Express.js in our backend with addition of S3FS and connect-multiparty (middleware) to do this. Below is how I implemented the back ends connection to my S3 bucket.

*It is assumed you have a working knowledge of how to set up a server using node/express*

Screen Shot 2016-05-23 at 2.29.42 PM.png

upon completion of the back-end it is beneficial to make a post request using Postman as a means of testing.

Screen Shot 2016-05-23 at 2.34.25 PM.png

If everything was implemented correctly you should see the file in your bucket.

Time to tackle the client side of the application. Initially for testing purposes we used a vanilla XMLHTTPrequest to post to the server but because we are using React we did it using an Axios post request.

Below is the XMLHTTPrequest:

Screen Shot 2016-05-23 at 2.54.00 PM.png

 

Below is the Axios version:

Screen Shot 2016-05-23 at 2.58.00 PM

At this point the front end and back-end should be connected. Posting a video from your browser will now land in your S3 bucket for you to do with it what you will. We are currently still working on our project but I look forward to posting it on my main page once it’s finished!

If you have any questions or comments please leave a comment below. I know this is a pretty arduous process for someone who has never delved into this territory so feel free to reach out!

 

 

Triumph over Toy Soldiers

In my quest to become the best software engineer possible I realized that toy problems are on of the best tools available to help me ascend technically and algorithmically. Now, this realization wasn’t an easy one to come by as I notoriously loathed having to solve them but over the past five weeks I’ve almost come to love them. My shift in attitude has largely to do with one specific problem that has haunted me over the past couple of months.

During the pre-course portion of Telegraph Academy each incoming student is assigned a mentor that we are to check in with every week. The mentor would assess our progress mentally, and technically through conversation and of course a toy problem!

screaming

I somehow had made it through all my check-ins with flying colors, toy problems and all… that is of course until the very last week. I was given a problem that seemed to encompass a mad combination of all my least favorite things: Math, Roman Numerals, and Infinite Loops. I immediately asked for another problem but I knew as soon as the sentence left my mouth that wasn’t going to be an option. I repeatedly read the problem over and over again trying to make sense of something but the instructions simply ended up being a jumbled mess in my brain. I blindly began coding but I knew my direction was going the absolute wrong way and I couldn’t pull myself together. I was sweating, panicked that my mentor would rescind the invitation I’d worked so hard for, but my mentor assured me that my progress up to that point had solidified my spot and should just work on the problem in my free time leading up to my first day…of course I never touched it again, thinking I had seen the last of that problem…I was wrong.

Over the past five weeks the Junior and Senior class take the first hour of the day to work on a specific daily toy problem, to get our brains going and to aid in our algorithmic problem solving. Needless to say I wasn’t too happy when I found out this was going to be a thing but I understood it was important as a result I tackled each problem everyday catching on to certain patterns the problems tended to have. I was by no means solving the different problems everyday and more often than not I would become discouraged, but my trust for the TGA program would not let me quit.

Friday morning I walked into TGA well rested (for once!) and ready to get the day started, that was until this happened:

Screen Shot 2016-04-26 at 11.26.19 PM

Roman Numeral Translator….Well at that moment I began to feel the panic spread over me again, not because my standing at Telegraph Academy hinged on it but because it would directly show me if I had made any progress over the past couple of weeks. Immediately I calmed down and thoroughly read the problem over three times to ensure I truly understood the directions. From there I began to code…

Screen Shot 2016-04-26 at 11.41.34 PM

I set up the main translateRomanNumeral function first and then moved on to  my helper math function as a way to keep my code modular (important!) so that I didn’t get bogged down by too much happening in one function. Below is my helper function:

Screen Shot 2016-04-26 at 11.45.21 PM

After testing it a couple of times to make sure my logic was where it needed to be I realized that IT WORKED! Now I realize that there are much harder toy problems out there, trust me I’ve seen some beasts, but for my personal growth within this program it was a pretty awesome feeling to conquer something that at one point was such a point of discomfort. I’m sure when I head back to TGA on Monday I’ll be faced with another doozy but now I more than welcome the challenge!

Backbone.js…I need a chiropractor pt.1

I’m a little over three weeks deep into Telegraph Academy and I must say it has been a truly unique experience so far. The “Sprints” that we endure every two days are trying to say the least, they truly push you out of your code comfort zone. One particular sprint that is notorious for being of the most difficult deals heavily with Backbone.js, an MV* framework that remedies spaghetti code and gives your app structure…like a spine…get it…backbone…there’s a joke there. Due to the difficulty I experienced with this framework I thought I would give an overview on how this framework functions.

First thing to understand about Backbone is that it is a MV* framework. This means that Backbone deals primarily with Models and Views. A Model is the facts and only the facts, it represents the data for your particular application. Models are not concerned with Views rather Models trigger the events that Views utilize to display the data to the html. Below is a simple example of a Backbone model.

Screen Shot 2016-04-04 at 9.04.09 PM

The above example exhibits a simple Model of animal, the defaults method sets the initial state for this model and can consist of additional methods that you would like your skeleton Model to have. Which brings me to Collections,  a collection of models that are different but similar in model structure, rather a group of instances built from the original model.

Screen Shot 2016-04-04 at 9.24.42 PM

Notice above how AnimalCollection is created, extending from the model Animal which denotes that the collection belongs to the Animal model. As we create new instances of the Animal model we set their own defaults to what is specific for that particular animal. Finally we store the new animals in ‘myAnimals’ a new instance of AnimalCollection. It’s important to realize that myAnimals is basically an array of objects which in essence just vanilla javascript. I have found that once you break this framework down to it’s fundamentals, it’s just javascript.

Last but not least are the Views, now as I mentioned earlier the Views only job is to display the data. Having this sort of modularity is extremely useful when your app grows in complexity, this way edits to your code will only effect a certain piece of your code and not require you to delve deeper. Due to the complexity of Views I plant to devote an entire post to them in the future, hopefully by then I will have found my chiropractor.

Let the journey begin..

I’m Dion and today I officially have thirteen days before I step foot into Telegraph Academy ! My emotions are pretty much all over the place, for the past year I’ve made it my goal to gain an understanding of Javascript, Html, and CSS that would allow me to pass Telegraph Academy’s technical interview, and  I must say it paid off. Though I will be attending the upcoming cohort I would be lying if I didn’t say that imposter syndrome is very much a reality but I’m determined to not let it get the best of me as I’ve come entirely too far to do so. This blog will serve as a tool to solidify what I’ve learned so far and exhibit new concepts I find interesting, I want to be able to look back at the end of this program and see how far my thought process has come in addition to my skills…Let the journey begin!