GetMySL Project Page

About

GetMySL is a shopping lists application that allow users to send their shopping lists to other users and have the other users completing the shopping. The full users functionalities of GetMySL can be found on Google Play GetMySL information page. This page is reserved for all the technical aspects of developing GetMySL. The application was created as a showcase of my skills with Android Mobile Applications development.

From the start, the whole idea is to allow users to send shopping lists to each other and being able to receive updated progress of the shopping list. As such, shopping lists, 'items' and products data had to be stored and SQLite was chosen. An item hold the relationship between a shopping list and a product. Model classes were created to hold shopping list, item and product objects data and Handler classes were created to carry out the loading, saving and deleting from the SQLite database. To display the lists, the products and functions access point, the original LinearLayout, EditText, TextView, ImageView, Button and ImageButton components from Android GUI library were used along with ListView and BaseAdapter pairs as well as a custom Drawable to a product's large image. In between the data and the display lies a 'light weight' Activity, a few Fragment, a few DialogFragment and a few ultility classes.

Although GetMySL can work as a simple shopping list application, it is designed to allow users to help out each other. However, to be able to help out each other, users must register their name and email on the webserver and connect with other users by sending the server their friends and family name and email. The server will then send their friends and family an acknowledgement email and an acknowledgment notification if their friends and family have GetMySL installed. To hold each user information, SharedPreferences is used as creating a table is deemed as accessive. To hold the name, email and connection status of each user's friends and family, a table was created along with the model and handler classes. To send and receive connections request and reply along with the shopping lists and products image via HttpURLConnection postings, AsyncTask extendsions were implemented.

Of all the implementations, the Gesture handling for each row of list views have not been as straightforward as following Android trainings and guidelines. Although Android have its own gesture handling system in the GestureDetector interfaces and GestureDetectorCompat, the system lacks left-or-right short and long swipes. By using View.OnTouchListener's MotionEvent objects' x-y coordinates and event times, the swipes are determined along with single and double taps. To enable each row of a list view control over its own gesture, each row are set with its own View.OnTouchListener object.

SQLite Setup

GetMySL will be storing many products and with a very large number of products available for purchase, a small database is needed, SQLite is therefore a great fit. After creating the basic project in Android Studio, the SQLite database was set up by extending the abstract class SQLiteOpenHelper and implementing the required methods of 'onCreate' and 'onUpgrade' along with implementing a default contructor. The parameters to the constructor include a Context object, a discretionary database name String, a null CursorFactory and a database version of '1'.

Admittedly, I do not know what the CursorFactory is use for and at this moment it seem I do not need to know as null is working fine. Having not release GetMySL to the public, there is no upgrading needed and the version of '1' is working well. Once released, upgrading, changing version and all the complexity involves will be handled.

The database created by simply extending SQLiteOpenHelper have no application tables in it. The process of creating the tables and handling the data will be set out next.

Data Storage and Handling

The complexity of any system or software can get extremely high. As GetMySL have shown, the simple concept of assigning shopping lists resulted in 40 plus class files, 30 plus resourse files and 30 plus PHP server files. By structuring the project to follow the Model View Controller architecture, a large percentage of complexity was removed.

Products Model

Part of the MVC architecture is the handling of data, the Model part. GetMySL will be handling a lot of products. To handle all the details of each product, the class 'Product' was created as a model. There are many attributes within current version of the Product class with each attributes handling a specific task. For simplicity and intructional purpose, the main attributes of the Product class are product ID, product name, price, size, image filename and the Bitmap image itself. With the exception of the Product's constructors, the class is kept as simple as possible to follow the POJO principle. The different constructors were created to handle the different default values of products.

To load, save and delete Products from the database, the 'ProductsHandler' class was created. Included in the ProductsHandler class is the ProductsDef class that holds all the Data Definition Language (DDL) to create the products table and all its columns. Though there are many different libraries to handle database interactions, constructing sql String is the chosen method for all the data definition and manipulation statements. The biggest short coming of the chosen method is the handling of nulls and currently, no elegant solution have been found. The GetMySL developer is open for suggestion.

Items Model

As with the products, model, handler and DDL classes were created for items and shopping lists. Within GetMySL, an 'Item' is defined as the inclusion of a specific product within a shopping list. The main attributes of an Item include a productId, a required number to shop for and an 'In-The-Basket' number. Implementation wise, an Item includes a productId rather than a product object. The reason is that a product can be included in several shopping lists via being part of items and that each product includes an image bitmap. Creating a product object for every items in every shopping lists will waste too much of the Android devices' limited memory. Instead, once there is a need to show a product, it is loaded into an array and can be searched by each item's productId. {Need to implement this or remove from this page:} Also, once the memory reaches a critical stage (80%), the whole product array is cleared and re-inserted as needed.

Shopping Lists Model

The main attributes of a shopping lists are shoppingListId, title (a.k.a. name), completionStatus and an array of items. The completionStatus will have many different statuses but whenever GetMySL is used as one's own shopping lists, the statuses are 'Item Preparation', 'Shopping' and 'Completed'. In 'Item Preparation' state, users can add or remove items along with changing each item required number. Users can change the required numbers by swiping left or right to add or subtract respectively. In 'Shopping' mode, users change the 'In-The-Basket' values by swiping left or right and also by double tapping to update an item's 'In-The-Basket' value to the item's required number. When the user is finished with the shopping, the list will be updated to 'Completed' where no further changes can be made.

The items inclusion in a shopping list is implemented differently from the product inclusion in a item. It is deem but not measured that all the items in all the shopping lists do not take much memory and therefore the two are loaded completely from the database during the creation of the home/first fragment. Though loading each shopping list's items from the database do not take very long, it is considered that this way is faster.

Connections Model

Connections allow users to confirm their relationship with each other and that they are willing to shop for each other. A 'Connection' model class, a handler class and a DDL class were created to handle all the Connections data as with the products, items and shopping lists. The main attributes of a connection are connectionId, name, email and a connection status. The statuses of a connection are Connection Pending, Connection Requested, Connected, and Connection Failed

Views

Views are all the components that users see and Android have an extensive library of views. Having said that, GetMySL views are generally simple LinearLayout, EditView, TestView, Button and ImageButton with ListView being relatively more complex with the usage of BaseAdapter and Gesture.

The View component of the MVC architecture is all the drawable, menu and layout resourses of an Android application. Drawable resourses are simply all the background, icons and other application images that are plug straight into the layouts. The menu resourse is simply an XML file that set out what the action bar displays.

Layouts on the other hand handle nearly all the complexities of GetMySL user interface. GetMySL uses fragments extensively and have left the activity layout simple. The activity layout is simply the 'main' container for all the fragments.

List of Shopping Lists Layout

The first layout to be inserted into the main container is the layout for a list of shopping lists. Apart from the list view, the subviews of the first layout include a simple EditText and two simple 'Button'. A peculiar feature of EditText is that it add lines to the field when the return character is tapped but shift focus when the 'inputType' is set. For this fragment, the inputType was set to 'text'. A peculiar feature of Android Button is that its text defaults to all capital and hence the two buttons' flag 'textAllCaps' was set to false.

The inclusion of a list view in the list of shopping lists layout is simple with the declaration of the ListView tag in the layout xml file being sufficient. However, to complete the listview, an abstract adapter needs to be implemented and assigned with a dataset. The BaseAdapter was chosen. the completed adapter will handle the display of each row of its assigned dataset and such display requires its own layout. The layout for displaying each shopping list is simply a view container that hold two 'TextView'. The implementation and assignment of the adapter will be discussed further in details as part of the Shopping Lists Fragment discussion.

Shopping List Layout

This layout display a shopping list and is the main interface for user interaction. The layout contains an simple EditText for the shopping list title, two simple TextView for completion status and summary, two Button for adding or removing items and progressing the shopping list, a sophisticated ListView and a general functions tab bar. The ListView is sophisticated in that it is able to handle short left or right, long left or right and double-tap gestures as well as the default up and down scrolling gestures. The tab bar is a simple horizontal LinearLayout with image buttons for functions that are not directly related to shopping. Such indirect functions are reverting changes, assigning, saving and deleting shopping lists.

(need to go through the projects to find points to talk about)

Add Or Remove Items Layout

Products Layout

Product Editor Layout

Server Client Architecture