SashiDo 및 Teachable Machine으로 간단한 Android 손 제스처 앱을 만드는 방법

앱을 만드는 것은 쉽게 들릴 수 있지만 특히 초보자에게는 종종 혼란스럽습니다. Android 개발 및 SashiDo의 완전한 초보자라면 이 튜토리얼이 적합합니다! 이 튜토리얼에서. ASL(American Sign Language)에서 사용되는 손 제스처를 인식하고 사용자에게 ASL에 로그인하는 방법을 알려주는 앱을 쉽게 개발하는 방법을 보여 드리겠습니다.

시작하기 전에 Android Studio를 훨씬 쉽게 배울 수 있도록 Java의 기본 사항을 배우는 것이 좋습니다. 또한 아직 안 하셨다면 Android Studio를 다운로드하고 SashiDo에서 계정을 만드세요. SashiDo에 접속하면 '새 앱 만들기'를 클릭합니다. 이제 지침을 따르면 앱이 생성됩니다! (지금은 "시작하기"항목을 건너뛸 수 있습니다.)

새 앱 만들기를 클릭하고 지침을 따르십시오!

자, 이제 튜토리얼을 시작할 수 있습니다! 아래는 목차이며 원하는 섹션을 자유롭게 클릭하십시오.

목차


  • 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

  • 프로젝트 정보

    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!

    앱 실행




    ML 모델 실행




    전체 프로젝트에 대한 Github 저장소




    vaishnavi 5183 / 펀스쿨


    Teachable Machine과 SashiDo를 사용하여 ASL을 쉽게 배울 수 있는 앱입니다.




    Android Studio에 SashiDo 연결

    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”

  • "빈 활동"템플릿을 클릭합니다
  • .
  • 앱 이름을 지정하고 언어가 Java인지 확인합니다
  • .
  • 로드하는 동안 SashiDo > 앱 설정 > 보안 및 키에서 대시보드로 이동합니다.
  • 이제 Android Studio로 돌아가서 "build.gradle(Project:Your project name)"파일을 엽니다
  • .
  • "종속성"태그 뒤에 이 코드를 추가합니다.


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

    이제 "build.gradle(Module:app)"파일로 이동하여 이 구현을 추가합니다.

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

    참고: jitpack.io에서 최신 버전을 찾을 수 있습니다.

    Git repo URL 상자에서 이것을 검색하고 "조회"를 눌러 사용 가능한 모든 버전의 Parse를 가져옵니다.

    Android Studio Gradle 파일의 상단 섹션에서 '지금 동기화'를 클릭하여 Gradle 파일을 동기화하세요.

    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.

    앱 사용자 인터페이스 만들기

    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.

    사용자 등록

    가입하기

    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 Activitys 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;
    

    로그인

    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 Activitys 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();
    }
    

    로그 아웃

    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!

    푸시 알림

    (67)56479)
    안드로이드 버튼이 선택되어 있는지 확인하십시오.

    마지막으로 "보내기"를 클릭하면 장치에 알림이 표시됩니다!

    우리는 항상 좋아하는 앱에서 알림을 받습니다. 이제 몇 가지 간단한 단계만 거치면 푸시 알림 전송도 시작할 수 있습니다! 먼저 Firebase 콘솔로 이동하여(계정이 없는 경우 계정 만들기) "프로젝트 추가"를 클릭합니다. 프로젝트 이름을 입력하고 계속을 누릅니다. Google 애널리틱스 페이지에서 Firebase용 기본 계정을 사용합니다. 프로젝트가 생성되면 Android 로고를 클릭하고 지침을 따릅니다. AndroidManifest.xml 파일 상단에서 앱의 패키지 이름을 찾을 수 있습니다. ("com"으로 시작해야 합니다. 그런 다음 google.json 파일을 앱의 앱 파일에 넣어야 합니다. 마지막으로 "build.gradle(Project:Your project name)" 파일의 종속성 태그에 다음을 추가합니다. 클래스 경로 'com.google.gms:google-services:4.3.3' "build.gradle(Module:app)" 파일에 다음 구현을 추가합니다. 구현 "com.github.parse-community.Parse-SDK-Android:fcm:1.25.0" 구현 'com.google.firebase:firebase-analytics:17.2.2' 구현 "com.github.parse-community.Parse-SDK-Android:fcm:1.19.0" 구현 'com.google.firebase:firebase-core:17.2.2' 구현 'com.google.firebase:firebase-messaging:17.2.2' 이 화면에 나열된 모든 구현이 있는지 확인하십시오! 이제 firebase의 프로젝트 설정으로 이동하십시오. 그런 다음 클라우드 메시징 탭으로 이동하십시오. 이제 SashiDo의 대시보드로 이동하여 "앱 설정"으로 이동한 다음 "푸시"로 이동합니다. 그런 다음 보낸 사람 ID와 서버 키를 복사하여 해당 상자에 붙여넣고 저장을 클릭합니다. 완료하려면 AndroidManifest.xml 파일로 이동하여 다음 3개 코드 섹션을 추가합니다. <서비스 android:name="com.parse.fcm.ParseFirebaseMessagingService"> <인텐트 필터> <action android:name="com.google.firebase.MESSAGING_EVENT" /> </인텐트 필터> </서비스> <수신기 android:name="com.parse.ParsePushBroadcastReceiver" android:exported="거짓"> <인텐트 필터> <action android:name="com.parse.push.intent.RECEIVE" /> <action android:name="com.parse.push.intent.DELETE" /> <action android:name="com.parse.push.intent.OPEN" /> </인텐트 필터> </수신자> <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" /> 마치려면 App 클래스로 이동하여 onCreate() 함수에 추가합니다. ParseInstallation.getCurrentInstallation().save(); 장치 화면에서 푸시 알림을 볼 수 없는 경우 위 코드 줄을 다음과 같이 변경해 보십시오. ParseInstallation 설치 = ParseInstallation.getCurrentInstallation(); installation.put("GCMSenderId", “<귀하의 GCM SenderId”); 설치.saveInBackground(); 발신자 ID를 <>(firebase 콘솔에 있음)에 입력해야 합니다. 이제 푸시 알림을 보낼 수 있습니다! 장치/에뮬레이터에서 앱을 실행하고 SashiDo 대시보드로 이동하여 "Push"를 클릭합니다. "새 푸시 보내기"로 이동하여 메시지를 입력합니다. 미리보기가 iPhone이 아닌 Android 장치에 표시되는지 확인하십시오. 맺음말


    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

    좋은 웹페이지 즐겨찾기