How to make a Simple, Android Hand Gesture App with SashiDo and Teachable Machine

vaishnavi5183 — Mon, 05 Oct 2020 14:29:20 +0000

Making an app can sound easy, but is oftentimes confusing, especially for beginners. If you are a complete beginner to Android Development and SashiDo, this tutorial is for you! In this tutorial. I’m going to show you how to easily develop an app that recognizes hand gestures used in ASL (American Sign Language) and teaches users how to sign in ASL.

Before getting started, I strongly recommend learning the basics of Java, as it will make learning Android Studio much easier. Additionally, If you haven’t done so, please download Android Studio and make an account on SashiDo. Once you’re on SashiDo, click “create new app.” Now, follow the instructions, and your app is created! (You can skip the “getting started” stuff for now.)

Click on Create New App and follow the instructions!

Ok, now we can get started with the tutorial! Below is the table of contents, feel free to click around the sections as you please.

About the Project
Connect SashiDo to Android Studio
- Connect App using Parse
Make App User Interface
User Registration
- Sign Up
- Login
- Logout
Push Notifications
Closing Remarks

About the Project

This tutorial is based on an app I created called FunSchool. FunSchool is an app that uses a ML model to teach ASL letters. The app uses SashiDo for its database and Push Notifications and Teachable Machine for the ML model. Below is a short runthrough of the layout of the app and the ML model. The ML model is trained on Teachable Machine and is hosted on github. Here is the github repository for the whole project for your convenience!

Runthrough of the App

Runthrough of ML model

Github repo for whole project

vaishnaviHimakunthala / FunSchool

An app that uses teachable machine and SashiDo to make learning ASL easy.

Connect SashiDo to Android Studio

Ok, now that we have created our app on SashiDo, we now have to make our app on Android Studio.

Open up Android Studio and click on “Start a new Android
Studio Project”
1. Click the “Empty Activity” template
2. Name your app and make sure the language is in Java
3. While that’s loading, go to your dashboard on SashiDo > App settings > Security and Keys.
4. Now go back to Android Studio and open your “build.gradle(Project:Your project name)” file
5. Add this code after the “dependencies” tag

allprojects {
   repositories {
       maven{ url "https://jitpack.io"}
       google()
       jcenter()
   }
}

Now, go to your “build.gradle(Module:app)” file and add this implementation

implementation "com.github.parse-community.Parse-SDK-Android:parse:[Latest:Version:Here]"

Note: You can find the latest version at jitpack.io

Search this up in the Git repo URL box and press “Look Up” to get all the versions of Parse available.

Click ‘Sync Now’ on the top section of your Android Studio Gradle file to sync your gradle files.

Connect App using Parse

To make your app have access to the internet, go to your AndroidManifest.xml file (app>manifests>AndroidManifest.xml) and add this code before the application tag.

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />

Add this code in the “application” section in the AndroidManifest.xml file

<meta-data
   android:name="com.parse.SERVER_URL"
   android:value="@string/SashiDo_server_url" />
<meta-data
   android:name="com.parse.APPLICATION_ID"
   android:value="@string/SashiDo_app_id" />
<meta-data
   android:name="com.parse.CLIENT_KEY"
   android:value="@string/SashiDo_client_key" />

Now go to the strings.xml file (app>res>values>strings.xml) and add this code

<string name="SashiDo_server_url">https://pg-app-tcbt8h75fl11zv9cv0zqzes6ebsjef.scalabl.cloud/1//</string>

<string name="SashiDo_app_id">[your app id here]</string>
<string name="SashiDo_client_key">[your client key here]</string>

Copy-paste your app id and client key from SashiDo. The server URL is under the API URL address box in SashiDo.

Now create a java class in Android studio called “App” that extends “Application” (You can do that by going to file>New>Java Class). Import the following:

import com.parse.Parse;

The class name should look like this:

public class App extends Application {

Now inside the class, inside the onCreate() function, add this code:

import android.app.Application;
import com.parse.Parse;

public class App extends Application {
   public void onCreate(){
       super.onCreate();
       Parse.initialize(new Parse.Configuration.Builder(this)
               .applicationId(getString(R.string.SashiDo_app_id))
               .clientKey(getString(R.string.SashiDo_client_key))
               .server(getString(R.string.SashiDo_server_url))
               .build()
       );
          }
}

In the AndroidManifest.xml file, add this line inside the application tag

android:name=".App"

Now let’s test! In the main activity of your app, add this code:

ParseInstallation.getCurrentInstallation().saveInBackground();

Click run, and go to your SashiDo database. You should see the installation in your database.

Make App User Interface

Now, this is the fun part! I recommend drawing a simple sketch of the layout of your app on a piece of paper. Once you are done with that, you can make a prototype of your app. My personal favorite prototyping tool is figma as it’s completely free and super easy to use. If you want to check out my design, then you can take a look at the gif in “About this Project” section of this tutorial. Once you know exactly how your app is going to look like, convert the design into Android studio. You must have the UI of your app ready before going on to the next step. If you are making a User Registration page, then check out the next section, where I’ll go through how to make the User Registration Page functional using Parse.

User Registration

Sign Up

Before we get started coding, first initialize all of your EditTexts and Buttons that need functionality. Reminder: Use findViewById() to initialize the EditTexts, Buttons, or whatever needs functionality in your UI

Ok, now look at this code!

ParseUser user = new ParseUser();
user.setUsername(<Name for proper EditText>.getText().toString());
user.setPassword(<Name for proper EditText>.getText().toString());
user.signUpInBackground(new SignUpCallback() {
   @Override
   public void done(ParseException e) {
       if (e == null) {
           display("Thank you for Registering!","Welcome" + <Call EditText with username/email> + "!");
       } else {
           ParseUser.logOut();
           Toast.makeText(<This Activity’s name>.this, e.getMessage(), Toast.LENGTH_LONG).show();
       }
   }
});

The first line of this code makes a new ParseUser. The text in <> is what you need to change. For example, if you initialized the EditText as emailId for the user’s username, then the 3rd line will be: user.setUsername(emailId.getText().toString());
This code should be run when your “SignUp” or “Register” button is clicked. So, call the onClick method first, then put this code in the method.

In the if block, you probably noticed that I called a function called Display(). This function will display our message if the registration was successful. Here’s the code for this function.

private void display(String title,String message){
   AlertDialog.Builder builder = new AlertDialog.Builder(<Name of this Activity>.this)
           .setTitle(title)
           .setMessage(message)
           .setPositiveButton("OK", new DialogInterface.OnClickListener() {
               @Override
               public void onClick(DialogInterface dialog, int which) {
                   dialog.cancel();

                   Intent intent = new Intent(<Name of this Activity>.this, <Name of the next Activity>.class);
                   intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TASK | Intent.FLAG_ACTIVITY_NEW_TASK);
                   startActivity(intent);
               }
           });
   AlertDialog ok = builder.create();
   ok.show();
}

Same thing with this code. Replace the text in <> to your activity’s names.

Android studio should have automatically imported all the necessary imports, but if for some reason, it didn’t, here are the imports you need:

import android.app.AlertDialog;
import android.app.ProgressDialog;
import android.content.DialogInterface;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.Toast;
import com.parse.Parse;
import com.parse.ParseException;
import com.parse.ParseUser;
import com.parse.SignUpCallback;

Login

This code closely resembles the signUp code with some alterations. Here’s the code:

ParseUser.logInInBackground(<Call your EditText for username>.toString(), <Call your EditText for password>.getText().toString(), new LogInCallback() {
   @Override
   public void done(ParseUser parseUser, ParseException e) {
       if (parseUser != null) {
           alertDisplayer("Login Successful", "Welcome back" + <Call your EditText for Username>.getText().toString() + "!");
       } else {
           ParseUser.logOut();
           Toast.makeText(<This Activity’s name>.this, e.getMessage(), Toast.LENGTH_LONG).show();
       }
   }
});

Again, replace the <> with code from your activity. Make sure to change the name of the activities to resemble your project.
This code should run after the login button is clicked. So, remember to put this code in the OnClick method.

Here’s the display() function again:

private void display(String title,String message){
   AlertDialog.Builder builder = new AlertDialog.Builder(<Name of this Activity>.this)
           .setTitle(title)
           .setMessage(message)
           .setPositiveButton("OK", new DialogInterface.OnClickListener() {
               @Override
               public void onClick(DialogInterface dialog, int which) {
                   dialog.cancel();

                   Intent intent = new Intent(<Name of this Activity>.this, <Name of the next Activity>.class);
                   intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TASK | Intent.FLAG_ACTIVITY_NEW_TASK);
                   startActivity(intent);
               }
           });
   AlertDialog ok = builder.create();
   ok.show();
}

Logout

Logging out is simple in Parse. Once you set the onClick method for your logout button, put this line in the method:

ParseUser.logOut();

Now it’s time for push notifications!

Push Notifications

We always get notifications from our favorite apps. Now, with a few easy steps, you can start sending push notifications too!

First, go to the Firebase console (make an account if you don’t have one) and click “Add Project.” Enter a name for your project and press continue. On the Google Analytics page use the default account for firebase.

Once your project is created, click the android logo, and follow the instructions. You can find the package name of your app at the top of your AndroidManifest.xml file. (Should start with “com.”
Then remember to put the google.json file in the app file of your app.
Finally, add this in your “build.gradle(Project:Your project name)” file in the dependencies tag:

classpath 'com.google.gms:google-services:4.3.3'

Add these implementations in the “build.gradle(Module:app)” file:

implementation "com.github.parse-community.Parse-SDK-Android:fcm:1.25.0"
implementation 'com.google.firebase:firebase-analytics:17.2.2'
implementation "com.github.parse-community.Parse-SDK-Android:fcm:1.19.0"
implementation 'com.google.firebase:firebase-core:17.2.2'
implementation 'com.google.firebase:firebase-messaging:17.2.2'

REMEMBER TO MAKE SURE YOU HAVE ALL THE IMPLEMENTATIONS LISTED ON THIS SCREEN!

Now, go to the project settings on firebase

Then go to the cloud messaging tab

Now, go to SashiDo’s dashboard and go to “App Settings” and then “Push”. Then copy-paste the Sender ID and the Server Key into the appropriate boxes and click save.

To finish up, go to your AndroidManifest.xml file and add these 3 sections of code:

<service android:name="com.parse.fcm.ParseFirebaseMessagingService">
   <intent-filter>
       <action android:name="com.google.firebase.MESSAGING_EVENT" />
   </intent-filter>
</service>

<receiver
   android:name="com.parse.ParsePushBroadcastReceiver"
   android:exported="false">
   <intent-filter>
       <action android:name="com.parse.push.intent.RECEIVE" />
       <action android:name="com.parse.push.intent.DELETE" />
       <action android:name="com.parse.push.intent.OPEN" />
   </intent-filter>
</receiver>

<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="com.google.android.c2dm.permission.RECEIVE" />

To finish up, go to your App class, and add this to the onCreate() function.

ParseInstallation.getCurrentInstallation().save();

If you aren’t able to see push notifications on the screen of your device, then try changing the above line of code to this:

ParseInstallation installation = ParseInstallation.getCurrentInstallation();
installation.put("GCMSenderId", “<Your GCM SenderId”);
installation.saveInBackground();

Remember to put your Sender Id in the <> (found on the firebase console).

Now you can send push notifications! Run your app on a device/ emulator, and go to the SashiDo dashboard and click “Push.” Navigate to “Send new push” and type out your message. Make sure the preview is displayed on the android device, not the iPhone.

Make sure the android button is selected

Finally, click “Send” and your device should get a notification!

Closing Remarks

While I had some experience with Android Studio, I was completely new to Parse and SashiDo, so starting the process of creating this app was a bit daunting at the beginning and I almost dropped the project. Though I read numerous documentations and watched many YouTube videos, I gained control over the process only when I designed my app through Android Studio, and so I decided to explore SashiDo further. Once I put what I’ve learned in theory about SashiDo into practice, the parts of my knowledge from different sources began to come together, like puzzle pieces. I found myself successfully connecting my app, making User Registration pages, and Push Notifications in just a matter of hours. All through SashiDo! As I continued my journey through SashiDo, I started loving the platform more and more. It was incredibly easy to use with a very well thought out design, and its ready-to-use API’s saved me hours of coding. The best part of SashiDo, however, was its customer service and I believe that definitely sets it apart from its competitors. Their representatives are super super nice and love to help. Big shoutout to Vesi and Irena, who were always super friendly and helped me so much through my experience!

Before I end this tutorial, I want to deeply thank SashiDo for the opportunity to use their wonderful platform and you for taking the time to read through all of this. I truly hope that this tutorial helps you in your journey. Remember that this tutorial is only the starting point. With SashiDo, you can develop anything from websites to IOS apps to even hosting ML models. SashiDo makes everything easier, so look no further when you need a good platform for your projects.

Happy coding!

Useful Links:
FunSchool Github Repository
How to integrate Push Notifications in Android Step by Step
Official Parse Guide for Android
SashiDo’s Getting Started Guide
Teachable Machine on NodeJS
Teachable Machine Community repo on GitHub

DEV Community: vaishnavi5183