27 Illustration 17: Sign in; the user can type his or her credentials to login to his or her account, to log in or to recover the account's password. If the user has already logged in before he or she is redirected to the home view without logging in again. 30 Illustration 20: Review image view; in this view the user can review the captured image and can decide between canceling this capture by tapping the "X" button, saving the image for personal use by tapping the save button (in which case the pop-up that can be seen after informing him or her about the success of his or her action), or tap the tick button to continue creating the report.
31 Illustration 21: Create an incident report view; In this view, the user can tap the text area to enter a brief description of the event, can move the slider to define the emergency level of the reported event, can tap the back button to return to the image review view, or finally tap the submit button to you send the rating to the server. 33 Illustration 23: Menu view; here, the user can tap the back button to return to the initial view, or tap one of the four choices to navigate to their views. 34 Illustration 24: View of my account; in this view, the user can see their credentials and change them by tapping the "save changes" button, or return to the menu by tapping the "back" button.
35 Illustration 25: My reports view; in this view the user can view his or her previous reports as well as go back b by tapping the "back" button. 37 Illustration 27: My settings view; in this view, the user can set his or her personal settings (if he or she wants to receive notifications from the application or use a mobile data efficient mode of the application to avoid spending too much mobile data).
INTRODUCTION
BACKGROUND WORK
Systems for Civil Engagement
Previous and Similar applications
APPLICATION DESIGN
- User-Centered Design (UCD)
- User requirements analysis
- User groups
- Task analysis
- Usage scenario
- Prototyping
- Wireframes introduction
- Low fidelity wireframes
- Usability Testing
- Introduction
- Testing conditions
- Testing results
- Changes made based on the results
- Summary
He taps the "next" button and he writes a brief description of the incident he's reporting. Prototyping is the process of developing prototypes, an integral part of user-centered design. A wireframe can be described as a sketch, a basic visualization of the final product that represents the layout of that product [4].
It usually does not have complex graphics and can be used to measure the practicality and performance of a product. The decision for these two scenarios was made due to the nature of the application, which can also be used under time pressure. After a thorough study of the notes and videos, the biggest drawback was that five out of ten users got confused in the final view (the one where the user types the event description) of the app after typing the event description. incident.
In this chapter, the research and analysis conducted before the implementation of the human-computer interaction application was reported. In the next chapter, more technical details about the technologies used will be presented to begin to get a more concrete picture of the final application.
IMPLEMENTATION
Introduction
Server-side
- REST
- Django – Django REST Framework
In contrast to these simple path layouts, the reader may have seen paths like this “https://mySite/i=&dniOIGG#ASbbm&uPOu” which do not really improve the user experience. The last idea is the idea of the reaction; the server responds to the requests by sending back responses while using two main concepts. The concept of the content-type, which is a field in the header of the response and declares to the client the type of data that is returned, and the concept of response code that informs the client of the success if she requests and in the event of failure a reason for the failure.
The framework used on the server side is Django, which is a high-level Python web framework available as free open source. In this type of architectural pattern, the model is responsible for managing the application's data. It responds to a request from the "view" and also responds to instructions from the template to update itself.
The main advantages of Django that attract developers are the reusability and "pluggability" of content, which can lead to fast and highly productive development, while preventing developers from repeating code. It provides the developer with some very useful tools that are implemented in almost every web application. Serializers are methods that allow complex data types and data models written in Python to be easily rendered in JavaScript Object Notation (JSON) or Extensible Markup Language (XML).
JSON is an open-standard file format primarily used for asynchronous communication between a server and a client. It consists of a series of key-value pairs written in human-readable text form. In our application they are used to send data from the server to the client and they are extremely useful as they allow us to send a java object to a python server which would otherwise be a very difficult task.
Their main functionality is to "translate" a Python object into JSON format that can be read by the client, as well as to "translate" a JSON-formatted object received by the server into a Python object ". One of the reasons why Django was chosen as the server-side framework was to explore and learn how to solve any kind of complications that may occur while developing an application that uses Java at the same time (for the client/Android front) -end) and Python (for the server). Moreover, Django is scalable and reliable, which gives us the perspective of an easier extension of the application in the future.
Android application
- Android operating system
- Android development
- Picasso
- Retrofit
- Google Mobile Services (GMS)
- Camera 2 API
Another reason was the flexible admin page provided by Django, which is more suitable for this application, keeping in mind that they will only review incidents. The user interface of an Android application is written in Extensible Markup Language (XML) and can be controlled and influenced by the application development language (i.e. Java). For example, if we have a view with a single button, the color and position of the button would be specified in the XML file, and the action performed when the button is touched is specified in the Java file.
To have a functional view/activity, that activity's class must extend one of them. to adapt them to suit the particular needs of the functionality being implemented. For example, the "onCreate" method, responsible for the actions to be taken when this view is first created, can be overridden in order to load our view's custom resources). In the following section we will introduce some basic external libraries that are used during Android application development.
It achieves an optimized image approach by using adapter downloads that detect an already cached image and prevent the application from downloading it again, automated image transformation algorithms that optimize the image to fit any view, and reduce memory size. At the same time, Picasso offers general methods that can be applied to many types of image objects. This is done by making available to the user five built-in annotations about the request method that can be used when the client is constructing a request as well as convenient annotations for modifying the path, header, and content of a request.
Furthermore, it gives the developer the option to make those request calls synchronous or asynchronous, which can be a very useful feature in Android where a synchronous call can block the main thread and cause delays in rendering the UI. This API was used to ensure that the user's coordinates are sent at the time of the incident reporting along with the other information regarding the incident. One of the most important decisions that had to be made during the development of the application was the version of the Android camera API to be used.
The only downside to this is that from Android 5.0 onwards it was declared deprecated by Google and replaced by the Camera 2 API. While that was the case, by taking advantage of the backward compatibility feature that the Android operating system has, most developers have stuck with the older API and are still using it instead of the latest one. In addition, the new API offers some features related to the quality of the images, as well as the ability to create a custom camera view instead of using the default view.
Presentation of the application
- Android client-side
- Django server-side
If the user has already logged in before he or she will be redirected to the main view. Below, the CIR application administrator can review the incidents reported by citizens and assign them to the appropriate department for investigation. A search field is implemented, so the administrator can search for keywords in the reports, incidents can be sorted by each of their fields by simply clicking.
There, the administrator can view all the details of an incident and click on its image to get more information about it. In addition, the administrator has the option to edit some details in case a mistake has been made. There the administrator can view all logged in users, as well as their IDs.
There, the administrator can see all the details of a user as well as make any necessary changes to their accounts.
Summary
CONCLUSION
Future Development
ANNEX
