Coursera Full Stack Web Development Capstone Project

A couple of days ago I finished my capstone project for the Full Stack Web Development specialization on Coursera. It marks the end of the 6-course specialization about Bootstrap CSS, AngularJS and NodeJS.

The Assignment

The assignment itself is simple:

Build a web application with the tools taught in the course (Bootstrap CSS, AngularJS, NodeJS, MongoDB).

Everybody has the free choice what to implement, however it should be a small app as it must be implemented during a short period of time. I decided to implement a message board where users can create boards and post messages (more below).

The Schedule

The capstone project takes 8 weeks in total, while only 2 or 3 weeks are dedicated to actual coding. Each weeks has about 3 hours of workload. So you can spend approximately 9 hours to coding – but you will definitely spend more time!

Week Topic Assignment
1 Ideation
2 Ideation Report Report (PDF, 2 pages) about your idea
3 UI Design and Prototyping
4 UI Design and Prototyping Report Report (PDF, 2 pages) with UI mockups
5 Architecture Design and Software Structure
6 Architecture Design and Software Structure Report Report (PDF, 3 pages) with architecture, structure, REST URLs, data model
7 Project Implementation and Final Report
8 Final Submission and Report Report (PDF, 2 pages), code on GitHub, running app on IBM Bluemix

The Workload

You will spend most of your time for coding, but there will also be a huge amount of time you will spend on organisational tasks. Those tasks might take a lot of time:

  • Making a GitHub project including README.md, .gitignore and so on
  • Setup a Travis CI build
  • Deploy to IBM Bluemix (read tutorials, write a .cfignore and manifest.yml)
  • Do all dependency management
  • Install and configure MongoDB
  • Manage different configs for you local development and IBM Bluemix

While all of those tasks are absolutely necessary for every project setup, they can easily take up some hours nevertheless. This melts down your coding time.

My Project

I called my project MEBO which simply stands for Message Board. It’s a small application where users can create boards and post messages on them. Every who know the link to a board can access it and edit all messages. There’s no login or so. You can find the project on GitHub: https://github.com/tuhrig/mebo.

Lessons Learned

  • Make it small! Pf course, everybody wants to make this super fancy application with its own user management, administration view and all kinds of features. But make your life easy and do what’s needed to demonstrate your skills.
  • Start early with the deployment and integration to IBM Bluemix. No matter how well your project is implemented, if it doesn’t run on IBM Bluemix (or anywhere else) where I can see it, you will not pass the assignment. Get things up and running from the beginning.
  • Let it looks nice. The first impression is very important. If your project looks nice and your GitHub project has a README.md, your’re on the right path.

Best regards,
Thomas

Hello Berlin!

2014-10-03 17.53.23

The last months have been an interesting and busy time for me (that’s why I didn’t write as much as I had planed, but I already got some new drafts in my WordPress!). After I finished my master’s thesis at Informatica in Stuttgart (greetings to the whole team!), I moved to Berlin for my first “real” job. I started at a company called Westernacher Products and Services, which does a lot of web applications and consulting for juristic institutions in Germany. Based on an up-to-date technology stack with Spring, Gradle, ExtJS and AngularJS, Westernacher implements document management and all kinds of business applications. Being part of the development team I am looking forward to a bunch of interesting projects and to a lot of new stuff to learn. Nice to be here!

Best regards,
Thomas

DeployMan (command line tool to deploy Docker images to AWS)

DeployMan

2014-07-29 11_34_11-Java EE - Eclipse

Yesterday, I published a tool called DeployMan on GitHub. DeployMan is a command line tool to deploy Docker images to AWS and was the software prototype for my master thesis. I wrote my thesis at Informatica in Stuttgart-Weilimdorf, so first of all, I want to say thank you to Thomas Kasemir for the opportunity to put this online!

Disclaimer

At the time I am writing this post, DeployMan is a pure prototype. It was created for academic research and as a demo for my thesis. It is not ready ready for production. If you need a solid tool to deploy Docker images (to AWS), have a look at Puppet, CloudFormation (for AWS), Terraform, Vagrant, fig (for Docker) or any other orchestration tool that came up in the last couple of years.

What DeployMan does

DeployMan can create new AWS EC2 instances and deploy a predefined stack of Docker images on it. To do so, DeployMan takes a configuration file called a formation. A formation specifies how the EC2 machine should look like and which Docker images (and which configurations) should be deployed. Docker images can either be deployed from a Docker registry (the public one or a private) or a tarballs from a S3 storage. Together with each image, a configuration folder will pulled from a S3 storage and mounted to the running container.

Here is an example of a formation which deploys a Nginx server with a static HTML page:

Interfaces

DeployMan provides a command line interface to start instances and do some basic monitoring of the deployment process. Here is a screenshot which shows some formations (which can be started) and the output of a started Logstash server:

Run_Logstash_Server

To keep track of the deployment process in a more pleasant way, DeployMan has a web interface. The web interface shows details to machines, such as the deployed images and which containers are running. Here is how a Logstash server would look like:

Machine_Details

The project

GitHub-Mark

You can find the project on GitHub at https://github.com/tuhrig/DeployMan. I wrote a detailed README.md which explains how to build and use DeployMan. To test DeployMan, you need an AWS account (there are also free accounts).

The project is made with Java 8, Maven, the AWS Java API, the Docker Java API and a lot of small stuff like Apache Commons. The web interface is based on Spark (for the server), Google’s AngularJS and Twitter’s Bootstrap CSS.

Best regards,
Thomas

The thesis writing toolbox

I spend the last weeks (or months?) at my desk writing my Master thesis about OSGi, PaaS and Docker. After my Bachelor thesis two years ago, this was my second big “literary work”. And as any computer scientist, I love tools! So here is my toolbox I used to write my thesis.

LyX/LaTeX

2014-06-20 14_07_02-Program Manager

I did most of my work with LyX, a WYSIWYM (what you see is what you mean) editor for LaTeX. LaTeX is a document markup language written by Leslie Lamport in 1984 for the type setting system TeX (by Donald E. Knuth). So what does this mean? It means that TeX is the foundation for LaTeX (and LyX). It gives you the ability to set text on paper, print words italic or leave space between two lines. But it is pretty raw and hard to handle. LaTeX is a collection of useful functions (called macros) to make working with TeX more pleasant. Instead of marking a certain word in bold and underline it, you could just say it is a headline and LaTeX will do the rest for you. A simple LateX document would look like this:

By choosing the document class article, LaTeX will automatically render your text to A4 portrait paper with 10 pt font size and so on. You will not have to worry about the layout, just the content. This is how the above code will look like as a PDF:

2014-06-20 14_54_57-Namenlos-1.pdf - TeXworks

The main difference between writing your document in LaTeX instead of (e.g.) Microsoft Word, is that you do not mix content and styling. If you write with Microsoft Word, you will always see your document as the final result (e.g. a PDF) would look like. The Microsoft Word document will look the same as the PDF. This principal is called WYSIWYG (what you see is what you get). In LaTeX however, you will only see your raw content until you press the compile button to generate a PDF. The styling is separated from the content and only applied in the last final step when generating the PDF. This is useful, because you do not have to fight with your formatting all the time – but you have to write some pretty ugly markup.

This is where LyX comes into play. LyX is an editor to work with LaTeX, without writing a single line of code. It follows the WYSIWYM (what you see is what you mean) principal. This means you will see your document not in its final form, but as you mean it. Headlines will be big, bold words will be bold and italic word will be italic. Just as you mean it. However, the final styling will come in the end when generating the PDF. The LyX screenshot from above will look like this as a PDF:

2014-06-20 15_16_12-thesis_de.pdf - Adobe Reader

JabRef

An important part of every thesis is literature. To organize my literature I use a tool called JabRef. Its website looks very ugly, but the tool itself is really cool. It lets you generate a library with all your books and articles you want to use as references. This is my personal library for my Master thesis (with 53 entries in total):

2014-06-20 15_25_13-Program Manager

JabRef will generate and organize as so called BibTex file. This is a simple text file, where every book has its own entry:

Every book or article I read will get its own entry in this file. I can make new entries with JabRef itself or with generators like www.literatur-generator.de. I can link my library to my LyX document, so every time I want to make a new reference or citation, I just open a dialog and pick the according reference:

2014-06-20 15_31_51-LyX_ ~_Dropbox_MA - SS14 - Master Arbeit_thesis_de.lyx

LyX will automatically create the reference/citation and the according entry in the bibliography:

2014-06-20 15_34_29-thesis_de.pdf - Adobe Reader

la­texd­iff

When you write a large document such as a thesis, you will probably make mistakes. Your university wants to have some changes and you will improve your document until its final version. However, a lot of people will not read it twice. Instead, they read it once, give you some advice and want to see the changes again. With la­texd­iff you can compare two LaTeX documents and create a document visualizing the changes. Here is an example from the PDF page shown above:

2014-06-20 15_41_35-diff.pdf - Adobe Reader

As you can see, I changed a word, inserted a comma and corrected a typo.

A great tutorial about la­texd­iff can be found at https://www.sharelatex.com/blog/2013/02/16/using-latexdiff-for-marking-changes-to-tex-documents.html.

Google Drive

To make graphics I use Google Drive. It is free, it is online and it is very easy. The feature I like most on Google Drive is the grid. You can align objects to each other so your drawing will look straight.

2014-06-20 15_54_26-Untitled drawing - Google Drawings

Dropbox

If you loose your thesis you are screwed! Since LyX/LaTeX documents are pure text, you could easily put it into a version control system such as Git or SVN. However, you will probably use some graphics, maybe some other PDF and stuff like that. To organize this, I simple use Dropbox. Not only will Dropbox save your files for you, it also has a history. So you can easily restore a previous version of your document:

2014-06-20 15_49_38-Revisionen - Dropbox

eLyXer – HTML export

elyxer

eLyXer is a tool to export LyX documents as HTML. Although, LyX is meant to create PDF documents in the first place, it is nice to have a HTML version to. eLyXer is already build in to LyX, so you can just export your document with some clicks:

2014-07-02 11_19_37-LyX_ ~_Dropbox_MA - SS14 - Master Arbeit_thesis_de.lyx

Here is the CSS I used to style the HTML output:

The result looks like this:

2014-07-02 11_24_13-Portierung einer Enterprise OSGi Anwendung auf eine PaaS

The thesis writing toolbox

LyX A WYSIWYM editor for LaTeX to write documents without a single line of code.
JabRef An organizer for literature.
latexdiff Compares two LaTeX documents and generates a visualization of their differences.
eLyXer Exports LyX documents to HTML

Best regards,
Thomas

Begin of my master thesis about OSGi and PaaS providers

My studies go into the final round – since the first of February I work on my master thesis about (enterprise) OSGi applications and PaaS providers in the cloud. I evaluate an existing OSGi server application and try to migrate it to a PaaS provider. My deadline is in the mid of July 2014.

Photo by Kevin Dooley / http://www.flickr.com/photos/pagedooley/2511369048/

Photo by Kevin Dooley / http://www.flickr.com/photos/pagedooley/2511369048

Right now I am doing my literature studies and try to get an overview about the topic. I don’t know the exact direction of my thesis yet, but I can figure out some problems along the road like databases, scalability, dependencies and deployment. And I think some more will show up soon.

I write my thesis by Informatica/Heiler in Stuttgart. I will blog about it from time to time under /tag/cloud.

Best regards,
Thomas

Media Night Winter Semester 2013/2014

opinion-trends-poster

During the last summer semester, two friends of mine and I made a student project called TechTrends. TechTrends was a web application that let you search for articles and trends in the field of computer science. Based on posts from Reddit and Hackernews, it provided an intelligent search on a growing number of articles and blogs.

During this winter semester I continued the project and implemented a sentiment analysis for TechTrends. Based on the existing infrastructure such as our database and our crawler, I add an automated categorization of articles according to their comments on Hackernews and Reddit.

You can find the old and stable version of our project under http://techtrends.mi.hdm-stuttgart.de/. The up-to-date development version is available under http://opiniontrends.mi.hdm-stuttgart.de/.

media_night_ws13

I will present the project at the Media Night at our university next week. It’s open for everybody and for free. It will start around 6 pm, but you can come whenever you want to, there is no schedule. Every project has its own booth, where it is presented and where you can ask question and get in touch with the people behind it.

You can find the program and information about all projects on http://www.hdm-stuttgart.de/medianight.

What? – Media Night Winter 2013
When? – 16th January 2014, from 6 pm to 10 pm
Where? – Hochschule der Medien, Nobelstraße 10, 70569 Stuttgart

Best regards,
Thomas

TechTrends – Searching trends on HN and Reddit

It’s done! Last Friday (26th July 2013) was the final presentation of our semester project TechTrends. Together with Raphael Brand and Hannes Pernpeintner I worked the last 5 months on this project – and we are really happy about it.

What is TechTrends?

TechTrends is basically a search-engine for HN and Reddit (just the programming sub-reddit). You can type in a key-word and you will find a bunch of similar articles. But our main concern was not to find just articles, but also to find trends. Therefor, you will not only get a pure list of articles, you will get a chart showing when articles have been found for your query. For each article we calculate a popularity, indicating how important that article is. Based on these popularities, we draw the trend-chart for your search.


reddit_logo

hn_logo

How does it work?

TechTrends has six major parts (see the graphic below). First of all, we crawl HN and Reddit all 15 minutes to get the latest links. In the second part we get the actual content form each link and store it in our database. Then we do a preprocessing on this pure text content to remove stop-words, digits and so on. After that, we use the great Gensim Server from Radim Řehůřek to build an index of all documents. The next (and last part on the server) is a JSON-based web API to access all of our data (here is its documentation). On top of these API we built our user-interface – the actual website.

techtrends-components

Presentation

Here is the video of our final presentation about TechTrends in our university (on the 26the July 2013). Our presentation is about 70 minutes long and we explain a lot of details about our project. The video is available on http://events.mi.hdm-stuttgart.de/2013-07-25-vortr%C3%A4ge-programming-intelligent-applications#techtrends or below. It also contains the presentations of the other groups, but we are the first on the video.You can find the slides under the video.

Video

Thanks to Stephan Soller and his team, our presentation has been recorded on video. You can see the video below or on http://events.mi.hdm-stuttgart.de/.

Slides

Here are the slides on my speaker deck account.

What’s next?

We have a lot of ideas for the future of TechTrends. We are thinking for example about a mobile version or a reporting tool. But in my oppinion, the most important step is to make TechTrends more easy to customize. Currently, we are focused on HN and Reddit. However, everything but the actual crawlers is independent of the underlying source. With a little bit of work, you can easily implement a new crawler for the data source of your choice. Making this customization more comfortable and easy is our next goal for project.

More

There is plenty more! Here you go:

Best regards,
Thomas Uhrig

TechTrends Final Presentation

Tomorrow morning is the final presentation of our semester project TechTrends. I posted several articles about TechTrends (see here) and I will definetely post one more after tomorrow. But for now, here’s our final presentation.



The presentation shows how we built TechTrends and covers different aspects of the development process. It talks about crawling Hackernews and Reddit, preprocessing and learning a model to query. We also describe problems, further ideas and many more. The presentation will take about 60 to 70 minutes (and everybody is still welcome tomorrow).

The presentation will also be streamed live on http://events.mi.hdm-stuttgart.de.

Best regards,
Thomas Uhrig

A GPS diary in four weeks with Play!

During the last four weeks I did another small project for one of my university courses this semester. The course was about ORM modelling and abstractions for databases. We did some exercies with Hibernate and discussed diefferent aspects about ORM modelling. At the end of the course, every student made a small web-project using a framework and ORM tool of his choice.

Most of us used Play! and ebeans to make their application – me too. I didn’t have any experience with Play! but it was very pleasent to work with. Togehter with Foundation CSS prototyping was extremly fast. And ebeans also did a great job. During the whole project I didn’t write any line of SQL – nice!

Online demo

You can see a demo on http://tad.mi.hdm-stuttgart.de/. Just log-in as tad@tad.de with 123456 as your password to see a demo-account with some data.

Presentation

My presentation about TAD: http://tuhrig.de/wp-content/uploads/tad/presentation.html

Code

The code is available on my university’s own Git repository, but it is public:

git clone https://version.mi.hdm-stuttgart.de/git/TAD

Best regards,
Thomas Uhrig

TechTrends Presentation

Next Friday (July 26th 2013) the final presentation of TechTrends will take place at our university. The presentation will take about 60 min and will cover topics like architecture, crawling, data storage and front end design. Everybody interested is welcome (please send me an email before). Here’s the whole schedule for next week:

09.00h-10.10h Tech Trends (by Brand, Uhrig, Pernpeintner)
10.15h-11.25h Newsline (by Förder, Golpashin, Wetzel, Keller)
11.45h-12.35h Intellligent Filters for Image Search (by Landmesser, Mussin)
12.40h-13.50h Nao Face Recognition (by Sandrock, Schneider, Müller)
13.55h-14.35h GPU-driven deep CNN (by Schröder)

The presentations will take place in room 056 (Aquarium). I will upload the presentation to my speakerdeck account at the end of next week.

Best regards,
Thomas Uhrig