Blog#4 - Implementation and UI Design

Katta Vinay Kumar, 19 June 2018

Introduction

We have completed the Requirements and System Design, now we are in the stage of Implementation and User Interface. In this phase, we translate class diagram and interaction diagram into active features. Implementation is the carrying out, execution, or practice of a plan, a method, or any design, idea, model for doing something.

Coding Conventions

Our team obeys the rules of “Elements of Programming Styles”. We emphasize on the consistency and the clarity of our codes so that the team members could share and communicate with the code. We work with the Javasoft conventions with simple convention code. For coding conventions our team utilised lower_case notation for most of the variables as shown in the figure below. This is because the developers of our team have a background in another object orientated programming language which is C++, thus leading to the coding convenetion of lower_case notation due to their coding habits.

Context of Use

In our application, we have identified two persons who will find the best use of it. Based on the different condition of usage and their task to achieve it.

Person 1: University Student

Name: Alex Manthar           Age: 26

Responsibilities:

  • Attending lectures and exercise classes.
  • Going for student jobs.
  • Attending parties on weekends at Hasselbachplatz.

    • Goals and Motivation:
    Alex wants to keep the record of his Party trips and wants to send his travelling route to his friends and family when he is returning home from the Party. Wants to help others who are in the emergency.

    Person 2: University Student

    Name: Sindy Misty            Age: 20

    Responsibilities:

    • Attending classes.
    • Working out.
    • Attending semester parties in university.
    Goals and Motivation:
    Sindy wants to share her trip tracking with her friends and family. And in the case in the emergency, she can use the SOS feature for her safety.

    User Interface

    The user interface (UI) is everything designed into an information device with which a person may interact. When we open the application, at first the splash screen appears

    Then, the landing page with the Publisher and the Follower.

    The Publisher is the one who creates the Event or the trip. The Follower is the one who follows the trip.

    Now the user has two options to choose either Publisher or Follower, here we take Publisher who can create an event.

    When the user clicks on publisher button, then the above second screen appears which shows “NO Trips”. If there are no current trips this will appear and there at the bottom, we have a button to create “New Trip”.

    Here on this screen, you will create your Event(Trip) by giving your destination in the “Choose Destination” button, adding your contacts whom you want to share your trip and you can add your privacy setting by how much time you want to share the trip. For example, 1,3,5 min. Then you can create your trip by clicking on “Create Trip” button.

    On the next screen, you can see the status of the current trip and which friends are following your trip. There is also a Break and Stop button where you can take a break for the trip for 15min,20min,25min. Stop button will stop your trip, in fact, it cancels the trip.

    Again, you have another option to create a New trip by clicking on the “New Trip” button. There will be another screen with adding New trip details as same as previous page options.

    We have a feature in our application called SOS feature. Here by clicking on SOS button you can send an emergency message to your friends. If the button has clicked accidentally you will have 5 secs to cancel it.

    Now coming to Follower, when clicking on the “Follower” button he/she can view the publisher’s trip and they have the option to choose yes I will follow by clicking on Tick or can decline by clicking on the Cross.

    These are some notification messages which appear like this

    Colours used in the User Interface

    Colours play a vital role in the User Interface. It encourages the users to use the application, the main motto of our application is to rescue the people who are in the emergency. We thought the blue colour would be good and for the blue colour dark background would suit so we took the background colour will be in grey.

    Key Changes:

    In our previous meeting with the customer, our team were hesitating to choose between "Firebase Realtime Database" and "FireStore Database". Eventually, we chose "Firebase Realtime Database" API as our main API to store all the data, as at this point, we have more in depth knowledge and experience in dealing with it. Furthermore, we also need to use JavaScript in our code especially while dealing with Firebase cloud functions. It is also worth mentioning that our team is developing on Android 6.0 as it is one the minimum requirement for one of our API, i.e. Place Picker. Moreover, our team is in the progress of implementing new push notification functions for newer version of Android, for example, Android 8.1.0.

    Summary

    We have done with the User Interfaces and in the implementation so far we are able to create a trip, pick a destination, store the location and send push notifications.

    **** THANK YOU ****