3. Firebase Setup

We have used the Firestore Database from Google as the backend for this project.

• First, Go to the Firebase Console and sign in with your email account, and go to the console.
• Create a project by your app name. And go to the project overview.

• Click on the plus icon and then click on the web icon. You will see a popup like the second picture below:

• Input the name as Admin Panel and fill in the checkbox because you need hosting too and then click on register app. After that, Skip the other options by clicking next. (Don’t input a custom name for hosting else you need extra setup for this which is not recommended)

• Now go to Project Settings. At the bottom, Select the Admin Panel and copy the selected lines shown in the picture below:

• Now, go to your IDE and open the lib/firebase_option.dart file and paste the line there.

That’s it.

3.1 Firestore Database Setup

Follow the steps below:

• From your firebase console, click on the Firestore Database and then click on the create database button.

• Now select the production mode and click on Next > Enable.

3.2 Database Security Rules

From the Firestore Database, Click on the Rules tab and copy and paste the following code below:

Click on the Publish button to publish the security rules. That’s it.

3.3 Database Index Setup

From the Firestore Database, Click on the Indexes tab and click on the Add Index. You have to create five indexes for the database.

1. Enter reviews as Collection ID, course_author_id into the first field and set Ascending, Enter created_at in the second field and set Descending, Enter __name__ in the third field and set Descending and then select Collection as query scope and save it.
2. Enter courses as Collection ID, cat_id into the first field and set Ascending, Enter id in the second field and set Ascending, Enter __name__ in the third field and set Ascending and then select Collection as query scope and save it.
3. Enter courses as Collection ID, status into the first field and set Ascending, Enter created_at in the second field and set Descending, Enter __name__ in the third field and set Descending and then select Collection as query scope and save it.
4. Enter reviews as Collection ID, course_id into the first field and set Ascending, Enter created_at in the second field and set Descending, Enter __name__ in the third field and set Descending and then select Collection as query scope and save it.
5. Enter courses as Collection ID, cat_id into the first field and set Ascending, Enter status in the second field and set Ascending, Enter id in the third field and set Ascending, Enter __name__ in the fourth field and set Ascending and then select Collection as query scope and save it.

This may take 3-5 minutes to activate. After completing this, your index page should look like this:

3.4 Push Notification Setup

• From your Firebase console, go to the Project Settings > Cloud Messaging Tab. You need to enable the Cloud Messaging API (Legacy) which is disabled now.
• Click on the Manage API in Google Cloud Console and go to that page and enable the API.

• After that, refresh the cloud messaging tab and you see that it is enabled and has a key. Copy that Server Key.

• Now go to your IDE and open lib/configs/app_config.dart file and replace the server token that you have just copied. That’s it.

3.5 Firebase Storage Setup

From your Firebase console, go to Build>Storage and then Click on Get Started, and then select Start in production mode and Next>Done.

Now, go to the Rules tab and copy and paste the following code there.

rules_version = ‘2’;
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read: if true;
allow write: if request.auth != null;
}
}
}

3. Click on Publish to publish the rules.

4. App Configs

4.1 Change App Information

From your IDE, go to the lib/configs/app_config.dart file.

• Change the App Name.
• Change the theme color if you want.

4.2 Change Logos

Default Logo
To change the logo, First, rename your logo to logo.png and make sure the icon is in .png format. Now drag & drop your logo to the assets/images folder and replace it with our logo. That’s it.

Dark Logo
To change the dark logo, First, rename your logo to logo_dark.png and make sure the icon is in .png format. Now drag & drop your logo to the assets/images folder and replace it with our logo. That’s it.

5. Upload to Firebase Hosting

5.1 Install the firebase-tools CLI

Skip this step if you already have Firebase tools installed. If you do not have this, you must install that first.

• npm download link: https://nodejs.org (Download and install it)

If you are not sure whether npm is installed on your machine, run $ npm -v , and see if it lists a version number. If it does, then you already have npm. If it says “command not found”, you need to install it.

Once npm is installed, run the following command:

npm install -g firebase-tools

firebase-tools is now installed!

5.2 Install the required command line tools

• Log into Firebase using your Google account by running the following command:

firebase login

• Type Y and you will be redirected to your browser.

• Follow the command prompt and the link in your browser. Accept the permissions by clicking Ok. When you return to your terminal you should see that you are now logged in.

• Now you have to initialize the firebase. Run the following command:

firebase init

• Use the arrow keys to navigate the cursor to Hosting and hit the spacebar to select it, then press enter. Now you will see this screen:

• Select an existing project by pressing Enter. Use the arrow keys to select the project you have made in the Firebase console.

• Next, enter build/web as the public directory and press enter, then enter y (for yes) to select the single page app option.

• Enter n (for no) to Set up automatic builds and deploys with the GitHub option.

5.3 Build The Web App

Run the following command to build the app for the web:

flutter build web --web-renderer html --release

5.4 Upload to Hosting

Run the following command to upload the admin app to the Firebase hosting:

firebase deploy

After this command, you will get a Hosting URL from Firebase which will be your Admin URL.

6. Admin Credentials Steup

Admin Username & Password Setup

• From your Firebase Console > Your App, go to the Build > Authentication > Sign-in method tab and Enable Email/Password, and Save it.

• Now go to the Users tab and click on the Add User button and create a new account by providing your email and password.

The username and password will be the admin email and password.

• Copy The User UID which is required for the next step. Now you have to create a record of the account you have created in the database.
• Go to the Build > Firestore Database and create a collection named users by clicking on the Start Collection button.

• After clicking Next, you will get a new document form.

• Use the user Id that you have copied as Document ID. Create a field named email and use your admin email as value. Create another field named name and enter your name as a value. Create another filed named role and the type must be an array and write admin as the first value of that array. Create another field named created_at and the type must be timestamp and select a date and time as values.

The fields and types should be the same as shown in the picture below.

• Save it and after creating the user collection and document, your document details will look like this:

That’s it. Your admin account has been created. You can now log into your admin panel using the email and password you have created.

3. Firebase Setup for Android

3.1 Android Package Name Setup on Firebase

• Go to the Firebase console > Project overview page. Click on the Add app and then the Android Icon. Enter your Android package name.

Your package name should be like com.your_name.your_app_name . Like com.microsoft.skype. You can use the same package name for Android & iOS. iOS doesn’t support underspace in the package name. So, keep in mind that if you want to use the same package name for both Android & iOS.

• Click on the register app and skip other steps by clicking next. That’s it.

3.2 Change Package Name Android

Now, you have to change the package name in the source code. You have to use the same package name that you have registered in the firebase console.

• Go to your IDE and now you have to change the package name of your app. Run the following command from your IDE terminal by changing the package name with yours.

flutter pub run change_app_package_name:main com.new.package.name

Don’t forget to replace com.new.package.name with your package name.

That’s it. Your Android package name setup is complete.

3.3 Generate Debug Certificate

You need to generate 2​ signing certificates​ for the Google sign-in feature. Debug certificate is required for testing purposes. If you want to test Google signing during development, then you should follow the steps. Otherwise, you can ignore it.

• To generate a debug certificate, run this command on your terminal from your app root directory.
• MAC: keytool -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore
• WINDOWS: keytool -list -v -alias androiddebugkey -keystore %USERPROFILE%.androiddebug.keystore

If this command doesn’t work, then go to this link and copy the debug command from there according to your operating system.

• Use ​android as a debug password when the terminal asks for a password.

• Copy the SHA1 certificate code and go to Firebase Console > Your Project > Project Settings and click on the Android icon and then add the SHA1 code by clicking ​Add fingerprint​ button. Look at the picture below:

3.4 Generate Release Certificate

To generate a release certificate, You have to generate a Keystore file. To generate a Keystore file, run this command below from the root of your project directory.

• MAC: keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upload
• WINDOWS: keytool -genkey -v -keystore c:UsersUSER_NAMEupload-keystore.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias upload

1. Enter your details and remember the password. After this, you will get an upload-keystore.jks Keystore file.
2. Locate this file and move the file into the android/app folder and copy the path by right-clicking on the upload-keystore.jks file.
3. Then go to the android/key.properties​ file and replace the path of your Keystore file. Then also replace the ​password​ that you have inputted to generate the Keystore file.

Now you can generate a release certificate, To do that,

• Run with replacing your alias_name and keystore_location.

keytool -list -v -keystore keystore_location -alias alias_name

Your alias_name is upload and keystore_location is the path(directory) of the upload-keystore.jks file.

• After that, you will get a SHA1 code. Copy that code and add it to your Firebase Console > Project Settings > Android, where you previously added a debug SHA1 code.

3.5 Google Sign In Setup for Android

• Go to Firebase console>Your Project>Authentication>Sign-in-method and enable both email/password and google and save it.

• You have to configure some stuff for Google sign-in. Go to the Google Cloud Console.
• Make sure you are signed in with the same account with which you have created the Firebase project.
• Also, make sure that on the top-left corner, your project is selected for which you are filling this consent.

• Go to the Credentials → OAuth consent screen tab and start filling out the form.
• Enter the Application name, Application logo, and Support email.

• In all these places, you have to enter the same link starting with http:// and then your app domain name which I have marked with green below.
• Then, scroll down and fill in the Application Homepage link, Application Privacy Policy link, and Application Terms of Services link.

• Click on Save. That’s it. You have completed your Google sign-in setup for Android.

3.6 Additional Firebase Setup for Android

Now, you have to connect the Firebase with your code project. Follow the steps below:

• Run the following command from your IDE terminal: firebase login

After this command, you will get a link prompt to log in with the email account that you have used on Firebase. Login with that by allowing the required criteria.

• Run the following command from your IDE terminal: dart pub global activate flutterfire_cli
• Run the following command from your IDE terminal: flutterfire configure
• Select Your App and Press Enter.

• Select Android and press Enter.

Use arrow keys & space to select/unselect

You can select both Android & iOS if you want to build for both. If you do that, you can ignore the 4.4 Step.

After this command, A google-services.json file in the android/app folder and A firebase_options.dart file in the lib folder will be added. If you found them, your Firebase configuration is successful.

4. Firebase Setup for iOS

4.1 iOS Package Name Setup on Firebase

• Go to the Firebase console > Project overview page. Click on the Add app and then the iOS icon. Enter your package name. You can use the same package name that you have used for Android.

• Click on the register app and skip others by clicking next.
• Now go to project settings and click on ios and download the GoogleService-info.plist​ file.
• Then go to the i​os/Runner directory​ and paste the file here.
• Now, Open the iOS folder on Xcode by right-clicking on the iOS folder from VSCode or Android Studio and go to the runner folder, and move the GoogleService-info.plist​ file here. You will get a popup and click yes or confirm the popup message.
• Now, open the ​GoogleService-info.plist​ file in your IDE and copy the REVERSED_CLIENT_ID. (See the picture below)​

• Go to the i​os/Runner/Info.plist​ file and replace the R​EVERSED_CLIENT_ID here.

4.2 Change Package Name iOS

• Go to the i​os/Runner/Info.plist​ file and replace the CFBundleIdentifier value with your iOS package name. (See the picture below)

4.3 Apple Login Setup

Only for iOS: An paid apple developer account and Xcode app on your mac is required.

• From your IDE, Right click on the ios folder and click on open on Xcode and then go to runner > sign in & capability tab.

• Add Sign in with Apple. We already did this in the project. If this is not available in the project, do this by yourself.

• Now go to your firebase console > your project > authentication page and enable the apple sign-in option. You don’t have to put anything in the text fields.

One more thing, when you configure Firebase push notification for iOS in the next step, make sure you also tik on the Sign In with Apple option in the identifier on the apple developer page.

4.4 Additional Firebase Setup for iOS

Now, you have to connect the firebase with your code project. Follow the steps below:

• Run the following command from your IDE terminal: firebase login

After this command, you will get a link prompt to log in with the email account that you have used on firebase. Login with that by allowing the required criteria.

• Run the following command from your IDE terminal: dart pub global activate flutterfire_cli
• Run the following command from your IDE terminal: flutterfire configure
• Select Your App and Press Enter.

• Select iOS and press Enter.

After this command, Your iOS app information from firebase will be added in the lib/firebase_options.dart file. If you found them, your firebase configuration is successful.

5. Push Notification Setup

6. Multi-Language Setup

You can skip this setup for now. This is not a mandatory setup to run this app.

So, we have used 10 languages in this app. English, Spanish, Hindi, Arabic, Portuguese, French, Chinese, German, and Indonesian.

You can add as many languages as you want. The multi-language feature is only for all of the static texts in the app. It’s static and not related to the database.

English is the default and starting Language. You can change the default language too if you want.

6.1 Editing An Existing Language

If your language is already available on the list and you want to make some changes, then follow the steps below:

Example: If you want to change some text in the Spanish language, then open the assets/translations/es-ES.json file and edit only right-side values.

• Don’t edit the keys (Left side values)

6.2 Adding A New Language

If you want to add a new language that is not available in the default list, follow the steps below:

• First, go to the assets/translations folder from your IDE. Add a .json file here with <language_code>-<country_code>.json name. Now go to the assets/translations/en-US.json file and copy everything from this file and paste it to your newly created .json file.

• Now, Rename the all right-side strings. Look at the es-ES.json file and you will understand what to do.
• Now go to lib/config/language_config.dart the file and add your language code to the language list.

Your code should look like this: “<Language_Name>”: [<‘Language_Code’>, <‘COUNTRY_CODE’> ]

• For Android, you don’t have to do anything.
• For iOS, go to ios/Runner/Info.plist and add your language code in a string. Look at the picture below.

• Add <string>your_language_code</string> inside the array. That’s it.

6.3 Removing An Existing Language

To remove any language that is available in the list, please follow the steps below:

• Go to the asset/translations folder and delete the your_language_code.json file that you want. (You shouldn’t delete the en-US.json file because this is the default language).
• Now go to lib/config/language_config.dart file and remove the list item that you want to remove from the langauges list.
• And finally go to ios/Runner/Info.plist and remove the string. That’s it. (Only for iOS)

6.4 Start Locale Setup

English is added as the start language of the app by default. If you want to add any other language as a Start Language then go to the lib/language_config.dart file and replace the startLocale value with your locale value.

6.5 Disable Multi-Language Feature

You can disable the multi-language feature if you want. For this case, English will be used as the default and only language in the app. If you do that, the changing language option will be hidden from the app and the app will run with the default language.

To disable it go to the lib/configs/features_config.dart file and set the isMultilanguageEnbled value to false.

Enable/Disable Specific Features

You can disable/enable some specific features of the app from this file. File Location: lms_app/lib/configs/feature_config.dart

Disable Facebook Login

As per the new policy from Meta, A registered organization/company is required to enable Facebook login in the app or website. If you are an individual and having issues with fb login steps, then you can easily disable fb login from the app. To do that,

Change the fbLoginEnabled value to false. That’s it.

Disable Multi-Language Feature

If you want to use the app language only in English and remove the language selection dialog from the app, then you can disable that easily. To do that,

Change the MultiLanguageEnabled value to false. That’s it.

Customize Specific Features from the Admin Panel

You can customize many features from your admin panel. Check out the Admin Panel > Settings tab for more details.