Research- Web app for android

(1)

Project Paper

Comp 502 – Research

Supervising Professor: John Santore

Student: Flavio Semedo

(2)

Introduction

Application development for mobile devices has evolved substantially in recent years. Creating apps for mobile systems is becoming a standard in order to create better solutions to meet the market demand. Currently, half of the US population own Smartphones. This market comprises 150 million people, and 28% of these people consider mobiles their primary way of accessing the Web (Hales, 2013).

A common feature of most websites tailored for mobile devices is that they are reduced versions of the desktop site. Several factors that must be considered when making this transition from desktop sites to mobile devices are: identifying elements from the desktop website that should be displayed on the mobile device screen; the amount of information the institution (BSU in this case) wishes to provide and designing an interface that will please the users;

Creating mobile solutions for an organization will help them maintain existing customers, attract new customers and differentiate the organization from other competition. Bridgewater State University is not far from this paradigm by creating solutions and adapting existing services to meet the market demand. We proposed a mobile web based application that allows BSU’s community to access information available online through the Maxwell Library site by using an android application. Currently, BSU’s information is available on a desktop site. The website’s interface is not suitable for Smartphones. However, users can access the page using the web browser for Smartphone.

The BSU-App Online Library is an android application that can be used by the student community and collaborators of Bridgewater State University as a useful tool. This tool can be

(3)

installed on android devices as an application that loads the most useful data from the BSU desktop site, available on the Maxwell Library page and displays data on the mobile device screen.

This paper describes the most important aspects in the development and architecture of this project, whose main objective is to create a web app for android that will display contents from BSU’s website in an android-friendly format. The data that will be used for the BSU-App will be loaded from the online library (Maxwell Library) web interface. In addition, the most useful information will be reformatted for display on android including interlibrary loan, catalog search, floor plans, research databases, library book and the video purchase request form.

Related Work

There are many apps in the market developed in the field of academic Smartphones. In previous work, a student developed an app for the mobile version that allows members of school communities to access the BSU Online Library (Bridgewater State University, 2013). The data available on the mobile device does not correspond to the real data on the BSU website. An example is the way that the data will be updated on the mobile application. It is necessary to access a mobile database of dummy data in order to do this operation. Using dummy data is not a good practice for system database managers (SGBD) and for institutions. As a consequence using dummy data is: more costly, likely to involve more time spent and a higher probability of data inconsistency.

The current work goes beyond this earlier research in several ways. First, this app will load on the screen using HTML data from Online Maxwell Library. Second, the data displayed

(4)

in the android screen will be based on the most important features that the users are looking for. What is intended as a final product is an application that uses real data from BSU’s website with an appropriate UI. This means complying with the best practices of development not only in terms of code, but also in relation to the modeling of the user interface.

There are many apps in the market developed in the general academic field. Listed below are some examples of these applications:

1. The Virtual University (Virt U)

Virt U is a free app developed by Irynsoft that allows you to download and watch lectures from universities such as MIT, Harvard, Berkeley, and Stanford on your phone (Irynsoft, 2011). Whether you are looking to complement your existing courses, or brush up on other subjects that interest you, you're sure to find something among the hundreds of lecture videos available for both online and offline viewing.

The BSU-App and Virt U shared some similar characteristics. Both of them seek to offer information in the academic field for students and faculty members. Also, the BSU-App enables you to submit suggestions for library books. However, the BSU-App differs in some aspects. It is necessary to have an internet connection because the data available on the app is retrieved from the BSU Desktop site. This means that the BSU-App and BSU Desktop site (Online Library) share the same database server. In addition, the BSU-App allows its communities to search for books and articles and Virt U only allows the download of lectures.

(5)

2. Droid Scan

Droid Scan was developed by Trans-code Design, a software development company in Erie County, NY (Droid Scan, 2012). It is a mobile app that turns your phone or tablet into a portable document scanner. With Droid Scan you can transform images captured with your camera into professional multi-page PDF documents in just a few clicks. This app could be helpful for taking photos of whiteboards, handouts, or even the menu of your favorite takeout place. Droid Scan Lite is a free app that allows you to save files as .jpegs; the expanded Pro version, which is not free, gives you more file formats and better scans quality.

Droid Scan and BSU-App are both focused on the public target offering a better service providing information offers to their communities. However, BSU-App allows user to search for document by subject and from different databases. Also, BSU-App, users can search for library map directions available on Library floor plans.

3. The Wolfram Alpha

Wolfram Alpha is developed by Wolfram (2013) and the authors consider it the greatest Android app; it is particularly useful for students doing any course (Wolfram Alpha, 2013). Wolfram Alpha is not a search engine but a computing app which takes data input from the user and turns it into information the user wants.

Wolfram Alpha started off computing mathematical and engineering problems. As the authors mentioned, it is used for web, mobile, desktop, and enterprise applications.

(6)

Examples include algebra, coding formulas, and historical questions. Also, it is great for finding statistics.

The app shares some common features with the BSU-App such as both provide their community with knowledge and are web-based. On the other hand, the BSU-App differs from Wolfram Alpha in at least two respects: the first advantage is that BSU-App provides its community a wide field of research from different databases. This research can be made by subjects (Accounting and Finance, African Studies, American Studies, Anthropology, etc.). Also, it does allow you to purchase books, videos and articles from the library.

4. Aldiko eReader

Aldiko eReader is an app for android and a free eBook reader that supports the ePub format and your own PDF files. There are thousands of books available and the vast majority of them are free. Many of them are older, classic titles which are either out of print or are not copyrighted. They are regularly used throughout education systems worldwide. Budding authors also make their work available for free.

The BSU- App differs from Aldiko eReader in different ways. First, the books and articles available on the app are copyrighted. Both technologies can be used by members and school communities. However, the BSU-App allows you to request books, articles and videos from the library.

(7)

The Development Environment in BSU-App project

In order to implement this project, it was necessary to follow several major steps. First, it was developed in the Eclipse IDE Java EE Development environment followed by ADT

(Android Development Tools). This project was tested in an API 17 android 4.2 (Jelly bean).

Android User Interface Components

This section describes the most important UI related component and parts of BSU-App. The components that make up the application are declared in the AndroidManifest.xml file. These activities work together to perform a cohesive interaction with the users. Each one is

independent of the others in terms of subject.

Activity

An activity is a window that contains the user interface (UI) of an application. The main purpose of an activity is to interact with the user. One application can have one or more activity. From the moment an activity appears on the screen to the moment it is hidden, it goes through a number of stages, known as an activity’s life cycle. The follow figure shows the life cycle of an activity:

(8)

Figure 1: Android’s life cycle of an activity (Android Developers, 2013)

In order to create an activity, it is necessary to create a subclass of activity

(com.onlinelibrary.bsu.Menu). In the subclass, you must to implement callback methods that the system calls when the activity transitions between various states of its lifecycle, such as when the activity is being created, stopped, resumed, or destroyed (Android Developers, 2013). The two most important callback methods are: the onCreate () method used to create and instantiate the objects that you will be using in this application. When an activity is created for the first time, the onCreate () method is called. Most importantly, this is where you must call setContentView

() to define the layout for the activity's user interface. The second most important method is onPause (), this method used to stop any services that does not need to run when your activity is

not in the foreground. This is usually where you should commit any changes that should be persisted beyond the current user session.

(9)

Intent

The android platform implements the concept of intent to indicate enforcement or starting a new action. Intent is an abstract description of an operation to be performed. It is basically an object that provides runtime binding between separate components, for example, binding two activities. Its most significant use in this project is in the launching of activities.

View

The View is the base class for widgets, which are used to create interactive UI

components (buttons, text fields, image view, etc.). The Viewgroups subclass is the base class for layouts, which are invisible containers that hold other Views (or other View Groups) and define their layout properties.

BSU-App AndroidManifest file

The Manifest file for an android application is a resource file which contains all the details about the BSU-App needed by the android system. It is a bridge between the android developer and the android platform. It defines functionalities and requirements of BSU-App. The target SDK version used in this project is 17, which is android 4.2 versions, and the

minimum SDK version is 8. This means that the application can run on the platform android 2.3 version.

In general, the androidManifest.xml file defines the settings for the application, the Activities, IntentFilters and other services including permissions. Within the tag applications,

(10)

activities are defined. A tag <activity> defines an activity inside the application and within activities the tag <intent-filter> that defines the intent filters to inform the system which implicit intents they can handle. Following the hierarchy of the XML file, it’s shown the tag <action> representing the action to be performed by Intent.

Moreover, android requires developers to declare the use of resources and certain tasks by declaring that it needs permissions for these resources. The manifest may also contain <uses-permission> tags to identify permissions that the app needs. For example, BSU-App needs the internet permission for this project. The internet permission is specified by the following tag: <uses-permission android: name = “android.permission.INTERNET”>. This permission allows the BSU-App to access the internet and retrieves the respective data from BSU’s web page. Following the internet permission, the access network state permission is specified by the : <uses-permission android: name = “android.permission.ACCESS_ NETWORK_STATE”>, that allows applications to access information about networks (Android Developers, 2013).

The figure below shows the general structure of the manifest file and the components used to execute this application.

(11)

Figure 2: BSU-App AndroidManifest file

BSU-App Project Structure

The BSU-App Home provides users access to UIs presented in the figure below. When the users click on the button, the onClick method is executed by the respective UI.

(12)

onClick Research Database UI Request Form UI Search Library Catalog UI Patron Login UI Send Comments UI Floor Plans UI setContentView BSU-App Home

Figure 3: BSU-App structure

Parsing Activities

In order to parse the data from BSU website, I used jsoup, Java HTML Parser. The jsoup is a Java library for working with real-world HTML (Jsoup Html Parser, 2013). It provides a very convenient API for extracting and manipulating data into your application. The version used in this project is jsoup version 1.7.2 that I set it up as a dependency in the libs project folder.

The User Interfaces used to display the information parsed from the BSU’s website are:  Search Library Catalog;

 Interlibrary Loan;  Patron Login;

(13)

 Research Database;  Request Form;

 Send Comments Activities.

The information loaded in the UI is based on these elements from the BSU’s website.

BSU-App Activities

In order to parse information out of the BSU’s web page I used the jsoup HTML Parser for the most activities. The activities included using these parsing techniques are: Search Library Catalog, Research Database, Patron Login, Library Book/Request Form and Send Comments. Floor Plans activity was parsed using URLConnection. The reasons that I used different way to parse Floor Plans activity was because it is easy to use URLConnection to parse small portion of text or image. Therefore, I used URLConnection to grab the image from the BSU web page

Taking into account the quantity of data, jsoup provides libraries that parse HTML with methods selections. It takes URL as a string and uses connect (String url) method to create a new connection, and get () to fetches and parses a HTML file (Jsoup Html Parser, 2013). This method only supports http and https protocols.

Components of BSU-App UI

An activity by itself does not have a presence on the screen. Its contains views and viewgroups

(14)

The BSU-App is drawled using views and viewgroups defined on the sections above. In this project the UI is defined using XML file. The UI is implemented by using LinearLayout that defines views in a single column or single row. It is arranged using vertical orientation in this project. Each views and viewgroups are defined by a set of attributes.

Below are showed the attributes mostly used in this project:

- layout_width - layout_height - layout_gravity

BSU-App Main UI

The main activity is shown as a menu list. It describes the application user interface (UI). This UI does bind to others activities by using its onClick () method that starts a new Intent. The xml file was used to design the UI. The main UI is implemented by two LinearLayout with vertical orientation and is made up of TextViews, Buttons and Images. The following figure shows the activity_main.xml file and respective elements.

(15)

Figure 4: BSU-App Home UI <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#330000" android:orientation="vertical" tools:context=".Menu" > <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/bsu" android:textSize="40sp" android:textStyle="bold" android:textColor="#FFFFFF" android:layout_gravity = "center"/> <LinearLayout android:layout_width="match_parent" android:layout_height="700dip"

(16)

android:orientation="vertical" android:background="#880011"> <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="40sp" android:textColor="#FFFFFF" android:layout_gravity = "center"/> <Button android:id="@+id/searcata" android:background="@drawable/normal" android:layout_width="400sp" android:layout_height="wrap_content" android:textStyle="bold" android:textColor="#FFFFFF" android:text="Search Library Catalog" android:textSize="25dp" android:layout_gravity="center"/> <Button android:id="@+id/database" android:background="@drawable/normal" android:layout_width="400sp" android:layout_height="wrap_content" android:textColor="#FFFFFF" android:textStyle="bold"

android:text=" Search Database by Subject" android:textSize="25dp" android:layout_gravity="center"/> <Button android:id="@+id/interlib" android:background="@drawable/normal" android:layout_width="400sp" android:layout_height="wrap_content" android:textColor="#FFFFFF" android:textStyle="bold" android:text="Patron login" android:textSize="25dp" android:layout_gravity="center"/> <Button android:id="@+id/lbook" android:background="@drawable/normal" android:layout_width="400sp" android:layout_height="wrap_content" android:textColor="#FFFFFF" android:textStyle="bold"

android:text="Library book/Request Form" android:textSize="25dp"

android:layout_gravity="center"/>

(17)

Figure 5: BSU-App Home xml file

The BSU-App activity is defined by event listener and handler. The event listener is an interface in the view class that contains a single callback method onClickListener (). The event handler when the user presses one of the items in the BSU-App, the method findViewById () is executed. This method allows us to find a UI element from the XML file.

(18)

BSU-App contains an onCreate () method. This method is used when the activity is first created. The other method is setContentView () that inserts a view into an activity. Below is shown the activity_main.xml.

Figure 6: Starting the activities

Floor Plans

The Floor Plans activity provides users from the others access to the building map. In the Floor Plans activity I used a different approach. Instead of jsoup, I used URLConnection.

URLConnection is an abstract class is the java standard library that represents an active connection to a resource specified by URL (Harold, 2005). Floor Plans activity reads the images from BSU-Library Floor Plans assets and loads them in BSU-App. The class FloorPlans.class

(19)

uses HttpURLConnection subclass of the class URLConnection. When users press on the Floor Plans menu item, a request line is sent to the BSU web server. This is a GET request and

followed by files from web server. The getInputStream () method returns a generic InputStream that allows the BSU-App read the data that the BSU web server sends. For example here’s the code of how HttpURLConnection uses the GET method to request the images.

Figure 7: Example of code listing for URLConnection

When the App is executed, a splash screen that is automatically redirected to BSU-App Home. From the BSU-BSU-App home users can press buttons to access different activities.

Figure 10.shows the UI and part of the xml file that is executed when users execute the Floor Plans activity. For example, if the Floor Plans button is pressed, the UI generated by

(20)

floorplans.xml is shown, providing users the possibility of clicking one of the available options: First Floor, Second Floor, Third Floor and Ground Floor.

Figure 8: Floor Plans UI .xml file

In this activity I parsed the images from BSU’s web page and display it on the screen. I created a URL object and an InputStream retrieved from the URL. Then I used the

(21)

Using HttpURLConnection was not enough to retrieve all the data I wanted from the BSU’s web page. I had difficulties retrieving forms from BSU’s web page. Thus, I used jsoup libraries to parse the data from the web page and display it on the screen.

Figure 11: displays the first Floor Plans image retrieved from BSU’s web page.

(22)

Search Library Catalog

The Search Library Catalog activity allows users to search for books, videos, journals, etc. When the Search Library Catalog button is pressed, a form is loaded from BSU’s web page into BSU-App UI.

Figure 10: Search Library Catalog UI - Search Results

From all the major HTML parsers, I choose Jsoup for parsing because it was easy to grasp. If you already have moderate experience with CSS selectors, Jsoup make it easy to work with.

(23)

element of interest. The major strength of Jsoup is how html is parsed. You can manipulate HTML elements, attributes and text anyway you prefer. When scraping and parsing an html page, jsoup provides a method for connecting a URL, file or string. The method I used to grab the form field is the Jsoup.connect (String url).get () method to fetch and parse a HTML document from the from the BSU’s library web page.

However, HtmlCleaner which I also introduced helps to reorder individual elements and produces well-formed XML. HtmlCleaner helps to tidy up and clean any html mess.

The codes below are responsible for connecting to a page, getting the raw html tags and selecting the elements needed out of the returned object of type Element (org.jsoup.nodes.Element).

Figure 11: jsoup call method to parse BSU Search Library Catalog

The BSU-App parses BSU’s web page using jsoup libraries by getting the results based on subject searched and displays it into a screen. The elements are identified from the BSU’s website source code.

(24)

Most the elements of BSU’s web page, body HTML is represented by fragment div class that contains sub tags. The data are selected using div class <div> follow by attribute “id”. The id attribute allows you to load the specific div element from the HTML source of BSU’s website. The activities follow the same approach of using jsoup HTML Parser. The only differences among these activities are the data parsed.

Below it is shown a portion of elements selected from BSU’s web page. The page contains a search web form. In this project I created my own form as presented above using jsoup parser to retrieve elements from BSU web page.

(25)

Patron Login

Users will only have access to this activity if provide a connect card number. When clicks on

the button Patron Login the form login UI is displayed. This activity I parsed the first page by grasping the form that allows users to insert the connect card. The second page is opened using WebView. The reason that I choose this approach it is because the page has a pipe of hyperlinks that’s needs to be parsed and some subpages doesn’t present well structure HTML source in order to be parser.

Research Database

The Research Database activity has almost the same functionality as the Search Library Catalog activity. The differences are that allows users to search by subject and presents the catalog lists materials available in the library. This activity uses the same approach to parse the data from BSU’s web page. It is differ from others activities only in its contents.

(26)

Figure 13: Research Database UI and XML file

Library Book/Request Form

When this activity executed is loaded it displays the form to submit suggestions for library book and video purchases simultaneously to the Collection Development Librarian and to the library liaison responsible for collection development for their department (Bridgewater State University, 2013). The same method setContentView () is executed that sets the basic view for the activity and retrieve the data from BSU’s web page.

(27)

Figure 14: The fragment of Form Request UI xml file

Send Comments

The Send Comments activity displays a form for comments and suggestions regarding our collections and services. Also, in this activity the same structure presented for the Patron Login activity.

(28)

(29)

Conclusion

The BSU-App is an application that provides users with materials (books, articles, videos, etc.) that support them in their literature review and fields research. In order to reach this objective proposed I used web crawler to obtain specific types of information from BSU’s website and to load in an android-friendly format. More specifically I used jsoup java HTML parser to provide the public information available on BSU web page. The jsoup allows an easy navigation and a better data structure as presented in this project.

During the implementation of this project, I had some limitations. It was not possible until a certain period of time to present all data in android screen. The source of this problem is, when you search a subject that has more than ten results displayed on the screen you will have to switch the page. When you request the second page, a searchId is associated to a sessionId called by the BSU JSESSIONID on the server side. I presumed that this approach allows BSU to track the webpage using the information saved on the web browser (cookie). I tested the same URL using different browsers and it did not work because one of the browsers did not have the cookie information based on the searchId. To solve these issues I created a variable that save sessionId when the URL is fetched in jsoup connect instead save it in a web browser.

In general, the main goal of this project was accomplished. A search form is available in android app for the users. The same data is available on the BSU web page is displayed on the android screen, given a users possibility to navigate appropriately when a search is submitted. Also, it enables users to submit suggestions for library books, send comments, see Floor Plans Library and submit search using database by subject.

(30)

Future Work

In order to improve BSU-App is necessary to implement some features. If I had one more month I would work on parsing the database by subject and present it in a well format android interface. Database search by subject has a pipe of hyperlinks that that needs to be parsed and display in a WebView. Also, there are links available on the web page that not works in an android device. In addition, I would Parse Research Consultation Request Form from online Maxwell Library that helps students that are engaged in a project that requires in-depth research.

There are a lot to do in order to parse online Maxwell Library. These works require more time spend to completely finish parsing. I believe these are just the beginning of this works until I take this works done completely.

(31)

References

Android Developers. (2013). Android Developers. Retrieved 2013, from http://developer.android.com/reference/android/app/Activity.html#

Bridgewater State University. (2013). Retrieved 2013, from http://library.bridgew.edu/mobile/ Droid Scan. (2012). Droid Scan. Retrieved 2013, from http://droidscan.com/

Hales, W. (2013). Bridging the Gap Between the Web and Mobile Web. Unite State of America: O' Reilley Media Inc.

Harold, E. R. (2005). Java Network Programming. USA: O'Reilly Media.

Irynsoft. (2011). Irynsoft. Retrieved 2013, from http://irynsoft.com/home/?page_id=33 Jsoup Html Parser. (2013). Jsoup Html Parser. Retrieved 2013, from http://jsoup.org/ vnikic. (2013). HtmlCleaner. Retrieved 2013, from http://htmlcleaner.sourceforge.net/ Wolfram Alpha. (2013). Wolfram Alpha. Retrieved 2013, from