Lab 2.4: Developing the Complete System (Client Side)

Android application

We are done with the server, lets now unleash the android power to make our work a bit meaningful! We need mainly three activities:

  • MainActivity Lists the locations by calling <your server>/locations/ by a GET request. It  also has a button “Add Location” that launches another activity “CreateActivity”.
  • CreateActivity: Mainly a form of two entities (Location name and description)  plus reading GPS and a button to make a POST request.
  • DescActivity: Shows location name, and description. This is called when an item is clicked in MainActivity.
  • SettingActivity: to save a DNS server since it changes often. You should use menu button in MainActivity to launch this activity.

Create Android Studio Project

  • Create a new android project (name it Lab-2.4). This time choose “Basic Activity” instead of “Blank Activity”

 

AndroidManifest.xml

Add following permissions.

 

MainActivity

You need to fetch JSON data from <your server>/locations/, parse it, and display as list.

  • Add the following lines to onCreate(). It calls the command to fetch JSON data from the server if network is available. Make sure to update the value of this.url to point to your computer LAN ip address (run ifconfig to find your computer’s ip address).
  • Add this helper class inside MainActivity class to handle the actual fetching of JSON data.
  • Add this code inside MainActivity class to parse JSON data fetched from your server.
  • Add a button and a ListView to content_main.xml. ListView can get entries dynamically from the code to expand with items.
  • We want each item in the list to include name, and (x,y) coordinates. Add this code inside MainActivity:
  • Run the application and make sure that it fetches and displays the locations from your server.

 

DescActivity

We can now fetch and display the locations from your server. The next step is to show the details of individual location whenever it is selected from the list. We will add DescActivity to achieve this. Follow these steps to add a new activity:

  • In Android Studio from Menu Bar, select File => New => Activity => Blank Activity. A new window will appear:
  • Type DescActivity in the Activity Name field, and click on Finish to add the new activity descactivity
  • This activity should simply show the location name and description.

  • The layout design is quite straightforward. Add two TextViews to activity_desc.xml.
  • In onCreate() method of DescActivity, you need to send a GET request to <your server>/locations/<location name> and parse the returned text. Add this to onCreate() method.
  • Add this helper class inside DescActivity class to handle the actual fetching of JSON data.
  • Add this code inside DescActivity class to do the parsing job.

  • Add this code inside MainActivity class to start DescActivity whenever a location is selected from the list.
  • Also find and uncomment the following line in MainActivity class.
  • Run your application. Click on a location from the list and DescActivity should start, showing the name and description of the selected location

 

CreateActivity

  • Add a new activity and name it CreateActivity (refer to previous section on how to add a new activity).
  • The layout design is quite simple. EditTexts for location name, description, and TextViews showing your current coordinates. Add this to activity_create.xml.

  • Add these variables inside CreateActivity class (before onCreate()):

  • Add this to onCreate() of CreateActivity to initialize variables and read location.
  • When the user clicks the SUBMIT button, first you need to take the data from the form and the coordinates, encode it using JSON. After the JSON is ready, a POST request should be sent to the server. Post is quite similar to GET, you need a separate thread running as well. Use AsyncTask for POST requests as well. The following code should do that. Add it inside CreateActivity class:

  • Add this code inside MainActivity class to start CreateActivity whenever Add New Location button is selected.
  • Run the application and make sure that you can add new location to your server.
  •  

    SettingActivity

    In lab 1.2, we stored key-value pairs. Here, we write a similar code to store the URL address. Use Context.getSharedPreferences instead of getPreferences in order to store cross activity preferences.

    • Add a new activity and name it SettingActivity.
    • Add the following to activity_setting.xml
    • Add these variables inside SettingActivity class (before onCreate()):
    • Add this to onCreate() method of SettingActivity.
    • Add this method inside SettingActivity class. This method will be called whenever “SAVE” button is selected.
    • In onCreate() method of MainActivity, change the value of this.url as follows.

    • This activity should be accessed from MainActivity menu button. By default, you will find setting button added there. You need to implement it. Modify onOptionsItemSelected() method of MainActivity so that it looks like this.
    • Run your application and make sure that everything is working.

     

    Exercise 2.4

    • Make sure the application is running.
    • Extend the application so that users can delete or update a certain location.
    • Change the server side so that it duplicate entries are not stored.

     
    Optional

    • Make sure the settings menu is accessible from every activity so that you can update url no matter which activity is currently active.
    • As a bonus, instead of showing coordinates in the ListView, it would be nice to show distance from your current location and sort the listing by distance. You may use formulas shown in this site.
    • Read status code from each HTTP connection and show errors appropriately. Also try to make it bug free through proper exception handling.

    How to Submit

    Copy the final exercise files into ‘lab-2.4’ inside the git repository.
    Add, commit, and push your changes to the remote server.

    The deadline is before the next lab.