1.Introduction
Eduma App was developed with the React Native framework. Based on the website you have, you can build our own app for both Android and iOS devices. We prepared a detailed guide for you to help you go through this process. Please follow the steps described precisely to have a successful result.
2.Setting up the development environment
For the full and smooth work, you need to install the React Native environment, which required for you to build your own Eduma app.We use React Native CLI, access here to know how to set up the development environment: https://reactnative.dev/docs/environment-setup at React Native CLI Quickstart tab.
3.File Structure
2. Api: You can edit URLs in here.
3. Assets: Include images and fonts, unless you need to change the app font otherwise we don’t recommend changing it. In the Image section include the images in the application. For example, to change homepage logo, you go to assets > img > icon-home.png.
4. Common: Some functions needed in app.
5. Component:
- bottom-tab-item: edit code for icon style and title bottom tab navigation in app. You can change color, font-size….
- common: some sections in app like: progress in Overview home screen, countdown in quiz… You should explore it more.
- item-list: component for some screens: item-course for Course Screen, item-my-course for My Course Screen…
-
list: FlatList component for screen.
-
navigations: global configuration and router for bottom tab navigation. You can add and remove Bottom Navigation in App.
- screens: you can edit all screens in here. Folders are sorted by screens. For example: login, home, courses, course details, profile…
4.Getting Started
Step 1 -Install required library
Install following requisite libraries.
1. NodeJS version 14 or 16: https://nodejs.org/download/release/v16.14.0/
2. Yarn: https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable
3. Install Xcode: https://itunes.apple.com/app/xcode/id497799835
4. Install Android Emular: https://developer.android.com/studio
Step 2 – Run the app
Extract the download package and go top project folder (where locate the package.json
file), run following script.
yarn install
yarn start
5.Configuration App
- Change site URL: Go to src > config > index.js and change SITE_URL
- Change App logo: You can go to assets > img > icon > icon-home.png to change for Logo in Home Screen.
- Change Text and Image in Start Screen: go to src > screens > login-walk and you can change text, change banner in Start Screen.

6.ANDROID APP
Android development enviroment: https://reactnative.dev/docs/environment-setup#installing-dependencies
6.1.Setting APP Name
- Manuals: Go to android > src > main > res > values > strings.xml and change app_name.
- React-native-rename: You can read more: https://dev.to/ajmal_hasan/rename-your-react-native-project-completely-2mh6

6.2.Adding App Icon
- Create a logo 1024 x 1024 px.
-
Go to website: http://romannurik.github.io/AndroidAssetStudio/icons-launcher.html then go to android > app > src > main > res and replace mipmap-hdpi, mipmap-mdpi, mipmap-xhdpi…

6.3.Build and Publish App
2. Google Developer Account: To enroll in the Google Play Developer program, you’ll need a Google account and to pay a one time $25 fee. Enroll here. After you complete the enrollment process, you’ll immediately have access to the Google Play Console.
- Go to your Play Console.
- Select All applications > Create application.
- Select a default language and add a title for your app. Type the name of your app as you want it to appear on Google Play.
- Create your app’s store listing, take the content rating questionnaire, and set up pricing and distribution.
3. Add Admin User to your Google Play Developer Account:
- Log in to the Google Play Console with your Google Account.
- Select “Users & permissions” under Developer Account on the sidebar.
- Invite user email as a Release Manager.
4. Publish to Google Play: https://reactnative.dev/docs/signed-apk-android

7.IOS APP
Setting up the development environment:
- Install Node and watchman:
brew install node
brew install watchman
- Install Xcode in App Store: https://apps.apple.com/us/app/xcode/id497799835
- Install CocoaPods:
sudo gem install cocoapods
7.1.Setting App Name
-
Open Xcode > In the Display Name enter the name of the app.

7.2.Adding App Icon
-
Create a logo 1024 x 1024px.
-
Go to https://appicon.co/ and general logo then open Xcode > Assets.xcassets and drag AppIcon in folder download to Xcode and replace it.

7.3.Build and Publish App
2. Open ios > Eduma.xcworkspace to Xcode









- You must enroll in the Apple Developer program as an Organization (not an Individual). To enroll in the Apple Developer program, you’ll need to set up an Apple ID and pay a $99/year fee. If you’re a nonprofit or government agency, Apple will waive your fee learn more.
- Enroll in the Apple Developer program as an Organization here After you complete the enrollment process, you will get two emails from Apple. First, that you were approved and accepted into the Apple Developer Program. Second, an invitation to App Store Connect.
- You can request the ipa file from InspireUI to upload by your own or Add InpsireUI as the App Manager to upload your app.
- Log in to your Apple Developer Account with your Apple ID.
- Select “User and Access”
- Add user email as an Admin.
- Click “Invite.”
8.Development
Which IDE to use?
- Visual Studio Code
- Webstorm
9.In-App Purchase
Video Tutorial
9.1.SETUP FOR LEARNPRESS
Upload Plugin LearnPress Mobile App to your website: Download here
Then you go to Dashboard => Learnpress => Settings => Mobile App tab => Type Course IDs into Courses In App Purchase.
9.2.SETUP FOR IN APP PURCHASES IOS

2. Setup sandbox testing account in “Users and Roles.”

- Create Product with Non-Consumable

-
Find Course ID and Create Product with Course ID.


- Click Save.
- Ready to Submit.

9.3.SETUP FOR IN APP PURCHASE ANDROID
- Create new AAB file for your application: https://reactnative.dev/docs/signed-apk-android#generating-the-release-aab




9.4.SETUP VALIDATE RECEIPT
9.4.1.IOS
- Go to In App Purchase and create App-Specific Shared Secret.

-
Go to LearnPress Settings > In App Purchase and add for Shared Secret.

9.4.2.Android
- Open the Settings > Developer account menus and select API access
- Select Link to connect your Play account to a Google Developer Project
- Agree to the terms and conditions
- Create Service Account
- Select Create Service Account
- Create Service account key credentials
- Enter details for service account
- Download your JSON credential
- In Play Console, select Grant Access on the newly created service account
- Grant the following permissions:
- After this wait for 48 hours to allow Google to propagate all access rights for APIs.
- Open your JSON file download and copy content to LearnPress Setting > In App Purchases and enter to Service Account.
9.5.GETTING STARTED
IOS Platform: Install cocoa pods: cd ios && pod install
Copy All Product ID in In App Purchase and add to PRODUCTS_IAP
in src>config>index.js

10.How to translate Eduma App

export { default as vi } from './vi';


11.Push Notification
1. After Version 1.1.0 – 09-Jan-2023:
- Create a new Firebase project: https://console.firebase.google.com/
- Download LearnPress Mobile App plugin and config for push notification in LearnPress > Settings > Mobile App.
- Additionally, current versions of firebase-ios-sdk have a minimum Xcode requirement of 13.3, which implies a minimum macOS version of 12 (macOS Monterey).
IOS Setup:
- On the Firebase console, add a new iOS application and enter your projects details. The “iOS bundle ID” must match your local project bundle ID. The bundle ID can be found within the “General” tab when opening the project with Xcode.
- Download the
GoogleService-Info.plist
file.
Android Setup:
- On the Firebase console, add a new Android application and enter your projects details. The “Android package name” must match your local projects package name which can be found inside of the
manifest
tag within the/android/app/src/main/AndroidManifest.xml
file within your project. - Download the
google-services.json
file and place it inside of your project at the following location:/android/app/google-services.json
.
2. With old version:
- Install pakage:
yarn add @notifee/react-native @react-native-firebase/app @react-native-firebase/messaging
- Create a new Firebase project: https://console.firebase.google.com/
- Download LearnPress Mobile App plugin and config for push notification in LearnPress > Settings > Mobile App.
- Additionally, current versions of firebase-ios-sdk have a minimum Xcode requirement of 13.3, which implies a minimum macOS version of 12 (macOS Monterey).
IOS Setup:
- On the Firebase console, add a new iOS application and enter your projects details. The “iOS bundle ID” must match your local project bundle ID. The bundle ID can be found within the “General” tab when opening the project with Xcode.
- Download the
GoogleService-Info.plist
file. - Using Xcode, open the projects
/ios/{projectName}.xcodeproj
file (or/ios/{projectName}.xcworkspace
if using Pods). - Right click on the project name and “Add files” to the project, as demonstrated below:
- Select the downloaded
GoogleService-Info.plist
file from your computer, and ensure the “Copy items if needed” checkbox is enabled:
- To do this, open your
/ios/Eduma/AppDelegate.m
file and add the following: - At the top of the file, import the Firebase SDK:
#import <Firebase.h>
- Add
[FIRApp configure]; to before #ifdef FB_SONARKIT_ENABLED
After setup you need run “yarn pod” to update cocapod in ios.
Android Setup:
- On the Firebase console, add a new Android application and enter your projects details. The “Android package name” must match your local projects package name which can be found inside of the
manifest
tag within the/android/app/src/main/AndroidManifest.xml
file within your project. - Download the
google-services.json
file and place it inside of your project at the following location:/android/app/google-services.json
. - Go to android > build.grade: “
compileSdkVersion = 33", "targetSdkVersion = 33", add "classpath("com.google.gms:google-services:4.3.14")" to dependencies.
- Go to android > app > build.grade and add code “
apply plugin: "com.google.gms.google-services"