Author Archives: Eugenia Pérez

About Eugenia Pérez

I'm a computer engineer and I've also studied a two-year long Msc in Web Engineering. After working as a web developer, I've been teaching programming, databases and web technologies for the last few years to students of vocational training, software specialist courses for engineers and released some publications. My Linkedin Profile

[Off-topic] Creating a QR code client-side

When we’re developing a website it’s sometimes useful to provide a mechanism to make easier for users to come back to the site later on. Traditionally this was very easy to implement for classic web browsers.  However the amount of mobile devices that nowadays are surfing the Internet is huge and this is nothing but the begining. Coping and pasting an URL can be very inconvenient for a mobile user. This is why providing URL codes can atrack more visits to our sites. Generating a QR code can be done using server-side or client-side code. There are JavaScript-only libraries for doing this quite straightforward. An example can be found in the following link:

http://davidshimjs.github.io/qrcodejs/

With this lightweight library (about 7KB) generating a QR code and displaying it on the screen only takes a few lines of code. As simple as selecting the HTML div which is going to be the container:

var qrContainer = document.getElementById("qr-div");

And then creating a QRCode object using the DOM element and the URL to generate the QR for:

new QRCode(document.getElementById("qrcode"), "http://foo.com");

Moreover, it is good to say that is compatible with all the latest versions of major browsers.

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Oracle Certified Professional and Professional Scrum Master certifications

I’m glad to say that this term I’m starting a project in which I was involved long time ago. Just when I decided to spend my time teaching and preparing public examinations to become a professor of computer science. Next year I will be teaching a professional module, which can be saw as supplimentary due to the little hours spent in the global course, but it seems to me essential and of particular importance, so it’s my responsability to do my best 😉

The module I’m just talking about is known as Entornos de Desarrollo/Development Environments, and aims to acquaint students with the basic notions about the current development environments and the whole life cycle of a software product. From analysis and design stages, UML modeling and agile methodologies (Scrum) to software development and optimization (refactoring) and unit testing process (JUnit).

Because I really believe in the importance of certifications of current software vendors, so that they would add value to a potential developer in a business environment or once working to prove the competence, I’ve decided to focus on the subject to the preparation of two popular certifications:

  • Professional Scrum Master
  • Oracle Certified Professional, Java SE 8 Programmer

I can talk knowingly about the first one, because I’m just certified. And regarding the second… I’m working on it, and I’ll hopefully  get it out this summer. I find them very useful and productive for students who can combine both this module and the second year  module that I’ve been teaching  called: Programación de Servicios y Procesos/Programming Services and Processes.

For more information about:

  • Professional Scrum Master
  • https://www.scrum.org/Assessments/Professional-Scrum-Master-Assessments/PSM-I-Assessment
  • Sources: Scrum Guide and related bibliography
  • Online exam (150$ aprox.)

 If you think you might be interested and want to know more, take a look at:

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Hibernate Session Management

There is some controversy about this topic and Hibernate reference documentation does not provide clear examples of best practices how-to’s. I have been researching on it for the last days and the result will be available within the next few weeks in one of the books I’m about to publish with Ra-Ma Editorial (based on Spring Framework and Hibernate).

Hibernate, as all we probably know, is an ORM mainly conceived for the Java platform. Hibernate provides a set of classes to deal with transactions and database connections, such as Configuration, SessionFactory and Session. A SessionFactory object is thread-saved, whereas a Session one is not. That is the main reason why a Session object has to be created and disposed each time a database access is performed.

However there’re two main approaches that can be possible. On one hand a new Session can be opened and closed each time a query needs to be sent to the database. On the other hand we can take advantage of applying the unit of work pattern. This design pattern is intended to make the most of database access regarding performance. This means that we have to wrap all the database operations we want to apply in a single transaction. For instance we can talk about a unit of work as all the operations generated as a consequence of a client request.

To sum up the unit of work pattern is the preferred one when talking about multi-threaded environments like a web application.

Assuming we are writing a console app a unit of work will be made up of several DAO operations. Taking place within the boundaries of a Hibernate transaction:

public static void main(String[] args) {
	GenericDAO productTypeDAO = new GenericDAO();
	Session sess = factory.openSession();
	Transaction tx = null;
	try {
		tx = sess.beginTransaction();
		ProductType pt = new ProductType(1, "Electronics");
		productTypeDAO.insert(pt);
		p = productTypeDAO.selectById(1, ProductType.class);
		tx.commit();
	}
	catch (RuntimeException e) {
		if (tx != null) tx.rollback();
		throw e; // or display error message
	}
	finally {
		sess.close();
}
Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Runniac is almost ready to go!

In recent posts I wrote about a project I’m working on which consists on a search engine to find running events. I would say that it’s now in some kind of preproduction stage. For that reason I have been really busy these days trying to fix bugs and issues and trying to polish the whole site.

As a final result user or visitors will be able to search for races using different criteria, navigate through the results getting information about the events such as location, price, distance, date or analyzing the event route on an interactive map.

Despite the fact that it will be released very soon you can find below some screenshots of the main pages:

In the landing page if the user scrolls down a list of the races which will take place the closest to him is displayed to enable that functionality the user has to accept first being geolocated by the site.

This picture shows the list of results which is paginated and can be ordered by several criteria, such as date or rating.

In the event detail page the user can see the course of the race on a map using the being base map.

At the moment I’m focusing on the SEO. In spite of reaching a 95% at Google Page Speed and Yslow I still need to add some caching features to my Web API Rest services. This can be done very easily using the OutputCache attribute which can decorate any controller action or the whole controller class. These .NET services are called from the client using the ngResource Angular module, which supports interaction with RESTful services.

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Drawing markers with AngularJS and openlayers

As you probably read some days ago I’m developing a website with some mapping features in it. To do so I’m using a great AngularJS directive created by tombatossals and accesible on this link: https://github.com/tombatossals/angular-openlayers-directive

I need now to show a map with some markers representing running races. This is pretty simple using the directive. We just need to add  a <ol-marker> element for each race we want to represent. We can also set an overlay which will show up every time we hover a marker, showing some related information.

The tricky part was the finding the best solution to show this overlay. The directive supports either showing it when clicking on a marker or when hovering it. I personally like the last one more. However I do not want to have the overlay disappearing when I’m not hovering the marker, because it would be very useful to have some HTML including a link in this overlay. To do so I have to extend a bit the directive mentioned to support a new overlay drawing strategy.

This new strategy forces the rendering of a marker’s overlay as soon as the mouse enters it and when the user moves it to another one the all overlay disappears being replaced by the one of the current marker. We can also have all of them removed from the map by clicking on an area free of any marker.

Find bellow a small portion code of how this can be achieved:

<openlayers ol-center="center" custom-layers="true" height="500">
     <ol-layer ol-layer-properties="bing"></ol-layer>
     <ol-marker ng-repeat="marker in markers" ol-marker-properties="marker"></ol-marker>
 </openlayers>

First of all place the map, a base layer and a marker for each object in an array we will populate in the controller with the data coming from the server.

$scope.addMarker = function (value) {
         $scope.markers.push({
                name: value.Id,
                lat: value.Town.Latitude,
                lon: value.Town.Longitude,
                label: {
                     message: value.Name,
                     show: false,
                     keepOneOverlayVisible: true
                }
          });
};

For each event received from a server API a new object is created with all the information required to draw the marker and display and overlay with a message and the rendering strategy explained before.

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Exporting a map with AngularJS and openlayers

In the previous post  I talked about how to create a map with AngularJS and openlayers. You see the directive created by  tombatossals and accesible on this link: https://github.com/tombatossals/angular-openlayers-directive

This directive provides a handful of very useful features. However in this post we will see how to download a layer rendered on the map. Which is something missing in the directive. To do so we start by creating a simple button group with bootstrap.

<div class="btn-group pull-right">
        <button type="button" class="btn btn-xs btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                Descargar <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
             <li ng-hide="isIeAndGpx"><a href="{{kmlDownload}}" download="mapa.kml" ng-click="exportAsKml()">Como KML</a></li>
             <li ng-hide="isIeAndKml"><a href="{{gpxDownload}}" download="mapa.gpx" ng-click="exportAsGpx()">Como GPX</a></li>
        </ul>
</div>

As you can see the links used to create the action buttons have an HTML5 attribute called ‘download’. This attribute is very useful to create files on the client and downladed them without using server-side logic. Once this is setup we just need a method to get the data layer of the map loop through its features and push them to a string, which will eventually encode it to a Base64 string. This Base64 has to be assigned to the href attribute of the downloads link.

$scope.exportAsGpx = function () {
         olData.getMap("expandedMap").then(function (map) {
             var features = MapUtils.getFeaturesFromLayer(map);
             var string = new ol.format.GPX().writeFeatures(features);
             if (BrowserUtils.detectIE() || BrowserUtils.isSafari()) {
                    window.open(MapUtils.courseFilesUrl + $scope.event.CourseFileName);
             } else {
                    var base64 = ConversionUtils.strToBase64(string);
                    $scope.gpxDownload = 'data:text/gpx+xml;base64,' + base64;
             }
         });
    };

In the screenshots below this feature is shown in action. The map has a button the user can click between GPX or KML formats to download the path printed on the map.

All this stuff has been developed to allow visitors to see and download the path of races in which they are interested. Keep in touch to find more about it. The project is intended to be released by this summer.

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Building maps with AngularJS and openlayers

During the last few weeks we have resumed a Project that was stopped for some time. The idea is to have something deliverable by the start of this summer.

These days we have been working on the maps functionality. The idea is to display races courses in a map in order to let visitors inspect the path they have to follow to complete a given race. To do so we are using the opensource map library openlayers. Given that the client-side code of the app is written with AngularJs a third party directive is being used. You can find it here: http://tombatossals.github.io/angular-openlayers-directive/

Despite the fact that it is rather limited yet it makes quite easy to show maps on the screen.

At this point the user can upload a GPX or KML file containing the course of a race and it will be stored by the app. Then this info will be presented when visitors access the events.

The pictures below show how a user can upload a file with some geographic info and as a result it is displayed on the map. Moreover the user can switch between different base maps like aerial, road or aerial with labels, all provided bay Bing.

Internally the map consists of two layers. The first one is the base map referenced above and the second one is a vector layer containing the course of the race.

The final goal is building a website where visitors can access to detailed info of a wide range of races including their course, been able to downloading to a GPS enabled devised and follow the path as a training session to be ready for the event before taking it.

You can find further information on the beta project (without updating) here: http://eugeniaperez.es/wordpress/runniac-la-red-social-para-runners/

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Spring Framework Certification

Spring LogoThis week I’m finishing teaching a course for Software Specialist  Developer on J2EE enterprise environments but shortly I hope to start another course based on a huge range of different web technologies.

Notice that many of the contents presented during that term are related to the Spring Framework (SpringMVC) and Hibernate, so this would be a perfect time to prepare the Certificates associated with these technologies. In reference to the first one, Pivotal offers 3 VMWare Certifications of Spring Framework:

  • Core Spring – leads to becoming a Spring Certified Professional
  • Spring Web – leads to becoming a Certified Spring Web Application Developer
  • Enterprise Integration with Spring – leads to becoming a Certified Enterprise Integration Specialist

The one I found the most interesting is the intermediate, which prepares you to become a  VMware SpringSource Certified Spring Web Application Developer. I’ve been looking several training courses for preparation, however, for the moment I’ll try to prepare it on my own using the following sources:

  • Spring in Action (Craig Walls), Fourth Edition, Manning Publications: I own  a paperback edition since a while, in fact it was a part of the source of inspiration to get some of the content that I have taught in the course.
  • Some reference books I found in: http://arnosthavelka.github.io/spring-cert/index.html#!
  • But surely, this page seems to have plenty of resources available, as well as Mocks exam for preparing the same type of certification: http://springcert.sourceforge.net/index.html

Regarding the examination is a computer-based exam (which you can easily take in any Paerson VUE Test Center) it takes a total of 90 minutes with a passing score of  76% (38 of 50 questions answered successfully). The type of questions asked in the exam are multiple-choice. Some questions have multiple answers. But as I read this is NOT always explicitly stated. You are allowed to go back to earlier questions during the exam and can change the answers ( this does not always happen…) And finally the score is provided immediately at the end of the exam. Hard copy provided at test center and softcopy certificate sent by e-mail.

After the training you will receive a SpringSource Certification exam voucher that you can use at a Pearson Vue Center. Pearson Vue has hundreds of locations all over the world so you are guaranteed to have an exam center near you, for example the one I chose (Consultec placed on Donosti). In my case since  I took in that center the CCNA certification I have a Pearson account .

Once I pass the exam I will give you  some tips & tricks on how I managed to pass it and join me on the road to the next certification on JPA / Hibernate.

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

[Off topic] Nuevo curso de certificado de profesionalidad – Desarrollo con tecnologías web

A partir del próximo mes de Abril en horario de tardes estaré impartiendo varios módulos del Certificado de Profesionalidad de Nivel 3 de Desarrollo de Aplicaciones con Tecnologías Web (IFC0210)

El curso ofrece una visión completa de las destrezas necesarias para desarrollarse en el campo profesional de la programación haciendo especial hincapié en tecnologías del entorno cliente tales como HTML5, CSS3, Javascript, jQuery, AJAX, AngularJS y aspectos relacionados con la accesibilidad/usabilidad. Seguidamente también se profundizará en el desarrollo de aplicaciones en el entorno servidor fundamentalmente mediante el lenguaje PHP y el Framework de Symfony y su integración con SGBDR como MySQL (así como el desarrollo de servicios web Rest). Por último se abordará la implantación y despliegue de las aplicaciones desarrolladas en espacios de alojamiento online.

A continuación detallo la correspondencia con el catálogo modular de Formación Profesional, siendo los contenidos análogos a los que pertenecen al módulo de Desarrollo Web del Ciclo Formativo de DAM, del que también soy profesora:
CONTENIDOS
MF0491_3: Programación web en el entorno cliente (180 horas)
• UF1841 Elaboración de documentos web mediante lenguajes de marca
• UF1842 Desarrollo y reutilización de componentes software y multimedia mediante lenguajes de guión
• UF1843 Aplicaciones técnicas de usabilidad y accesibilidad en el entorno cliente
MF0492_3: Programación web en el entorno servidor (240 horas)
• UF1844 Desarrollo de aplicaciones web en el entorno servidor
• UF1845 Acceso a datos en aplicaciones web del entorno servidor
• UF1846 Desarrollo de aplicaciones web distribuidas
MF0493_3 Implantación de aplicaciones web en entorno internet, intranet y extranet (90 horas)
MP0391 Módulo de prácticas profesionales no laborales (80 horas)

Si estás interesado/a no dudes en contactar conmigo. Aquí te dejo más información al respecto:
http://www.ctl-online.com/oferta-formativa/formacion-subvencionada/DESARROLLO_APLICACIONES_TECNOLOGIAS_WEB.aspx

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Message Queueing with Apache ActiveMQ

Spring Framework provides two common ways to empower enterprise applications such as message queues and email sending.

Message queues allow asynchronous communication between programs or systems. Not only allow you to send messages but object instances.

To integrate this technology in our applications a message queuing server like Apache ActiveMQ is required. Here you can download it: http://activemq.apache.org/activemq-5111-release.html

After unzipping the zip file, you will need to launch activemq.bat, placed into the bin directory and depending on the system in win64 or win32. Notice that various ports for a different range of technologies have been opened (websockets, stomp, etc)

One of the services that we may be interested in monitoring would be available at the url: http://localhost:8161

The default access to manage ActiveBroker works with admin/admin credentials, which will lead to a panel where you can view the active queues and messages exchanged, but for now it is still empty.

The project I’m going to focus on (please find this on my Bitbucket account), simulates a typical restaurant to generate a specific order to be sent later to the message queueing service. Notice that after reading and processing each order, an email will be sent.

The project consists of the following components:

Order.java: a POJO representing an order.

MessageSender.java: this class involves a run method with an infinite loop to generate instances of every single order sent to the queue.

MessageReceiver.java: this class receives the orders.

Main.java:  the class with the main method that starts the MessageSender and MessageReceiver as well.

The beans file of the Spring Framework plays a pretty crucial role in the project. Besides preparing the bean to use ActiveMQ indicating all the required settings, you must inject the MessageSender and MessageReceiver beans. In turn, to make MessageReceiver able to send an email notification, it is necessary to inject the Emailer we have previously developed in another Spring Maven project for that purpose.

As you can see, we must declare the message queue that will be used in our application:

Additionally we should note that we will also use the beans declared in the SpringMailer project. In this way we can reuse the established configuration.

We may also use the Jar generated in the previous project, just referring to Maven artifact through its coordinates in our pom.xml file:

Once we launch the class containing the main method, the system boots  and starts the instances MessageSender. We can see the stack trace on the IDE console:

An email is sent just after every order received, so check your inbox ;-). Furthermore, we can see how many messages are sent and received through the ActiveMQ interface:

If you need further information take a look to my slides:

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather