Navigation

Building an Android To-Do Client

Deployment Type:
Client:

    Author: MongoDB Documentation Team

    This tutorial walks you through building an Android app that uses Stitch for the backend, and enables users to create and maintain to-do lists.

    Time required: 20 minutes

    What You’ll Need

    If you have not yet built the To-do backend app, follow the steps in this guide.

    Check Your Environment

    Check to see if your environment has everything it needs:

    Procedure

    A. Download the Application Source Code

    Estimated Time to Complete: ~2 minutes

    Download the MongoDB Stitch github tutorial repository and unzip it. The source code for the To-Do Android application can be found in the todo-android-1 directory.

    B. Configure and Run the Application

    Estimated Time to Complete: ~5 minutes

    1

    Open the project in Android Studio

    1. Open Android Studio.
    2. Select Open an existing Android Studio project.
    3. Navigate to the downloaded example directory and click Open.
    2

    Update project with your MongoDB Stitch App ID

    From the Project view:

    1. Go to the stitch-tutorial-todo-android/src/main/res/values folder and open the strings.xml file.
    2. Update the stitch_client_app_id with your MongoDB Stitch app id and save.

    Find Your App ID

    You can find your Stitch app’s App ID at the top of the left-hand navigation in the Stitch UI. Click the Copy button ( copy icon ) to copy it to your clipboard.

    The App ID of a to-do app in the Stitch UI navigation
    3

    Initialize the App Client

    You will now add the code needed to initialize the StitchAppClient. The StitchAppClient class provides all of the functionality for your app to communicate with the Stitch backend, including accessing the Authentication providers and Atlas service.

    In the onCreate method of the TodoListActivity.java file, find the // 1. Instantiate the Stitch client comment, and uncomment the next line. Add the code to instantiate a StitchAppClient object. When complete, your code should look like the following:

    @Override
    protected void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_todo_list);
    
    // TODO:
    // 1. Instantiate the Stitch client
    client = Stitch.getDefaultAppClient();
    
    4

    Instantiate a MongoDB Client

    For your app to communicate with MongoDB (Atlas), you need to create a RemoteMongoClient object.

    In the onCreate method of the TodoListActivity.java file, find the // 2. Instantiate a RemoteMongoClient comment, and uncomment the next line. Add the code needed to create the RemoteMongoClient. You should call the getServiceClient() method on the client object, passing in the RemoteMongoClient.factory and the name of your MongoDB service.

    Note

    By default, the MongoDB service in Stitch is named “mongodb-atlas”. If you provided a different name when setting up your Stitch backend, be sure to use that name here.

    When complete, your code should look like the following:

      @Override
      protected void onCreate(final Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_todo_list);
    
      // TODO:
      // 1. Instantiate the Stitch client
      client = Stitch.getDefaultAppClient();
    
      // 2. Instantiate a RemoteMongoClient
      final RemoteMongoClient mongoClient = client.getServiceClient(
         RemoteMongoClient.factory, "mongodb-atlas");
    
      // 3. Set up the items collection
      // items =
    
    5

    Create a RemoteMongoCollection

    You now need to create a RemoteMongoDatabase object to point to the todo database, and then create a RemoteMongoCollection object that points specificallty to the items collection. Your code will then use the RemoteMongoCollection for all CRUD operations against the collection.

    When you instantiate a RemoteMongoCollection object, you specify the name of the collection and the class that represents the data structure of the data stored in that collection. When storing a Java object in MongoDB, you need to define a custom Codec for your object, and pass that to the withCodecRegistry() function.

    At the end of the TodoItem class, you will find the Codec we have created for the TodoItem object:

     public static final Codec<TodoItem> codec = new Codec<TodoItem>() {
    
       @Override
       public void encode(final BsonWriter writer, final TodoItem value,
                      final EncoderContext encoderContext) {
       new BsonDocumentCodec().encode(
               writer, toBsonDocument(value), encoderContext);
     }
    
       @Override
       public Class<TodoItem> getEncoderClass() {
           return TodoItem.class;
       }
    
       @Override
       public TodoItem decode(
           final BsonReader reader, final DecoderContext decoderContext) {
           final BsonDocument document = (new BsonDocumentCodec())
             .decode(reader, decoderContext);
           return fromBsonDocument(document);
       }
     };
    

    In the onCreate method of the TodoListActivity.java file, find the // 3. Set up the items collection comment, and uncomment the next line. Add the code needed to call the getDatabase(), getCollection(), and withCodecRegistry() functions to create a RemoteMongoCollection object. When complete, your code should look like the following:

    @Override
    protected void onCreate(final Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_todo_list);
    
    // TODO:
    // 1. Instantiate the Stitch client
    client = Stitch.getDefaultAppClient();
    
    // 2. Instantiate a RemoteMongoClient
    final RemoteMongoClient mongoClient = client.getServiceClient(
       RemoteMongoClient.factory, "mongodb-atlas");
    
    // 3. Set up the items collection
    items = mongoClient
               .getDatabase(TodoItem.TODO_DATABASE)
               .getCollection(TodoItem.TODO_ITEMS_COLLECTION, TodoItem.class)
               .withCodecRegistry(CodecRegistries.fromRegistries(
                     BsonUtils.DEFAULT_CODEC_REGISTRY,
                     CodecRegistries.fromCodecs(TodoItem.codec)));
    
    6

    Run the todo app

    1. Click Run.

    2. If no virtual device is available, click Create New Virtual Device.

      1. Select the Phone device for your app. You can select any of the deviuce definitions.

      2. Click Next.

      3. On the System Image tab, you are presented with a list of Recommended images, all of which are x86-based. You must switch to the Other Images tab to see the full list of images, including those platforms supported by Stitch. Select one of the supported platforms (an ARM32, ARM64, or x86_64 device that is running an armeabi-v7a, arm64-v8a, or x86_64 image of Android 5.0 or later), and, if neccessary, click Download to download the image.

        Default images

        The list of Recommended images only contains x86 images, which Stitch does not support. You must switch to the Other Images tab to see the full list of images.

      4. Click Finish.

    3. Select the virtual device from the Available Virtual Devices.

    4. Click OK.

    5. Wait for the device to come online.

    6. Sign in using anonymous login.

    Summary

    Congratulations! You now have a working to-do app!

    What’s Next

    • Add Google and Facebook Authentication
    • Add User Account linking