Data Interface

This week, I improved the user interface, implemented most of the data interface, and implemented some function of the Media part.

About the user interface, firstly, I placed the settings menu into the option menu. Secondly, I adjusted the margin of the chatting message, to make it less crowded. Thirdly, the background of the interface is slightly changed, and buttons now are turned into the rounded rectangles. And about the icons for the tab “CHAT” and “MEDIA”, it may take some time to create.

About the data interface, thanks to the dataflow diagram of Dan, and also with the help Chrome’s developer tool, I figured out how data was transmitted between server and client. And I designed two classes to implement the data interface. The first is HttpService, which implements HTML methods such as GET, POST, PUT and so on. HttpService is designed as a single-instance class, and interacts with the CouchDB server using JSON. The second class is CouchDB, which implements lots of specific data methods, just like those in services.js, by calling HttpService. Currently, these methods includes login, getSession, getFiles, createDir, register, getUserDoc, saveUserDoc, getMOTD, getChatDBInfo, longPollingChat, longPollingIM, longPollingUser, getMsgs, postMessage, queueMessage, and all of them return a JSONObject. But some of the methods has not been tested yet. And I don’t know how to implemented the uploadFile method. MediaGrid seems to use jQuery to upload file, and the content-type is multipart/form-data, and the data is bounded by something like this “——WebKitFormBoundarypsthWGZ9GBIxD93X”. It seems a little complicated. Could I just use base64 to code the file content, and specify something like base64 in Content-Type? Will the CouchDB server accept that? Thanks.

And about the Meida part, I implemented getting file list, and changing directory, and was going to achieve making directory and uploading. If the setting are correct(like user name, password, server ip and port), it works well.

Some pictures shows the result:

 

 

Interface Implementation

This week, Dan and I decided to develop a local application using Java, rather than just use PhoneGap to port the original MediaGrid. The local application has a lot of advantages, for example, it runs faster than that on PhoneGap, and it can be extended with some features such as GPS, Bluetooth and so on. While at the same time, to develop a local application is much more difficult because the database interfaces and AngularJS are all going to be changed.

Based on the interface designed last week, I’ve already implemented the interface of MediaGrid on Android. The structure of this project is as follows:

Image

ChatListFragment: Message list.

MediaListFragment: Media list(file list).

SettingFragment: Settings.

ChooseMemberActivity: Member list.

LoginActivity: log in.

RTPullListView: A pull-to-refresh list view, loading data asynchronously.

CouchDB: CouchDB wrapper(not coded).

DBMediaGrid: MediaGrid data provider (just returns test data for present).

GlobalUtils: Providing utilities and constants.

Now, here’s a detailed introduction about the main interfaces.

LoginActivity: Pick a user name, or click on an existing user name to log in.

Image

MediaMainFragment:

A ListView to show chatting items. On every item, there’s from ID, to ID, message time, and message content. The ListView is re-implemented as a PullListView, to supporting pull down refresh. The data and image (if there’s need) is asynchronously loaded into the PullListView in another thread. At the bottom lies a tool bar, containing “all” button, “send” button, and message input box. If “all” is clicked, A chooseMemberActivity will be shown.

Image

 

ChooseMemberActivity:

A list of all members, to select the target member to send our message.

Image

 

MediaListFragment:

A PullListView to show files and folders, with extra information like file size and file uploaded time. And at the bottom lies upload and makedir button. The two pictures shows the media list and its pull-to-refresh state.

Image

Image

SettingFragment:

Just three buttons: switch room, log out and about.

Image

 

CouchDB and Data Flow Learning

         CouchDB is a no-SQL database, which is significantly different with traditional relational database. CouchDB has no structure and everything is stored as a document, and accessed by key-value. MediaGrid uses CouchDB to store its data, because it’s easy to use.

         To access Futon, a couchdb’s util, just open 127.0.0.1:5984/_utils in browser where we can log in and manage our databases on web.

Using curl to manage CouchDB.

To check if CouchDB is running, using command:

Curl http://127.0.0.1:5984/

Where database version is returned.

To get a list of all databases, using command:

Curl -X GET http://127.0.0.1:5984/_all_dbs

To create a database, using command:

Curl -X PUT http://127.0.0.1:5984/mytest

If you’re not an admin, then specify your username and password in URL like this:

Curl -X PUT http://username:password@127.0.0.1:5984/mytest

Then {“ok”:true} should be returned.

To delete our database, using command:

Curl -X DELETE http://username:password@127.0.0.1:5984/mytest

To get a UUID, using command:

curl -X GET http://127.0.0.1:5984/_uuids

To create a document, using command:

Curl -X PUT http://127.0.0.1:5984/albums/6e1295ed6c29495e54cc05947f18c8af -d ‘{“title”:”There is Nothing Left to Lose”,”artist”:”Foo Fighters”}’

         And besides ‘title’, ’artist’, there two other fields _id and _rev. If you want to update or delete a document, _id and _rev should always be provided, in case you delete or update some document accidently.

        For data flow part, my mentor Dan is so helpful and amazing! while I asked him this, he draw the data flow with high efficiency and in very details as followed:

Here is the data flow diagram for the files page:
https://github.com/dismantl/MediaGrid/wiki/Files-sharing-data-flow-diagram

Here is a data flow diagram for the chat program:
https://github.com/dismantl/MediaGrid/wiki/Chat-program-data-flow-diagram

MediaGrid Interface Design for Phone Devices

After about 4 weeks’ relevant learning, this week I moved on to the porting process, the first step is design MediaGrid interface for phone devices, for the screen size of computers and phones are quite different, so we need a new interface for phone devices.

I designed a very primary user interface for MediaGrid on Mobile devices. In this primary design, there’re totally 4 user interfaces for MediaGrid, namely logging in, chatting, member selection, and media sharing.

Fig 1 shows the Logging-in interface. When logging in, user can either pick a new user name in the input box, or choose an already-existed user name from the list of buttons. And user is able to configure a database server by clicking “configure” button.

Image

After successfully logging in, here comes the main chat page as Fig 2. The top of it lies a tab to switch between chat and media. And there’s also a drop down menu at the right of them, which shows operations including “create/join a new room” and “log out”. In the center lies the chat contents, and each of the chatting item contains message, sender, receiver and time of the message. In the bottom lies message input controllers, including receiver, message input box, and send button.

Image

 

When clicking on the receiver, a list of users is shown as Fig 3, in which user can decide the receiver of the message.

Image

And when you switch the tab on the top to “media”, here comes the media sharing page. A list of files in current path is shown to the user, and each of the item contains information such as file name, size and uploaded time. The user is able to get into a folder or download a file by clicking the file item in the list. And at the bottom lies upload and make directory button. When user click upload button, a file choosing dialog will be shown. And when “Make Directory” is clicked, a dialog for directory name is shown.

Image

Source Code of MediaGrid–Media

The source code of MediaGrid consists of two parts: chat and media. The function of media is to The source code tree of chat is shown in the figure.

The main function code also lies in folder “script”. And here’s a brief introduction to the files contained in the folder:

  • ​app.js: Return or update list of files.​
  • jquery.js: JQuery library files.
  • ​startpage.js: Controls the action of main page.
  • services.js: CouchDB operations, such as upload files, create directories.

And files.html shows the table list of files, while index.html is the layout of main page.

Image

AngularJS on PhoneGap

AngularJS can be integrated into PhoneGap just the way  into web application. And this tutorial is based on tutorial “PhoneGap first-trying to build an Android App”. So suppose we have already created a simple hello application using PhoneGap, and we would like to use AngularJS to show a message in index.html, and dynamically alter content of message.

1. Add AngularJS library. AngularJS should be download at https://angularjs.org. And then go to the directory “hello/www” to create a sub-directory “lib/angular”, then move the downloaded “angular.js” into “lib/angular”.

2. We need to create the app module and controller for our application. To do this, create a file “app.js” under the folder “www/js”, and copy the code into “app.js”:

Image“hello” is the name of module, while “HomeController” is a simple controller of module “hello”, to set the variable “message” to “AngularJS!”.

3. In order to show value of “message” in pages, we need to modify index.html. First, include js/app.js and lib/angular/angular.js into index.html.

Image

Image

Then, add <html> with attribute “ng-app” to specify the module we defined in app.js:

Image

And add a “div” in tag <body> with the following content:
Image

ng-controller specifies the controller of this div, which is HomeController, as we declared in app.js. And {{message}} is used to show value of “message”, while ng-model=”message” can connect the variable message with the value of the tag input.

4. Rebuild the project in command line with “cordova build”, and run it on Android device. You should see a message “hello, AngularJS!”. And while you change value in the input text box, the message changes correspondingly.

Image

Source Code of MediaGrid-Chat

The source code of MediaGrid consists of two parts: chat and media. The function of chat is to post in public or private rooms, and the function of media is to sharing files among users. The source code tree of chat is shown in the figure.

The main function code lies in the fold script. As you can see, the fold contains several JavaScript files. Here’s a brief introduction to these files:

  • app.js:  Main router of a request, and returns desktop.html.
  • build.js: A compressed math library, contains some crypto algorithm.
  • chat.js: An outdated implementation of MediaGrid.
  • controllers.js: Controllers of the dialogs and chatting desktop.
  • directives.js: ???
  • filters.js: ???
  • jquery.couch.js: Jquery interface for couchdb.
  • jquery-1.7.2.min.js: jQuery library.
  • services.js: CouchDB database services.
  • utils.js: cryptocat functions and random number generation.

Except these files, index.html is the file to include all related JavaScript files, and provide an entry point of the application.
Among these files, controller.js and services.js provides are most important. So here comes a more detailed introduction to these files.

controllers.js:

Image

services.js:

Image

Image