Eduma App

  1. 1.Introduction
  2. 2.Setting up the development environment
  3. 3.File Structure
  4. 4.Getting Started
  5. 5.Configuration App
  6. 6.ANDROID APP
    1. 6.1.Setting APP Name
    2. 6.2.Adding App Icon
    3. 6.3.Build and Publish App
  7. 7.IOS APP
    1. 7.1.Setting App Name
    2. 7.2.Adding App Icon
    3. 7.3.Build and Publish App
  8. 8.Development
  9. 9.In-App Purchase
    1. 9.1.SETUP FOR LEARNPRESS
    2. 9.2.SETUP FOR IN APP PURCHASES IOS
    3. 9.3.SETUP FOR IN APP PURCHASE ANDROID
    4. 9.4.SETUP VALIDATE RECEIPT
      1. 9.4.1.IOS
      2. 9.4.2.Android
    5. 9.5.GETTING STARTED
  10. 10.How to translate Eduma App
  11. 11.Push Notification

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

1. Action: Redux Action makes changes in the application, changing the code in it can cause the application to crash.

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

  1. Change site URL: Go to src > config > index.js and change SITE_URL
  2. Change App logo: You can go to assets > img > icon > icon-home.png to change for Logo in Home Screen.
  3. 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

6.2.Adding App Icon

6.3.Build and Publish App

1. Build apk: Open terminal => use command: cd android to open android folder in project and run ./gradlew assembleRelease and then go to android > app > src > build > output > apk > release (.apk file in here)

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.

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:

  1. Install Node and watchman:

brew install node

brew install watchman

  1. Install Xcode in App Store: https://apps.apple.com/us/app/xcode/id497799835
  2. 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

1. Go to App Store Connect and create the app, the Bundle ID should be the same with the id config from app.json, and make sure all the detail info about the app was input correctly.

2. Open ios > Eduma.xcworkspace to Xcode

3. Click Product > Archive and wait. After the process is finished, in the popup window click Distribute App. Select upload option to Send app to App Store Connect. Next click Upload.
4. Apple Developer Account:

  • 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.
5. Add Admin User to your Apple Developer Account:

8.Development

Which IDE to use?

  1. Visual Studio Code
  2. 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

1. Complete an effective “Agreements, Tax, and Banking.”

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

3. Signed into iOS device with sandbox account.
4. Set up In-App Purchases Products:

  • Create Product with Non-Consumable

  • Find Course ID and Create Product with Course ID.

  • Click Save.
  • Ready to Submit.
5. Enable “In-App Purchase” in Xcode “Capabilities” and in Apple Developer -> “App ID” setting. Delete app / Restart device / Quit “store” related processes in Activity Monitor / Xcode Development Provisioning Profile -> Clean -> Build.

9.3.SETUP FOR IN APP PURCHASE ANDROID

  1. Create new AAB file for your application: https://reactnative.dev/docs/signed-apk-android#generating-the-release-aab
2. Upload your AAB on Google Play.
3. Create Product for your appication (Product ID same Course ID)
4. Add tester to testing for in-app purchase.

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
  1. Open the Settings > Developer account menus and select API access
  2. Select Link to connect your Play account to a Google Developer Project
  3. Agree to the terms and conditions
  4. Create Service Account
  5. Select Create Service Account
  6. Create Service account key credentials
  7. Enter details for service account
  8. Download your JSON credential
  9. In Play Console, select Grant Access on the newly created service account
  10. Grant the following permissions:
  11. After this wait for 48 hours to allow Google to propagate all access rights for APIs.
  12. Open your JSON file download and copy content to LearnPress Setting > In App Purchases and enter to Service Account.

Read more: https://stackoverflow.com/questions/35127086/android-inapp-purchase-receipt-validation-google-play

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

1. Go to src > config > translations > resources
2. Then you can edit file en.js or create a new file language. example: vi.js
3. Then go to src > config > translations > resources > index.js and add code export { default as vi } from './vi';
4. Then go to src > config > translations > index.js and change DEFAULT_LANGUAGE = ‘vi’
5. Finally, you can edit text in file vi.js

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"