Mini Project - Phase 3 Connexus Mobile App (Android)

Transcription

1 Mini Project - Phase 3 Connexus Mobile App (Android) Click here to get Connexus apk. It is inside the shared folder Here is my github repository: The 3 rd phase is in the MiniProject-Phase3/Connexus subdirectory Connexus Logo (Inside The Red Circle) Connexus Login Page 1

2 License Agreement (Only appears on the first time you press sign in) After successful sign in, you will receive a greetings message and your avatar appears on the top left hand side of the screen (This is a customized circular ImageView) As you can see this app is integrated with Google+ API. You can sign out or even revoke your license agreement at any time! You just need an internet access! Here are the links I have read to make this integration possible: 1-2 2

3 Here is my credential for this project at developers console: The Google+ API should also be activated: Some other activated APIs are irrelevant here. I have just activated them to test some stuff. 3

4 As you can see if you get disconnected from the internet you cannot sign in (You still can view the streams) If you click on the provided link on the screen, you will be redirected to Connexus web-app! Throughout my application, I have used Toasts to provide some useful feedback to the user. The messages are minimal and efficient to enhance the user experience. 4

5 This is the View Streams page. As you can see, each stream view contains the cover photo and the name below it. The search is provided on the top right hand side of the action bar. It requires less space and is more user friendly! Technical notes: View streams work as follows: An asynchronous HTTP request will be sent to the Web API to find out whether the app is sync with the server or not. The technique used here is comparing the MD5 hashed values of the last received JSON response with currently calculated value. If they are equal, no further action is required. If not, the second HTTP request will get the updated values and fetch them inside the grid view. Note that for each stream, we receive the cover url, name and whether the current user is the owner or not. 5

6 The search performs two kinds of queries. The first one is a query on stream name. The second one is search by author s address, which is the same feature of my web app on phase 2. In other words, you can search for -> author: test@example.com and you will receive the top 5 streams of that specific person. This is the same page when the user is not signed in My subscribed streams button is invisible! 6

7 As you can see, the Pets stream is empty, so a text-view in the center of the image provides the feedback to the user. TV Shows have several images. Since I am the owner, the Upload button is enabled. Also the more button (>>) is disabled since there are no more images to show! Technical notes: I have used the Picasso library to retrieve and fetch images inside my GridView. Using this library has several benefit: We do not need to keep all images on RAM. They are stored on disk and will be fetched on demand. It is also useful when you change the orientation of your device. The cache mechanism used in Picasso benefits both the client user and the server: The client can save some internet data by receiving each image once. The load over the server will be reduced because each user receives an image once and keeps it locally. 7

8 The library uses a placeholder image to substitute each image until it is loaded from the disk -> It pays attention to the user experience. Conclusion: This library will help us in using our resources efficiently and make this application more robust and scalable. It also makes it more suitable for older devices with less RAM and reduces the dependability to internet connection. Here you can see how placeholders look like. It appears for a short moment and taking this picture was kind of hard. :D As, you can see I am not the owner of this stream, so the Upload button is disabled. But, the more button is enabled. Because it has a next cluster of images to show. 8

9 This is the upload activity. As you can see, we have two options to choose from and the Upload button is disabled. This is the image which I chose from my library. Now the Upload button is enabled. You can also see a thumbnail of the image which is depicted using a customized ImageView. The image here is just a thumbnail for the user to make sure what he/she is uploading. The actual image which will be uploaded is in camera s maximum size. Caution: A robust app need to check whether the user s device has a camera or not! To address the needs of wider users, having a camera is not required for my app. But, here I check whether the device has a camera or not. If not, the Use camera button will be disabled. 9

10 Here is the camera preview. You can see the view from backside camera and by pressing the camera button, the image will be captured and you can confirm it by pressing the check mark button. Wow look at the progress bar! It has the actual amount on the left and the percentage on the right. I have done it as an extra feature. The Upload button is also disabled again. When the file upload successfully completes, the user will receive a notification via Toast. No matter which activity he/she is looking at! So, this upload is done asynchronously and does not prevent the user from exploring the app. Technical note: Adjusting the orientation of the camera is a little tricky. It took me a while to handle it. 10

11 Another point that is worth mentioning is the Location API to tag images with lat-long coordinates. I used the ACCESS_FINE_LOCATION level, which is much more accurate than ACCESS_COARSE_LOCATION but it requires higher permission from user when asked to install. Here is the result I got for uploading and image: The 7 images in this photo are all uploaded by my phone. The location shown, is my precise location at the time I uploaded these pictures! Note: The above image is captured from the Geo View mode of TV Shows stream at my Connexus web app. 11

12 This is for a scenario where the user do not have any subscriptions. Now, imagine a case where the user has two subscriptions. 12

13 Here is the search result, when no stream is found. In this scenario, we have 2 matches for the query. The No results found message is a TextView which is replaced by the GridView if no result is found. Also the search query is shown on the action bar. 13

14 This is the nearby images activity. The images are sorted according to their distance with my current position. By pressing more button, we will ultimately reach the end of the images and the more button is now disabled. You can see that the Upload button is invisible here. 14

15 *Extra feature* You can click on any image in a stream. The full screen version will appear in a new activity! You can swipe you finger on the screen to switch between images! No new activity is created. I have just modified the attribute stored in the intent manually. I was also conscious about the boundaries. Here you can see the full screen image. Just swipe your finger to switch between images Also, changing the orientation is fine. :) 15

16 *Extra credit :: Performance Analysis* In this section I have used Android Device Monitor. I have done some performance analysis using Traceview. Here is the result of method profiling: First, a close up of the timeline panel. Each thread s execution is shown in its own row, with time increasing to the right. Each method is shown in another color (colors are reused in a round-robin fashion starting with the methods that have the most inclusive time). The thin lines underneath the first row show the extent (entry to exit) of all the calls to the selected method. (Taken from here) Some column definitions: Exclusive time is the time spent in the method. Inclusive time is the time spent in the method plus the time spent in any called functions. To modify the backend response time, there is a Min Pending Latency option in Application Settings on App Engine console. By default it is set to automatic, but you can change the amount of time user needs to wait before another instance of your app is created. You can adjust such settings at the console to adjust your backend performance. 16

17 Here is my network statistics: In this scenario, I first opened some streams and viewed some images. As you can see, the network access during the receive part (RX) is fairly small (~33KB) That s because Picasso already has stored the images on my phone and it just does a check to make sure it is in sync with the cloud backend. Next, I chose and uploaded an image from my gallery. As you can see, we have heavy network access on the transmit (TX) side. (~825KB, which is a little more than the size of the uploaded image) The following image is what I got from the allocation tracker: 17

18 Some images from my app in landscape orientation: Clicking on image, makes it full screen. View Streams A Single Stream View Subscriptions Some final notes: The Web API which is the backend of this mobile app, is built on top of the same web application as my phase 2, which is: This means my web app and mobile app are completely in sync. For, example, you can upload an image to one of them and see it instantly on the other. There are new.py files corresponding to new requests designed exclusively for this mobile app. the mapping follows /m_.* regular expression. For example, sending POST request to /m_subscribed with enough credentials will give you the JSON formatted response for your subscribed streams. 18

19 All Images Are Captured on: Target OS: Kitkat (4.4.2) API 19 Min OS: Honeycomb (3.0) API 11 IDE: IntelliJIDEA (13.1.5) Operating System: Thank you for reading this document! This was my first android programming experience and it was a really awesome one! :) Nima Dini November 8, 2014 P.S: This document is created by Google Docs 19