Mobile LMS App for IOS & Android

Masterstudy app Documentation

  • Introduction
  • MasterStudy LMS API Plugin Setup
  • Flutter Environment
  • Android App Build on macOS
  • Flutter Setup for the macOS system
  • Android Studio Setup on mac
  • Android Studio Emulator on mac
  • Installing Flutter Packages on mac
  • Setting the Site URL on mac
  • Adding App Icon on mac
  • Setting App Name on mac
  • Firebase on mac
  • Change Package Name
  • Test Your App on mac
  • App Release on mac
  • iOS App Build
  • Building App for iOS
  • Firebase for iOS
  • Android App Build on Windows OS
  • Flutter Setup for Windows System
  • Android studio Setup on Windows
  • Android Studio Emulator on Windows
  • Installing Flutter Packages on Windows
  • Setting the Site URL on Windows
  • Adding App Icon on Windows
  • Firebase on Windows
  • Change Package Name
  • Setting App Name on Windows
  • Test Your App on Windows
  • App Release on Wiindows


Introduction

Introduction

MasterStudy LMS App

MasterStudy App was developed with the Flutter 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.

 

MasterStudy LMS API Plugin Setup

MasterStudy LMS API Plugin Setup

Your work will start with the installation of several items.
First, you need to install MasterStudy LMS API Plugin.

Watch the video tutorial guide to learn about API Setting for MasterStudy App.

Or you can walk through step by step guideline described in this manual.

From the admin panel of your website go to Plugins > Add New > Upload Plugins.
Upload the zip plugin file and install it.

After the installation is done, don’t forget to activate it.
Plugin Settings.
Now you can set up the plugin.

Go to the API Settings menu in the WordPress dashboard.

Among the settings you can find App Home Page Layout section where you can enable/disable sections and change their order on the front page by simply dragging them up/down.

There are also settings you can find under the General Tab, where you can set logo, custom colors, enable/disable the list of the courses. If you enable the display of list of the courses, on the app main screen there will be only the courses list. If this option is disabled the main screen will include categories, popular, featured sections.

Under the Translations tab, you can translate the static strings used in the app.

 

 

 

 

 

Flutter Environment

Flutter Environment

For the full and smooth work, you need to install the Flutter environment, which is a multi-paradigm programming environment, required for you to build your own LMS app.

First, download the Flutter SDK, the installation bundle to get the latest stable release of the Flutter SDK.
Depending on the system you are using follow these links to get the installation file:

Once you downloaded the installation zip package, create a folder, and extract there the Flutter SDK. Use the desired location, extract the Flutter, and archive that folder.

 

Android App Build on macOS

Flutter Setup for the macOS system

Flutter Setup for the macOS system

First, download the Flutter here: https://flutter.dev/docs/get-started/install/macos 

Please note that this manual and all the steps described are applicable to the iOS app building process.

You can watch the video tutorial describing the full process of Android app building on macOS.

Or you can follow the instructions and steps described in this manual.

When you created the folder with Flutter SDK, open it in Terminal using the following command:
cd ~/development

If there is no development folder run this command first:

mkdir /development

After that, you need to run the unzip command. Make sure you specify the correct path to the downloaded Flutter archive file.
Run the command below:

unzip ~/Downloads/flutter_macos_1.17.1-stable.zip

Setting the Flutter tool path

In order to set up the Flutter tool path you should run this command:
export PATH="$PATH:`pwd`/flutter/bin"

Next, you need to know which shell you are using. For this run this command:
echo $SHELL

Depending on the shell run the following command:

sudo nano ~/.zshrc

or

sudo nano /.bashrc

Again, the command you will be using depends on the shell you have.

After that in the new window, you need to add a path to the flutter tool.

Use the following command:

export PATH=$PATH:~/development/flutter/bin

The next thing you need to do is to check the Flutter dependencies.

For this, run the command:

flutter doctor

This operation will help you to identify if there are any dependencies you need to install.
After the results will be prepared click Agree and wait for the installation of the needed dependencies to complete the setup.

The Flutter Doctor results will be displayed as follows:

Accept Android licenses. For this, run this command:

flutter doctor --android-licenses

To accept the licenses just type “y”

After you finished all the steps, the installation of Flutter SDK is complete. You can follow to the next step of building the app.

 

 

Android Studio Setup on mac

Android Studio Setup on mac

Before the beginning of your work, download Android Studio — the environment designed specifically for Android development. Use this link to download the file: https://developer.android.com/studio 

Unzip the file with MasterStudy app project. Launch Android Studio and open the project source folder.

Now you need to finish some setup activities.
Go to the Android Studio > Preferences > Appearance & Behavior > System Settings > Android SDK and install the selected SDK Platforms.

Next, install all components under the SDK Tools.

Now move to the Plugins menu. Here you need to find and install Flutter and Dart plugins (Android Studio > Preferences > Plugins > Flutter).

Proceed with the installation of Dart, and upon its completion restart the Android Studio.

 

 

Android Studio Emulator on mac

Android Studio Emulator on mac

To prepare to run and test your Flutter app on the Android emulator, follow the following steps.

Go to Tools > AVD Manager (Android Virtual Device (AVD) is a configuration that defines the characteristics of an Android device that you want to simulate in the Android Emulator)

Or you can click on the icon as shown on the image below to open AVD Manager.

Select the option Create Virtual Device…

Select a device type and its configurations and click Next.

After that, select the System image.

Next, add a name to your device and select the Hardware - GLES 2.0 for the Emulated Performance.

Finish the creating of your virtual device.

 

Installing Flutter Packages on mac

Installing Flutter Packages on mac

After that, open the pubspec.yaml file and go to Pub get and Pub upgrade options to install the libraries.

When everything is done, the Flutter displays the following message:

This installation and setup process will prepare your PC for further work on app building. 

Run Emulator to check the app.

Setting the Site URL on mac

Setting the Site URL on mac

First, set the website link.
Open the root folder of the MasterStudy App and go to the lib > data > network folder and edit the api_provider.dart file.

Add your site link in the 29th line of the file

 

Adding App Icon on mac

Adding App Icon on mac

After you added a link to your site, go to File > Open and in the new window select the folder android.

Wait for the loading to finish and then open the folder App, and inside this folder select the folder res.

Now press the right mouse button, hover over New option and select Image Asset form the submenu.

Select your icon from your PC or device and set it up.

 

The more detailed documentation about Image Asset work you can find here: https://developer.android.com/studio/write/image-asset-studio 

Setting App Name on mac

Setting App Name on mac

To add a name for your app, you need to edit the file called AndroidManifest.xml.

You can fid this particular file in following folder App > Manifests.

Find in the file the 10th string and enter there the name of your application.

Firebase on mac

Firebase on mac

Crashlytics feature is integrated with Google Firebase service. You need to sign up on the Firebase website and create a new project. Then, add your app to your Firebase project to register app. 

Create a new project.

In the newly opened window enter the name of the project. And click Continue.

Next, select Google Analytics account or create a new one. Click on the Create Project.

Wait for the project to load.

On the opened page select the app platform iOS or Android.

Write the package name and click on the Register app.

The config file will be generated. You need to download it and upload to the following folder: Android > App in the project MasterStudy App.

You will be notified that the file with the same name already exists. You need to confirm that you want to replace it. 

Push Notification

Find the Cloud Messaging menu on the Firebase Dashboard

On the new page click on the Send your first message button. 

Fill in the required fields and click on Next.

Please note before sending the test message, first you need to set up your App in Android Studio and launch it on the virtual device. 

 

After that, select the name of the project. 

Then, fill the fields that left depending on your preferences and click Review.

You will see the next window, just click Publish and you are set. 

 

 

 

Change Package Name

Change Package Name

All Android apps have a package name. The package name uniquely identifies the app on the device; it is also unique in the Google Play store.

In MasterStudy App there is a specific package name that is used: com.example.masterstudy_app. You should change it to your own package name, for example, com.mycompany.name where the Mycomapny will be the name of your brand.

To change the package name you need to follow some steps.

In your Project panel, click on the little gear icon.

Uncheck the option Compact Empty Middle Packages

Your package directory will be broken into individual directories

Individually select the directory you want to rename, and follow these steps:

Right-click it >> Select Refactor >> Click on Rename

Enter the new name and hit Refactor

Click Do Refactor in the bottom and wait a minute to let Android Studio update all changes.

Note: When renaming com in Android Studio, it might give a warning. In such case, select Rename All.

Edit build.gradle (Module: app) file in the Gradle Scripts

Find the 50th line and change “com.stylemixthemes.masterstudyapp” to your package name.

After that click on Sync Now to synchronize Gradle.

Then go to App > Manifests and edit the file AndroidManifest.xml if it wasn't changed automatically. 

In the 14th line of AndroidManifest.xml file should be the same package name.

From the Android Studio menu open Build and click on the Clean Project. Wait until Android Studio finishes the process.

After that, in the same menu find and launch Rebuild Project.

This is the final step in changing the package name.

 

 

 

Test Your App on mac

Test Your App on mac

In this section we are going to describe how to build the test APK file.

There two ways of testing your app: via Android Studio Emulator or by generating Test APK.

After you added app icon and website URL you can launch Emulator by clicking on Run App button in the Toolbar.

After that the Emulator will be launched with the app.

If you'd like to test the application on physical android devices, you can create APK file.

For this, you need to go to Build > Build Bundle(s) / APK(s) > Build APK(s)

This will lead to the app building process, and once it finished Android Studio will display a specific notification in the bottom right corner.

The link Locate opens the folder where the APK file is stored. Or you can follow this path to find this file: Project folder > Android > App > Release

App Release on mac

App Release on mac

After you tested your app, you can sign the app for release to Google Play.

This manual aims to display all the key steps for generating signed app bundle. Please follow this link for the more detailed guide: https://developer.android.com/studio/publish/app-signing#sign-apk

For this, you need to open Build > Generate Signed Bundle / APK…

In the new window select Android App Bundle.

After that, in a new opened window select the Key or create a new one.

Here is an instruction on how to create a new Key. Click on the Create new. You will see the new window opened. Click on folder icon in the right top corner.

Select the folder where the Key will be stored, create new jks

Fill in the information (all fields).

Next, check the Export encrypted key, if it is the update of already uploaded app to the Google Play.

Please find more information here: https://developer.android.com/studio/publish/app-signing#enroll_existing 

Now you need to select Release option and launch app building process.


After that, Android Studio will notify you that app building process is finished (see the notification in the right bottom corner).

By clicking on the Locate you will be redirected to the folder where the file is stored. Also, app bundle can be found here: Project folder > Android > App > Release

The full guide describing how to upload the app to the Google Play Console can be found here: https://developer.android.com/studio/publish/upload-bundle 

iOS App Build

Building App for iOS

Building App for iOS

You can review the App Store Connect tutorial for a more detailed overview.

Watch the video tutorial showing the steps of how to build iOS app on macOS.

Or follow the instructions and steps presented in this manual. 

Please note that for building an iOS app you need to go through these steps first:

1. Flutter Setup for the macOS system 
2. Android Studio Setup on mac
3. Installing Flutter Packages on mac
4. Setting the Site URL on mac

These steps are required for the proper installation of Flutter packages and smooth further work. 


Launch Xcode and open the file Runner.xcworkspace which is located in the ios folder.

Go to File > Runner and enter the Version and Build in the specified fields.

In the Display Name enter the name of the app.

Add your App Icon

You can add icons to your app in the App Icons and Launch Images section of the Xcode General panel. To add icons click on the arrow icon and open the asset catalog

Tip: Follow the Human Interface Guidelines when creating the app icon. You can use the App Icon Generator tool.

In the Finder, drag variations of your app icon to the wells in the detail area match their resolutions

Alternatively, select the asset catalog containing your app icon set in the Project navigator and drag variations to the wells.

Finally, review the icon set has been applied by running your app using Xcode device simulator

Tip: For a detailed overview of using simulator, see the Run your app in Simulator from Xcode.

 

After that, click Product > Archive and wait while the runner is archiving.

When the process is finished, in the popup window click Distribute App.

Select upload option to Send app to App Store Connect.

Next, select profile and continue. Once the process is finished, click on Upload

After that, select the option Manually manage signing.

The select Profile.

Next, click on the Upload.

The uploading process will start, wait until it is finished.

Archive upload successfully completed.

 

Firebase for iOS

Firebase for iOS

Crashlytics feature is integrated with Google Firebase service. You need to sign up on the Firebase website and create a new project. Then, add your app to your Firebase project to register app. 

Create a new project.

In the newly opened window enter the name of the project. And click Continue.

Next, select Google Analytics account or create a new one. Click on the Create Project.

Wait for the project to load.

On the opened page select the app platform iOS or Android.

Enter your Bundle ID and click on Register App.

Download the config file and add it to the following folder iOS > Runner of MasterStudy App project.

After that, you will be notified that the file with the same name already exists. Just confirm the file replacement.
And you are all set.

Push Notification

Open your Apple Developer account > https://developer.apple.com/ and follow to the Certificates, Identifiers & Profiles section.

Then follow to the Keys tab and register a new key.

On the new page click in the Plus icon to register a new key. 

Now, you need to enter the Key Name. And also, on this page, you need to Enable Apple Push Notifications Service (APN). Once you finished click Continue

 

 

On the new opened window click on Register and download the file with the APN Key.

Save the file and follow the Firebase. 

After you generated keys on developer.apple.com open your project in Firebase.

Click on iOS and open its settings.

On the Settings page open the Cloud Messaging option. 

 

Follow to the iOS app configuration section and upload there the file with APN Keys. you downloaded earlier.

After the file is uploaded, you need to enter Key ID and Team ID. You can find these IDs in the Apple Developer Member Center - https://developer.apple.com/membercenter/index.action 

Then, click on the Cloud Messaging menu.

On the new page click on the Send your first message button. 

Fill in the required fields and click on Next.

Please note before sending the test message, first you need to set up your App in Android Studio and launch it on the virtual device. 

 

After that, select the name of the project. 

Then, fill the fields that left depending on your preferences and click Review.

You will see the next window, just click Publish and you are set. 

 

Android App Build on Windows OS

Flutter Setup for Windows System

Flutter Setup for Windows System

Flutter Setup for Windows

You can watch the full video tutorial describing the process of Android app building for Windows users.

Or follow the instructions and steps described i this manual.

Download the Flutter zip file for Windows system: https://flutter.dev/docs/get-started/install/windows#get-the-flutter-sdk 

Extract the zip file and place it in the desired installation location for Flutter SDK (for example, C:\src\flutter).

After that, you also need to download Dart SDK. Use this link to download the file - https://dart.dev/get-dart 

Extract the downloaded file to the same folder you extracted Flutter, you will need this folder for the further Android Studio setup.

Do not install Flutter in a directory like C:\Program Files\ that requires elevated privileges.

Using the Start search bar on your computer, enter “env” in the search field and select the option Edit environment variables for your account.

Next, in the Environment variables in the User Variables field check if there is an entry called Path.

  • If the entry exists, add a full path to flutter\bin.
  • If the entry doesn’t exist, create a new user variable named Path with the full path to flutter\bin.

After that, you need to run the command flutter doctor, which will help you to identify if there are any dependencies you need to install in order to complete the setup.

Run this command:

C:\src\flutter>flutter doctor

When the flutter doctor finishes checking, you can complete the installation of Flutter SDK.

Android studio Setup on Windows

Android studio Setup on Windows

First, unzip the MasterStudy app project. Then open Android Studio and open the existing MasterStudy app project in it.

Follow to the Android SDK (Appearance & Behavior > System Settings > Android SDK).
Under the SDK Platform tab find from the list section Android 9.0 (Pie) or Android 10 (Q) and install or update (depending on the requirement) those elements.

Then, follow to the SDK Tools tab and also update and install the listed elements.

Now you need to install the Flutter plugin. Go to File > Settings > Plugin. Search for the Flutter plugin and click Install.

After this step, follow to Settings > Languages & Frameworks > Dart to set up Dart SDK.

Enter the Dart SDK Path in the field provided.

Specify the path to the unpacked archives from the previous step.

Then move on to the Flutter tab and enter the Flutter SDK Path.

Now when everything is ready, you can start building your Android App.

 

Android Studio Emulator on Windows

Android Studio Emulator on Windows

To prepare to run and test your Flutter app on the Android emulator, follow the following steps.

Go to Tools > AVD Manager (Android Virtual Device (AVD) is a configuration that defines the characteristics of an Android device that you want to simulate in the Android Emulator)

Or you can click on the icon as shown on the image below to open AVD Manager.

Click on Create Virtual Device…

Select a device type and its configurations and click Next.

After that, select the System image.

Next, add a name to your device.

Finish the creating of your virtual device.

 

Installing Flutter Packages on Windows

Installing Flutter Packages on Windows

You continue to work in the same folder of MasterStudy App that you opened in the previous step. 

Open the pubspec.yaml file. Click on your masterstudy project then find the file pubspec.yaml.

Click on the Packages get.

Wait for the process to finish.

Now you can check your app. For this, activate the emulator and click run.

 

 

Setting the Site URL on Windows

Setting the Site URL on Windows

Now you need to edit one file in order to include in the data your website address, thus, enable the synchronization of your site and app.
Open the folder with the app and find the following file there: /masterstudy_app/lib/data/network/api_provider.dart

Open the file api_provider.dart via Notepad or similar editor.

In this file, you will see the following string: static const BASE URL. Paste your website URL here.

Now you can follow to the next step of adding the icon to your mobile application. See the next section.

Adding App Icon on Windows

Adding App Icon on Windows

Your next step is to return to Android Studio. Go to Open an existing AS project, find your app project and open the android folder there.

Open the following folder: …/app/src/main/res and double click on the folder res.

There will be the menu, where you need to hover over the New line and select from the submenu Image Asset.

Select your icon from your PC or device and set it up.

The more detailed documentation about Image Asset work you can find here: https://developer.android.com/studio/write/image-asset-studio 

 

Firebase on Windows

Firebase on Windows

Crashlytics feature is integrated with Google Firebase service. You need to sign up on the Firebase website and create a new project. Then, add your app to your Firebase project to register app. 

Create a new project.

In the newly opened window enter the name of the project. And click Continue.

Next, select Google Analytics account or create a new one. Click on the Create Project.

Wait for the project to load.

On the opened page select the app platform iOS or Android.

Write the package name and click on the Register app.

The config file will be generated. You need to download it and upload to the following folder: Android > App in the project MasterStudy App.

You will be notified that the file with the same name already exists. You need to confirm that you want to replace it. 

Push Notification

Find the Cloud Messaging menu on the Firebase Dashboard

On the new page click on the Send your first message button. 

Fill in the required fields and click on Next.

Please note before sending the test message, first you need to set up your App in Android Studio and launch it on the virtual device. 

 

After that, select the name of the project. 

Then, fill the fields that left depending on your preferences and click Review.

You will see the next window, just click Publish and you are set. 

 

 

Change Package Name

Change Package Name

All Android apps have a package name. The package name uniquely identifies the app on the device; it is also unique in the Google Play store.

In MasterStudy App there is a specific package name that is used: com.example.masterstudy_app. You should change it to your own package name, for example, com.mycompany.name where the Mycomapny will be the name of your brand.

To change the package name you need to follow some steps.

In your Project panel, click on the little gear icon.

Uncheck the option Compact Empty Middle Packages

Your package directory will be broken into individual directories

Individually select the directory you want to rename, and follow these steps:

Right-click it >> Select Refactor >> Click on Rename

Enter the new name and hit Refactor

Click Do Refactor in the bottom and wait a minute to let Android Studio update all changes.

Note: When renaming com in Android Studio, it might give a warning. In such case, select Rename All.

Edit build.gradle (Module: app) file in the Gradle Scripts

Find the 50th line and change “com.stylemixthemes.masterstudyapp” to your package name.

After that click on Sync Now to synchronize Gradle.

Then go to App > Manifests and edit the file AndroidManifest.xml if it wasn't changed automatically. 

In the 14th line of AndroidManifest.xml file should be the same package name.

From the Android Studio menu open Build and click on the Clean Project. Wait until Android Studio finishes the process.

After that, in the same menu find and launch Rebuild Project.

This is the final step in changing the package name.

 

 

 

Setting App Name on Windows

Setting App Name on Windows

To add a name for your app, you need to edit the file called AndroidManifest.xml.

You can fid this particular file in following folder App > Manifests.

Find in the file the 10th string and enter there the name of your application.

Test Your App on Windows

Test Your App on Windows

In this section we are going to describe how to build the test APK file.

There two ways of testing your app: via Android Studio Emulator or by generating Test APK.

After you added app icon and website URL you can launch Emulator by clicking on Run App button in the Toolbar.

After that the Emulator will be launched with the app.

If you'd like to test the application on physical android devices, you can create APK file.

For this, you need to go to Build > Build Bundle(s) / APK(s) > Build APK(s)

This will lead to the app building process, and once it finished Android Studio will display a specific notification in the bottom right corner.  

The link Locate opens the folder where the APK file is stored. Or you can follow this path to find this file: Project folder > Android > App > Release

App Release on Wiindows

App Release on Wiindows

After you tested your app, you can sign the app for release to Google Play.

This manual aims to display all the key steps for generating signed app bundle. Please follow this link for the more detailed guide: https://developer.android.com/studio/publish/app-signing#sign-apk

For this, you need to open Build > Generate Signed Bundle / APK…

In the new window select Android App Bundle.

After that, in a new opened window select the Key or create a new one.

Here is a instruction on how to create a new Key. Click on the Create new. You will see the new window opened. Click on folder icon in the right top corner.

Select the folder where the Key will be stored.

Fill in the information (all fields).

Next, check the Export encrypted key, if it is the update of already uploaded app to the Google Play.

Please find more information here: https://developer.android.com/studio/publish/app-signing#enroll_existing

Now you need to select Release option and launch app building process.

After that, Android Studio will notify you that app building process is finished (see the notification in the right bottom corner).

By clicking on the Locate you will be redirected to the folder where the file is stored. Also, app bundle can be found here: Project folder > Android > App > Release

The full guide describing how to upload the app to the Google Play Console can be found here: https://developer.android.com/studio/publish/upload-bundle