Объектом исследования является процесс транспортных перевозок. Предметом исследования выступают пункты потребления и пункты производства, автоматизация системы расчета оптимальной стоимости перевозки. Поставленные задачи: 1. Возможность ввода, корректировки и сохранения вариантов расчёта по оптимизации. 2. Отображение результатов расчета в графическом виде на пользовательской форме. Целью данной работы является создание информационного Web-приложения, который позволит рассчитывать оптимальную стоимость перевозки продукции, предоставлять пользователю результаты расчета в графическом виде. Научная новизна полученных в работе результатов заключается в применении нового метода эффективной организации и ведения специализированного алгоритмического и программного обеспечения решения задачи оптимизации затрат на перевозку продукции, ориентированного на повышение эффективности управления процессами грузоперевозок с использованием современных методов обработки информации: использование гибкой методологии разработки (Agile) и таск-трекера Atlassian JIRA для ведения проекта, взаимодействия с заказчиком во время разработки, отслеживания ошибок, визуального отображения задач и мониторинга процесса их выполнения; функциональное моделирование процессов для реализации web-приложения решения задачи оптимизации затрат на перевозку продукции на основе методологии IDEF0 и средства реализации Ramus Educational; использование методики коллективного владения программным кодом на основе сервиса (удаленного репозитория) Atlassian Bitbucket. Практическая значимость результатов заключается в том, что разработанное программное обеспечение позволит: производить расчёт оптимальной себестоимости транспортных перевозок для любого количества пунктов производства; специалистам транспортно-логистического операционного отдела сократить время на формирование отчетных документов, сократить время поиска необходимой фактической отчетной информации за счет реализации эргономичного web-интерфейса; специалистам отдела сопровождения информационных систем предоставляет условия для снижения трудозатрат на сопровождение, совершенствование и развитие системы с учетом пожеланий пользователей. Результаты работы могут быть использованы также в учебном процессе для обучения бакалавров и магистрантов по направлению «Информационные системы и технологии». / The object of the research is the process of transportation. The subject of the research is points of consumption and points of production, automation of the system for calculating the optimal cost of transportation. Assigned tasks: 1. Possibility of entering, adjusting and saving options for the calculation of optimization. 2. Displaying the calculation results in a graphical form on the user form. The purpose of this work is to create an information Web-application that will allow you to calculate the optimal cost of transportation of products, provide the user with the results of the calculation in a graphical form. The scientific novelty of the results obtained in the work lies in the application of a new method of effective organization and maintenance of specialized algorithmic and software solutions for the optimization of the cost of transportation of products, focused on improving the efficiency of management of cargo transportation processes using modern information processing methods: the use of flexible development methodology (Agile) and the Atlassian JIRA task tracker for project management, interaction with the customer during development, tracking errors, visual display of tasks and monitoring the process of their implementation; functional modeling of processes for the implementation of a web-application for solving the problem of optimizing the costs of transportation of products based on the IDEF0 methodology and Ramus Educational tools; using the method of collective ownership of the program code based on the service (remote repository) Atlassian Bitbucket. The practical significance of the results lies in the fact that the developed software will allow: to calculate the optimal cost of transportation for any number of points of production; for specialists of the transport and logistics operations department, to reduce the time for the formation of reporting documents, to reduce the time to search for the necessary actual reporting information due to the implementation of an ergonomic web interface; for specialists of the information systems support department, it provides conditions for reducing labor costs for maintaining, improving and developing the system, taking into account the wishes of users. The results of the work can also be used in the educational process for training bachelors and undergraduates in the direction "Information systems and technologies".

Indiana University-Purdue University Indianapolis (IUPUI) / The Energy Monitoring Framework, designed and developed by IAC, IUPUI, aims to provide a cloud-based solution that combines business analytics with sensors for real-time energy management at the plant level using wireless sensor network technology. The project provides a platform where users can analyze the functioning of a plant using sensor data. The data would also help users to explore the energy usage trends and identify any energy leaks due to malfunctions or other environmental factors in their plant. Additionally, the users could check the machinery status in their plant and have the capability to control the equipment remotely. The main objectives of the project include the following: • Set up a wireless network using sensors and smart implants with a base station/ controller. • Deploy and connect the smart implants and sensors with the equipment in the plant that needs to be analyzed or controlled to improve their energy efficiency. • Set up a generalized interface to collect and process the sensor data values and store the data in a database. • Design and develop a generic database compatible with various companies irrespective of the type and size. • Design and develop a web application with a generalized structure. Hence the database can be deployed at multiple companies with minimum customization. The web app should provide the users with a platform to interact with the data to analyze the sensor data and initiate commands to control the equipment. The General Structure of the project constitutes the following components: • A wireless sensor network with a base station. • An Edge PC, that interfaces with the sensor network to collect the sensor data and sends it out to the cloud server. The system also interfaces with the sensor network to send out command signals to control the switches/ actuators. • A cloud that hosts a database and an API to collect and store information. • A web application hosted in the cloud to provide an interactive platform for users to analyze the data. The project was demonstrated in: • Lecture Hall (https://iac-lecture-hall.engr.iupui.edu/LectureHallFlask/). • Test Bed (https://iac-testbed.engr.iupui.edu/testbedflask/). • A company in Indiana. The above examples used sensors such as current sensors, temperature sensors, carbon dioxide sensors, and pressure sensors to set up the sensor network. The equipment was controlled using compactable switch nodes with the chosen sensor network protocol. The energy consumption details of each piece of equipment were measured over a few days. The data was validated, and the system worked as expected and helped the user to monitor, analyze and control the connected equipment remotely.

Generating web applications with correct structure and modern functionalities using a development platform is not widely known for students in academia around the world. Modern web development is moving further towards advancement where different functionalities adapted for web application development increase and become more central in today's market. Introducing modern concepts in web application development to the students in academia at an early stage is essential in order to provide better insight of how to suitably develop and maintain the structure of modern "Web Applications".  This thesis describes the work carried out to investigate how a web application can effectively be developed and structured by the undergraduate students in the course II1302 Projects and project methods at the Royal Institute of Technology (KTH) using a development platform.  The case study is conducted as a research method for this thesis. The research method revolved around experimentation with an example application to identify the possibilities of using a development platform in conjunction to improve the teaching of modern web application development early in education, and then apply the development platform in the course's future projects.  This thesis identifies pertinent fields of knowledge throughout the development of a web application using the development platform to learn about the relevant concepts and definitions of modern and future technologies used in web application development. The implementation of the web application covers the areas such as automation, deployment, and monitoring. These areas are utilized in the form of the following aspects: DevOps, CI/CD, integration cloud deployment, IoT simulated device, MVC design pattern architecture for both frontend and backend, programming frameworks, i.e., Angular JS frontend framework and Spring Boot backend framework. A description of how the application is managed and what technologies and resources are used is presented.  These aspects are used throughout the process of web application development. The requirements of using the development platform aim to be relevant to the students' studies at a sufficient difficulty level in course II1302. The students are expected to have an extended knowledge in basic web application development. / Att generera webbapplikationer med rätt struktur och moderna funktioner med hjälp av en utvecklingsplattform är inte allmänt känt för studenter inom akademin runt om i världen. Modern webbutveckling går vidare mot avancemang där olika funktioner anpassade för webbapplikationsutveckling ökar och blir mer centrala på dagens marknad. Att introducera moderna koncept inom webbapplikationsutveckling för studenter i akademin på ett tidigt stadium är viktigt för att ge bättre insikt om hur man på ett lämpligt sätt kan utveckla och behålla strukturen för moderna "Web Applications".  Denna avhandling beskriver arbetet med att undersöka hur en webbapplikation effektivt kan utvecklas och struktureras av studenterna i kursen II1302 Projekt och projektmetoder vid Royal Institute of Technology (KTH) med hjälp av en utvecklingsplattform.  Fallstudien genomförs som en forskningsmetod för denna avhandling. Forskningsmetoden kretsade kring experiment med en exempelapplikation för att identifiera möjligheterna att använda en utvecklingsplattform tillsammans för att förbättra undervisningen i modern webbapplikationsutveckling tidigt i utbildningen och sedan tillämpa utvecklingsplattformen i kursens framtida projekt.  Denna avhandling identifierar relevanta kunskapsområden genom utvecklingen av en webbapplikation med hjälp av utvecklingsplattformen för att lära sig relevanta begrepp och definitioner av modern och framtida teknik som används i webbapplikationsutveckling. Implementeringen av webbapplikationen täcker områden som automatisering, distribution och övervakning. Dessa områden används i form av följande aspekter: DevOps, CI/CD, integration av moln, IoT -simulerad enhet, MVC -designmönsterarkitektur för både frontend och backend, programmeringsramar, dvs Angular JS frontend framework och Spring Boot backend framework. En beskrivning av hur applikationen hanteras och vilken teknik och resurser som används presenteras.  Dessa aspekter används under hela processen för webbapplikationsutveckling. Kraven för att använda utvecklingsplattformen syftar till att vara relevanta för studenternas studier med tillräcklig svårighetsgrad i kurs II1302. Studenterna förväntas ha en utökad kunskap inom grundläggande webbapplikationsutveckling.

[ES] Entre los grandes desafíos actuales de las aplicaciones Web podemos citar la portabilidad, adaptabilidad y evolución. Estos desafíos se dan tanto en el ambiente en que operan así como en su desarrollo, ya que a menudo requieren de diferentes lenguajes, frameworks, herramientas, entornos, plataformas, etc. El Desarrollo Dirigido por Modelos (MDD) y en particular, la Arquitectura Dirigida por Modelos (MDA) contemplan estos desafíos proponiendo distintos niveles de abstracción para las diferentes fases de modelado, partiendo de modelos más orientados al problema, que no deberían contemplar aspectos de implementación (CIM, PIM), hasta llegar a los modelos más orientados a la solución planteada (PSM, ISM). Sin embargo, encarar adecuadamente este tema puede depender del grado de independencia que adquieren los modelos. Este trabajo de Tesis presenta un método que considera el problema de la evolución y portabilidad hacia diferentes entornos o arquitecturas en el diseño y desarrollo de aplicaciones Web. La propuesta se denomina MoWebA (del inglés, Model Oriented Web Approach). Durante el desarrollo de la tesis, hemos identificado una serie de aspectos que podrían tener un impacto positivo sobre los problemas de portabilidad y adaptabilidad que son: i) incorporación de un modelo específico de la arquitectura ASM (del inglés, Architecture Specific Model), que permita la portabilidad de los PIMs con respecto a la arquitectura (por ejemplo, RIA, SOA, Mobile); ii) clara separación de la capa de presentación con respecto a las capas navegacionales y de comportamiento; iii) definición de la estructura navegacional de acuerdo a un mecanismo orientado al comportamiento, que prevenga la modificación del diseño navegacional causada por cambios en la implementación; iv) uso de estándares para facilitar la independencia de las herramientas. Se ha llevado a cabo una revisión del estado de la literatura teniendo en cuenta los fundamentos de la Ingeniería Dirigida por Modelos MDE (Model Driven Engineering), las propuestas metodológicas para el desarrollo de Aplicaciones Web, las tendencias actuales, analizando en forma especial de qué manera las propuestas Web las contemplan, y las evidencias empíricas tanto en la academia como en la Industria. Presentamos así la propuesta MoWebA a partir de una serie de consideraciones sobre las aplicaciones Web que han sido identificadas durante el proceso de revisión del estado del arte. Posteriormente, detallamos cada una de las etapas del proceso de modelado, incluyendo los diagramas y notaciones propuestos, sus definiciones a través de sus metamodelos y ejemplos de uso. Seguidamente, presentamos el proceso de transformación adoptado por MoWebA, con los mecanismos de transformación Modelo-A-Modelo y Modelo-A-Código. Hemos dedicado un importante esfuerzo en la validación de la propuesta. Se realizó una primera validación, adoptando los modelos de MoWebA y en algunos casos generando aplicaciones para diferentes dominios. Con estas primeras experiencias de validación hemos podido identificar fortalezas y debilidades de la propuesta PIM de MoWebA, además de determinar en qué grado la misma cubre las necesidades de diferentes dominios. Como segunda experiencia, hemos realizado una validación preliminar con un grupo de estudiantes de último año de la carrera de Ingeniería Informática de la Universidad Católica "Nuestra Señora de la Asunción" (Paraguay), que consistió en la definición de ASM para tres arquitecturas diferentes. Finalmente, como tercera experiencia de validación, hemos llevado a cabo un Caso de Estudio que consistió en la definición de tres extensiones para MoWebA. Dicha validación fue desarrollada como parte de un proyecto de investigación liderado por la Universidad Católica "Nuestra Señora de la Asunción". La experiencia ha permitido analizar el grado de adaptabilidad de MoWebA y automatización en las transformacinoes PIM-ASM, así como el grado de independiencia del PIM. / [CA] Entre els grans desafiaments actuals de les aplicacions Web podem citar la portabilitat, adaptabilitat i evolució. El Desenvolupament Dirigit per Models (MDD) contemple aquests desafiaments proposant diferents nivells d'abstracció per a les diferents fases de modelatge. No obstant això, encarar adequadament aquest tema pot dependre del grau d'independència que adquireixen els models. Aquest treball de Tesi presenta un mètode que considera el problema de l'evolució i la portabilitat, en diferents entorns o arquitectures, per al disseny i desenvolupament d'aplicacions Web. La proposta s'anomena MoWebA (Model Oriented Web Approach). Durant el desenvolupament de la tesi hem identificat una sèrie d'aspectes que podrien tenir un impacte positiu sobre els problemes de portabilitat i adaptabilitat. Aquestos són: i) la incorporació d'un model específic d'arquitectura ASM (Architecture Specific Model), que permet la portabilitat dels models PIM respecte a l'arquitectura (per exemple, RIA, SOA, Mobile); ii) la clara separació de la capa de presentació respecte a les capes navegacionals i de comportament; iii) la definició de l'estructura navegacional d'acord amb un mecanisme orientat al comportament, que restringisca la modificació del disseny navegacional causada per canvis en la implementació; i per últim, iv) l'ús d'estàndards per tal de facilitar la independència de les eines. S'ha realitzat una revisió de l'estat de la literatura considerant els fonaments de l'Enginyeria Dirigida per Models MDE (Model Driven Engineering), les propostes metodològiques per al desenvolupament d'Aplicacions Web, les tendències actuals (analitzant de forma especial la manera en que les propostes Web les consideren), i les evidències empíriques tant en l'acadèmia com en la Indústria. Presentem així la proposta MoWebA a partir d'una sèrie de consideracions sobre les aplicacions Web que són identificades durant el procés de revisió de l'estat de l'art. Posteriorment, detallem cadascuna de les etapes del procés de modelatge, incloent els diagrames i les notacions proposades, les seues definicions (a través dels seus metamodels), i alguns exemples d'ús. Seguidament, presentem el procés de transformació adoptat per MoWebA, emprant mecanismes de transformació Model-a-Model i Model-a-Codi. Hem dedicat un esforç considerable en la validació de la proposta. Es realitzà una primera validació adoptant els models de MoWebA, i en alguns casos es generaren aplicacions per a diferents dominis. Aquestes experiències van ser realitzades per modeladors amb poca experiència, així com també per modeladors i desenvolupadors experimentats. Les experiències van ser desenvolupades en ambients tant acadèmics com industrials. Amb aquestes primeres experiències de validació s'identificaren fortaleses i febleses de la proposta PIM de MoWebA. També permeteren determinar fins quin grau la proposta respon a les necessitats dels diferents dominis. Com a segona experiència es realitzà una validació preliminar amb un grup d'estudiants d'últim curs de la carrera d'Enginyeria Informàtica de la Universitat Catòlica "Nuestra Señora de la Asunción" (Paraguai), que va consistir en la definició del model d'arquitectura ASM per a tres arquitectures diferents. Amb aquesta segona experiència de validació s'aconseguí valorar com de factible és d'adaptar la proposta a altres arquitectures. Finalment, com a tercera experiència de validació, es dugué a terme un Cas d'Estudi que va consistir en la definició de tres extensions per a MoWebA. L'experiència permeté analitzar el grau d'adaptabilitat i d'automatització en les transformacions PIM-ASM que s'obté amb MoWebA, així com el grau de independència del PIM amb respecte als altres models. Durant aquesta validació, s'han realitzat a més experiències de satisfacció d'usuaris amb un grup de modeladors i desenvolupadors. / [EN] Some of the major challenges facing Web applications today are those of portability, adaptability and evolution, not only in the environment in which they run, but also in the way in which they must be developed, often requiring different languages, frameworks, tools, environments, platforms, etc. MDD and MDA take into account these issues. However, to achieve portability, adaptability and evolution depends to some extent on the degree of independence that the models adopt. This Thesis presents a method that take into account the problem of evolution and portability towards different environments. The approach is called MoWebA (Model Oriented Web Approach). Some key aspects of MoWebA that could have a positive impact in the portability and adaptability are:i) incorporation of an Architecture Specific Model (ASM) as a new modeling layer, in order to keep the portability of the Platform Independent Model (PIM) regarding the different architectures (e.g., RIA, SOA, Mobile); ii) clear separation of the presentation layer with regard to the navigation and behavior layers; iii) definition of the navigational structure according to a function-oriented approach, which prevents the modification of the navigation design caused by implementation changes; iv) and use of standards in order to facilitate the independence from the tools. We justify MoWebA by highlighting a series of concerns for Web applications development. We present an overview of the method including the dimensions and the diagrams that we propose. Subsequently, we present each step in the modeling process, including the diagrams and notation, its definition (metamodels) and examples of use. Afterwards, we present the transformation process adopted by MoWebA, which includes model-to-model and model-to-code transformations. We have devoted special attention to the validation of the approach. As a first validation, MoWebA has been used for modelling and generating different types of applications by both novice and experienced modellers and developers. These experiences were done in academic and industrial contexts. The experiences have allowed to identify strengths and weaknesses of the PIM proposal, and to verify that the proposed notation covers the needs of different domains. Next, we present a preliminary validation of the ASM proposal, considering an experience of different ASM definitions made by a group of computer science students at the Catholic University "Nuestra Señora de la Asunción" (Paraguay). This preliminary validation has allowed us to determine how feasible is to adapt the proposal to other architectures. The analysis of the validation sought to answer the following questions: Can the same PIM model be used for different architectures?; Is it possible to specify clear limits between platform independent models (PIM) and architectural specific models (ASM)?; How does an architectural specific model facilitate the transformation rules definition?. Finally, we present a Case Study to validate the extensions of MoWebA to three different architectures. The experience was structured taking into account the framework of Runeson et al. This experience have allowed to carry out three complete extensions. In such extensions we could analysed the grade of adaptability of MoWebA and of automation PIM-ASM, as well as the grade of independence of the PIM metamodel. We have also conducted some user's satisfaction experiences with modelers and developers. / González Toñánez, M. (2022). A Navigational Role-Centric Model Oriented Web Approach MoWebA [Tesis doctoral]. Universitat Politècnica de València. https://doi.org/10.4995/Thesis/10251/181470

This project consisted of the development of a web based participant database system to replace a spreadsheet based one for the project “Vi Ses! Språkvänner i Linköping” and the evaluation of it. The design and implementation was done iteratively using a collection of usability guidelines as well as the results of a set of user tests. User tests were also used for the evaluation of the web database system. The task during the user tests was participant matching and the main measurement taken was task completion time. The project resulted in a web database system that could fully replace the spreadsheet database system. The evaluation tests showed that this system was both faster to match participants in as well as less error prone. / Detta projekt bestod av utvecklingen och evalueringen av ett webbaserat databassystem för deltagare. Den skulle ersätta ett existerande Excel-baserat databassystem för projektet “Vi Ses! Språkvänner i Linköping”. Designen och implementationen gjordes iterativt med hjälp av användbarhetsriktlinjer och resultat från användartester. Användartester användes även för evalueringen av webbdatabassystemet. Uppgiften i användartesterna var deltagarmatchning och det huvudsakliga mätvärdet var hur lång tid uppgiften tog. Projektet resulterade i ett webbaserat databassystem som helt kunde ersätta det Excel-baserade systemet. Evalueringstesterna visade att systemet var både snabbare och mindre felbenäget att matcha deltagare i.

Studentkonsultprojekt gör det möjligt för studenter att applicera sin kunskap i näringslivet samtidigt som det blir mindre kostsamt för företagen att anlita konsulter. Då jobbsökande via internet blir allt vanligare finns det ett behov av en webbapplikation för konsultuppdrag som kopplar samman studenter och företag. En av de viktigaste aspekterna för att skapa en konkurrenskraftig webbapplikation är användbarheten. Således är intentionen med denna studie att undersöka Hur kan en webbapplikation för konsultuppdrag mellan företag och studenter implementeras för att uppfattas som användbar av studenter? För att besvara frågeställningen har en webbapplikation för förmedling av konsulttjänster mellan företag och studenter utvecklats. Webbapplikationen baseras på en teoretisk grund där olika dimensioner av begreppet användbarhet analyserats. De dimensioner som lyfts är effektivitet, ändamålsenlighet och tillfredsställelse. I tillägg till detta har vikten av att specificera användare och de estetiska aspekternas påverkan på användbarhet behandlats. För att utvärdera om webbapplikationen upplevs som användbar testas den på tre testgrupper i tre olika skeden för att undersöka deras upplevelse av webbapplikationen. Testerna utgår från metoden thinking aloud tillsammans med enkäterna System Usability Scale (SUS) och Visual Aesthetics of Websites Inventory Short (VisAWI-S). SUS- och VisAWI-S-enkäterna gav indikationer på en starkt användbar applikation genom hela utvecklingsprocessen. Detta utifrån implementation av en design som främst utgick från principerna enkelhet och färgrikedom samt fokusområdena Synlighet av systemstatus, Igenkänning istället för återkallande, Flexibilitet och effektiv användning och Estetisk och minimalistisk design. Genom att analysera resultaten från thinking aloud-testerna kunde en tydlig minskning av negativa kommentarer identifieras mellan användartest 1-3. Utifrån dessa testresultat, dras slutsatserna att genom återkoppling relaterad till utförda aktioner, implementation av markörer och färgval med hänsyn till kontraster kan en webbapplikation för konsultjobb implementeras för att uppfattas som användbar av studenter. / Studentconsulting makes it possible for students to use their knowledge in business cases. In addition to this it also reduces the cost for enterprises when hiring consultants. As job hunting via the internet becomes more common there is a need for a web application that connects company projects with students who are interested in consulting. One of the most prominent aspects for a web application to be competitive is usability. The intention with this study is to examine How can a webapplication for consulting jobs between enterprises and students be implemented to be perceived as useful by students? To answer this question a web application for intermediation of consulting jobs between enterprises and students has been developed. The web application is developed on a theoretical basis where the different dimensions of the term usability has been analysed. These dimensions are efficiency, effectiveness and satisfaction. In addition to this the importance of specifying users and the aesthetic aspects effects on usability has been discussed. To evaluate if the web aplication is perceived as useful it is tested on three groups of people on three different occasions to examine their perception of the web application. The tests are based on the thinking aloud method together with the questionnaires System Usability Scale (SUS) and Visual Aesthetics of Websites Inventory Short (VisAWI-S). The SUS and VisAWI-S questionnaires indicated that the web application had a high level of usability throughout the development process. This was achieved through implementing a design based on simplicity and colorfulness as well as the principles Visibility of system status, Recognition rather than recall, Flexibility and efficiency of use and Aesthetic and minimalist design. By analysing the results from the thinking aloud tests a reduction in negative comments between test 1 and 3 could be identified. From the test results, the conclusion is that through responses related to completed actions, implementation of markers, and contrasting colors a web application for consulting jobs between enterprises and students can be implemented to be perceived as useful by students.

This diploma thesis describes how to create or convert traditional Java programs to desktop-like rich internet applications with the Google Web Toolkit. The Google Web Toolkit is an open source development environment, which translates Java code to browser and device independent HTML and JavaScript. Most of the GWT framework parts, including the Java to JavaScript compiler as well as important security issues of websites will be introduced. The famous Agricola board game will be implemented in the Model-View-Presenter pattern to show that complex user interfaces can be created with the Google Web Toolkit. The Google Web Toolkit framework will be compared with the JavaServer Faces one to find out which toolkit is the right one for the next web project. / Diese Diplomarbeit beschreibt die Erzeugung desktopähnlicher Anwendungen mit dem Google Web Toolkit und die Umwandlung klassischer Java-Programme in diese. Das Google Web Toolkit ist eine Open-Source-Entwicklungsumgebung, die Java-Code in browserunabhängiges als auch in geräteübergreifendes HTML und JavaScript übersetzt. Vorgestellt wird der Großteil des GWT Frameworks inklusive des Java zu JavaScript-Compilers sowie wichtige Sicherheitsaspekte von Internetseiten. Um zu zeigen, dass auch komplizierte graphische Oberflächen mit dem Google Web Toolkit erzeugt werden können, wird das bekannte Brettspiel Agricola mittels Model-View-Presenter Designmuster implementiert. Zur Ermittlung der richtigen Technologie für das nächste Webprojekt findet ein Vergleich zwischen dem Google Web Toolkit und JavaServer Faces statt.

This diploma thesis describes how to create or convert traditional Java programs to desktop-like rich internet applications with the Google Web Toolkit. The Google Web Toolkit is an open source development environment, which translates Java code to browser and device independent HTML and JavaScript. Most of the GWT framework parts, including the Java to JavaScript compiler as well as important security issues of websites will be introduced. The famous Agricola board game will be implemented in the Model-View-Presenter pattern to show that complex user interfaces can be created with the Google Web Toolkit. The Google Web Toolkit framework will be compared with the JavaServer Faces one to find out which toolkit is the right one for the next web project.:I Abstract II Contents III Acronyms and Glossary III.I Acronyms III.II Glossary IV Credits 1 Introduction 2 Basics 2.1 Development of the World Wide Web 2.2 Hypertext Markup Language 2.3 Cascading Style Sheets 2.4 JavaScript 2.5 Hypertext Markup Language Document Object Model 2.6 Asynchronous JavaScript and XML 3 GWT toolbox and compiler 3.1 GWT in action 3.2 A short overview of the toolkit 3.3 GWT compiler and JSNI 3.3.1 Overview of GWT compiler and JSNI 3.3.2 Deferred binding and bootstrapping process 3.3.3 GWT compiler steps and optimizations 3.4 Java Runtime Environment Emulation 3.5 Widgets and Panels 3.5.1 Overview of GWT Widgets 3.5.2 Event handlers in GWT Widgets 3.5.3 Manipulating browser’s DOM with GWT DOM class 3.5.4 GWT Designer and view optimization using UiBinder 3.6 Remote Procedure Calls 3.6.1 Comparison of Remote Procedure Calls with Remote Method Invocations 3.6.2 GWT’s RPC service and serializable whitelist 3.7 History Management 3.8 Client Bundle 3.8.1 Using ImageResources in the ClientBundle interface 3.8.2 Using CssResources in the ClientBundle interface 4 Model-View-Presenter Architecture 4.1 Comparison of MVP and MVC 4.2 GWT Model-View-Presenter pattern example: Agricola board game 4.3 Extending the Agricola web application with mobile views 4.4 Introducing activities in the Agricola Model-View-Presenter pattern enabling browser history 5 Comparison of the two web frameworks: GWT and JSF 5.1 Definitions of comparison fields 5.2 Comparison in category 1: Nearly completely static sites with a little bit of dynamic content, e.g. news update 5.3 Comparison in category 2: Doing a survey in both technologies 5.4 Comparison in category 3: Creating a forum to show data 5.5 Comparison in category 4: Writing a chat application 5.6 Comparison in category 5: Writing the speed game Snake 5.7 Summary 6 Security 6.1 Download Tomcat 6.2 Dynamic Web Application Project with GWT and Tomcat 6.3 Establish HTTPS connections in Tomcat 6.3.1 Create a pem certificate 6.3.2 Convert pem certificate into a key store object 6.3.3 Configure Tomcat’s XML files to enable HTPPS 6.4 Establish a database connection in Tomcat 6.4.1 Create TomcatGWT user and schema, and add the table countries 6.4.2 Configure Tomcat’s XML files to get access to the database connection 6.4.3 PreparedStatements avoid MySQL injections 6.5 Login mechanism in Tomcat 6.6 SafeHtml 7 Presenting a complex software application written in GWT 8 Conclusions 8.1 Summary 8.2 Future work A Appendix A 1 Configure the Google Web Toolkit framework in Eclipse A 1.1 Install the Java Developer Kit A 1.2 Download Eclipse A 1.3 Install the GWT plugin in Eclipse A 1.4 Create first GWT Java Project A 2 Figures A 3 Listings A 3.1 Source code of the Agricola board game A 3.2 Source code of GWT and JSF comparison A 4 Tables R Lists and References R 1 Lists R 1.1 List of Tables R 1.2 List of Figures R 1.3 List of Listings R 2 References R 2.1 Books R 2.2 Online resources / Diese Diplomarbeit beschreibt die Erzeugung desktopähnlicher Anwendungen mit dem Google Web Toolkit und die Umwandlung klassischer Java-Programme in diese. Das Google Web Toolkit ist eine Open-Source-Entwicklungsumgebung, die Java-Code in browserunabhängiges als auch in geräteübergreifendes HTML und JavaScript übersetzt. Vorgestellt wird der Großteil des GWT Frameworks inklusive des Java zu JavaScript-Compilers sowie wichtige Sicherheitsaspekte von Internetseiten. Um zu zeigen, dass auch komplizierte graphische Oberflächen mit dem Google Web Toolkit erzeugt werden können, wird das bekannte Brettspiel Agricola mittels Model-View-Presenter Designmuster implementiert. Zur Ermittlung der richtigen Technologie für das nächste Webprojekt findet ein Vergleich zwischen dem Google Web Toolkit und JavaServer Faces statt.:I Abstract II Contents III Acronyms and Glossary III.I Acronyms III.II Glossary IV Credits 1 Introduction 2 Basics 2.1 Development of the World Wide Web 2.2 Hypertext Markup Language 2.3 Cascading Style Sheets 2.4 JavaScript 2.5 Hypertext Markup Language Document Object Model 2.6 Asynchronous JavaScript and XML 3 GWT toolbox and compiler 3.1 GWT in action 3.2 A short overview of the toolkit 3.3 GWT compiler and JSNI 3.3.1 Overview of GWT compiler and JSNI 3.3.2 Deferred binding and bootstrapping process 3.3.3 GWT compiler steps and optimizations 3.4 Java Runtime Environment Emulation 3.5 Widgets and Panels 3.5.1 Overview of GWT Widgets 3.5.2 Event handlers in GWT Widgets 3.5.3 Manipulating browser’s DOM with GWT DOM class 3.5.4 GWT Designer and view optimization using UiBinder 3.6 Remote Procedure Calls 3.6.1 Comparison of Remote Procedure Calls with Remote Method Invocations 3.6.2 GWT’s RPC service and serializable whitelist 3.7 History Management 3.8 Client Bundle 3.8.1 Using ImageResources in the ClientBundle interface 3.8.2 Using CssResources in the ClientBundle interface 4 Model-View-Presenter Architecture 4.1 Comparison of MVP and MVC 4.2 GWT Model-View-Presenter pattern example: Agricola board game 4.3 Extending the Agricola web application with mobile views 4.4 Introducing activities in the Agricola Model-View-Presenter pattern enabling browser history 5 Comparison of the two web frameworks: GWT and JSF 5.1 Definitions of comparison fields 5.2 Comparison in category 1: Nearly completely static sites with a little bit of dynamic content, e.g. news update 5.3 Comparison in category 2: Doing a survey in both technologies 5.4 Comparison in category 3: Creating a forum to show data 5.5 Comparison in category 4: Writing a chat application 5.6 Comparison in category 5: Writing the speed game Snake 5.7 Summary 6 Security 6.1 Download Tomcat 6.2 Dynamic Web Application Project with GWT and Tomcat 6.3 Establish HTTPS connections in Tomcat 6.3.1 Create a pem certificate 6.3.2 Convert pem certificate into a key store object 6.3.3 Configure Tomcat’s XML files to enable HTPPS 6.4 Establish a database connection in Tomcat 6.4.1 Create TomcatGWT user and schema, and add the table countries 6.4.2 Configure Tomcat’s XML files to get access to the database connection 6.4.3 PreparedStatements avoid MySQL injections 6.5 Login mechanism in Tomcat 6.6 SafeHtml 7 Presenting a complex software application written in GWT 8 Conclusions 8.1 Summary 8.2 Future work A Appendix A 1 Configure the Google Web Toolkit framework in Eclipse A 1.1 Install the Java Developer Kit A 1.2 Download Eclipse A 1.3 Install the GWT plugin in Eclipse A 1.4 Create first GWT Java Project A 2 Figures A 3 Listings A 3.1 Source code of the Agricola board game A 3.2 Source code of GWT and JSF comparison A 4 Tables R Lists and References R 1 Lists R 1.1 List of Tables R 1.2 List of Figures R 1.3 List of Listings R 2 References R 2.1 Books R 2.2 Online resources