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
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.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
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
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