Example of an application design for mobile devices.

1. Introduction

In this example we will use ShareTools, a fictitious company that is responsible for renting DIY tools over the Internet. This company wants to expand its business model so that individuals They can also rent their own tools to other users in the community while they are not using them.

They have decided to promote this initiative through mobile technologies, so that any user who has a mobile device can access the entire database of tools, and can both add new ones and make requests to rent them.

The user of this future application will be able to see the sheet of the different DIY tools more nearby, filter the date on which you want the tool to be available, know the price that will have to be pay the owner and view a map to locate the tools among many other things.

2. Project planning

In this section the development method used will be explained and developed. will be carried out in this first phase of the project, as well as the type of application and other global decisions in regarding development methodology and technology on which it will be developed, which affect the rest of the project.

2.1 Milestones

In the planning phase, an attempt is made to distribute the time and resources necessary to be able to carry out the project, either in a complete planning or in more divided planning. In the phases In planning, we always try to achieve the maximum precision of the estimates, against the risks associated with project. Thus, to carry out this application, different phases must be followed:

Functional definition of the application: The project must be well defined, both its objectives and the functionalities that are required for it to fulfill its purpose.
Planning: It is the first phase of project development. It consists of having a work program with a breakdown of all the activities to be carried out (from design to final testing), the deadline estimated number of hours that will be dedicated to each of them and establishing the human resources that will be dedicated to achieve the objectives that have been proposed.
Design: Prior to implementation, it is necessary to have fully defined the structural design of the app and its behavior. For this, mobile application design programs are used and then prototyped that They will show the look and usability of the application.
Development: It is the programming of the project. This phase will be done according to the technology that has been decided be used for each programming platform and the development environments used will be in accordance with this.
Testing phase: Once the app has been developed, it is necessary to do in-depth testing of all parts of the app. same.

Pre-launch distribution: Prior to uploading to the mobile application markets, it can be done mobile application distributions. On Android it can be done using the beta development environment Android available in the developer console.
Implementation and distribution: At the end of development, the app will be able to be made known and be marketed and the last step will be to upload it to the corresponding application markets.

Regarding the milestones, I understand that they should be like the list of functionalities of the design subject, but marking the phases that we want our production to have... for example design phase, Android programming phase, phase Windows programming, Alpha version release phase of the app, Beta version phase, compilation phase failure with beta testers, jump to production... etc...

2.2 Application type

To carry out this application, it has been decided that it be a hybrid application, since they are developed with webabpp's own languages, that is, HTML, Javascript and CSS, which allows their use on different platforms, but they also give the possibility of accessing a large part of the hardware features of the device. Some of the advantages that this type of applications provides us are:

We minimize specific code: Most of the code can be used for the rest of the platforms. alone Native code is used for those aspects that require it.
Lower development cost, especially if the application is required on several platforms.
Lower maintenance cost as most of the code is common to all platforms.
A Hybrid application can access the resources of the mobile device practically like a native one.

2.3 Development methodology

In the world of software development there are many development methods, each with strong points and weaknesses. In the case of mobile application development the same thing happens, for So we have to consider the development methodology depending on our needs. In this specific case, It has been decided to use an agile methodology. Agile development is a development model based on iterations, in which in each iteration all phases of the development cycle are done. One tries, among other things, to achieve value as soon as possible, without having problems with changing requirements. This point has made it very valid for changing projects, whether large or small. Agile methods are usually very suitable for the development of mobile applications for several reasons:

High volatility of the environment: With changes in development environments, new terminals and new technologies at a much higher rate than in other development environments.
Small development teams: As in our case, mobile developments are usually projects relatively small, carried out by individual developers or SMEs.
Non-critical software: The application to be developed is not a high-criticality application.
Short development cycles: Due to the constant evolution of the industry, life cycles are required really short to be able to output the applications on time.

This "agile" working method has been chosen because there is a small and specialized development team, the development environment is constantly evolving and a short development cycle is required to be able to have the application as soon as possible. With this way of working, we will be able to obtain prototypes from the first tests that can be shown to the user, while refining and adding functionality to the application.

2.4 Interface

To carry out all the functionalities of this application, several screens that will allow the user to carry them out. Two of them will be shown below. In this first interface, the screen is displayed in which the user could access the form to enter a new tool to be rented, simply by pressing the button located at the bottom "Upload my tool". Yes On the contrary, what you want is to display a list of the available tools, the user only has to Press one of the 6 available tabs, depending on the type of tool you want to rent (cutting, joining, knocking, clamping, mounting or measuring).

Once you press any of the tabs, let's say, for example, you press the "Cut" tab. The system will redirect the user to a screen similar to the following.

On this screen, the user will be able to see the different tools available, depending on the date filter that have put at the top of the screen, where you can indicate the start and end date on which you want rent the tool. In the list of tools, the user will be able to see a photo of the tool, a description of the name, and the price it would cost to rent it on those dates.

2.5 Time planning

In the following image we can see the temporal planning that we are going to do. carry out the following and carrying out the different milestones that have been specified in previous sections in a estimated period of time of about 3 months (as no time limit is stated in the statement, an estimated limit of around 3 months the same as the duration of the subject).

3. Technology choice document for development

3.1 Application type

Below are the pros and cons of the 3 types of applications that can be developed, to finally reach a conclusion.

Native App: The native app is developed and optimized specifically for the system specific operating system and the manufacturer's development platform (Android, Blackberry, etc.). This type of applications adapts 100% with the functionalities and characteristics of the device, thus obtaining a better usage experience. However, the development of a native application involves a higher cost, since if If you want to make a cross-platform application, a new version must be made for each operating system. thus multiplying development costs.
Hybrid application: This type of application takes full advantage of the versatility of web development and has the ability to adapt to the device as a native application. It allows you to use web development standards (HTML5) and take advantage of the device's functionalities such as the camera, GPS or contacts.
Web application: The web application is the simplest and most economical option to create applications, since when Developing a single application reduces development costs to a minimum. Also, in this type of applications, the “responsive web design” can be used, thus creating a single application adapted for everything type of devices. On the contrary, the web application offers a worse user experience, since it ignores the characteristics of the device and less security since it depends on the security offered by the device itself browser.

To get a little clearer idea, the following image indicates the main characteristics of each type of application.

After analyzing each of the applications, it has been decided to develop a hybrid application, since This type makes the most of the versatility of a web developer, reducing the completion time to the maximum. of the application by reusing the majority of the code. In addition to all this, the economic cost is much less than a native application, a very important point when carrying out any project. Below is a picture with the most important advantages and disadvantages of hybrid applications.

5
Hybrid app advantages and disadvantages.

3.2 Development environment

To develop the application the PhoneGap framework will be used. This framework allows web developers to focus on developing smartphone apps of different types. platforms, based on a generic code with tools such as JavaScript, HTML, CSS, and creating a foreign function interface to embed a Web view on the mobile device. In this way, for example, if our application needs to access the device's camera, we just have to create an HTML5 page by doing A Javascript call allows us to use the camera of any device regardless of its platform. With which we manage to run our application on all the platforms on the market having only knowledge of HTML5, CSS3 and Javascript. We don't have to learn Java, or Objective-C, or any other language; drastically reducing development time and therefore cost. With PhoneGap it is possible to develop applications for the following operating systems:

Android
iOS
Windows Phone
BlackBerry OS
Web OS
Symbiam
Bada

PhoneGap has two great advantages when developing: the applications can be run on our web browser, without depending on a simulator dedicated to this task, and on the other hand, we have the possibility of support functions on frameworks such as Sencha Touch or JQuery Mobile.

3.3 Modifications

Regarding possible modifications to the database, it should be noted that it will not be It is not necessary to make any modifications, since the tables stored in the database that the company already has, They contain all the data necessary to fill out the different forms on the interfaces.

3.4 Web API

This application is going to be developed from an existing Web platform, so it will some Web Service communication protocols may be necessary. How are we going to base ourselves on the website that the company already has? company, we can use the same centralized database, from which we will obtain information on both registered users and the tools. We also have the interfaces to create a new user and access the system if the user is already registered, to see the tools available through certain filters and access them, to introduce new tools through forms, etc. For all this, it will not be necessary establish any new APIs Interface, since with the web version that the company provides us, we have enough.

4. Solution architecture document

4.1 Connection with external systems

This document will explain how the communication between the developed application and possible external systems. As it is a client-server application, we have in the part of the client to the user using the mobile device, which sends information to the server through the Internet, as can be seen in the image. It is evident that if this communication does not exist, the application could not function correctly.

For the operation of our application, it will be necessary to access different components of the phone, specifically to the geolocation system. To do this, the client will be able to access through some plugins that it offers us. PhoneGap technology is free, regardless of the operating system on which the application is running. In summary, we can say that, through the APIs of each operating system, the PhoneGap plugins connect with the different sensors that the device has. If at any time you would like to use the application offline, you can should extract the data through the application server and store it in a local database, having Always keep in mind that this data could be out of date during the user's use of the application. user.

4.2 Application architecture

A very important functionality of our application is knowing the location of each tool, as well as storing ours. For this it will be necessary to access the information of geolocation through GPS connection. As it is a hybrid application, it is developed with standards open that encapsulated as native runs inside a web container (Webkit).

Applications run on a component that contains the browser. An HTML5-JavaScript application will be created which will be wrapped with a native wrapper for the device. The HTML5 core runs inside the container native application and uses the device's browser engine (instead of the browser), to process data locally. With the use of PhoneGap what we achieve is that the user interacts with it as if they were a client, which at the same time communicates with an application server, which communicates with a data repository, to receive data. PhoneGap applications do not usually communicate directly with the database, but do so through of the application server. Regarding the client, the application logic is contained within an HTML page, so this page is never downloaded from memory.

5. Test plan

5.1 Application functionality

To describe the functionality of the application, we will have to describe some of its sections, as well as the main actions that the user can perform.

User registration

In order to access all the features of the application, the user You must register using a username and password. In the event that the user is not registered or is the first Once you access the application, you will have to register by indicating some personal and relevant information for the system, such as the email address.

Tools display

The user will be able to see a list with the different tools available. The list may be organized for different aspects:

By distance: The user can sort this list depending on the distance at which the tools available from the user's current location.
By price: In a similar way to sorting by distance, the user can sort the list depending on of the price of the tools, so that the most expensive tools appear first, or if you want, the cheapest (all these aspects can be configured by the user).

Filter tool availability date

Another action that the user can perform will be to choose the date on which you want to have the tool, as well as the days you will use it.

Tool price display

In this application the total price that the user must pay to the owner of the tool.

Viewing the map with the closest tools

The user will have the option to view a map in which the current position of the user will be observed and the positions of the different tools will be marked available according to the characteristics previously marked by the user.

Notices

As in any application, notices are a very important part of it, since They allow the user to be up to date with all the movements that may occur. Thus, the system will notify the user of the following events occurred:

If the user has a tool available to be rented and another user requests it, they will be will notify you so that you can accept this request or reject it.
Following with the previous case, if the request is accepted, the user who sent this request will be informed of the tool owner's decision. In this way, both the requesting user and the owner They will be able to get in touch.

Tool request

The final step that the user will have to perform to finish the request for a tool, will be to press the “Request” button so that the user's request is sent to the owner of the tool you have chosen.

Rent tool

In this application user can not only search for tools but also You can also offer the tools you want to other users so they can request them. To be able offer a tool for rent, the user must create the file for said tool by filling out, among others, the following required fields: Tool name, description, tool photo, GPS position, price per day, availability period. Once all these fields are filled in, the user will be able to Publish the tool for rent.

Comments

Once the tool rental period has ended, the two users will be able to Leave comments, so that other users can view your opinion. This is a good way for other users They can have more confidence when renting a tool, since they will have first-hand information about both the tool, as well as the owner. It is also a good way for the tool owner to accept or reject the request, since it will have comments from previous experiences with the requesting user.

5.2 Test block

One of the needs for testing is the need to have an emulator or test environment to be able to test what is being developed. This need causes difficulties. For this For this reason, unit tests are used, which allow the development to be divided, so that it can be tested in a decoupled and develop parts of our app without the need to do tests in the emulator, such as the database access or business logic. The tests we do have to be contextualized, that is That is, thinking about reproducing what really happens to the user when they use the app.

USER IDENTIFICATION AND REGISTRATION

1) User registration. The user must enter all the data necessary for registration, including the user you want to use to access and a password

Expected result: The user will be registered and will be able to access the system with the username and password they have entered in the registry.

2) User login. If the user is registered, they must log in by entering their username and password to access the system

Expected result: The user will access the main page of the application. In the event that you enter erroneous data, the system will inform the user with an error message.

ADD COMMENT

1)The user will add a comment to the tool they have rented for a certain time to rate its experience

Expected result: Once the user has written the comment, it will be saved in the database and will be displayed so that users who choose that same tool know their experience.

2)The user will add a comment to the user to whom they have lent a tool to rate their experience

Expected result: Once the user has written the comment, it will be saved in the database and will be displayed so that users who choose to request a tool from that user know the experience of previous users.

RENT OWN TOOL 1) Offer a new tool. The user will enter all the data necessary to register your tool, entering its location and the dates and time in which It is available to be rented.

Expected result: The tool will be registered and other users will be able to see it and decide if they want rent it. In the event that any of the data is entered incorrectly, the system will inform the user with a message error without finishing the process.

LIST AVAILABLE TOOLS

1) Show a list of available tools. The user will choose the condition for which he wants it to be order the tools (price or location).

Expected result: Once you have chosen the option by which you want to sort the tools, the system will show a list with all the tools available on the date chosen by the user and ordered by factor previously chosen. In the event that there are no tools that meet the conditions requested by the user, a message will be shown to the user indicating it.

NOTICES

1) Request a tool.

Expected result: Once the user decides to request a specific tool, the owner of said tool tool will receive a notification and an email with the tool request and all the user data who requests it.

2) Accept/reject tool request

Expected result: When the user has received the notification that there is a user who has requested their tool, you can accept or reject the request. If you accept it, the user who requested the tool will receive a notification and an email with all the information of the owner of the tool so that it can get in touch with him.