Monday, March 30, 2015

Internship week 6 & 7: cleaning & small side project

The project
Every main aspect of the project is now done. and no real new features are in the timeline, for now we just wait for feedback of test users

Multiple formats

Most of the 2 weeks I spend my time on trying to support extra file formats (like wmv) and for that we found out that the service we were using wasn't gonna do it, So a switch to Plex Media Server was made.

Some changes in the API and 3 or 4 players later all file formats were supported. this was more a try and error procedure because of the lack of documentation on most players especially for IE9

The side project

Between adding the multiple formats and week 5. I spend some time on upgrading the documentum system ( a web service like explorer, google drive, one drive, ...) to have the ability for uploading more then 1 file at once.

This was mostly modifying existing code for supporting more files. nothing really fancy

Wednesday, March 18, 2015

internship week 5: Prepping for deploying

The project
The web/api part of the project is mostly done. For next week, we planned on showing it to a first "client" being the education department, who's probably going to use the platform the most. so no more features, nor big changes happend this week.


On desktop the platform was fully tested, but on mobile a lot less. so this week all the features were tested on mobile. Besides some small bugs, this was nearly working perfectly.

The biggest thing that I forgot for supporting mobile, was setting the scalability, so the following line had to be added:

But for supporting mobile better, some changes were made in the navigation flow. For example the breadcrumbs were changed from clickable links to a dropdown that is bigger and easier to click on mobile, as well as the options buttons (delete, edit and view) were changed true-out the app to be shown in a dropdown.

Building definitions

As mentioned this week was mainly on fixing all the bugs, and prepping for a production build. So more tokens were added for all the variables that needed to be changed when changing enviroments (from development to production). These were variables containing location of the servers, databases, ...

Sunday, March 15, 2015

internship week 4: Prepping for deploying

The project
The project is getting to a point where it can be shown to external people, and it's being prepped for deploying to some test servers and not only on my local machine. But some configuration was needed.


While the project is for now focused on Arcelor Mittal Gent, where the main language is Dutch, some localization was made for supporting more languages, if the application is about to be used in other sites where an other language is used.

The localization is stored in json files, so when you want to add another language, you just have to add the file and translate the words.


As you may or may not know Angular uses directives. And by using them you can eliminate a lot of dubble work if you change the layout of a certain repeating part. I used them for the cards that shows the video info. But I've extended the use of them, by using it for my errors, information panels and breadcrumb panels. So I could easily change them but with the directives I could even set the text in the template by doing:


As we were prepping for making a build on the buildservers, some values like tokens and api location had to be variable. At Arcelor Mittal they have a system where any XML file can be transformed and you can reference to tokens that are defined outside your code folder strutcture and are different for each enviroment (develop, staging, production).

Bootstrapping Angular

Using the XML files gave some small problems with it, because all the configurations were stored in the XML file, we had to load them before anything else. and now the Angular was directly loaded when the Angular.js file was loaded, but if the xml request was a bit slower then the Angular.js file it missed the variables it needed.

So therefore we had to bootstrap Angular manually so we could listen to the event when the XML file was loaded, and then and only then Angular could be initialized.


Although the project isn't getting any more new features, and is getting to a stable ground of the existing ones, we decided to add one more feature. This was the playlist feature, so you could play all the videos in a group. 

Sunday, March 8, 2015

Internship week 3: Groups

The project
The project is getting along very nicely. Most of the features that are available now, are fully implemented and working like they should. There are still lots of things to do, but it has already the base functionality in it.


The uploading on IE9 wasn't fully working the other week, so this week I gave it a fresh look on why it wasn't working. Let me break down what was happening.

So the plug in, as mentioned in the previous blog post, did the upload on HTML5 for the supported browsers, and had silverlight as fallback for other browsers.

So IE9 used Silverlight and it sends data to the API, but it got aborted. When I configured the plugin to use Silverlight

Edit, Delete

Edit and delete functionality were fully implemented, so users could edit their existing videos. In the Document Management System there is a version number for each file, so if you upload a new version, this gets incremented. But when a new file was uploaded a new object id was generated. This wasn't an issue at first, but later on when the groups were implemented this became an issue.


As just mentioned, we started the implementation of groups. This was acting as a object in the Document Management System and storing some basic info. The biggest obstacle with the groups was that all the videos were only stored on the group object and not on the video, so if I had a video I couldn't really ask for the group object, vice versa this was no problem.

When I started implemented this, I had the idea that a video only could be in one group at any given time. So I implemented a dropdown in the video creation (via directives in Angular, so this was in a separate file), and while implementing it on the group side, I accedently deleted that file. And by mistake making it possible to select multiple videos in the group creation page, I decided to have multiple groups per video.


The keywords were for now very simple. When you select a file, the name get's an keyword extraction, the tile as well, and when you don't select any keywords, the're automatically chosen for you. 

Thursday, February 26, 2015

Internship week 2: Extending the possibilities

The project

For now the project had some basic viewing and routing in it. This is a good start, but spending more time on the current things would not change a lot, and no Authentication or such was implemented.


This was probably the biggest challenge so far. Not only making an upload but it had to work on IE9, and the uploading had to be done in chunks, and it had to have a progress bar


This is probably the hardest part, because IE9 native HTML (being HTML4) didn't support any of the HTML5 features (like chunking, or the progress bar) we had to have a fallback for IE9. That supported chunking.

After doing some research I stumbled upon a plugin called plUpload, this could do everything I wanted it to do.


Now the API had to accept the uploading of the videos (in chunks!) so that gave me another challenge, because the plugin didn't have any example code for .NET but, this wasn't so difficult as I though it would be.

The API needed to upload the videos to the Document Management System, but the development servers weren't operational at the time, so for now the upload was only to my local server.

Windows Authentication

From the start I always fetched videos from the DMS with my hardcoded account, so we had to enable Windows Authentication, but for now I was using the Local Development Server that comes with Visual Studio 2010, after some research,  I figured out that you need to have an IIS server in order to test that.

After a lot of searching and testing for IIS + auth getting to work we finally managed to do it. Apparently the auth module itself isn't installed by default (who knew ...)

More videos

Because the Windows Auth was implemented, we can now request the videos that the user itself uploaded. Because we also wanted to get  the videos that weren't processed by the serviio streaming service (who converts the mp4's to streamable files)

So the list page was updated. To support this and a new page was created for listing your own videos. An edit and delete button were also implemented, the edit did for now just fill in the fields and the remove didn't do anything, because we didn't have access to the development servers, and testing removing / editing on production servers isn't a good idea / practice.


Finding similar videos wasn't as straight forward as you would think, the keywords linked to the videos in the DMS are never filled in, so I couldn't search on that. So we went first for a keyword like extraction on the title. by gathering all the stopwords in English and Dutch, running it on the title, we got some similar results, but then we'd still have only the title.

First this was the way it was implemented, but then when the windows auth was implemented, I could upload some videos of my own and add keywords. An update was made to the API so it could support that.

While I was updating the Keywords, the IIS was installed, so others could test if the results were different on their side, due to other permissions, which resulted in other videos. I stumbled upon the problem that using special char like '_' caused an error, So we had to fix that by escaping that char.

Friday, February 20, 2015

Software project failure

Why we need software?

These days software is used everywhere. Even in our fridge there is software already. And that brings out probably the biggest reason why there are so many project failures. Everything that is being created these days needs some form of software; sometimes big and extended software and sometimes just a simple piece.

So why all the failures?

Because of the raising want of software, software developers can’t keep up, and beyond that. It’s very difficult to guess how much time / money a project will cost, you can spend days, months, years on guessing how much it will costs and still you will be off. This is due the fact that you can’t know what problems the developers will encounter starting from hardware failures internally, external sources (hardware and software) not acting like they should, or misinformed on their capabilities and having to change the way of handling and the change of technology is so fast. 

This results in what?

This results in projects going over due, costs more. If the company can’t pay to provide more time or don’t see any benefit in it giving time or money. And since most companies don’t want to spend more money on it, they will stop the project.


Bacon, F. (n.d.). Failure Examples. Retrieved from It-cortex:

Bloch, M., Blumberg, S., & J├╝rgen, L. (2012, October). Delivering large-scale IT projects on time, on budget, and on value. Retrieved from McKinsey&Company:

News, O. (2010, December 6). Most businesses experience project failure. Retrieved from OneNews:

Why Do Projects Fail. (n.d.). Retrieved from calleam:

Saturday, February 14, 2015

Internship week 1: setting everything up

The project

For my internship at ArcelorMittal I have to create an intern YouTube. That has to be accessible on all types of devices. (Including IE9 on Windows!)

Fase 1: Design

For the design we decided to first give it a try with the new material design from Google and therefore we used a CSS framework called materializeCSS. So I started designing some basic views on how I saw the site.

Fase 2: Routing

After some basic designing was done, I started on the routing and implementing basic functionality. This was done via AngularJS. 3 controllers where made.

Controller 1: Listcontroller

This controller its purpose is to show all the videos. And it was so created that filtering was possible. Also ordering by date, title, ... is ready when needed

Controller 2: DetailController

This controller is needed to show the details of a video. This included a streamUrl, some basic user info from the person who uploaded the video.

Controller 3: NavigationController

This controller was implemented later in the week, because first the searchbar was static. By implementing the different views, I noticed that it was easier (and faster) to implement a different controller that checks the searchbars and broadcasts the searchquery to the ListController.

This controller also checks if the user is on the /videos page (where the search results are shown). If not, it redirects the user to that page.

Fase 3: Resource

Static json API

First, I started reading the 'to be data' via a simple json that was set up like the api was going to be, so a folder /videos was created with in there:
  • A videos.json: containing a list of all the videos with a corresponding id
  • For every video a different .json with the name its id
So I could test all the resource gathering without needing to worry about where my data came from.


Then I created a simple API in C# that fetched the streaming videos from the streaming service (serviio) and returned them in json. This was then loaded by the AngularJS resource.

Fase 1 revisited: Playing videos

Now I had access to the streaming URLs. I had to make it possible for the videos to be played on every device, most could be handled by the html5 video element. And surprisingly IE9 had no problems playing that either. So yeay for me!

Fase 2 & 3 revisted: Extending API paging and searching

The streaming service didn't have a search possibility nor a permission check, so the Document Management System (DMS in future reference) had to be contacted (also for getting the title, author name, ...). So a reference to the DMS library was added, as of first we hard coded my credentials for accessing the DMS, by doing that the permissions were handled for now, The DMS has an SQL-like fetch system, so by using the `Like` option, we could filter out items from the list.

Some paging was created for not having to show everything at once, so the application can have as much videos as possible and it won't have to return everything.

Next week

For next week:

  • A landing page is planned so we can define some "Hot" videos and/or other things that need to be shown.
  • An upload page for adding videos via the same platform.
  • For doing that, the credentials have to be changed from hard coded to the Windows Auth that comes with Visual Studio.
  • Showing some similar videos on the details page.