Eduma App - docspress.thimpress.com

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: it requires to install nodejs > 14 in this link: https://nodejs.org/en/download/
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

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.

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

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:

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

9.1.SETUP FOR LEARNPRESS

Upload Plugin LearPress App Purchase to your website: Download here

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

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

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

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