Showing posts with label React Native. Show all posts
Showing posts with label React Native. Show all posts

Friday, July 18, 2025

Reading and Word Meanings For Beginners (Design Discussion)

Demo for only one poem:

https://math-eight.blogspot.com/2025/03/twinkle-twinkle-little-star-word-by.html



On three clicks of "Next":



On one click of "Previous":



When it switches from word to word: it speaks that word out (No magic, just Text to speech in browser).


Ques: WHERE WE ARE COMING FROM?

This was the first app of translation:




We received feedback on this from various students from various backgrounds.

The situation was like this:

There could be three types of users/students of this app:

1. Those are not able to do even single sentence (due to no capacity for reading even simple English words). These students would want something easier, or lighter on them, such as a "Reading App" - like the one we are designing right now.

2. Those who are able to take on these translation questions albeit with some difficulty -- Those are actually learning from this app.

3. Those who already excel in this type of translation questions and who may want to pursue something tougher like the grammar, story creation.


Limitations

1. 
Subhashish: Support for multiple languages where it is showing pronunciation and meaning

2.
Akash:
- There is only one poem. 
- Limited dataset / library

3. Akash:
This not targeting any age group (5th or 6th or 8th) or learner level (beginner, medium difficulty for someone trying to build his / her vocab).
------------------------------------------------------------------------------------------------------------------------

My comments:
1. We are doing a POC (Iteration 2) so we have limit our scope.
Scope could be support for a third language (of native speakers) such as Bengali.

How are we putting together these word meanings:
We are pulling them out from Gemini (LLM by Google).
So if Gemini also understands Bengali then yes, we can do it.
Subhashish would have to pitch in for basic sanity and testing of Bengali sections.

2. Yes, there is only one poem at the moment but that was because we were doing a small POC.
And secondly because: Who decides what poems to put in here? You, me or the users, or the teachers, who?

I thought that let's have users or teachers decide what chapters to put in here.
And that would be made dynamic in the mobile using following methodology:
2.1. User would click a picture of the page from his or her book.
2.2. An image to text AI model would pull out text from that captured image.
2.3. Then a GenAI model such as Gemini would be used to collate the word meanings for the text from the image.
2.4. This metadata about the poem/chapter/ or text in general would be saved on the device of the users for offline reading.
Here Steps 1 to 3 would require internet.

3: Yes, Akash is right. We are not targeting any age group. We are rather targeting users who do not even read or understand basic English words. It could be someone who is in 3rd grade and trying to improve his/her English. Or it could also be an uneducated adult trying to gain some language skills today.

==========================================================================

Couple of features I am thinking of keeping in it are:
1. This would fully support online and offline engagement.
If student wishes to download all the chapters from the database onto the device itself and then use the app offline, this option would also be available.

2. A feature that would be supported by only online engaged users will be ASR: Automatic Speech Recognition for live reading and correction.

3. Free and open for all.

4. Database: SQLite in mobile for offline users and MySQL via PythonAnywhere for online users. 

==========================================================================

Homework given on 2025-Jul-18:

Subhashish: 

1. How would you design this app's front end?

2. How would you design the backend? 

Akash:

1. How would you design the processes and programs that would enable the backend for this app?



Launching Translation App For The First Time

1:

 $ npx react-native start

...

...

Warning: SDK processing. This version only understands SDK XML versions up to 3 but an SDK XML file of version 4 was encountered. This can happen if you use versions of Android Studio and the command-line tools that were released at different times.

/home/jain/Desktop/vaakya_sentence_translation/node_modules/react-native-device-info/android/src/main/java/com/learnium/RNDeviceInfo/RNDeviceModule.java:192: warning: [removal] onCatalystInstanceDestroy() in NativeModule has been deprecated and marked for removal

  public void onCatalystInstanceDestroy() {

              ^

Note: Some input files use or override a deprecated API.

Note: Recompile with -Xlint:deprecation for details.

1 warning

Note: Some input files use or override a deprecated API.

Note: Recompile with -Xlint:deprecation for details.

Note: Some input files use or override a deprecated API.

Note: Recompile with -Xlint:deprecation for details.

Note: Some input files use or override a deprecated API.

Note: Recompile with -Xlint:deprecation for details.

Note: Some input files use unchecked or unsafe operations.

Note: Recompile with -Xlint:unchecked for details.

Note: Some input files use or override a deprecated API.

Note: Recompile with -Xlint:deprecation for details.


FAILURE: Build failed with an exception.


* What went wrong:

Execution failed for task ':app:validateSigningDebug'.

> Keystore file '/home/jain/Desktop/vaakya_sentence_translation/android/app/debug.keystore' not found for signing config 'debug'.


2:

(base) jain@jain-ThinkPad-T440s:~/Desktop/vaakya_sentence_translation$ cd /home/jain/Desktop/vaakya_sentence_translation/android/app
(base) jain@jain-ThinkPad-T440s:~/Desktop/vaakya_sentence_translation/android/app$ keytool -genkeypair -v -keystore debug.keystore -storepass android -keypass android \
  -alias androiddebugkey -keyalg RSA -keysize 2048 -validity 10000
What is your first and last name?
  [Unknown]:  Ashish
What is the name of your organizational unit?
  [Unknown]:  survival8
What is the name of your organization?
  [Unknown]:  survival8
What is the name of your City or Locality?
  [Unknown]:  Gurugram
What is the name of your State or Province?
  [Unknown]:  Haryana
What is the two-letter country code for this unit?
  [Unknown]:  IN
Is CN=Ashish, OU=survival8, O=survival8, L=Gurugram, ST=Haryana, C=IN correct?
  [no]:  yes

Generating 2,048 bit RSA key pair and self-signed certificate (SHA256withRSA) with a validity of 10,000 days
for: CN=Ashish, OU=survival8, O=survival8, L=Gurugram, ST=Haryana, C=IN
[Storing debug.keystore]

3:

$ npx react-native start

> Task :app:packageDebug
> Task :app:createDebugApkListingFileRedirect
> Task :app:installDebug FAILED

Deprecated Gradle features were used in this build, making it incompatible with Gradle 9.0.

You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.

For more on this, please refer to https://docs.gradle.org/8.6/userguide/command_line_interface.html#sec:command_line_warnings in the Gradle documentation.
146 actionable tasks: 11 executed, 135 up-to-date

info 💡 Tip: Make sure that you have set up your development environment correctly, by running npx react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctor 


FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: No connected devices!


4:

Tried Samsung Galaxy A06 5G -- I wasn't able to connect
Then tried my older phone Redmi A2 successfully:

(base) jain@jain-ThinkPad-T440s:~/Desktop/vaakya_sentence_translation$ adb devices
List of devices attached
FEYPDERWUS4XSKFI device

5:

Mission Successful on older device :D


6:

On new Samsung A06 5g:
(base) jain@jain-ThinkPad-T440s:~/Desktop/vaakya_sentence_translation$ adb pair 192.168.1.6:41327
Enter pairing code: 558111
Successfully paired to 192.168.1.6:41327 [guid=adb-R9ZY3098GYX-8MEOzx]
(base) jain@jain-ThinkPad-T440s:~/Desktop/vaakya_sentence_translation$ adb connect 192.168.1.6:41327
failed to connect to '192.168.1.6:41327': Connection refused
(base) jain@jain-ThinkPad-T440s:~/Desktop/vaakya_sentence_translation$ adb devices
List of devices attached
adb-R9ZY3098GYX-8MEOzx._adb-tls-connect._tcp device

What if you lose your .keystore file to a React Native app...

I have lost keystore file.
Now getting below error:
Keystore file '/home/jain/Desktop/vaakya_sentence_translation/android/app/debug.keystore' not found for signing config 'debug'.

Losing the debug.keystore file is not a serious issue — it’s auto-generated by Android Studio or the React Native CLI when needed. You can recreate it manually in a few simple steps.


✅ Steps to regenerate debug.keystore

  1. Navigate to your Android app folder:

bash
cd /home/jain/Desktop/vaakya_sentence_translation/android/app
  1. Run this command to generate a new debug keystore:

bash
keytool -genkeypair -v -keystore debug.keystore -storepass android -keypass android \ -alias androiddebugkey -keyalg RSA -keysize 2048 -validity 10000

If keytool is not found, it's part of your Java JDK. Try:

bash
which keytool

It’s usually in:

bash
/usr/lib/jvm/java-<version>/bin/keytool

📝 Expected output

You’ll be prompted for a few details. You can just press Enter for all of them or enter dummy values.


✅ After generation, try again:

bash
npx react-native run-android

Your debug build should now work again.


📦 FYI: Where it normally lives

By default, debug.keystore is usually created at:

bash
~/.android/debug.keystore

React Native just copies it to your project path if needed.


Let me know if you'd prefer to point your project back to the system-wide debug keystore instead of creating a new one.

Thursday, July 17, 2025

Setting up Android Studio and Android SDK for React Native development

 1.

Android Studio is already installed



(base) jain@jain-ThinkPad-T440s:~/Desktop/cupboard/program_files/android-studio-2025.1.1.14-linux/android-studio/bin$ pwd
/home/jain/Desktop/cupboard/program_files/android-studio-2025.1.1.14-linux/android-studio/bin
(base) jain@jain-ThinkPad-T440s:~/Desktop/cupboard/program_files/android-studio-2025.1.1.14-linux/android-studio/bin$ ls
appletviewer.policy  format.sh   game-tools.sh  idea.properties  lldb       profiler.sh  studio              studio.png      studio.sh
brokenPlugins.db     fsnotifier  helpers        inspect.sh       ltedit.sh  restarter    studio64.vmoptions  studio_safe.sh  studio.svg


2.A.
SDK Location configured in Android Studio





2.B.

Installing SDK tools






What is the use of NDK?

The NDK (Native Development Kit) is a toolset provided by Google that allows you to write parts of your Android app using native languages like C or C++, instead of JavaScript, Java, or Kotlin.


3:


$ npx react-native info

warn Package react-native-sqlite-storage contains invalid configuration: "dependency.platforms.ios.project" is not allowed. Please verify it's properly linked using "npx react-native config" command and contact the package maintainers about this.

info Fetching system and libraries information...

System:

  OS: Linux 6.11 Ubuntu 24.04.2 LTS 24.04.2 LTS (Noble Numbat)

  CPU: (4) x64 Intel(R) Core(TM) i5-4300U CPU @ 1.90GHz

  Memory: 1.89 GB / 7.45 GB

  Shell:

    version: 5.2.21

    path: /bin/bash

Binaries:

  Node:

    version: 18.19.1

    path: /usr/bin/node

  Yarn: Not Found

  npm:

    version: 9.2.0

    path: /usr/bin/npm

  Watchman: Not Found

SDKs:

  Android SDK:

    API Levels:

      - "31"

      - "36"

    Build Tools:

      - 35.0.0

      - 36.0.0

    Android NDK: Not Found

IDEs:

  Android Studio: Not Found

Languages:

  Java:

    version: 17.0.15

    path: /home/jain/Desktop/cupboard/program_files/OpenJDK17U-jdk_x64_linux_hotspot_17.0.15_6/jdk-17.0.15+6/bin/javac

  Ruby: Not Found

npmPackages:

  "@react-native-community/cli": Not Found

  react:

    installed: 18.2.0

    wanted: 18.2.0

  react-native:

    installed: 0.74.5

    wanted: ^0.74.5

npmGlobalPackages:

  "*react-native*": Not Found

Android:

  hermesEnabled: true

  newArchEnabled: false

iOS:

  hermesEnabled: Not found

  newArchEnabled: false


info React Native v0.80.1 is now available (your project is running on v0.74.5).

info Changelog: https://github.com/facebook/react-native/releases/tag/v0.80.1

info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.74.5

info For more info, check out "https://reactnative.dev/docs/upgrading?os=linux".



4:

Logs from "npx react-native doctor"


 ✖ Android SDK - Required for building and installing your app on Android

   - Versions found: 35.0.0, 36.0.0

   - Version supported: 34.0.0



5.
Trying to fix version mismatch of SDK:






(base) jain@jain-ThinkPad-T440s:~/Desktop/vaakya_sentence_translation$ cd $ANDROID_HOME
(base) jain@jain-ThinkPad-T440s:~/Android/Sdk$ ls
build-tools  cmake  cmdline-tools  emulator  extras  licenses  ndk  platforms  platform-tools  skiaparser  sources
(base) jain@jain-ThinkPad-T440s:~/Android/Sdk$ cd platforms
(base) jain@jain-ThinkPad-T440s:~/Android/Sdk/platforms$ ls
android-31  android-34  android-36


6:

Same issue in "react-native doctor"
 ✖ Android SDK - Required for building and installing your app on Android
   - Versions found: 35.0.0, 36.0.0
   - Version supported: 34.0.0


Part of logs from "npx react-native info"
SDKs:
  Android SDK:
    API Levels:
      - "31"
      - "34"
      - "36"
    Build Tools:
      - 35.0.0
      - 36.0.0


7:





FROM CHATGPT:

Using Android Studio GUI

  1. Open Android Studio

  2. Go to More Actions → SDK Manager
    (Or: File > Settings > Appearance & Behavior > System Settings > Android SDK)

  3. Go to the SDK Tools tab.

  4. Check "Show Package Details" (bottom right corner).

  5. Under Android SDK Build-Tools, look for 34.0.0.

  6. Check the box next to 34.0.0.

  7. Click Apply to install it.






FINALLY:
Common
 ✓ Node.js - Required to execute JavaScript code
 ✓ npm - Required to install NPM dependencies
 ● Metro - Metro Bundler is not running

Android
 ✖ Adb - No devices and/or emulators connected. Please create emulator with Android Studio or connect Android device.
 ✓ JDK - Required to compile Java code
 ✖ Android Studio - Required for building and installing your app on Android
 ✓ ANDROID_HOME - Environment variable that points to your Android SDK installation
 ✓ Gradlew - Build tool required for Android builds
 ✓ Android SDK - Required for building and installing your app on Android




8:
NOW ANDROID STUDIO


Part of logs from "npx react-native info"

IDEs:
  Android Studio: Not Found

Part of logs from "npx react-native doctor"

 ✖ Android Studio - Required for building and installing your app on Android





Device Manager in Android Studio:






Monday, July 14, 2025

Setup Steps to Translation App

 1. 

Clone "https://github.com/ashishjain1547/vaakya_sentence_translation"

2.

Check NPM is installed or not.

$ sudo apt install npm

3.

Once installed:

$ npm --version

9.2.0


4.
~/Desktop/vaakya_sentence_translation$ npm install

5. 
~/Desktop/vaakya_sentence_translation$ nano .gitignore

# Dependencies
node_modules/

# Logs
*.log

# React Native specific
ios/build/
android/.gradle/
android/app/build/
android/app/BUCK
android/app/debug.keystore

# IDE-specific files
.idea/
.vscode/

# OS generated files
.DS_Store


6.

Download Android Studio:

https://developer.android.com/studio

OR 
From App Center:




7.

Check for JAVA

(base) jain@jain-ThinkPad-T440s:~/Desktop/vaakya_sentence_translation$ java
Command 'java' not found, but can be installed with:
sudo apt install openjdk-17-jre-headless  # version 17.0.14+7-1~24.04, or
sudo apt install openjdk-21-jre-headless  # version 21.0.6+7-1~24.04.1
sudo apt install default-jre              # version 2:1.17-75
sudo apt install openjdk-11-jre-headless  # version 11.0.26+4-1ubuntu1~24.04
sudo apt install openjdk-8-jre-headless   # version 8u442-b06~us1-0ubuntu1~24.04
sudo apt install openjdk-19-jre-headless  # version 19.0.2+7-4
sudo apt install openjdk-20-jre-headless  # version 20.0.2+9-1
sudo apt install openjdk-22-jre-headless  # version 22~22ea-1


"$ sudo apt install openjdk-17-jre-headless"

8.
(base) jain@jain-ThinkPad-T440s:~/Desktop/vaakya_sentence_translation$ java --version
openjdk 17.0.15 2025-04-15
OpenJDK Runtime Environment (build 17.0.15+6-Ubuntu-0ubuntu124.04)
OpenJDK 64-Bit Server VM (build 17.0.15+6-Ubuntu-0ubuntu124.04, mixed mode, sharing)

9.

(base) jain@jain-ThinkPad-T440s:~/Desktop/vaakya_sentence_translation$ sudo nano ~/.bashrc

(base) jain@jain-ThinkPad-T440s:~/Desktop/vaakya_sentence_translation$ tail -1 ~/.bashrc
export JAVA_HOME="/usr/lib/jvm/java-17-openjdk-amd64"

(base) jain@jain-ThinkPad-T440s:~/Desktop/vaakya_sentence_translation$ echo $JAVA_HOME

(base) jain@jain-ThinkPad-T440s:~/Desktop/vaakya_sentence_translation$ source ~/.bashrc
(base) jain@jain-ThinkPad-T440s:~/Desktop/vaakya_sentence_translation$ echo $JAVA_HOME
/usr/lib/jvm/java-17-openjdk-amd64


10. TESTING

~/Desktop/vaakya_sentence_translation$ npx react-native doctor








Common
 ✓ Node.js - Required to execute JavaScript code
 ✓ npm - Required to install NPM dependencies
 ✓ Metro - Required for bundling the JavaScript code (via "npx react-native start")


Android
 ✖ Adb - No devices and/or emulators connected. Please create emulator with Android Studio or connect Android device.
 ✖ JDK - Required to compile Java code
   - Version found: N/A
   - Version supported: >= 17 <= 20
 ✖ Android Studio - Required for building and installing your app on Android
 ✖ ANDROID_HOME - Environment variable that points to your Android SDK installation
 ✓ Gradlew - Build tool required for Android builds
 ✖ Android SDK - Required for building and installing your app on Android
   - Versions found: N/A
   - Version supported: 34.0.0

Errors:   5
Warnings: 1

Attempting to fix 6 issues...

11.
(base) jain@jain-ThinkPad-T440s:~/Desktop/vaakya_sentence_translation$ tail -2  ~/.bashrc
export JAVA_HOME="/usr/lib/jvm/java-17-openjdk-amd64"
export PATH="$JAVA_HOME/bin:$PATH"






12. Ref: https://reactnative.dev/docs/set-up-your-environment


(base) jain@jain-ThinkPad-T440s:~/Android/Sdk$ tail -5 ~/.bashrc


export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools




13. RECONFIGURE JAVA




(base) jain@jain-ThinkPad-T440s:~/Desktop/vaakya_sentence_translation$ tail -6 ~/.bashrc
export JAVA_HOME="/home/jain/Desktop/cupboard/program_files/OpenJDK17U-jdk_x64_linux_hotspot_17.0.15_6/jdk-17.0.15+6"
export PATH="$JAVA_HOME/bin:$PATH"

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools







14. TESTING

(base) jain@jain-ThinkPad-T440s:~/Desktop/vaakya_sentence_translation$ npx react-native doctor
warn Package react-native-sqlite-storage contains invalid configuration: "dependency.platforms.ios.project" is not allowed. Please verify it's properly linked using "npx react-native config" command and contact the package maintainers about this.
⠸ Running diagnostics...warn Package react-native-sqlite-storage contains invalid configuration: "dependency.platforms.ios.project" is not allowed. Please verify it's properly linked using "npx react-native config" command and contact the package maintainers about this.
Common
 ✓ Node.js - Required to execute JavaScript code
 ✓ npm - Required to install NPM dependencies
 ● Metro - Metro Bundler is not running

Android
 ✖ Adb - No devices and/or emulators connected. Please create emulator with Android Studio or connect Android device.
 ✓ JDK - Required to compile Java code
 ✖ Android Studio - Required for building and installing your app on Android
 ✓ ANDROID_HOME - Environment variable that points to your Android SDK installation
 ✓ Gradlew - Build tool required for Android builds
 ✖ Android SDK - Required for building and installing your app on Android
   - Versions found: N/A
   - Version supported: 34.0.0

Errors:   3
Warnings: 1

Usage
 › Press f to try to fix issues.
 › Press e to try to fix errors.
 › Press w to try to fix warnings.
 › Press Enter to exit.





15.



(base) jain@jain-ThinkPad-T440s:~/Desktop/cupboard/program_files/android-studio-2025.1.1.14-linux/android-studio/bin$ tail -5 ~/.bashrc
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

export PATH=$PATH:/home/jain/Desktop/cupboard/program_files/android-studio-2025.1.1.14-linux/android-studio/bin






XX.

Web App Exploration:



What is this app teaching?

This app is teaching you fry-sight words, which are covered in Chapters.





~~~


Difficulty:

For difficulty level "medium": you will have English sentences of word count 5.