DOCSLIB.ORG

This Is the Title

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
This Is the Title Master’s Thesis LUVIT for mobile platforms By Anders Forslund and Christian Veinfors Department of Electrical and Information Technology Faculty of Engineering, LTH, Lund University SE-221 00 Lund, Sweden Abstract Luvit is a web based learning management system used by about one hundred companies, authorities, organizations and universities in seven different countries. The purpose of this project was to examine and develop a solution that worked well on mobile devices such as mobile phones and tablets. The first part of this thesis investigates what kind of solution is best suited for Luvit. A mobile web based one that works on several platforms or an application that is developed in the native language of the device. The main reason for choosing a web solution is that it is easy to maintain since there is only one single application. The main advantages of native solutions are their superior performance and that they have access to more hardware functionality. Different web based solutions were tested and compared against each other. With the help of developing prototypes the choice was made to develop Luvit Mobile using the JavaScript frameworks Sencha Touch and PhoneGap. In the second part of the thesis the application was developed using these frameworks. Sencha Touch was used to build the application so that it looked like a native one. PhoneGap was used to wrap the application and compile/deploy it on different platforms such as Android and iOS. This makes it feel like a real application and not a web based one. 2 Acknowledgments This Master’s thesis would not exist without the support and guidance of Rickard Nygren, CEO at Grade, and our supervisor Christian Nyberg, associate professor at LTH. We would also like to thank Stefan Larsson and Anna Johansson at Grade for their help. 3 Table of Contents ABSTRACT ....................................................................................................................... 2 ACKNOWLEDGMENTS ..................................................................................................... 3 TABLE OF CONTENTS ...................................................................................................... 4 1 INTRODUCTION ....................................................................................................... 6 2 ABOUT GRADE AND LUVIT ....................................................................................... 8 2.1 PARTS OF LUVIT .......................................................................................................... 8 2.2 UNDER THE HOOD ....................................................................................................... 9 3 INTRODUCTION OF THE FRAMEWORKS ................................................................. 11 3.1 WHY WEB BASED MOBILE APPLICATIONS ........................................................................ 11 3.2 SENCHA TOUCH ........................................................................................................ 12 3.3 JQUERY MOBILE ....................................................................................................... 13 3.4 TITANIUM MOBILE .................................................................................................... 14 3.5 PHONEGAP .............................................................................................................. 14 4 COMPARISON OF THE FRAMEWORKS .................................................................... 16 4.1 INTERCHANGE OF DATA .............................................................................................. 16 4.2 SENCHA TOUCH ........................................................................................................ 19 4.2.1 Getting started ............................................................................................. 19 4.2.2 Developing the prototype ............................................................................. 20 4.2.3 Performance and appearance ...................................................................... 23 4.2.4 Functionality ................................................................................................. 25 4.2.5 Developing in the framework ....................................................................... 26 4.3 JQUERY MOBILE ....................................................................................................... 27 4.3.1 Getting started ............................................................................................. 28 4.3.2 Developing the prototype ............................................................................. 29 4.3.3 Performance and appearance ...................................................................... 31 4.3.4 Functionality ................................................................................................. 32 4.3.5 Developing in the framework ....................................................................... 33 4.4 TITANIUM MOBILE .................................................................................................... 33 4.4.1 Getting started ............................................................................................. 34 4.4.2 Performance ................................................................................................. 34 4.4.3 Difficulties ..................................................................................................... 34 4.5 PHONEGAP .............................................................................................................. 35 4.5.1 Getting started ............................................................................................. 35 4.5.2 Developing the prototype ............................................................................. 35 4.6 CONCLUSIONS .......................................................................................................... 37 4.6.1 Performance ................................................................................................. 37 4.6.2 Functionality ................................................................................................. 37 4.6.3 Final decision ................................................................................................ 38 4 4.6.4 Tools ............................................................................................................. 38 5 REQUIREMENTS SPECIFICATION ............................................................................ 40 6 RESULTS ................................................................................................................. 42 6.1 APPLICATION STRUCTURE OF THE FRONT-END ................................................................. 42 6.2 THE BACK-END .......................................................................................................... 44 6.3 ENCOUNTERED PROBLEMS .......................................................................................... 46 6.3.1 Downloading on Android .............................................................................. 46 6.3.2 Embedding files in Sencha Touch .................................................................. 47 6.4 PERFORMANCE ......................................................................................................... 48 6.5 FINAL RESULT ........................................................................................................... 50 7 CONCLUSIONS........................................................................................................ 51 7.1 DISCUSSION ............................................................................................................. 51 7.1.1 Native versus web based .............................................................................. 52 7.2 FUTURE WORK .......................................................................................................... 53 REFERENCES ................................................................................................................. 54 LIST OF ACRONYMS ...................................................................................................... 56 5 CHAPTER 1 1 Introduction In 1997 a learning management system called Luvit [1] was created. It is today used by approximately one hundred companies, authorities, organizations and universities in seven different countries. Luvit was a result of a project initiated by system developers and teachers at Lund University because they needed a tool for distance learning [3]. In 1998 the company Luvit AB was started. Three years earlier, in 1995, the company Grade was started [2]. They worked mainly with a course development tool called Composer and a small learning management system called Maestro. Luvit AB and Grade merged in 2008 and became just Grade. They scrapped Maestro and decided to concentrate only on the Luvit Learning Management System (LMS). Grade is today a subsidiary of the company Avensia Innovation and has offices in Lund and Stockholm. There are several competing LMS to Luvit, for instance PingPong, E-gate and It’s Learning. The latter one is the only one that offers mobile solution. It has limited functionality and lacks more advanced features. The use of modern mobile devices, such as smart phones and tablet computers has increased significantly in the recent years. Consequently, the demand for mobile friendly web applications has grown larger. With bigger displays, better hardware
Load more

Recommended publications
  • Sencha Touch and Ext JS Developer Description
    Sencha Touch and Ext JS Developer Description: Health Outcomes Worldwide (HOW), a diverse and rapidly growing Canadian company seeks a motivated developer to work with an agile virtual team creating cutting-edge web and mobile applications for use by healthcare professionals. HOW provides solutions used by nurses in healthcare environments across Canada. The mobile application is a hybrid HTML5 (Sencha Touch)/Cordova solution designed for tablet devices (iOS and Android). Plans for a revamped browser-based solution (using ExtJS 5) are also in development. The selected developer will play an integral role in both mobile and desktop solution design and development using Sencha tools. The ideal candidate will have: • 4+ years of extensive experience with Sencha Ext JS framework and 2+ experience with Sencha Touch framework. • In-depth knowledge of javascript. • Experience building iOS, Android, Windows and Blackberry apps with PhoneGap/ Cordova platform. • Solid knowledge of HTML5, CSS3, EcmaScript 6 and their integration in a standards-based fashion with each other. • Proficiency with the DOM and asynchronous event programming model. • Experience with cross-platform (PC/Mac, desktop, laptop, tablet) and cross-browser (IE, Firefox, Chrome, Safari) development. • Experience with AJAX, JSON and RESTful web services. • Server-side development with ASP.NET WebForms, ASP.NET MVC and Node.js. • Database design and programming using MS SQL Server and SQLite. • Familiarity with Design Patterns, particularly Model-View-Controller (MVC). • Experience with mobile development and Touch interfaces. • Solid understanding and experience with Agile software development methodologies. Qualified, interested parties should submit a resume to [email protected].
    [Show full text]
  • 85324630.Pdf
    About NetTantra NetTantra is a creative technology and design company based out of India, US and UK. We provide web based solutions and mobile solutions to various industries like manufacturing, consulting, education. We have expertise in various sectors of the web including an array of server-side languages, OpenSource CMS/Blog frameworks, Linux/UNIX system administration, production server backup and recovery solutions, cloud infrastructure set-up and much more. Our expertise in providing WordPress based solutions has been acclaimed by many of our clients and the OpenSource community. We also provide cloud based solutions like migrating existing applications and building cloud applications for public or private cloud setups. We are known among our clients for on-time delivery and extraordinary quality of service. In mobile based solutions, we have expertise in developing native applications for iOS and Android platforms. We also develop cross-platform mobile applications using Sencha Touch and jQuery Mobile frameworks. 2 of 14 pages Why Hire Us ✔ Technology ◦ We have expertise in the most cutting edge tools and technologies used in the industry with special focus on OpenSource Technologies ◦ We pay special attention to web and network security for all projects ◦ Our team follows highly optimized project delivery life cycles and processes ✔ Cost ◦ We offer the best price to quality ratio ✔ Infrastructure ◦ Advanced workstations ◦ Cutting edge computing and network systems ◦ Power packed online servers ◦ Smart communications systems ◦ Conference halls, CBT and video learning facilities ◦ High-speed uninterrupted Internet connection ✔ Quality of Service ◦ Guaranteed client satisfaction ◦ Real-time customer support with the least turn-around in the industry ◦ Pre-sales technical and business related support to partners and agencies ✔ Ethics and Principles ◦ We ensure confidentiality in all our dealings.
    [Show full text]
  • ODOT Default Web Application Architecture
    The Ohio Department of Transportation (ODOT) Division of Information Technology ODOT Default Web Application Architecture Filename:ODOT Web Application Architecture.doc Version: 8.0 Author: Michael Jordan Last Modified: 11/16/2017 Project Site: Document Summary: Prepared by the ODOT Division of Information Technology (DoIT) [Document Header] Contents 1 Introduction ......................................................................................................................... 3 1.1 About This Document ..................................................................................................... 3 1.2 Document Location ......................................................................................................... 3 2 Architecture ......................................................................................................................... 4 2.1 A Layered Approach ....................................................................................................... 4 2.1.1 User Interface Layer ............................................................................................... 4 2.1.2 Domain Layer ......................................................................................................... 4 2.1.3 Service Layer .......................................................................................................... 5 3 Technologies ....................................................................................................................... 6 3.1 Microsoft .NET Platform.................................................................................................
    [Show full text]
  • Arcgis API for Javascript: Building Native Apps Using Phonegap and Jquery
    Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery Andy Gup, Lloyd Heberlie Agenda • Getting to know PhoneGap • jQuery and jQuery mobile overview • jQuery and ArcGIS API for JavaScript • Putting it all together • Additional information Technical workshops at Dev Summit • Web - Building Mobile Web Apps with the ArcGIS API for JavaScript • Hybrid - You are here! • Native - Search the agenda for “Runtime SDK” Application comparison: Native vs. Web • ArcGIS Runtime SDK for Android • https://developers.arcgis.com/android/guide/native-vs-web.htm • ArcGIS Runtime SDK for iOS • https://developers.arcgis.com/ios/objective-c/guide/native-vs-web.htm Hello Cordova and Resources Lloyd Heberlie Enable Safari remote web inspection What is PhoneGap? • Application container technology • Core engine is 100% open source • Web view container, plus JS API • HTML5, CSS3, JS = Native App PhoneGap PhoneGap architecture PhoneGap PhoneGap Application Native Plugins Code App PhoneGap Plugins PhoneGap Plugin options Setup a developer machine Code quality and verification web server Source Control Preparing for PhoneGap Installing PhoneGap and Apache Cordova Check versions of PhoneGap and Apache Cordova Updating PhoneGap and Apache Cordova Creating your first PhoneGap CLI project phonegap create path/to/my-app "com.example.app" "My App" Hello Cordova (cont.) Lloyd Heberlie PhoneGap: Featured Apps Featured Apps: Tripcase, Untappd Agenda • Getting to know PhoneGap • jQuery and jQuery mobile overview • jQuery and ArcGIS API for JavaScript •
    [Show full text]
  • Apache Cordova Training
    Apache Cordova Cross-Platform Mobile Application Development Duration: 3 Days (Face-to-Face & Remote-Live), or 21 Hours (On-Demand) Price: $1695 (Face-to-Face & Remote-Live), or $1495 (On-Demand) Discounts: We offer multiple discount options. Click here for more information. Delivery Options: Attend face-to-face in the classroom or remote-live attendance. Students Will Learn The jQuery Mobile Toolkit Introduction to Apache Cordova (PhoneGap) Style Class Manipulation Using the Contacts Database API DOM Manipulation Using the the Cordova File API Introduction to Ajax Accessing the Camera with Cordova Using jQuery Mobile Lists, Forms, Buttons and Themes Using the Accelerometer Overview of Geolocation Course Description Apache Cordova (formerly PhoneGap) is an open-source is a mobile application development framework. It utilizes HTML5, CSS3 and JavaScript to create apps for a variety of mobile platforms. Students will learn how to build applications using jQuery Mobile and Apache Cordova that run on a variety of mobile platforms including iOS, Android and Windows Mobile. Comprehensive hands on exercises are integrated throughout to reinforce learning and develop real competency. Course Prerequisites Knowledge of HTML and JavaScript equivalent to attending the Website Development with HTML5, CSS and Bootstrap and JavaScript Programming courses. Course Overview The Mobile Landscape Technology Stack Devices Types HTML5 Main Objectives Browser-Side Data Storage Smartphones Tablets Declaring HTML5 Device Convergence Detecting Support for HTML5
    [Show full text]
  • Qooxdoo Interview Questions and Answers Guide
    Qooxdoo Interview Questions And Answers Guide. Global Guideline. https://www.globalguideline.com/ Qooxdoo Interview Questions And Answers Global Guideline . COM Qooxdoo Job Interview Preparation Guide. Question # 1 What is Qooxdoo? Answer:- qooxdoo is an open source Ajax web application framework. It is an LGPL- and/or EPL-licensed multipurpose framework that includes support for professional JavaScript development, a graphical user interface (GUI) toolkit and high-level client-server communication. Read More Answers. Question # 2 Is qooxdoo freely available? Answer:- Yes. qooxdoo is Open Source, dual-licensed under LGPL/EPL, i.e. the "GNU Lesser General Public License (LGPL)" and the "Eclipse Public License (EPL)". As a recipient of qooxdoo, you may choose which license to receive the code under. Read More Answers. Question # 3 Who developed qooxdoo? Answer:- qooxdoo was initiated and is maintained by 1&1, the world's biggest web hosting company. There is a team of full-time core developers as well as many committers and contributors. Read More Answers. Question # 4 Which browsers are supported? Answer:- A qooxdoo application runs in all major web browsers - with identical look & feel. Read More Answers. Question # 5 Does qooxdoo come with a server? Answer:- No. If you already have an existing backend that serves HTTP (or HTTPS) requests, it's probably fine to continue using it. Optionally qooxdoo offers several RPC servers for an elegant client-server communication. BTW, during development of your client application the local file system often is sufficient, without the need to use a real server. Read More Answers. Question # 6 What languages and technologies do we need to know? Answer:- Not many.
    [Show full text]
  • Preview Extjs Tutorial (PDF Version)
    About the Tutorial ExtJS stands for Extended JavaScript. It is a JavaScript framework and a product of Sencha, based on YUI (Yahoo User Interface). It is basically a desktop application development platform with modern UI. This tutorial gives a complete understanding of Ext JS. This reference will take you through simple and practical approaches while learning Ext JS. Audience This tutorial has been prepared for beginners to help them understand the concepts of ExtJS to build dynamic web UI. Prerequisites For this tutorial, the reader should have prior knowledge of HTML, CSS, and JavaScript coding. It would be helpful if the reader knows the concepts of object-oriented programming and has a general idea on creating web applications. Execute ExtJS Online For most of the examples given in this tutorial you will find a Try it option. Make use of this option to execute your ExtJS programs on the spot and enjoy your learning. Try the following example using the Try it option available at the top right corner of the following sample code box − <!DOCTYPE html> <html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme- classic/resources/theme-classic-all.css" rel="stylesheet" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.Panel', { renderTo: 'helloWorldPanel', height: 100, i width: 200, title: 'Hello world', html: 'First Ext JS Hello World Program' }); }); </script> </head> <body> <div id="helloWorldPanel"></div> </body> </html> Copyright & Disclaimer Copyright 2017 by Tutorials Point (I) Pvt.
    [Show full text]
  • Voyager Mobile Skin Developed Using the Jquery Mobile Web Framework
    Voyager Mobile Skin Developed Using the jQuery Mobile Web Framework By Wes Clawson University of Rochester Libraries Contact: Denise Dunham - [email protected] en_US Rochester Original Mobile skin After Adding jQuery Mobile How We Did It We needed to make some simple changes to a few XML/XSL files. To start using jQuery Mobile You need three new things: jQuery JavaScript - jQuery Mobile JavaScript - jQuery CSS These are placed in frameWork.xsl To make things easier: We trimmed down an original skin first. By getting rid of features that we knew weren’t going to be used on mobile devices, we had a lot less to worry about when we added jQuery Mobile. Generates a divider with collapsible content Button shape and color can be based on existing jQuery Mobile themes Generates a clickable button When the page is loaded by a browser, jQuery Mobile makes changes to markup that has been indicated with special tags. These special tags were added to markup where we wanted jQuery to form certain types of elements. Collapsible Divider (closed) Collapsible Divider (open) Stylized Drop-down Menus Value Slider Stylized Buttons In the end, roughly 27 files were modified to include jQuery-specific markup tags, giving a sleek, simple, yet robust mobile interface. Why We Did It jQuery Mobile save a lot of the time and resources that are normally needed to develop stylistic graphics and formatting. Items are auto-generated! Buttons Search Box Active Item Styling Icons Button Icons (standard jQuery Mobile) 3rd party icons also available! The jQuery Mobile framework allows developers a fast and simple way to create skins that are easily accessible on mobile devices.
    [Show full text]
  • Ext JS 4 Next Steps
    Ext JS 4 Next Steps The Ext JS 4 library is one of the most powerful libraries for building Rich Internet Applications. Through this book we have learned how the library works and what capabilities it has. Now that we have a full working application and have learned how to use the library, we must know that there are a lot of other things around this awesome library. In this chapter we will see what other concepts may help us to improve our development process when using Ext JS 4. In this chapter we will cover the following topics: • The Ext JS 4 API documentation • Using JSDuck • Want to go mobile? • The Sencha forums The Ext JS 4 API documentation Ext JS 4 has some of the best documentation; it is easy to use and very powerful. The Sencha team has always put so much effort when delivering their frameworks' documentation, but the Ext JS 4 and Sencha Touch 2 APIs are a state of art in documentation. Ext JS 4 Next Steps When we are new to Ext JS 4, one of the most important things we have to know is how the API works. We don't need to memorize each class and class methods, we just need to know where to find them. The following screenshot shows the Sencha Docs structure: In the Sencha Docs we have five main regions. On the left-hand side we have the package tree list with all the packages and classes Ext JS 4 has in its library. In the top right-hand corner we have the search component where we can search almost anything like classes, methods, guides, xtypes, and more.
    [Show full text]
  • Java Script Libraries
    Java Script Libraries www.LifeMichael.com What is JavaScript? ● The JavaScript code is executed within the scope of the web browser. ● JavaScript is an object oriented programming language with functional programming capabilities. © 2010 Haim Michael. All Rights Reserved. Sample <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script src="mycode.js" type="text/javascript"></script> </head> <body> bla bla <script type="text/javascript"> alert("sum="+sum(3,4)); </script> </body> </html> © 2010 Haim Michael. All Rights Reserved. Sample function sum(numA,numB) { return numA+numB; } © 2010 Haim Michael. All Rights Reserved. Sample © 2010 Haim Michael. All Rights Reserved. Ajax ● We can develop JavaScript code that perform the HTTP interaction with the server side. © 2010 Haim Michael. All Rights Reserved. DOM ● The JavaScript programming language allows us to interact with the web page DOM and even change it. © 2010 Haim Michael. All Rights Reserved. CSS ● CSS files are responsible for the look & feel of our web site. We can use Java Script to introduce changes in the look & feel CSS properties. © 2010 Haim Michael. All Rights Reserved. CSS body {background-color:yellow} h2 {color:red} simple.css © 2010 Haim Michael. All Rights Reserved. CSS <html> <head> <title>demo</title> <link rel="stylesheet" type="text/css" href="simple.css"/> </head> <body> <h1>great places</h1> <h2>jogaga</h2> <h2>gongogo</h2> </body> </html> © 2010 Haim Michael. All Rights Reserved. CSS © 2010 Haim Michael. All Rights Reserved. HTML5 ● HTML5 new coming standard is mainly about JavaScript. The new coming HTML5 specification defines various JavaScript APIs for performing various useful operations.
    [Show full text]
  • The Well Project Mobile App Case Study
    www.armedia.com [email protected] The Well Project Mobile App Case Study unique and extensive focus on women. Since 2002, The Well Project has worked to achieve this goal by developing new resources to educate, nurture and support the international community of HIV+ women, their loved ones, and their healthcare providers. Customer The Well Project them in reaching a broader audience, increase the agility of their messaging, and further cement the community - style feel of their Solution Mobile Application Development Objective: To create a mobile application that not onl y promotes informational articles but also serves as community of support for Products Drupal WCM WordPress WCM PhoneGap Framework This Project Goal had Several parts: Sencha Touch Webkit -Build an app optimized for community engagement that would User Interface provide the ability for information to be spread on a global and Web 2.0 (HTML 5 / CSS 3 / JavaScript) viral scale. Thus, The Well Project Mobile App was built to: o Provide users with the ability to comment on blog posts written by other women from around the world from their mobile device. o Provide users with the ability to share Articles or Blog posts with others In an age of ever changing technology, we “ o Provide the ability for users to be able to access realized we needed to expand our resources to information when they are not able to access Internet “ provide for women in need of HIV/AIDS informa- through their mobile devices by giving posts marked as tion world wide, and we were excited to work favorites the ability to be stored locally.
    [Show full text]
  • Mastering Ext JS
    Mastering Ext JS Learn how to build powerful and professional applications by mastering the Ext JS framework Loiane Groner BIRMINGHAM - MUMBAI Mastering Ext JS Copyright © 2013 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 author, 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: July 2013 Production Reference: 1010713 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK.. ISBN 978-1-78216-400-5 www.packtpub.com Cover Image by Asher Wishkerman ([email protected]) Credits Author Project Coordinator Loiane Groner Hardik Patel Reviewers Proofreader Aafrin Chris Smith Vincenzo Ampolo Yiyu Jia Indexer Hemangini Bari Joel Watson Graphics Acquisition Editor Abhinash Sahu Edward Gordon Production Coordinator Lead Technical Editor Shantanu Zagade Anila Vincent Cover Work Technical Editors Shantanu Zagade Arvind Koul Worrell Lewis Vaibhav Pawar Amit Ramadas About the Author Loiane Groner lives in São Paulo, Brazil and has over eight years of software development experience.
    [Show full text]