SuperSample (Map Chat code sample) Android

Ask tech team
From QuickBlox Developers (API docs, code samples, SDK)
Jump to: navigation, search

Android-supersample-screen1-1.png

This is a complex sample of an Android application using QuickBlox. The application uses the QuickBlox modules Location and Users. Using this application, the user can see other users on the map. Users can use general Chat to communicate with each other.

IMG 0944 720.jpg

Contents

Start

At start user can see first screen, from wich they can register a new account or login. After registration, the user must confirm by email.

0.pngSuperSample-android-login-fb1.png3.png

Map

After login, user can see Map screen. Red marker — is your current location, blue marker — other users of the application.

User can tap on marker — creating a popup with additional information displayed on the screen.

4.png  51.png

Chat

User can communicate with other users by Chat (Chat over Map). Last user’s message is displayed in popup on Map.

61.png  71.png

For developers

1. Code structure

There are 2 top level packages in this sample:

  • com.quickblox.supersamples.sdk

This package contains all of the code for QuickBlox API services. If you want to develop your own application, you can copy this package into your project.

  • com.quickblox.supersamples.main

This package contains all of the code for SuperSample logic. It contains activities, views, helpers. All of these elements use "sdk" packages to comunicate with QuickBlox services. You can see how it works and use this information to develop your own applications.

2. Basic setup

First, if you want to develop your own application, You must do these steps:

  1. register account in admin.quickblox.com (or in our test server admin.qbtest.quickblox.com)
  2. create application in admin panel (admin.quickblox.com or test server admin.qbtest.quickblox.com) on your account. In application you can see:
    1. Auth key
    2. Auth secret
    3. Application id
  3. create empty Android application.
  4. copy com.quickblox.supersamples.sdk package to your application
  5. copy libs folder to your application and configure Build Path
  6. Remember! If you want to work with Google Map View, you must setup Google Google APIs Add-On and set it as target and obtain your own Maps API Key and past in to MapView android:apiKey field in XML (1.5 step).
  7. Note: if you want to use Messages module, you need to obtain Google API key https://code.google.com/apis/console and set it in Admin Panel (admin.quickblox.com). More information about GCM situated here http://developer.android.com/guide/google/gcm/gs.html
  8. in class com.quickblox.supersamples.sdk.definitions.QBQueries.java past to static field APPLICATION_ID, AUTH_KEY, AUTH_SECRET your values from step 2
  9. First, before work with QuickBlox you must authorize your application:
Query.authorizeApp(this);

You will receive token, which you must store. This token is required for interaction with QuickBlox services.

@Override
public void completedWithResult(QBQueryType queryType, RestResponse response) {
	switch (queryType){
	case QBQueryTypeGetAuthToken:
		if(response.getResponseStatus() == ResponseHttpStatus.ResponseHttpStatus201){
			Store.getInstance().setAuthToken(response.getBody().findChild("token").getText());
		}
	}
};

Then you can start developing your own application!

3. "Query" instance

All queries to QuickBlox services performs com.quickblox.supersamples.sdk.helpers.Query.java class. It has 2 static methods:

  • performQuery. Method performs synchronous query:
public static RestResponse performQuery(QueryMethod queryMethod, String query, HttpEntity queryEntity, Header []headers)

Method takes next arguments:

  • QueryMethod queryMethod - GET, POST, PUT, DELETE
  • String query - query (class QBQueries)
  • HttpEntity queryEntity - number of parameters for send to server, e.g. for POST/PUT queries
  • Header []headers - query's headers

Method returns RestResponse object, witch has next fields:

  • ResponseHttpStatus responseStatus - response status, e.g. 200, 201, 404, 422...
  • Header []headers - number of headers
  • XMLNode body - parsed body
  • ResponseBodyType responseBodyType - type of body, e.g. single element, array of elements, errors.
  • performQueryAsync. Method performs asynchronous query:
public static void performQueryAsync(final QueryMethod queryMethod, final String query, 
			final HttpEntity queryEntity, final Header []headers, final ActionResultDelegate delegate, final QBQueries.QBQueryType queryType)

Method takes next additional arguments:

  • ActionResultDelegate delegate - callback class
  • QBQueries.QBQueryType queryType - type of the query.

4. Perform query

This piece of code shows how to perform query for registering new User:

	// create entity
	List<NameValuePair> formparamsUser = new ArrayList<NameValuePair>(); 
	formparamsUser.add(new BasicNameValuePair("user[full_name]", editFullName.getText().toString()));
	formparamsUser.add(new BasicNameValuePair("user[email]", editEmail.getText().toString()));
	formparamsUser.add(new BasicNameValuePair("user[login]", editLogin.getText().toString()));
	formparamsUser.add(new BasicNameValuePair("user[password]", editPassword.getText().toString()));
 
	UrlEncodedFormEntity postEntityUser = null;
	try {
		postEntityUser = new UrlEncodedFormEntity(formparamsUser, "UTF-8");
	} catch (UnsupportedEncodingException e1) {
		e1.printStackTrace();
	}
 
	// perform query
	RestResponse response = Query.performQuery(QueryMethod.Post, QBQueries.CREATE_USER_QUERY, postEntityUser, null);

5. Perform async query

You must implement ActionResultDelegate interface in your class.

public class RegistrationActivity extends Activity implements ActionResultDelegate{
        public void onClickButtons(View v) {
                switch (v.getId()) {
			case R.id.buttonRegister:
 
                                // create entity
				List<NameValuePair> formparamsUser = new ArrayList<NameValuePair>();
				formparamsUser.add(new BasicNameValuePair("user[full_name]", editFullName.getText().toString()));
				formparamsUser.add(new BasicNameValuePair("user[email]", editEmail.getText().toString()));
				formparamsUser.add(new BasicNameValuePair("user[login]", editLogin.getText().toString()));
				formparamsUser.add(new BasicNameValuePair("user[password]", editPassword.getText().toString()));
 
				UrlEncodedFormEntity postEntityUser = null;
				try {
					postEntityUser = new UrlEncodedFormEntity(formparamsUser, "UTF-8");
				} catch (UnsupportedEncodingException e1) {
					e1.printStackTrace();
				}
 
				// make query for creating a user
				Query.performQueryAsync(QueryMethod.Post, QBQueries.CREATE_USER_QUERY, postEntityUser, null, 
						this, QBQueries.QBQueryType.QBQueryTypeCreateUser);
 
                        break;
                }
        }
 
        @Override
	public void completedWithResult(QBQueryType queryType, RestResponse response) {	
		switch(queryType){
                        case QBQueryTypeCreateUser:
                                // OK
				if(response.getResponseStatus() == ResponseHttpStatus.ResponseHttpStatus201){
                                        // do something
                                        ...
 
                                // errors
                                } else if (response.getResponseStatus() == ResponseHttpStatus.ResponseHttpStatus422) {
                                       // show errors
                                }
                        break;
                }
        }
}

6. Add new query

Class com.quickblox.supersamples.sdk.definitions.QBQueries.java contains a lot of queries, but you can add other (all QuickBlox APIs you can see on wiki.quickblox.com). For this, you must do 2 things:

  • create static field, e.g.
public static final String CREATE_USER_QUERY = String.format("http://%s/users", USERS_SERVICE_HOST_NAME);
  • add item to enum QBQueryType, e.g.
public static enum QBQueryType{
         ...
	 QBQueryTypeCreateUser,
         ...

Then you can use it in your code.

7. Conclusion

That's all. Good luck!

Demo video

Sources

Download ZIP for stable version — https://github.com/QuickBlox/SuperSample-android/zipball/master

Project homepage on GIT — https://github.com/QuickBlox/SuperSample-android

Clone from GIT dev version — git@github.com:QuickBlox/SuperSample-android.git