Category: Personal Projects

Project Description

“Good authors divide their books into chapters and sections; good programmers divide their programs into modules.
“Like a book chapter, modules are just clusters of words (or code, as the case may be).
“Good modules, however, are highly self-contained with distinct functionality, allowing them to be shuffled, removed, or added as necessary, without disrupting the system as a whole.”

This is part of a very nice article I found explaining what modules are and that can be found here. I do recommend having a read as it can shed a light on the subject, as it did to me.

In this project, I did not try to cover the module pattern in Javascript, but rather look at module definitions. Those are:

• AMD (Asynchronous Module Definition)
• CommonJS
• UMD (Universal Module Definition)
• ES6

Each of these module definitions has their pros and cons, and there is no one rule to fit all, but rather a technical decision based on the context to use. Bellow you can find a very short description of the modules.

The project consists of several mini-projects each with a different strategy for handling the Javascript modules.

The first project (blank) contains the source code. It shows a simple list of users and allows for adding and removing users. This project contains the full application, however, it will not run in the browser, because the browser does not know how to load or interpret javascript modules.

The version of javascript we use is ES6 or ES2015. It is used babel to transpile it into ES5.

The modules are defined in a multitude of ways, having some files using the CommonJS definition, some other using the ES6 module definition and some others using AMD.
The goal is to bundle the application together regardless of the module definition used and present a final solution that will run using the bundler of choice.

There are 4 different bundlers used: RequireJS, Browserify, Webpack and JSPM.

Technology Stack

These are javascript projects, so this was the only language used. jQuery and lodash were also added, but only for scaffolding the template.

The majority of the libraries/plugins bellow were obtained using the package manager npm for the development dependencies and bower for the frontend dependencies.

The javascript used was version ES6 or ES2015. Because current browsers do not fully support that, we had to transpile the code into ES5 and we used Babel for it.

As a task manager, we used Gulp. That would allow us to work together with the babel modules.

We also used a less gulp module for handling the CSS preprocessing. This could easily be changed into a sass plugin.

We used RequireJS, Browserify, JSPM and Webpack for module bundling and creation, each of them in its separate project.

Demo

You can see a running demo of these projects in the following links:

AMD with RequireJS

CommonJS with Browserify

SystemJS with JSPM

Webpack

Github

Link for Github Repo

Project Description

Hackathon projects are events, typically lasting several days, in which a large number of people meet to engage in collaborative computer programming. These events were actively promoted whilst working at NCC Group.

In one of those events, we decided to do a visualisation tool that showed all webpage component requests plotted into a map. That way we could have a glimpse of the effort it takes to serve a single web page.

The data collected via PA3 was an easy accessible repository we had available. An alternative would be WebpageTest, although a few more work would be required to gather the data as we intended.
With the identification of the domain of each component we could use a DNS server to identify its IP.
With that information we were able to use an internal API to fetch geographical data (latitude / longitude) for each of those components.
We used that data against an API which would give us the city / country in which we needed to plot the request on the map.

Information such as the type of object was being requested, its location, size and load time was also being displayed through the use of a tooltip:

Finally we added a counter for the object types as we can see below:

Technology Stack

The project is divided in two main groups.

The backend is done using node.js. We were not forced on the existing technology and we wanted something “out of the box”. The fact that this was an Hackathon project, gave us us some flexibility in testing new things, so it helped in the decision.

The frontend uses D3.js, and the reason for this was to be able to reuse an existing template available in this technology. D3.js is well know for its visualisation characteristics, so it was an easy pick.

The remaining code was done using javascript and jQuery.

Demo

You can see a running demo of this project in this link.

Github

Link for Github Repo

Project Description

This project is a study on Javascript promises.

A javascript promise represents the eventual result of an asynchronous operation. It is a placeholder into which the successful result value or reason for failure will materialize.

Some even say that Promises can be seen as the asynchronous version of “try-catch” blocks.

A promise has only three states, pending, resolved or rejected.

This project resulted from lessons obtained in order to perfect my coding capabilities in javascript promises both in ES6 and Angular Q.

Several scenarios were implemented, to try to handle issues like:

• Handling Promises as objects;
• Handling resolved or rejected promises;
• Chaining promises;
• Changing successes into failures (check weather API scenario);
• Assigning multiple “callbacks” to a single promise;
• Handling asynchronous mayhem (what order things come back);
• Controlling interdependent promises;

Technology Stack

Tha language used was javascript. An Angular framework was also used to test the Q service.

BootstrapJS was applied for visual enhancement.

Lodash and MomentJS were added for coding convenience.

In order to create the several scenarios in the application some API’s were used:

• Google Maps Geocoding
• Accuweather
• Github
• iTunes
• Youtube
• Open Notify
• Speech Synthesis Utterance
• Navigator (GetBattery Method)

Demo

You can see a running demo of this project in the following link:

JS-Promises

Github

Link for Github Repo

Logo

Main

Main

Scheduling

Scheduling New

Reports

Emergency Report

Chart Columns

Chart Line

Chart Pie

Project Description

Lighting Controls is a British based company focused on Lighting Controls modules that allow automation and computer controlled lighting structures and buildings.

The project consisted in implementing a web based frontend for the existing TCP-IP modules, also called Area Controllers. Those Area Controllers act as an inter-floor or inter-zonal connection controller that offer excellent functionality and flexibility. They also provide interfaces to Fire Alarms, BMS systems and other control systems.

The frontend would allow the communication with the Area controllers through direct user interaction to allow the sending of DALI commands, but also for the periodical retrieval of status information, triggered by cronjobs.

The information would be stored and reported via the frontend. Those reports would be either via a textual or graphical (charts) way.

Technology Stack

The project is build using PHP and Yii framework.

Scheduled tasks would be executed with windows batch files.

The website uses a plugin from Autodesk to allow the display and interaction with CAD files that represent the structure of the buildings. However due to proprietary software limitations, it is not possible to use this plugin in any browser other than Internet Explorer.

Javascript, jQuery are also present, and amCharts is the javascript library used for displaying the charts.

For the deployment of the application Inno Setup was used, as this would allow for the automation of tasks specific for Windows environments, where this project was supposed to execute.

Demo

You can see a running demo of this project in this link.

Due to the previously mentioned technical limitations the display of the main page can only be done through Internet Explorer. Also you would be required to have installed the following plugin from AutoDesk.

For the remaining use of the website, those requirements do not apply.

For access to the application use the following credentials:

User: user
Password: pass

Github

Link for Github Repo

Links

Company website

layouts

media

geotracer

telephony

sensors

Widget

modal

Weather Map

Weather list

Weather config

What is Android?

Android is the name of the mobile operating system owned by American company, Google. It most commonly comes installed on a variety of smartphones and tablets from a host of manufacturers offering users access to Google’s own services like Search, YouTube, Maps, Gmail and more.

What is an Android App?

An Android app is a software application running on the Android platform. Because the Android platform is built for mobile devices, a typical Android app is designed for a smartphone or a tablet PC running on the Android OS.

Android apps are available in the Google Play Store (formerly known as the Android Market), in the Amazon Appstore and on various Android App-focused sites.

Building Android Apps

There are several tutorials to build Android Apps. The official one you can find here, but there are lots of articles and tutorials out there.

Android apps are written in Java and using the Android SDK. There is also a possibility of writing those applications in C++, with an added performance boost, but also a bigger learning curve.

The Project

This project is a study on building native Android apps using Java. Most of the apps are simple apps, with the purpose of covering only a very specific topic. These are not finalised apps and serve no purpose other than the study of it.

You can find the list of the several apps you can find in this project bellow:

Demo

CountryList
GeoTracer
DownloadFile
TelephonyAPI
MediaFramework
SensorProject
WeatherApp

Please bear in mind that these apps are targeted for older versions of Android and have not been updated since, so a few bugs can occur. There is no support, therefore some of them may not work as intended.

Github

Link for Github Repo

Logo

Uni Logo

WBS

app Android

Portal Login

Portal Search

Portal rating POI

Portal edit POI

Portal edit POI attributes

Agents

Project Description

The AppTour project is an academic, end of degree thesis, which goal is to provide real time information to tourists, when visiting a location.

The idea is to provide information that is usually dispersed on the Internet as well as the one that can be provided through partners in a centralised way, pretty much as an indexer, but focusing on the categories considered to be relevant for tourism.

It also tries to provide information that is relevant when queried by filtering and simplifying the vast information that exists and bringing to the user only the one that is relevant at the time and place where he is. This approach we call the concept “Right Here, Right Now”.

The application acts as a virtual guide and tries to satisfy the doubts about a city, for locals or foreigners.

The project consists of a central repository that serves both a Web Portal as well as Web Services, that in turn will be consumed by an android native app. The data is inserted manually by the users of the application or automatically through the use of agents.

These agents will “feed” on known sources, each of them specific for certain categories that will aggregate the information that is public in the internet. The Agents are built in order to allow for  easy scaling and the creation of new Agents as new sources are discovered or available.

Technology Stack

For the main Application we chose Windows Server 2008 and IIS. The data persistence is done using SQL Server 2008 and Entity Framework.

The Web Portal was done using ASP.NET MVC 3 and the language used was C#. The use of HTML, CSS, jQuery, AJAX and XML/XSL was also present.

For the Web Services we used Microsoft WCF. The Web Services allow the SOAP protocol, but also allow XML without any SOAP envelop. It can be extended to support JSON, in order to allow for greater flexibility.

The Agents used also C# and were created as a Service and also a console application for easier debugging.

The Android app was written in Java with Android SDK. It used a local SQLite instance for small data persistence in order to allow offline access. For full usage of the app it would also required GPS / AGPS access.

Demo

You can find a demo of the app in the following link.

Please bear in mind that the app is targeted for older versions of Android and have not been updated since, so a few bugs can occur. There is no support, therefore it may not work as intended.

Also because there is no deployed server, the app will not be able to display any valid information.

Github

Link for Github Repo

Special Thanks

This project was developed with the help of my colleague Ricardo Carneiro, to whom I am extremely thankful.

Uni Logo

Main Menu

Map Selection

Game View

Package Loading

Website View

Website view

Nagios

Nagios

Project Description

DEI Alumni is an academic group project that involved 4 people and tried to cover several distinct technical areas for a launch of a 3D game into the market.

Those areas would involve the development of the game itself, using 3D technology, and AI (Artificial Intelligence) for the game mechanics.

The game and additional download content would be possible through a website which would also allow for user registration and score rankings.

The last part of the project would imply a monitoring platform for the website, that would allow for notifications in case of any down time or system failures.

The Game

The game itself relates to a shipping and distribution company that has to perform several pickups within the city and perform those in the minimum time possible.

We are the driver’s assistant and our mission is to load the vehicle when he reaches the pick-up point. This is done by arranging several packages in the truck, trying to maximise the space available, in order to reduce the time on the overall trip.

We also are given a choice on the order of the pick-up points to execute.

The vehicle is driven automatically through AI and it will try to pick up the best route, navigating through the map and making automatic decisions to best overcome difficulties such as traffic, road blocks and slower speeds due to weather conditions.

The main point of the game is not to create a enjoyable playable overall, but rather to experiment on the AI navigational system (vehicle travel), the game interaction (package arrangement) and finally the several texture mapping and game engine development.

Technology Stack

The game was developed in C++ and OpenGL. For sound we used OpenAL.

The AI was done using Prolog.

The website was done using PHP and the monitoring platform was assembled together using Nagios.

Demo

You can find a running version of the game here.

Bare in mind this only works in Microsoft Windows OS. If you’re asked to install OpenAL, you can find it here

Github

Link for Github Repo

Special thanks

This project was developed with the help of my colleagues Pedro Magueija, Sérgio Sousa and Manuel Monteiro to whom I am extremely thankful.

Uni Logo

Game + Menu

Alternative view

Wireframe view

Project Description

DEI Labirinto is an academic OpenGL 3D game.
The purpose of this project is to get an introduction on OpenGL.

The game consists in a simple maze where a character (Homer Simpson) is placed and where it has to find and collect several items.

A simple menu will also appear to display the various options available.

This project is incomplete, as a list of things are still required:

• Sounds
• Fullscreen mode
• Finish overlay menu
• Interactions with the available items

Technology Stack

The game was developed in C++ and OpenGL. For sound I used OpenAL.

The character models were created using 3d Studio.

Demo

You can find a running version of the game here

Github

Link for Github repo

Uni Logo

sugestions

register

login

details

categories

Project Description

IDEI Biblio is an academic ASP.NET Project for an online book store.

This is a project that implements an online book store and allows users to perform purchases. The company is called IDEI Biblio and is focused on the sale of books and magazines. This company is implemented in .NET.

One important goal of this project is to allow communication between projects that implement different technologies. Communication is done from .NET to PHP, but also the other way around, PHP to .NET.

Customers would have to be logged in, in order to perform purchases. The customer adds the selected products on to a cart. This cart is persistent, therefore even if the customer logs out, the information is kept until the next successful login. There is an Admin area that allows for product maintenance.

The company IDEI Biblio uses the companies LogisticaSA and ShippingAll for shipping the orders. They provide a web service that will return a price for the shipping depending on the package.

There is also a partnership with the company AnalisaMercados which will provide daily market analysis on the competition and supply with a list of products whose prices should be updated.

Technology Stack

The main company (IDEI Biblio) as well as LogisticaSA are implemented in .NET. These also use jQuery.

The ShippingAll and AnalisaMercados companies are implemented in PHP.

The webservices use the SOAP protocol.

Github

Link for the Github Repo

Project Description

One of my hobbies has always been motorcycles. I rode them for over a decade and used it to commute to work everyday. But, obviously, I also used them to have some fun with friends.

Those friends, who used to ride together, formed a group which became to be known as 4Adventure. The main goal was to arrange and plan motorcycle trips. The name suited us quite well, as there were four of us, and we were going on some nice adventures.

In one of those adventures, the group decided to arrange a trip from Portugal to Morocco. Just a couple of days, so we wouldn’t be able to see the whole country, but we wanted to have a taste of it.

At the end of those days, we were to go back to Faro, where the annual motorcycle gathering was going to take place.

Because we already had some experiences that got logged only in memory, I immediately volunteered to log this event on a website, so we could show it to our friends and family, but also, because this was the perfect excuse for me to apply my knowledge of PHP, which I was starting to learn.

Technology Stack

The website was built using PHP. No frameworks were used and the code uses lots of custom made classes that were done, gathering the best practices gathered with friends and online searches and tutorials.

The front end used jQuery, it also used TinyMCE as a WYSIWYG editor for allowing writing articles in the admin area.

Demo

You can see a running demo of this project in this link.

Some features need improvement such as the admin area, and also the calendar section. Unfortunately, some years have gone by, and I lost the latest versions of the code, and therefore lost those improvements as well.

Github

Link for Github Repo