Table of Contents...1. Annex A...4. Work plan...4. Annex B...6

Transcrição

1 Appendix

2 Table of Contents Table of Contents...1 Annex A...4 Work plan...4 Annex B...6 Framework Analysis Ruby on Rails Ruby language Components Architecture Database integration Conventions Useful Resources CakePHP Architecture Database integration and conventions Useful Resources Django Architecture Useful Resources ASP.NET Architecture Database integration Useful resources Spring Architecture Useful resources...16 Annex C...17 Planning phase Scenarios

3 2. Requirements analysis Use cases Visitor Logged user User profile Wireframes...27 Annex D...46 Implementation Authentication system and user profiles Subscriptions service Personal information Groups Events Traces Bookmarks Tags...53 Annex E...56 Optimizations Front-end Make fewer HTTP requests Compress components with GZip Add Expires headers Configure etags Put CSS on top and JS on bottom Back-end optimization Caching...60 Annex F...64 Design Identity Layout Interface...66 Annex G...72 Wireframes inspection

4 1. Introdução Objectivo Caracterização dos avaliadores Tabela de Inspecção do Design...74 Annex H...78 Formal Usability Analysis Analysis instructions Subject background results Analysis results Post-analysis subject interview results

5 Annex A Work plan Figure 1 Project plan for the first semester 4

6 Figure 2 Project plan for the second semester 5

7 Annex B Framework Analysis 1. Ruby on Rails Ruby on Rails (RoR) was first released to the public in July 2004 by David Heinemeier Hansson of 37 Signals. This framework is built in Ruby, an objectoriented language, and is based in two fundamental principles: Convention over Configuration (CoC) and Don t Repeat Yourself (DRY). The first is more of a set of rules, which enable automatic actions in the framework. In the beginning this might seem a bit odd, but after developers realize the benefits of using the same conventions for file, functions and table names, it becomes natural to them. The DRY philosophy represents the importance of avoiding code duplication in order to maintain coherent code in the entire application. This concept will be present in many aspects of RoR framework, which will be described in the following paragraphs Ruby language Ruby is an object-oriented, dynamic and open source programming language that focus on simplicity and productivity. [Error! Reference source not found.] Its syntax is very readable and easy to write, even for developers with little experience. In Ruby everything is represented as an object, even numbers and other symbols. This can be demonstrated by a bit of code that applies an action to a number: 5.times { print "YouTrace project" } This feature is an influence of the Smalltalk language and eases the use of Ruby, since these rules apply to everything on Ruby. 6

8 1.2. Components RoR has six main components used by different resources of the framework: Active Record: ORM implementation, which handles the communication between the application and the database. Action View: handles the rendering of the data displayed to users. Has different engines to handle different requests, but the most popular is the HTML rendering. Action Controller: process user requests and calls the respective actions. Action Mailer: handles requests (password retrieval, sign-up confirmation, etc.) Active Resource: used for consuming REST services. Active Support: collection of classes and extensions of core libraries to assist the development process. In the next chapter we will show how some of these components connect to each other Architecture The Ruby on Rails framework has an MVC (Model-View-Controller) architecture, which is organized in folder within the framework. 7

9 Figure 1 Ruby on Rails architecture The Model section is a set of classes that use Active Record, an ORM class that maps database tables to objects. In Active Record it s required to use the previously referred conventions, so that the entire mapping is automatically done by this component without the need of additional code. The View section works with Action View component and it gathers all the HTML files used in the application. These files act as templates with code injections and all the dynamic content will be inserted at render time. Finally, the Controller section is associated with Action Controller component, which includes the ApplicationController class. All the logic code of the application is written in this section and represents the actions served to the users. For instance, let s have a look at a given URL: /account/login This URL will call Account controller and the respective login function defined in the controller. Controllers handle most of users requests, but they should be simple and follow the DRY principle. In the developer s perspective, it s better to make larger 8

10 models than just implementing all the logic directly in the controllers. [Error! Reference source not found.] 1.4. Database integration As said before, for database integration, RoR uses Active Record, which map database tables to application models. To connect different models in the application, RoR has four types of associations: hasmany hasone belongsto hasandbelongstomany With these associations is possible to relate all the models in the application and enable lots of automatic functions. For instance, if we have a model User associated to model Group with a hasmany association, we can access user s groups by call the function groups() from User model. Once again, it s very important to follow the conventions in order to make this magic work Conventions Conventions are an important aspect of Ruby on Rails framework and we ve been talking a lot about this in this analysis. Conventions are applied to files, classes, models and database tables. Files should use underscore: events_controller.rb Classes should use camel case: EventsController Models are singular: Event Database tables are plural: Events Join tables should be alphabetically ordered: Events_Groups 9

11 1.6. Useful Resources The Ruby on Rails frameworks has lots of built-in resources and external plugins available as Ruby gems. They can be easily integrated in the application and there are lots of repositories over the Internet. From the many available resources we ve selected the set of helpers (HTML, CSS, JS, forms, AJAX), REST scaffolding, rake generators, migrations, testing suite, prototype integration and tons of additional plugins that can add extra functionalities to the application. 2. CakePHP CakePHP appears in the year 2005 with the objective of supplying a robust framework for web applications developed in PHP. At the time, an even today [x], was one of the most popular programming languages, but also one of the most unorganized. CakePHP took the example of Ruby on Rails framework and started developing a similar framework built on PHP. It wasn t intended to make a copy of RoR, but it s possible to find lots of similarities between these two frameworks. The appearance of CakePHP wasn t an isolated event, but more a consequence of the natural evolution of PHP language. The main change was the evolution to a fully object-oriented language, allowing the development of these kinds of frameworks Architecture Just like RoR, CakePHP also uses MVC architecture. There s no need to describe all the architecture again, so we ll just analyze a typical request process in the application. 10

12 Figure 2 CakePHP request path First, the request is forwarded to the respective controller (3) by the dispatcher (1) through the defined routes (2). Then, in the controller, the request is processed and the necessary actions are called. The usage of external components is optional. If the request requires information stored in the database, the controller (3) will communicate with the models (4,5) in order to retrieve that information. Finally, when the controller has all the information needed, the respective view (7) is called and the render engine generates the dynamic elements. Every time a new request is made (8), this process starts all over again. This architecture is almost identical to the RoR framework, but in this case, model and controllers are PHP files that extend core libraries and views are HTML files with some code injections Database integration and conventions CakePHP is also based in the same principles as Ruby on Rails: Conventions over Configuration and Don t Repeat Yourself. That means that both database integration and conventions are mostly the same as described in the RoR analysis. The main difference is the model objects mapped from the database. In PHP, objects are defined by arrays so the mapped model is just a group of arrays, which can be accessed by giving the respective index. 11

13 The conventions are identical in both frameworks Useful Resources In CakePHP the available resources remind, once again, the RoR framework. CakePHP has access control lists, lots of helpers (HTML, CSS, JS, forms and AJAX), scaffolding (CRUD operations), Bake (component generator), filters/callbacks in models and controllers, integrated validation and unit tests, among other resources. 3. Django Django is a web application framework built in Python. Born in 2003 as a tool to develop a web application for Lawrence Journal-World, Django became open source in Django has some relevant characteristics that allow quick development of web applications with less code and a clean design. Some of those characteristics are listed below: Based in MVC architecture DRY principle Loosely coupled Modular ORM Templates Administration module Developed in Python, Django also inherits all its characteristics, which makes it very modular, interactive, portable and extensible in C and C++ languages Architecture Although based in MVC architecture, Django has a different naming for its architecture, the MTV (Model-Template-View). The Model indicates how to access, validate and connect data. It also makes the bridge between the data model in the application and the database. 12

14 The Template indicates how data should be displayed, just like the views in the previous frameworks. Finally, the View indicates how to access the model and route to the appropriate templates. It s similar to controllers in MVC architecture. Figure 3 Django request process Initially the request is made from the browser to the web servers (1), which forwards it to the URL Resolver (2). This URL Resolver is just an application component that maps the given URL accordingly to the routes defined in configuration files. The request in then processed by the respective function of the view (3). If stored data is required, this component will communicate with the model (4,5) to retrieve the necessary data. After having all the data in the view, the application formats it through the respective templates (6,7) and the information is ready to be displayed to users (8) Useful Resources Django has some features to help developers in their projects. The most important features are the built-in web server, ORM, template language, simple form processing, session support, caching, URL configuration, internationalization, etc. There are also some complete applications or modules that can be integrated in Django project with ease. From those modules we ve selected the complete administration interface, authentication system, comments systems, CSRF and XSS protection, syndication, sitemaps and dynamic PDF generation. 13

15 4. ASP.NET ASP.NET is the web application technology of the.net framework. It was developed to replace ASP and was first released in This framework is language neutral, but C# is commonly used to develop web application in ASP.NET. This technology is an evolution of ASP, with improved language support, better performance and easier deployment of the applications. It has several controls (data, login, navigation, etc.) that can be edited and extended Architecture We have to take a look on the entire.net framework in order to fully understand the placement of ASP.NET within this framework. This framework can be divided in three sections: programming languages (C#, Visual Basic, J#), server and clientoriented technologies (ASP.NET, Windows Forms, Compact Framework) and IDEs (Visual Studio.NET, Visual Web Developer). Figure 4 The.NET framework architecture The Base Class Library is shared by all the programming languages and includes functions used to handle files, generate charts, interact with the database and manipulate XML data. 14

16 All the programming languages used in the.net framework are compiled by the Common Language Runtime, which produces a temporary language called Common Intermediate Language. This characteristic allows some performance gain. The 3.5 extension of.net framework includes a MVC framework that can be used with ASP.NET, but others like MonoRail are also freely available to download Database integration In the.net framework, database integration is done with ADO.NET, which has common drivers to some databases like ODBC, OLE Db, SQL Server or Access. The database configuration and CRUD operations are quick and simple if SQL Server is used. With other databases the process gets a lot more complicated and slow Useful resources ASP.NET has some useful resources like data controls, validation controls, membership and roles, AJAX extensions controls, navigation controls, intellisense (programming assistant), debugging, ViewState, extensions, ACL and scaffolding (only available with MVC framework extension). 5. Spring Spring is an open source project that aims to make the J2EE environment more accessible to web developers. It was released in June 2003 as a web application MVC framework. Spring is a powerful framework and can be used in standalone applications or with application servers. The key feature of this framework is the Inversion of Control (IOC) concept. The basic concept of the Inversion of Control pattern (also known as dependency injection) is that you do not create your objects but describe how they should be created. You don't directly connect your components and services together in code but describe which services are needed by which components in a configuration file. A container (in the case of the Spring framework, the IOC container) is then responsible for hooking it all up. 15

17 5.1. Architecture The Spring framework has several modules to handle different aspects of the application. Figure 5 Spring framework architecture Context is a configuration file that provides context information to the Spring framework. It also includes some enterprise services with extra functionalities. AOP module integrates aspect-oriented programming functionality directly into the framework. The JDBC DAO abstraction layer offers a meaningful exception hierarchy for managing the error messages from the database. The Spring framework can integrate several ORM frameworks to provide its ORM tool. The Web module is built on top of the context module, providing contexts from web applications. Finally, the MVC framework is a full-featured MVC implementation for building web applications. It s highly configurable and accommodates several view technologies like JSP Useful resources Spring framework has also some important resources and features, such as the XMLBeanFactory, the good programming practices, consistent framework for data access, testing suite, POJO-based programming (Plain Old Java Objects) and others. 16

18 Annex C Planning phase 1. Scenarios The following scenarios were written in Portuguese. O António sai todos os dias para o emprego e liga o seu dispositivo GPS que vai registando o percurso. Quando chega a casa ao fim do dia descarrega o log para o YouTrace para poder actualizar os seus percursos. Como o processamento não é feito de imediato, o seu percurso fica visível, mas sem estar confirmado pelo sistema. Assim, o António pode ter uma representação imediata do seu percurso, apesar de ainda não ser a versão oficial. Depois de descarregados os logs, vai visualizar o seu histórico de traces e marcar quais os que pretende que sejam privados. Repara então numa notificação na sua listagem de comunidades que lhe indica que existem actualizações no grupo criado para os utilizadores da sua empresa. Ao entrar na página dessa comunidade vê que de facto o seu colega Pedro adicionou um novo trace ao seu perfil que lhe mostra um caminho novo para chegar ao emprego. Contente com a descoberta, o António desliga o seu computador e no dia seguinte experimenta o novo caminho indicado pelo seu colega Pedro. O Luís, ao navegar pelo site, descobre o perfil de um amigo seu. Como quer estar a par das actualizações desse seu amigo, decide subscrever o seu perfil. Mais tarde, o seu amigo aceita o pedido e fica então na lista de subscrições do Luís. Desta forma, o Luís pode ver na sua página pessoal os traces e as actualizações do seu amigo e de todos aqueles que estão na lista de subscrições. Mais tarde entra novamente no seu perfil do YouTrace e surge-lhe uma notificação avisando-o que existem novas actualizações no seu grupo de exploradores da serra da Boa-Viagem. Ao visitar a página desse grupo verifica que existem novas mensagens a marcar um encontro para o fim-de-semana e decide responder. Usando uma keyword específica, o Luís consegue responder directamente a outros 17

19 utilizadores apesar da sua mensagem aparecer para todo o grupo, deixando uma notificação automática no perfil da pessoa a quem se dirige. Como ele, há muitos outros adeptos do off-road e parece que a moda pegou e há montes de gente do mundo inteiro a partilhar os caminhos. Vejam só que agora, começa a haver mapas do mundo off-road!! Há mesmo malta que vai de viagem entre cidades e de repente sai da estrada que perigo! O Alfredo é motorista numa empresa de transportes de mercadorias. Todos os dias sai de manhã da sede da empresa e percorre centenas de quilómetros nas estradas da região para fazer cargas e descargas. Utiliza um GPS com uma aplicação comercial para o ajudar a orientar-se e a procurar os caminhos mais curtos de uma local para o outro. Como ouviu falar do YouTrace, resolveu começar a fazer o log dos caminhos que percorre todos os dias. Quando chega a casa, faz upload dos traces para a sua conta pessoal no YouTrace. E partilha os traces com o grupo os amigos da encomenda um grupo de acesso restrito onde só são admitidos funcionários da dita empresa. Além de partilharem os traces para criarem um mapa de estradas da empresa, também partilham vários tipos de informação tais como: zonas onde há radares de velocidade; estradas em obras ou o seu estado de conservação; locais que usualmente estão congestionados a certas horas; postos de combustível com os preços mais baixos; POIs genéricos; etc. Como gosta de passear ao fim de semana, recolhe esses traces também para o seu mapa pessoal e procura no mapa do mundo e em mapas de outros grupos novos locais para visitar bem como informações que lhe possam ser úteis durante a viagem. Uma feature que ele gosta bastante no YouTrace, é que quando introduz um novo trace e as especificações do veículo usado, é possível obter uma estimativa do consumo de combustível despendido no percurso. O Carlos vive em Montemor e vai e vem todos os dias a Coimbra, pois é lá que trabalha. Na maioria das vezes, vai sozinho. Ele tem um Corsa 1.2, que até é poupadinho, mas a gasolina está cara!!! No entanto, graças ao YouTrace, ele pode começar a poupar! 18

20 Todos os dias ele recolhe o trace de todos os caminhos que faz e com isso o mapa vai ficando bem melhor, mas não é aí que ele poupa! É que em Montemor (e arredores), há muita gente a fazer o mesmo e o YouTrace tem um módulo que analisa os traces dos vizinhos (ou das pessoas que queremos permitir) e que identifica quando duas ou mais pessoas costumam partilhar traces parecidos! Eles já podem fazer car-pooling! :-) Agora, o Carlos leva sempre o carro cheio às terças e quintas, e vai à boleia nos outros dias. O Carlos é adepto das novas tecnologias e decidiu comprar o último modelo do iphone. Como este modelo tem GPS, o Carlos pode usar a aplicação do YouTrace para registar automaticamente os seus percursos através do telemóvel. Para além das novas tecnologias, é também um entusiasta da corrida e não passa um fim-de-semana sem dar uma corrida pela cidade. Quando vai correr leva consigo o seu iphone para ouvir música e ao mesmo tempo registar o seu percurso através do YouTrace. No final da corrida pode ver directamente no seu telemóvel o percurso que fez e submetê-lo no YouTrace para juntar às suas outras corridas e partilhar com os seus amigos. 2. Requirements analysis The following list is the result of the requirements analysis on the previous scenarios: User account o o o o Create account Login/Logout View profile Edit profile Dashboard o o o Add/remove comment Send private message Show notifications Traces o Add/remove trace 19

21 o Add trace details o Edit trace details o View trace history o Show consumption estimates Subscriptions o Add/remove subscription o Accept/refuse request o List subscriptions Groups o Create/delete group o Invite users o View group profile o Edit group profile Neighbours o List neighbours o Car-pooling suggestions 3. Use cases The use case diagrams are divided in three large groups: visitor, logged user and user profile. The last group is an extension of the logged user, but given the amount of diagrams, it was defined as an independent group Visitor The following diagrams describe the actions taken by a visitor (unauthenticated user) on YouTrace social platform. 20

22 User authentication Users can login or register to YouTrace platform with the usual form or with OpenID technology. It s also possible to recover the password within the login process. Figure 3 User authentication use case diagram Map section The global map view is available to all users, which emphasize the open-source philosophy of the social platform. Figure 4 Map section use case diagram Social section In the social section, visitors are able to search a scroll through public user and group profiles. 21

23 Figure 5 Social section use case diagram General navigation The remaining actions available to visitors are simply go to actions and don t have much to specify. Figure 6 Map section use case diagram 3.2. Logged user The following diagrams describe the actions taken by an authenticated user when navigating on the main page of the social platform. Map section This section is very similar to the visitor page. 22

24 Figure 7 Map section use case diagram Social section In this section, users can do all the actions available to visitors plus the subscription actions available from user and group profiles. Figure 8 Social section use case diagram General navigation The remaining actions available to visitors are simply go to actions and don t have much to specify. 23

25 Figure 9 Map section use case diagram 3.3. User profile As said before, this group includes actions that extend the logged user group. The following diagrams describe the actions that logged users can perform on their personal profile. Home section In the home section, users can interact with their dashboard and have a quick overview of the entire platform. Figure 10 Home section use case diagram 24

26 Map section In the map section, users can view their personal map built with their own traces. Figure 11 Map section use case diagram Social section In this section, users can view and manage their contact network. Figure 12 Social section use case diagram Personal information section In this section, users can view and edit their profile, including their account password. 25

27 Figure 13 Personal information section use case diagram 26

28 4. Wireframes Figure 14 Main: Home

29 Figure 15 Main: Map 28

30 Figure 16 Main: Social 29

31 Figure 17 Main: How to 30

32 Figure 18 User profile: Home 31

33 Figure 19 User profile: Info 32

34 Figure 20 User profile: Edit Info 33

35 Figure 21 User profile: Traces 34

36 Figure 22 User profile: Social section 35

37 Figure 23 Group profile: Home 36

38 Figure 24 Group profile: Info 37

39 Figure 25 Group profile: Edit Info 38

40 Figure 26 Group profile: Traces 39

41 Figure 27 Group profile: Members 40

42 Figure 28 General: Create Account Figure 29 General: Create group 41

43 Figure 30 General: Login 42

44 Figure 31 General: View Trace 43

45 Figure 32 General: Add Trace 44

46 Figure 33 General: Sidebar 45

47 Annex D Implementation 1. Authentication system and user profiles The first step of the implementation was creating user accounts and all the necessary actions to handle registration and login. For this matter it was used the RESTful Authentication plugin, which automatically creates login and register forms, and has some helpful helpers (that s why they call them helpers, anyway) to assist in the implementation of user profiles. This plugin is straightforward and, with a simple generate command, lots of functionalities are added to the application. It also provides an integrated activationby- system to improve account security. After setting up the authentication system, we built user s personal profile pages and created the necessary routes to handle requests. In RESTful Rails, routes are created using the resources function, which will automatically map the routes for show, create, edit, update and delete actions. So user profile routes look like this: map.resources :users do users users.home 'home', :controller => 'users', :action => 'home', :path_prefix => '/users/:id' users.network 'network', :controller => 'users', :action => 'network', :path_prefix => '/users/:id' users.traces 'traces', :controller => 'users', :action => 'traces', :path_prefix => '/users/:id' users.info 'info', :controller => 'users', :action => 'info', :path_prefix => '/users/:id' users.prefs 'prefs', :controller => 'users', :action => 'prefs', :path_prefix => '/users/:id' end Besides the default actions, we ve also mapped routes for the profile sections of each user. By doing this in a nested named route it s possible to access, for instance, the traces section with the function user_traces_path(user). This is really helpful

48 when you have to deal with lots of different routes and will maintain a logical structure along the implementation. 2. Subscriptions service After implementing the authentication system and the navigation in the user profile, we started working on users relationships in the social platform. This is a major feature so we decided that it was best to start from here and then implement the minor features later on the project. Subscriptions are used to store the relations between users, but only in one direction, which means that for each user only their subscriptions are stored, not the inverse. One user can have multiple subscriptions and multiple followers, who might not be the same. We opted for this solution to represent relationships between users, because in YouTrace users will mostly store their traces and share them with others. It s not intended to use YouTrace as a replacement for other social networks and it s much more logical to have a subscription service where users can stay updated without implying a friendship with other users. It s much more like Twitter or simple RSS feed subscription. To build this table in the application we needed to generate a new model and map the correct model associations between users and subscriptions. This was a bit tricky, because subscriptions table is self-referential and we had to be careful to keep database integrity. First we tried a has_and_belongs_to_many association, which is a simple way of building this table without the need of generating a new model for it: has_and_belongs_to_many :subscriptions, :class_name => "User", :join_table => "subscriptions", :foreign_key => "user_id", :association_foreign_key => "subscriber_id" This solution worked fine in the beginning, but then we needed to add more attributes to this table to handle the subscription s authorization and pausing. With this kind of association that wasn t possible, so we had to generate a new model for the subscriptions and link the two models with has_many and belongs_to associations. On user model we have: 47

49 has_many :subscriptions has_many :subscribers, :through => :subscriptions And on subscription model: belongs_to :user belongs_to :subscriber, :class_name => "User", :foreign_key => "subscriber_id" This was the solution for our problem and now we can easily access and update any attributes of this model. With this association we can retrieve user s subscriptions with a simple user.subscriptions() function. This will return an array of subscriptions, which can be used to extend user s information. This and some other functions are automatically available to user model just for adding these associations. 3. Personal information At this point we ve done the authentication system, the navigation and the subscription service. Meantime, we ve just finished the personal information view from user s profile. This means that users are now able to view and edit their personal information to complete their profile. The registration process is very simple and requires few details from users (username, and password to be precise) so this area is designed to complete that personal information with other details like birthday, real name or location. It also gives the possibility to add vehicles and GPS devices to the user profile, which will be very useful in the future to take full advantage of some unique features from YouTrace social platform. These latest features are not yet implemented, given the low priority of each one. We re focusing on the major features of the application and will get back to this as soon as we finish implementing those features. Implementing an edit view in rails is pretty easy, especially on REST architecture. We just have to follow these steps: 1. Link to the edit page with edit_user_path(@user) 2. Implement edit and update functions in users_controller 48