Building Android Landmark App with AWS Amplify, Google Sign-In and GraphQL

This article is served to explain step by step guide to create a new Android App using Google Sign In API, Google Map API, AWS Amplify and DynamoDB to fulfil ours user stories, it demonstrates the GraphQL (Graph Query Language) empowerment App that simplifies the backend development or Mobile backend to be exact. GraphQL solves the Over-fetching and Under-fetching problem in REST protocol, the data fetching in GraphQL only require one round-trip to be enough to fill in the information on the front-end. AWS Amplify was a framework create by AWS to help developer build cloud-powered mobile and web apps easily, and it also help developer to generate GraphQL Schema model class and make GraphQL invocation very simple, on the back-end side, AWS Amplify integrate directly with AWS AppSync, which is a serverless back-end using GraphQL, other features like data synchronization and offline data access make it easily implement on the app. AWS Amplify can build App and back-end sorely on App development cycle, where you manage the backend provisioning in your Android studio, this work best for a very small team. It also can build App and integrate with backend which should be the best case for most of the team, in this article we will use the second method to develop our App.

User Stories

For simplicity, we will not worry about the “So that” business value in this tutorial.

1. As a user, I can log in using the google account
2. As a user, I can see my current location
3. As a user, I can make a note to a place I select on the map
4. As a user, I can search for a note

High-Level Diagram

Landmark MBaas

Prerequisites

Please follow the following installing to setup the pre-requisites enviroment.

Install AWS CLI

Install Amplify CLI

Create new AppSync App

Login into AWS Console, if you do not have one, you can register a free trial here. Navigate to AWS AppSync Console, or select from services list.

Start by click on Create API and use Create with the wizard for our case, continue with Start will create AppSync App using the wizard.

From the wizard steps, you require to name your first model, in our case we give it a name “UserLandmark”, and with the following model fields, with other configuration on the model, when you are ready, click Create to proceed.

Configure your model table for the extra setting like sort key.

Finally, you define your API name, we name it LandmarkApp, click Create to continue.

When the wizard completes, you will navigate to the following screen, which is your Queries screen to test your API, you can play around to familiar with the Queries console.

At this point we have our GraphQL App ready to integrate to our Android App, next we will move to the next section to create Android App with AWS Amplify framework.

Create a new Android App

Follow these step to create an Android App using Java. Modify your project/build.gradle with the following build dependency to cater for Google Sign in and AWS AppSync dependencies.

Add new Gradle extension and classpath:-

Add dependencies to your `app/build.gradle.`

Finally, update AndroidManifest.xml with the following and build your project.

Create Google Sign-In Page

Create new activity SignInActivity with basic activity template to allow the user to log in the google account, and SignIn page will be the first screen to start on the app.

Modified AndroidManifest.xml to set SignInActivity as the main activity

Edit activity_signin layout and replace with the following layout:

If you build successfully in the emulator it will look like this.

Google Cloud Platform project setup

Google Sign-In service is part of Google Cloud Platform service, which you require to sign up for a one-year free trial. If you do not have the account, you can get one here. After login into GCP, you can navigate to Cloud Resource Manager, and create a new project as below:-

After the project created, you will see the Google Cloud Platform page with lots of services.

For our case, we need an OAuth client credential to identify our app, so we need to tell Google service what is our app and namespace to only allow our app to access this service. Navigate to Credentials service under APIs & Services category

Navigate to the OAuth consent screen tab to configure your application name

Navigate back Credentials tab to select OAuth client ID from the drop down

Select Android Application type and input name of your App, and follow the instruction to generate a fingerprint from your machine to sign the package, you will need to copy your Package name from your AndroidManifest.xml.

If your using Mac you can follow the command below to generate your debug SHA1 fingerprint, the password is “android” for debug key store.

keytool -keystore .android/debug.keystore -list -v

At this point, your app is correctly set up to use Google service, next we will go into the Android Studio to configure the integration.

Integrate into Google Sign-In service

In Android Studio open your SigninActivity class, declare a variable for sign in constants and sign in Client instance.

In onCreate method, add a method to initialise the view as below:

Inside init view, we will define client event for sign in button, configure the sign-in client and connect the client. For simplicity few methods created for reusable, add in the following methods.

Another updateUI method and error method create to navigate to our main screen and display an error message. For the app to auto login from wake up we need to add the following code to navigate to MainActivity when their account not yet signs out from this app.

At this point, if you run your app, you should be able to sign in with your Google Account and navigate to the main screen.

Integrate with Google Map SDK

Google Map SDK require to use the API key to access the service, you need to navigate to APIs & Services to generate a new API Key by Click on Create credentials drop down.

You can further protect your API key only use by your app with the Key restrictions set up. It will require you to input your app package name and fingerprint.

After you generate your API key, go to Android Studio, add new string value in res/values/strings.xml with the key name “google_maps_key”.

And next, we will create a layout for our map view with a search box, copy the layout code below and replace existing.

Add location permission and enable map control

We need to add location permission to ask request permission from the user and enable my location and zoom control, to use Google Map API, you will need to enable the Android SDK in your GCP console like below.

To do so, click on the ENABLE APIS AND SERVICES and find Maps SDK for Android and enable it.

And copy the following code to MainActivity class to enable map control and permission.

The code above will request location permission, and enable the map accordingly. Some code being commented out temporary and will be used in the following step. Next, we will add function to display my current location. To detect current location we will need to use FusedLocationProviderClient and a variable to remember last known location. Un-comment out showCurrentLocation and add the showCurrentLocation as below:

Initialize fusedLocationProviderClient inside onCreate method.

Add in showCurrentLocation method and define the mFusedLocationProviderClient instance and mLastKnownLocation instance to find current position and remember the last location, at the same time uncomment out the showCurrentLocation and mLastKnowLocation code at UpdateLocationUI method.

At this point, you should see your current location if you run the App.

Integrate with AWS AppSync Using Amplify

Now you should have a ready interface for you to integrate actual Mobile Backend functionality, to do this, we need to go back to your AWS AppSync Console.

Select the LandmarkApp we create previously, go to the Integration step for Android as below.

Follow the guide to install AWS Amplify and initialize you Amplify in your Android Studio Terminal screen as below, you will need to configure your AWS default profile using your AWS API Key.

Select None for editor selection.

Select android for app type selection

Define root directory (Press enter for default).

Use AWS profile for Awscloudformation.

Select the default profile

Give it some time to connect to your AWS account to initialize some permission

This shown your project successfully initialized and connected to the cloud!

We will integrate our AppSync API, you should use your APIID.

Select region where you created your AppSync App.

Next, initialize code generation.

Reply Y to auto-generate all possible GraphQL operation which will be read from GraphQL Schema.

At this point, you have code generated for AppSync

Go to your res/raw/awsconfiguration.json to check your AppSync configuration is match your AppSync API ID. Check your GraphQL schema download at app/src/main/graphql/schema.json.

Create Add landmark Dialog screen

We will add the functionality to the map to add landmark when user long press to location, follow the steps below to add OnMapLongClickListerner and add Dialog to accept user input.

Edit updateLocationUI method to uncomment setOnMapLongClickListener as below.

Implement onMapLongClick, mutation method will be commented at the moment.

The code above build a Dialog with OK and Cancel button, OK button will perform an action to add the record to the backend, but at this point, we will comment out the mutation method to keep it simple, this is what you will get if you long press the map.

Integrate Add Landmark to GraphQL Mutation

Continue, we will integrate the add landmark to insert new landmark entry to our GraphQL backend, follow the step to initialize the AppSync Client.

Add a new private property to hold the client instance and update onCreate method to initialize AppSync Client.

Add in the following code to create the mutation method and mutation call back function.

If you notice the code above, we require addMarker method to plot a new marker when you set a landmark on the map. In addMarker method We will pass in the value from Dialog to addMarker method to plot the market, at the same time we will display the info window.

In order to insert new marker, we require to capture current login email, create the following method to get current login email.

Lastly, we will uncomment the mutation in onMapLongClick to enable the function.

Build and run the app, long press on the map, and verify the new entry insert into the DB.

Integrate search landmark to GraphQL Query

In this section, we will add the functionality to the search input to query AppSync backend. Follow the step below to add the query functionality.

As our button bind to onMapSearch method, add the following method to pass search input to the query method that we going to create in the next step.

Add query method and a callback method to talk to ours AppSync backend, the query will pass the comment to query using ours TableUserLandmarkFilterInput

We add clearMarker method and moveToMarkerCenter method to reset the marker every time perform search and move the camera view to the centre of the markers.

Build and run the app to test the query.

Conclusion

In this article, we use AWS AppSync as GraphQL backend and Google Authentication as our ID provider. We also using AWS Amplify to implement our Mutation and Query in Android Application. With AWS AppSync, we can choose how we resolve our data and respond to the user input, for a simple Application without involving too much Third Party integration, AppSync to DynamoDB is a good start, but for large scale Application, or Application involve complex business logic and heavy integration, AppSync to Lambda will be a good option to go. You can view all the source code in here.