Analysis, Design and Development of a Web-Shop Template Using

Total Page:16

File Type:pdf, Size:1020Kb

Analysis, Design and Development of a Web-Shop Template Using Analysis, design and development of a web-shop template using SPHERE.IO e-commerce platform Laura Luiz Escoriza Facultat d’Informàtica de Barcelona (FIB) Universitat Politècnica de Catalunya (UPC) - BarcelonaTech Director: Hajo Eichler Company: commercetools GmbH Advisor: Carles Farré Tost Department: Enginyeria de Serveis i Sistemes d’Informació (ESSI) Master thesis Degree in Informatics Engineering (2003) January 2014 2 3 DADES DEL PROJECTE Títol del projecte: Analysis, design and development of a web-shop template using SPHERE.IO e-commerce platform. Nom de l'estudiant: Laura Luiz Escoriza Titulació: Enginyeria en Informàtica (2003) Crèdits: 37,5 Director: Hajo Eichler Empresa del director: commercetools GmbH Ponent: Carles Farré Tost Departament del ponent: ESSI MEMBRES DEL TRIBUNAL (nom i signatura) 1. President: Antoni Urpí Tubella 2. Vocal: Klaus Gerhard Langohr 3. Secretari: Carles Farré Tost QUALIFICACIÓ Qualificació numèrica: Qualificació descriptiva: Data: 4 5 ABSTRACT In the present thesis a possible next generation of e-commerce solutions with a platform-as-a-service model is presented and analyzed. This generation tries to fill the gap of missing developer-friendly alternatives to build systems with e-commerce components. Current offered solutions are mostly aimed for the comfortable use of designers and other non-technical roles, usually in the shape of out-of-the-box products. These solutions are usually limiting the ability of developers to integrate technologies or build innovative business models, thus sometimes forcing companies to invest in projects that have to be built practically from the start. This document describes the development of the first web-shop built with one of these solutions, SPHERE.IO, an e-commerce platform-as-a-service developed in Berlin by commercetools GmbH. During this process, questions are being answered about the suitability of e-commerce platforms to develop web-shops, a product most developers have to face when providing e-commerce solutions to companies. The web-shop has a dual purpose, as it will also serve as the first open-source template provided by the platform to help other developers build their own solutions. 6 ACKNOWLEDGMENTS I would especially like to thank Hajo for accepting being the director of my thesis and reading all these endless pages despite of having so much to do (really, how can you find the time!). Thanks for your support and always good advice to improve this project. I would also like to thank all the rest of the SPHERE.IO team for creating and raising such a great product, giving me the opportunity to work with them. From the ones that were: Aurélie, Jens, Roman, Ian, Lenni, Christian and Martin. (I loved the time we spent together, guys) To the ones that are: Nicole, Peter, Gregor, Dirk, Oleg, Nicola, Martin, Michael and Sven. I would like to thank my teacher Carles, who guided me through this project from the distance. Thank you especially for DSBW, which documentation I check constantly, not only for this project. Thanks to my roommate Sebastian, the most experienced online shopper I have ever met, whose advice was very convenient I must say. Thank you for helping me and have such loving cats that kept me well entertained during the long days locked in my room. Many thanks as well to those friends that helped me somehow to be where I am now. Particularly Hèctor and Pau, who help me the most. Thank you. And of course thousand thanks to the most important person in my life, my husband Héctor, whose constant care, support and help was so necessary during all my career life. I would not be here without you, you know that. Finally, I thank my parents, from whom I inherited the love for arts and business. Because they raised me to be a person capable of anything. And I chose to be a computer engineer. 7 INDEX Abstract ............................................................................................................................................. 6 Acknowledgments ............................................................................................................................. 7 Index ................................................................................................................................................. 8 Glossary .......................................................................................................................................... 11 1 Introduction .............................................................................................................................. 14 1.1 Motivation ......................................................................................................................... 14 1.2 Objectives .......................................................................................................................... 15 1.3 Background ........................................................................................................................ 16 1.3.1 What is e-commerce .......................................................................................................... 16 1.3.2 History of e-commerce ....................................................................................................... 18 1.3.3 Future of e-commerce ........................................................................................................ 21 1.3.4 Current alternatives ........................................................................................................... 23 1.4 Planning ............................................................................................................................. 24 1.4.1 Methodology seleCtion ....................................................................................................... 25 1.4.2 DesCription of the methodology ........................................................................................ 26 1.4.3 Risk management ............................................................................................................... 27 1.4.4 Initial timeline .................................................................................................................... 27 2 Requirement analysis ................................................................................................................ 30 2.1 Stakeholders analysis ......................................................................................................... 30 2.2 Functional requirements ..................................................................................................... 31 2.3 Non-functional requirements ............................................................................................. 32 3 Specification .............................................................................................................................. 34 8 3.1 Use case model ................................................................................................................... 34 3.2 System behavior model ...................................................................................................... 39 3.3 Conceptual model ............................................................................................................... 42 3.4 State diagrams .................................................................................................................... 44 4 Design ....................................................................................................................................... 47 4.1 System Physical architecture .............................................................................................. 47 4.2 System logical architecture ................................................................................................. 49 4.2.1 DesCription of used teChnologies ....................................................................................... 53 4.2.2 External design ................................................................................................................... 61 4.2.3 Internal design .................................................................................................................... 75 4.2.4 Design of the Model Component ........................................................................................ 84 4.2.5 Design of the View Component .......................................................................................... 88 4.2.6 Design of the Controller Component .................................................................................. 91 5 ImPlementation ......................................................................................................................... 94 5.1 DeveloPment environment ................................................................................................. 94 5.2 ExamPles of used technologies ........................................................................................... 95 5.2.1 Forms .................................................................................................................................. 96 5.2.2 List produCts ..................................................................................................................... 107 5.2.3 Payment ........................................................................................................................... 115 6 System tests ...........................................................................................................................
Recommended publications
  • FINAL Report-Capstone Project BENOMAR Sarah
    FINAL Report-Capstone Project BENOMAR Sarah Supervised by: Doctor Violetta CAVALLI-SFORZA Approval: SPRING 2016 SCHOOL OF SCIENCE & ENGINEERING – AL AKHAWAYN UNIVE R S I T Y Table of Contents Acknowledgement ................................................................................................................ 3 Abstract ................................................................................................................................ 4 I. Introduction ................................................................................................................... 5 II. Feasibility Study ............................................................................................................ 6 III. Methodology .................................................................................................................. 8 1. Problem Specification ................................................................................................. 8 2. Requirement Specification .......................................................................................... 8 2.1 Functional Requirements ...................................................................................................... 8 2.2 Non-Functional Requirements ...................................................................................... 11 3. Software Selection Criteria ....................................................................................... 12 4. Choice Validation ....................................................................................................
    [Show full text]
  • Templates V07 • This Web Site Has 7 Pages
    Web Development Templates V07 • This web site has 7 pages. • Each page has: Templates • Head Section Why? • Body Section • Each Body Section has • Header • Footer • —> • 7 Identical Head Section • 7 Identical Header’s • 7 Identical Footer’s • —> 21 Repeated Sections • Its got its own Wikipedia Page! https://en.wikipedia.org/wiki/Don%27t_repeat_yourself DRY vs WET Don’t Repeat Yourself vs Write Everything Twice OR We Enjoy Typing Single Header + DRY Footer Template • Incorporate the SAME single header/footer into ALL pages • Any changes - made just once in the single header/footer Web Template System A web template system uses a template processor to combine web templates to form finished web pages, possibly using some data source to customize the pages or present a large amount of content on similar-looking pages. It is a web publishing tool present in content management systems, web application frameworks, and HTML editors. https://en.wikipedia.org/wiki/Web_template_system Harp.js • Harp.js is our Template Engine • It ‘serves’ the site • If Request is for ordinary page the page is ‘rendered’ without modification • If Request is for a page that is composed of templates, harp assembles the page and renders the complete page to the browser Lab09 Lab09 • reusable templates included in various pages • reusable layout • reworked pages based WET Version on layout • simplified home page DRY Version • Overall - more files • But less content! Step 1 • Visit: • http://localhost:9000/ • WET (non templated) version of site Step 02 - Header & Footer templates • New folder in project called ‘includes’ • … containing reusable templates ‘_header.ejs’ & ‘_footer.ejs’ • These are exactly the same content as in all our other pages Step 02: index.html • Replace the <header> and <footer> elements with : • These will be ‘included’ in the page when it is rendered via harp.
    [Show full text]
  • Youbeq Management Platform >
    MSc in Informatics Engineering Internship Final Report YoubeQ Management Platform > Nuno Fauso Da Paixão Khan [email protected] DEI Supervisor: Fernando Barros iNovmapping Supervisor: André Santos Date: 2 July 2013 youbeQ Management Platform Abstract System integration and distributed systems are essential concepts in our current web development era. When relying on these aspects, one must acknowledge the importance of having a system that is mature, secure, reliable and scalable. The internship consists on the development of a management platform, called youbeQadmin, a web based application that integrates and manages youbeQ and Smarturbia, two existing applications developed by the company. These applications, already exist as independent web applications , that are now partially integrated in one single management platform. youbeqAdmin platform manages the youbeQ statistics and Smarturbia content (APPS). It enforces a distributed architecture while allowing the integration of these two modules/applications with the original web applications and with the possibility of easily integrating new modules into the platform in the future. The development of youbeQadmin required significant modifications to Smarturbia, mostly to allow a REST communication between them and to add new features like changing the vehicle color or applying area limits for the user to explore the world. Keywords “youbeQ”, ”Smarturbia”, ”REST”, “Management”, “Web Development”,”DJANGO”, “Web Frameworks”, “youbeQadmin” 1 Index 1 Introduction.....................................................................................................6
    [Show full text]
  • CS 5150 Software Engineering 17. Program Development
    Cornell University Compung and Informaon Science CS 5150 So(ware Engineering 17. Program Development William Y. Arms Integrated Development Environments Basic soware development requires: • text editor (e.g., vi editor for Linux) • compiler for individual files • build system (e.g., make for Linux) Integrated development environments combine: • source code editor • incremental compiler • build automaMon tools • a debugger • and much, much more Integrated Development Environments Integrated Development Environment: Eclipse Eclipse is a modern integrated development environment. It was originally created by IBM’s RaMonal division. There are versions for many languages including Java, C/C++, Python, etc. The Java system provides: • source code editor • debugger • incremental compiler • programming documentaMon • build automaMon tools • version control • XML editor and tools • web development tools Much more is available via plug-ins. 4 Program Design: Integrated Development Environment Integrated development environments provide lile help in designing a program. They assume that you have already have a design: • classes • methods • data structures • interfaces Opons for program design: • program design using modeling tools, such as UML • design while coding: design — code — redesign loop (small programs only) • exisMng frameworks • advanced environments that combine frameworks and development tools It is o(en good to combine aspects of these different approaches. 5 The Design — Code — Redesign Loop If the class structure is straighCorward it may be possible to use the integrated development environment to: • create an outline of the class structure and interfaces • write code • modify the class structure as needed and rework the code as necessary This is only possible with small teams with close communicaMon. The maximum size of program depends on experience of programmer(s) and complexity of the program.
    [Show full text]
  • Payilagam Software Training Institute 2014
    Payilagam Software training institute 2014 Payilagam Software Training Institute, No:4/67E, Vijaya Nagar 3rd Cross Street, Velachery,Chennai – 600042. 044-22592370, 8344777333, 8883775533. Mail: [email protected], Website: www.payilagam.com Content Management System Syllabus Word Press Word Press has a web template system using a template processor. Word Press is a free and open source blogging tool and a content management system (CMS) based on PHP and MySQL, which runs on a web hosting service .Features include a plug-in architecture and a template system. Word Press is the most popular blogging system in use on the Web, at more than 60 million websites. Syllabus: Introduction about cms Introduction about word press Word press installation Favicon Logo Edit footer Menubar User creation Contact form Form Builder Google map Google analytics 1 Payilagam software training institute | www.payilagam.com | 83 44 777 333 | 8883 77 55 33| Payilagam Software training institute 2014 Maintenance mode Working with plugins Working with themes Updation and deletion plugins Upgrade the word press versions Forum Social media buttons Slide show Comments Audio and video file in word press You tube in your word press site Backup Restore Joomla Joomla is a free and open-source content management framework for publishing web content. It is built on a model–view–controller web application framework that can also be used independently. Joomla is written in PHP, uses object-oriented programming (OOP) techniques and software design patterns,
    [Show full text]
  • PHP Re-Factoring: HTML Templates
    PHP re-factoring: HTML templates Name of candidate: Dimitrios Kyritsis E-mail: [email protected] Date: September 2013 Host organization: Centrum Wiskunde & Informatica (CWI) URL: http://www.cwi.nl/ Address: Science Park 123, 1098 XG Amsterdam Contact persons: Mark Hills - [email protected] Jurgen J. Vinju - [email protected] 1 Abstract For every software developer the goal, when he creates software, is that the final result of his efforts meets its initial requirements. The software should operate as it was meant to, without any or at least without significant inconveniences. However, experienced developers have another goal, to write simple code. Their experience has taught them that the simpler the code is, the easier will be its maintenance. For web application developers the situation is the same. A way for them to write simpler web applications with easily maintainable code is to use template systems. Thereby, they can separate business logic from its presentation making their lives way easier, especially if they have to collaborate with web designers. Developers and designers will then have different fields of concern and the changes that they make will not affect each other's work. This thesis will describe our efforts to create an application which can automatically transform normal code into uses of template systems. In the beginning we will enumerate the factors that were taken into account for the creation of this application, along with a rationale for them. Subsequently, we will describe the steps and the decisions that were taken during the creation of our application. Finally, there will be a validation phase which will show if our application can really offer the advantages that was created for.
    [Show full text]
  • COMPARATIVE STUDY of EXISTING ECMS BASED on USE and ADVANTAGES
    COMPARATIVE STUDY of EXISTING ECMS BASED on USE and ADVANTAGES Sonika Tyagi Computer, MGMCET NAVI-MUMBAIINDIA Abstract--“ENTERPRISE CONTENT MANAGEMENT with the increase in the technology the amount of data that to SYSTEM” (ECMS) has been derived or we can see it is an be managed is also increasing. With the increase in the extension of the content management system(CMS) by looking at document that need to be managed the MS-office, excel etc the need of today’s enterprises. There is vast increase in the are not alone sufficient, we need to make new and different amount of document in the big enterprises because of which it software to manage documents depend on their type, access becomes very important to categorize the document and to hide them as per their importance or as per their confidentiality. permissions, sensitivity of data etc. The need for establishment ECMS is a means of organizing the documents or other data and of a properly designed and implemented ECMS is because also store them that relate to the organization's processes. ECMS there is an exponential and astronomical growth of raw data is a strategy, methods, and tools used throughout the lifecycle of that is required to be accessed quickly in present day scenario the content. Many enterprises are opting the Enterprise Content for a well-organized and controlled access.[2]. In today’s Management System as it becomes easier to work with world there are many software’s those are especially made for enterprises vast records efficiently and can manage vast data the Enterprise Content Management but in this paper we will with so much of ease.
    [Show full text]
  • Web Development with Flask and the Raspberry Pi Leading by Example
    Web Development with Flask and the Raspberry Pi Leading by Example CUAUHTEMOC CARBAJAL ITESM CEM 22/04/2014 Introduction y Flask: lightweight web application framework written in Python and based on the Werkzeug WSGI toolkit and Jinja2 template engine { Web application framework (WAF) : Ù software framework designed to support the development of dynamic websites, web applications, web services and web resources. Ù Aims to alleviate the overhead associated with common activities performed in web development. Ù For example, many frameworks provide libraries for database access, templating frameworks and session management, and they often promote code reuse. Introduction { Web Server Gateway Interface: specification for simple and universal interface between web servers and web applications or frameworks for the Python programming language. { Werkzeug WSGI toolkit: started as a simple collection of various utilities for WSGI applications and has become one of the most advanced WSGI utility modules. Ù It includes a powerful debugger, fully featured request and response objects, HTTP utilities to handle entity tags, cache control headers, HTTP dates, cookie handling, file uploads, a powerful URL routing system and a bunch of community contributed addon modules. { Jinja:template engine for the Python programming language Dynamic web page generation y Pages are assembled “on the fly” as and when they are requested. Most server side languages as PHP, JSP and ASP powered sites do this technology by actively encourages dynamic content creation. Generating pages dynamically allows for all sorts of clever applications, from e-commerce, random quote generators to full on web applications such as Hotmail. Static web page generation y HTML pages are pre-generated by the publishing software and stored as flat files on the web server, ready to be served.
    [Show full text]
  • Overview 3. Joomla Advantages 4.Joomla Disadvantages
    1.Introduction to Joomla Learning Objective: Joomla has a web template system using a template processor. Its architecture is a front controller, routing all requests for non-static URIs via PHP which parses the URI and identifies the target page. This allows support for more human-readable permalinks. The controller manages both the frontend, public-facing view, and a backend (GUI-driven) administration interface. The administration interface (a) stores management and content information within a database, and (b) maintains a configuration file (configuration.php, usually located in the file system root of the Joomla installation). The configuration file provides the connection between the server, database and file system and facilitates migrating the website from one server to another. 2.Joomla - Overview Learning Objective:Joomla is an open source Content Management System (CMS), which is used to build websites and online applications. It is free and extendable which is separated into front-end and back-end templates (administrator). Joomla is developed using PHP, Object Oriented Programming, software design patterns and MySQL (used for storing the data). 3. Joomla Advantages Topics: • It is an open source platform and available for free. • By default, Joomla is compatible with all browsers. • Media files can be uploaded easily in the article editor tool. • It ensures the safety of data content and doesn't allow anyone to edit the data. • Since Joomla is so easy to use, as a web designer or developer, you can quickly build sites for your clients. With minimal instructions to the clients, clients can easily manage their sites on their own.
    [Show full text]
  • Mastering Javascript Single Page Application Development
    Mastering JavaScript Single Page Application Development An in-depth guide to exploring the design, architecture, and techniques behind building sophisticated, scalable, and maintainable single-page applications in JavaScript Philip Klauzinski John Moore BIRMINGHAM - MUMBAI Mastering JavaScript Single Page Application Development Copyright © 2016 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: October 2016 Production reference: 1241016 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-78588-164-0 www.packtpub.com Credits Authors Copy Editor Philip Klauzinski Safis Editing John Moore Reviewers Project Coordinator Ciro Artigot Ritika Manoj Commissioning Editor Proofreader Wilson D'souza Safis Editing Acquisition Editor Indexer Reshma Raman Rekha Nair Content Development Editor Graphics Divij Kotian Jason Monteiro Technical Editor Production Coordinator Sachit Bedi Aparna Bhagat About the Authors Philip Klauzinski is a senior frontend developer specializing in JavaScript Single Page Application (SPA) development.
    [Show full text]
  • B Achelor Thesis
    Bachelor report, IDE 1214, June 2012 Computer Science and Engineering Migrating the New Horizon website to WordPress Information Science, Computer and Electrical Engineering Electrical and Computer Science, Information chool of choolof Yuanwen Zhu & Jia Wang Bachelor thesis S Migrating the New Horizon Website to WordPress Bachelor’s Thesis in Computer Systems Engineering 2012 June Author: Yuanwen Zhu & Jia Wang Supervisor: Wagner Ourique de Morais Examiner: Kenneth Nilsson School of Information Science, Computer and Electrical Engineering Halmstad University PO Box 823, SE-301 18 HALMSTAD, Sweden © Copyright Yuanwen Zhu & Jia Wang, 2012. All rights reserved. Bachelor Thesis Report, IDE1214 School of Information Science, Computer and Electrical Engineering Halmstad University Description of cover page picture: Migrate the New Horizon website to WordPress I Preface First of all, we would like to express our sincere appreciation to our supervisor Wagner Ourique de Morais for his support and feedback during the thesis work. Furthermore, we are grateful to the company Lypson for giving us the chance to do this project, especially Michal Lysek and Tobias Persson who gave us valuable suggestions and technical support. Finally, we want to thank Halmstad University for offering us the opportunity to do this project. It was a good chance for us to learn more. Yuanwen Zhu & Jia Wang Halmstad University, June 2012 II III Abstract There are different problems associated with a static website, such as management and content update. To address these problems, one alternative is to use Content Management System (CMS), such as WordPress. This project describes the process of migrating a static website to WordPress and adding six additional functionalities according to requirements from a company.
    [Show full text]
  • Online Medical Practitioner and Appointment Manager
    ONLINE MEDICAL PRACTITIONER AND APPOINTMENT MANAGER Project Report submitted in partial fulfillment of the requirement for the degree of Bachelor of Technology. in Computer Science & Engineering under the Supervision of Mr. Arvind Kumar By Agrima Grover (111205) to Jaypee University of Information and Technology Waknaghat, Solan – 173234, Himachal Pradesh 1 CERTIFICATE This is to certify that project report entitled “Online Medical Prescription and Appointment Manager”, submitted by Agrima in partial fulfillment for the award of degree of Bachelor of Technology in Computer Science & Engineering to Jaypee University of Information Technology, Waknaghat, Solan has been carried out under my supervision. This work has not been submitted partially or fully to any other University or Institute for the award of this or any other degree or diploma. Date: 08.05.2015 Supervisor’s Name: Mr Arvind Kumar Designation: Assistant Professor 2 ACKNOWLEDGEMENT This project work would not have been possible without the guidance and the help of several individuals who in one way or another contributed and extended their valuable assistance in the preparation and completion of this study. First and foremost I offer my sincerest gratitude to my supervisor, Mr Arvind, who has supported me throughout my project work with his patience and knowledge whilst allowing me the room to work in my own way. I attribute the level of my Masters degree to his encouragement and effort and without him this thesis, too, would not have been completed or written. One simply could not wish for a better or friendlier supervisor. The work was performed at Department of Computer Science and Engineering at the University, and I would like to thank all the people there for their hospitality and support.
    [Show full text]