๐Ÿ“ Overcoming Challenges: Building a First React Native Chatbot ๐Ÿค– Application

ShoyeabShoyeab
2 min read

Introduction:

chatwithme is a React Native application designed to help users improve their communication skills. The chatbot corrects grammatical errors, suggests better ways to phrase sentences, and enhances vocabulary. It also offers tips and insights on negotiation skills, IT-related communication, and more.

GITHUB

Features

  1. Real-time Communication: Interact with the bot for immediate feedback.

  2. Grammar Correction: Get corrections for any grammatical errors in your prompts.

  3. Phrase Suggestions: Receive alternative ways to phrase your sentences.

  4. Vocabulary Enhancement: Learn new words and their meanings.

Challenges Faced Building an Android APK file for local release.

You can visit the React-Native documentation for the actual release of your application. Click Here

In this article, we will discuss the local release of the application for Android.

  1. Build APK Key:

    go to the JDK directory in your C:\Program Files\jdkfolder\bin open the terminal paste the below command and set the password and remaining fields. Once you successfully run the command the my-upload-key.keystore the file is created inside the bin folder move the created file into yourapplication/android/app and paste it there.

     keytool -genkeypair -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my-key-alias
    
  2. Set Up Gradle for Release:

    Edit android/gradle.properties to include the following (replace placeholders with your actual key information):

     MYAPP_RELEASE_STORE_FILE=my-release-key.jks
     MYAPP_RELEASE_KEY_ALIAS=my-key-alias
     MYAPP_RELEASE_STORE_PASSWORD=your-store-password
     MYAPP_RELEASE_KEY_PASSWORD=your-key-password
    

    Edit android/app/build.gradle to add the signing configuration:

     android {
         ...
         defaultConfig { ... }
         signingConfigs {
             release {
                 if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                     storeFile file(MYAPP_RELEASE_STORE_FILE)
                     storePassword MYAPP_RELEASE_STORE_PASSWORD
                     keyAlias MYAPP_RELEASE_KEY_ALIAS
                     keyPassword MYAPP_RELEASE_KEY_PASSWORD
                 }
             }
         }
         buildTypes {
             release {
                 signingConfig signingConfigs.release
                 minifyEnabled false
                 proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
             }
         }
     }
    
  3. Generate the JavaScript Bundle:

     npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
    
  4. Build the Release APK:

     cd android
     ./gradlew assembleRelease
    
  5. Problem: ENOENT: no such file or directory for index.android.bundle

    Issue: The error indicates that the index.android.bundle file or assets directory doesn't exist.

    i. Create the Assets Directory:

     mkdir -p android/app/src/main/assets
    

    ii. Again Generate the Javascript Bundle [step 3]

  6. If the build is successful then you will find the apk file at yourapplication\android\app\build\outputs\apk\release location.

Deme:

๐Ÿ’ก
Follow me for more and for any queries reach out to me on LinkedIn
10
Subscribe to my newsletter

Read articles from Shoyeab directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Shoyeab
Shoyeab

Passionate about building Web and mobile applications. Join me as we dive into the world of Tech!