## Version: 6.0.2
> 20 November 2024
>
> ```
> - Compatible with flutter latest version 3.24.x
> - Fix: Video player issues with youtube [app]
> ```
> Changed Files (App)
>
> ```
> - pubspec.yaml
> - android/settings.gradle
> - lib/services/auth_service.dart
> - lib/screens/auth/phone_auth/phone_login.dart
> - lib/components/video_player_widget.dart
> - ios/Runner/Info.plist [ios]
> ```
## Version: 6.0.1
> 22 August 2024
>
> ```
> - Logins options are removed from welcome screen [app]
> - New comment tile [app]
> - Fixed notifcation issues on posts [admin]
> - Compatible with Flutter latest version 3.24.x
> ```
> Changed Files (Admin)
>
> ```
> - lib/main.dart
> - lib/mixins/appbar_mixin.dart
> - lib/pages/login.dart
> - lib/pages/splash.dart
> - lib/pages/verify.dart
> - lib/services/notification_service.dart
> - lib/tabs/admin_tabs/articles/sort_articles_button.dart
> - pubspec.yaml
> ```
> Changed Files (App)
>
> ```
> - lib/core/home.dart
> - lib/screens/auth/login.dart
> - lib/screens/auth/sign_up.dart
> - lib/screens/auth/social_logins.dart
> - lib/screens/comments/comment_tile.dart
> - lib/screens/comments/comments.dart
> - lib/screens/home/home_bottom_bar.dart
> - lib/screens/welcome.dart
> - lib/services/notification_service.dart
> - lib/theme/text_themes.dart
> - pubspec.yaml
> - A new translation key is added named 'welcome-intro' in the assets/translations files
> ```
## Version: 6.0.0
New Improved version of NewsHour. This version won't support the previous versions. Supports for the earlier versions are ended with this. We had to change the data structure for new features and enhancements.
[Migrate to V6.0](https://doc.newshour.mrb-lab.com/updates/19.-migrate-to-v6.0)
> 27 July 2024
>
> ```
> - New and improved UI, tons of new features and lots of customization ability
> - New responsive admin dashboard and individual author dashboard.
> - Inline Native Ads, Customizable Inline Custom Ads, Audio articles support with Soundcloud.
> - Subscriptions with In-App Purchases and more....
> ```
# Getting Started
Welcome to the **NewsHour** Configuration Document. This is the installation doc for both admin and app. You can build the admin panel and app (Android & iOS) by following this doc.
So, You will get two source code files. One is for the Admin Panel and the other one is for the App. Both are developed on the Flutter framework. So, You need to install Flutter on your computer first to set up both. You need to follow the admin panel setup first and then go for the app setup.
{% hint style="info" %}
Note: We provide installation/reskin service for the PrimeLMS app. If you can’t do the installation by yourself, we can do that for you. You can check out installation plans here: [Installation Plans](https://www.mrb-lab.com/installation-plans/newshour)
{% endhint %}
# 1. Flutter Installation
The complete application (both admin & app) has been developed & built on Flutter. First, You have to install Flutter on your computer. You can use Both Visual Studio Code & Android Studio as IDE for Flutter. The steps are the same for both IDEs.
> To install flutter on your computer, follow the official documentation from Google. Flutter Official Site: .
You can follow these YouTube videos to install Flutter too.
> * For Mac:
> * For Windows:
{% hint style="success" %}
**The recommended compatible Flutter version is 3.29.3**
{% endhint %}
{% hint style="info" %}
Note: A Mac (Apple Desktop/laptop) device and an Apple developer account are required for the iOS setup. If you don’t have both of them, you can ignore the iOS steps.
{% endhint %}
# 2. Code Setup
After purchasing the app you will get a .zip file. Unzip it. Inside the **main\_files** folder, you will get a folder named **news\_admin**. This is the source code of the admin app. You have to work on this to set up your admin panel. Now open your IDE(Android Studio/VSCode) and open the **news\_admin** folder on your IDE. Wait some time to load the project.
Now go to the IDE terminal and run the following commands one after one :
After that, run the following command below:
```
flutter clean
```
```
flutter pub get
```
{% hint style="info" %}
Make sure to run these commands from the root directory of the code.
{% endhint %}
These commands will clean the project and get the required packages. Wait some time to get all the packages.
# 3. Firebase Setup
We have used the Firestore Database from Google as the backend for this project.
* First, Go to the [Firebase Console](https://firebase.google.com/) 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:
{% code title="Firestore Security Rules" fullWidth="false" %}
```firestore-security-rules
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /categories/{document=**} {
allow read : if true;
allow write: if isUserSignedIn() && isAdmin();
}
match /tags/{document=**} {
allow read : if true;
allow write: if isUserSignedIn() && (isAdmin() || isAuthor());
}
match /articles/{document=**} {
allow read : if true;
allow update: if
(request.resource.data.diff(resource.data).affectedKeys().hasOnly(['views'])) ||
(isUserSignedIn() && (request.resource.data.diff(resource.data).affectedKeys().hasOnly(['likes']))) ||
isAdmin() || isAuthor();
allow create, delete: if isUserSignedIn() && (isAdmin() || isAuthor());
}
match /notifications/{document=**} {
allow read : if true;
allow write: if isUserSignedIn() && isAdmin();
}
match /comments/{document=**} {
allow read : if true;
allow create, update : if isUserSignedIn();
allow delete: if isUserSignedIn();
}
match /purchases/{document=**} {
allow read : if true;
allow create: if isUserSignedIn();
}
match /settings/{document=**} {
allow read : if true;
allow write: if isUserSignedIn() && isAdmin();
}
match /user_stats/{document=**} {
allow read : if true;
allow write: if isUserSignedIn();
}
match /purchase_stats/{document=**} {
allow read : if true;
allow write: if isUserSignedIn();
}
match /users/{document=**} {
allow read : if true;
allow create: if isUserSignedIn() && request.auth.uid == request.resource.id;
allow update: if isUserSignedIn() && (
request.auth.uid == request.resource.id || isAdmin()
)
allow delete: if isUserSignedIn() && request.auth.uid == resource.id;
}
function isUserSignedIn (){
return request.auth != null;
}
function isAdmin (){
return "admin" in get(/databases/$(database)/documents/users/$(request.auth.uid)).data.role;
}
function isAuthor (){
return "author" in get(/databases/$(database)/documents/users/$(request.auth.uid)).data.role;
}
}
}
```
{% endcode %}
Click on the **Publish** button to publish the security rules. That's it.
# 3.3 Database Index Setup
You have to create **8 indexes** for the database one by one. From the Firestore Database, Click on the **Indexes** tab and click on the **Add Index**. You have to create **8 indexes** for the database.
> 1. Enter **articles** as Collection ID, **status** into the first field and set **Ascending**, Enter **views** 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 **articles** as Collection ID, **content\_type** into the first field and set **Ascending**, Enter **status** in the second field and set **Ascending,** Enter **created\_at** in the third field and set **Descending,** Enter **\_\_name\_\_** in the fourth field and set **Descending** and then select **Collection** as query scope and save it.
> 3. Enter **comments** as Collection ID, **article\_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.
> 4. Enter **articles** as Collection ID, **category.id** into the first field and set **Ascending**, Enter **status** in the second field and set **Ascending,** Enter **created\_at** in the third field and set **Descending,** Enter **\_\_name\_\_** in the fourth field and set **Descending** and then select **Collection** as query scope and save it.
> 5. Enter **articles** 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.
> 6. Enter **articles** as Collection ID, **featured** into the first field and set **Ascending**, Enter **status** in the second field and set **Ascending,** Enter **views** in the third field and set **Descending,** Enter **\_\_name\_\_** in the fourth field and set **Descending** and then select **Collection** as query scope and save it.
> 7. Enter **articles** as Collection ID, **content\_type** into the first field and set **Ascending**, Enter **status** in the second field and set **Ascending,** Enter **views** in the third field and set **Descending,** Enter **\_\_name\_\_** in the fourth field and set **Descending** and then select **Collection** as query scope and save it.
> 8. Enter **comments** as Collection ID, **article\_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.
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 > Service Accounts** Tab. You need to download your service account information.
* **Firebase Admin SDK > Node.js > Generate new private key** and a JSON file will be downloaded.
* Open that JSON file in any text editor and copy the information inside the **{}** curly bracket.
* Now go to your IDE and open **lib/configs/fcm\_config.dart** the file and paste the text you have just copied inside the curly bracket. 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.
{% code title="Storage Security Rules" %}
```firestore-security-rules
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read: if true;
allow write: if request.auth != null;
}
}
}
```
{% endcode %}
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: (Download and install it)
{% hint style="info" %}
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.
{% endhint %}
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 --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
1. From your Firebase Console > Your App, go to the **Build > Authentication > Sign-in method** tab and Enable **Email/Password,** and Save it.
2. Now go to the **Users** tab and click on the **Add User** button and create a new account by providing your email and password.
{% hint style="info" %}
The username and password will be the admin email and password.
{% endhint %}
3. 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.
4. Go to the **Build > Firestore Database** and create a collection named **users** by clicking on the **Start Collection** button.
5. After clicking Next, you will get a new document form.
6. 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.
{% hint style="info" %}
The fields and types should be the same as shown in the picture below.
{% endhint %}
7. 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.
{% hint style="info" %}
After, login into your admin account, if you see a validation form, just enter your purchase code and validate your account.
[Where to get my purchase code?](https://help.market.envato.com/hc/en-us/articles/202822600-Where-Is-My-Purchase-Code-)
{% endhint %}
# 7. Conclusion
Hopefully, you have finished all of the steps and got an admin panel URL. You can add some content before going to the app setup.
# 1. Introduction
Make sure you have configured your admin panel first. If everything is okay, you can follow the further steps. You can use Android Studio or Visual Studio Code.
{% hint style="info" %}
Note: A Mac (Apple Desktop/laptop) device and an apple developer account are required for the iOS setup. If you don’t have both of them, you can ignore the iOS steps.
{% endhint %}
# 2. Code Setup
Open the **source/news\_app** folder on your IDE (VSCode or Android Studio) and wait some moment to load the project.
> * Run the following command on the IDE terminal to clean the whole project first.
>
> ```
> flutter clean
> ```
>
> * Run the following command on the IDE terminal to get all the required packages.
>
> ```
> flutter pub get
> ```
\
Now, your project is ready for configuration.
# 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 A**ndroid** **Icon**. Enter your Android package name.
{% hint style="info" %}
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.
{% endhint %}
* Click on the register app and skip other steps by clicking next. That’s it.
# 3.2 Change Package Name Android
{% hint style="info" %}
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.
{% endhint %}
* 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
```
{% hint style="info" %}
Don’t forget to replace **com.new\.package.name** with your package name.
{% endhint %}
That’s it. Your Android package name setup is complete.
# 3.3 Generate Debug Certificate
{% hint style="info" %}
You need to generate 2 signing certificates for the **Google Sign-In & Mobile OTP Login** 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.
{% endhint %}
* To generate a debug certificate, run this command on your terminal from your app
root directory.
{% tabs %}
{% tab title="Mac" %}
```
keytool -list -v \
-alias androiddebugkey -keystore ~/.android/debug.keystore
```
{% endtab %}
{% tab title="Windows" %}
```
keytool -list -v \
-alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore
```
{% endtab %}
{% endtabs %}
{% hint style="info" %}
If this command doesn’t work, then go to this [link](https://developers.google.com/android/guides/client-auth) and copy the debug command from there according to your operating system.
{% endhint %}
* Use **android** as a debug password when the terminal asks for a password.
* Copy both **SHA1** & **SHA256** certificate codes and go to **Firebase Console > Your Project > Project Settings** and click on the Android icon and then add the **SHA1** & **SHA256** codes by clicking the **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.
{% tabs %}
{% tab title="Mac" %}
```
keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key
```
{% endtab %}
{% tab title="WIndows" %}
```
keytool -genkey -v -keystore c:/Users/USER_NAME/key.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias key
```
{% endtab %}
{% endtabs %}
* Enter your details and remember the **password**. After this, you will get an **key.jks** Keystore file.
* Locate this file and move the file into the **android/app** folder and copy the **path** by right-clicking on the **key.jk**s file.
* 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
```
{% hint style="info" %}
Your alias\_name is **key** and keystore\_location is the path(directory) of the **key.jks** file.
{% endhint %}
* After that, you will get a **SHA1** & **SHA256** codes. Copy these codes and add them to your **Firebase Console > Project Settings > Android**, where you previously added a debug SHA1 code.
# 3.5 Google Sign In Setup for Android
{% hint style="info" %}
You can disable Google Sign-In from the **lib/configs/feature\_config.dart** file
{% endhint %}
* 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.
{% hint style="info" %}
Google Cloud Console:
{% endhint %}
* Make sure that 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 Facebook Login Setup for Android
{% hint style="warning" %}
Facebook login requires **business verification** now. So, If you have any organization that completed the business verification process, then you can set up the Facebook login. Otherwise, skip this and disable the Facebook login by following this.
{% endhint %}
{% hint style="info" %}
This is turned off by default. You can enable/disable **Facebook Login** from the **lib/configs/feature\_config.dart** file
{% endhint %}
Follow the steps below if you want to add the Facebook login to your iOS app:
* Go to this [URL](https://developers.facebook.com/).
* Go to **My Apps> Create App**.
* Enter the App name and email and go to the Dashboard tab.
> For the next step, you need to generate two hash ids. To do that, run the following commands on the terminal.
1. Scroll down on the right pane until you reach ‘Add a product’, select Facebook Login
2. You will be redirected to the quick start page.
3. Select Android. Skip 1 & 2.
4. Enter **your\_package\_name** in the package option and enter **your\_package\_name.MainActivity** in the activity option.
{% tabs %}
{% tab title="Mac" %}
```
keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64
```
{% endtab %}
{% tab title="WIndows" %}
```
keytool -exportcert -alias androiddebugkey -keystore "C:\Users\USERNAME\.android\debug.keystore" | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" sha1 -binary | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" base64
```
{% endtab %}
{% endtabs %}
1. Use **android** as a debug password. After that, you will get a hash ID like this.
1. For the release hash ID, run the following command by replacing your alias key name and Keystore location. You can get these from your android/key.properties file.
```
keytool -exportcert -alias YOUR_RELEASE_KEY_ALIAS -keystore YOUR_RELEASE_KEY_PATH | openssl sha1 -binary | openssl base64
```
1. After that, you will get another **hash ID**. Now, copy and paste them into the next steps of the Facebook developer site. Like this,
1. Skip all the steps by clicking next.
2. Now go to the settings tab & copy both the **app id** and **app secret key**.
3. Now go to **Firebase console > your project > authentication > Sign-in-method** and click on Facebook, enable it and paste both **app id** and **app secret key,** and save it.
4. Now go to **android/app/src/main/res/values/strings.xml** file and change the **facebook\_app\_id** and **facebook\_client\_token**.
{% hint style="info" %}
You will get the **Facebook client token** from > Your\_app > Settings > Advance tab.
{% endhint %}
# 3.7 Phone Number Login Setup
Login with Phone Number
{% hint style="info" %}
This feature is turned off by default. You can turn it on from the **lib/configs/feature\_config.dart file.** You need to upgrade to the Firebase Spark Plan and add a billing account to use this feature according to the recent Firebase update.
{% endhint %}
To use this, From your Firebase Console > Authentication > Turn on the **Phone** provider and add your testing number and OTP which are required for texting purposes.
# 3.8 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
```
{% hint style="info" %}
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.
{% endhint %}
* Run the following command from your IDE terminal:
```
dart pub global activate flutterfire_cli
```
{% hint style="info" %}
After this command, if you get an error like the picture below, then just copy that line and run that.
{% endhint %}
* Run the following command from your IDE terminal:
```
flutterfire configure
```
* Select Your App and Press Enter.
* Select Android and press Enter.
{% hint style="info" %}
Use arrow keys & space to select/unselect
{% endhint %}
{% hint style="success" %}
You can select both Android & iOS if you want to build for both. If you do that, you can ignore the **4.5** Step.
{% endhint %}
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 **ios/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 **ios/Runner/Info.plist** file and replace the **REVERSED\_CLIENT\_ID** here.
# 4.2 Change Package Name iOS
* Go to the ios/Runner/Info.plist file and replace the **CFBundleIdentifier value** with your **iOS package name**. (See the picture below)
# 4.3 Facebook Login Setup for iOS
{% hint style="warning" %}
Facebook login requires **business verification** now. So, If you have any organization that completed the business verification process, then you can set up the Facebook login. Otherwise, skip this and disable the Facebook login by following this.
{% endhint %}
{% hint style="info" %}
This is turned off by default. You can enable/disable Facebook Login from the **lib/configs/feature\_config.dart** file
{% endhint %}
Follow the steps below if you want to add Facebook login to your iOS app:
* Go to [Facebook Dev Site](https://developers.facebook.com/) again and navigate to your project and click facebook login > quick setup > ios icon.
* Skip 1 & go to step 2.
* Enter your **ios package name** in the **bundle ID** option & skip others by clicking next.
* Now, go to the **ios/Runner/Info.plist** file and replace your **FacebookAppID, FacebookDisplayName**(Your App Name) & **FacebookClientToken.**
That’s it. Facebook login setup for iOS is complete.
# 4.4 Apple Login Setup
Only for iOS
{% hint style="info" %}
An paid apple developer account and Xcode app on your mac is required.
{% endhint %}
* 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.
{% hint style="info" %}
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.
{% endhint %}
# 4.5 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
```
{% hint style="info" %}
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.
{% endhint %}
* Run the following command from your IDE terminal:
```
dart pub global activate flutterfire_cli
```
{% hint style="info" %}
After this command, if you get an error like the picture below, then just copy that line and run that.
{% endhint %}
* Run the following command from your IDE terminal:
```
flutterfire configure
```
* Select Your App and Press Enter.
* Select iOS and press Enter.
{% hint style="info" %}
Use arrow keys & space to select/unselect
{% endhint %}
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
# 5.1 Android Notification Setup
{% hint style="info" %}
For Android, You don’t have to do anything. We already integrated the procedures into the project.
{% endhint %}
# 5.2 iOS Notification Setup
{% hint style="info" %}
For iOS, Go to this [link](https://firebase.flutter.dev/docs/messaging/apple-integration) and follow the instructions. This is a well-written doc from the Flutter Team. You can ignore the (Advanced, Optional) step from there.
{% endhint %}
# 6. Multi-Language Setup
{% hint style="success" %}
You can skip this setup for now. This is not a mandatory setup to run this app.
{% endhint %}
So, we have used 10 languages in this app. English, Spanish, Hindi, Bengali, Arabic, Portuguese, French, Chinese, German, and Russian.
{% hint style="info" %}
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.
{% endhint %}
{% hint style="info" %}
English is the default and starting Language. You can change the default language too if you want.
{% endhint %}
## 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**.
{% hint style="warning" %}
Don't edit the keys (Left side values)
{% endhint %}
{% hint style="danger" %}
If you find any characters in the right-side values like this below, don't remove them.
**{}**
{% endhint %}
## 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>-\.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.
{% hint style="warning" %}
Don't edit the keys (Left side values)
{% endhint %}
{% hint style="danger" %}
If you find any characters in the right-side values like this below, don't remove them.
**{}**
{% endhint %}
* 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_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 **\your\_language\_code\** 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**.
# 7. Ads Setup
Admob Ads
{% hint style="success" %}
You can skip this setup for now and can configure it later. We have enabled AdMob ads by default with test ad unit IDs. You can enable/disable ads from the admin panel.
{% endhint %}
We have added 4 types of ads.
> 1. **Banner Ads**: At the bottom of the article details and all articles views screens.
> 2. **Interstitial Ads**: This is a full screen ad. An interstitial ad will be shown when users open any post and meets your click counts. You can setup the click count from the Admin Panel > Ads. If you set count 3 then an full screen ads will be shown when users click on 3 posts.
> 3. **Inline Native Ads:** Inline native ads in between post list. You can set post interval from the Admin Panel > Ads.
> 4. **Inline Custom Ads:** Same as native ads but you can create and customize your own ads. This is not from AdMob. It's totally custom. You can create as many custom ads and the app will randomly pick one ad for each placement. You can create 3 types of custom ads. One is like a banner which will have only the title and action URL. Others with only images and the final one is like native ads with title, image, and action button.
{% hint style="info" %}
The app prioritizes custom ads first. That means if both Native and Custom ads are enabled, native ads will be ignored. You need to choose one between native and custom ads.
{% endhint %}
{% hint style="danger" %}
You can control ads from the admin panel. We have added an option to turn off/on ads at any time you want. Don’t enable ads on the admin panel if you have not enabled ads in the app.
{% endhint %}
{% hint style="warning" %}
We have used Admob ads by default with test unit IDs. To test the ads, you should test with the test unit IDs. Before releasing the app for production, make sure you have changed the app IDs and ad unit IDs with yours. Admob is applied by default. So you don’t have to do anything before releasing.
{% endhint %}
# 7.1 Admob Setup for Android
{% hint style="warning" %}
Follow these steps only for production (release):
{% endhint %}
* From your AdMob account, create an app for Android. You will get an **app ID** for Android.
* Create 3 ad units. One banner, One Interstitial and One Native.
* Now, go to the **android/app/src/main/AndroidManifest.xml** file and change the AdMob app ID (Android) with yours.
* Go to the **lib/configs/ad\_config.dart** file and change the **interstitialAdUnitIdAndroid,** **bannerAdUnitIdAndroid,** and **nativeAdUnitIdAnndroid** with your values.
{% hint style="info" %}
Ignore the iOS IDs if you don’t want to make the app for iOS.
{% endhint %}
# 7.2 Admob Setup for iOS
{% hint style="danger" %}
You shouldn't use the android values here.
{% endhint %}
{% hint style="warning" %}
Follow these steps only for production (release):
{% endhint %}
* From your AdMob account, create an app for iOS. You will get an **app id** for iOS.
* Create 3 ad units like Android. One banner, One Interstitial, and One Native.
* Now, go to the **ios/Runner/Info.plist** file and change the AdMob app(iOS) with yours.
* Go to the **lib/configs/ad\_config.dart** file and change the **interstitialAdUnitIdiOS,** **bannerAdUnitIdiOS, and nativeAdUnitIdiOS** with your values.
# 7.3 Custom Ads
Inline Custom Ads
**Custom Ads Setup from Admin Panel**
> Inline custom ads in between post list. You can set post interval from the Admin Panel > Ads. No configurations are required for this. You can tottaly control it from the admin panel.
Same as native ads but you can create and customize your own ads. This is not from AdMob. It's totally custom. You can create as many custom ads and the app will randomly pick one ad for each placement. You can create 3 types of custom ads. One is like a banner which will have only the title and action URL. Others with only images and the final one is like native ads with title, image, and action button.
# 8. App Information Setup
{% hint style="info" %}
Go to the **lib/configs/app\_config.dart** file and change the existing values with all of your details.
{% endhint %}
> * Chnage the app name and app theme color (Only last six digit of your hex color code).
> * iOS app ID (Only for iOS and you can ignore this for now)
{% hint style="info" %}
iOS app ID can be found from your Apple developer account > Appstore Connect > Your App > App Information page. (This is required to open your app at the AppStore app to provide ratings)
{% endhint %}
# 8.1 Change App Name
### Android
> Go to the **android/app/src/main/AndroidManifest.xml** file and Change your app name.
***
### iOS
> Go to the **ios/Runner/Info.plist** file and Change your app name.
# 8.2 Change App Icons & Images
## 8.2.1 Change App Icon
The icon should be in **.png** format.
> * Go to the **assets/images** and delete the default icon (i**con.png**).
> * Now upload your app icon as png in the **assets/images** folder and rename it to **icon.png**
> * Now run the following command on the terminal:
```
flutter pub get
flutter pub run flutter_launcher_icons:main
```
This command will create an android & iOS icons for your app.
{% hint style="info" %}
That’s it. For more info, visit this [site](https://pub.dev/packages/flutter_launcher_icons#-readme-tab-).
{% endhint %}
***
## 8.2.2 Change App Logo (For Light Mode)
The logo should be in **.png** transparent format.
> * Go to the **assets/images** and delete the default logo (**logo.png**).
> * Now upload your app icon as png in the **assets/images** folder and rename it to **logo.png**
## 8.2.2 Change App Logo (For Dark Mode)
The logo should be in **.png** transparent format.
> * Go to the **assets/images** and delete the default logo (**logo\_dark.png**).
> * Now upload your app icon as png in the **assets/images** folder and rename it to **logo\_dark.png**
***
## 8.2.3 Change Splash Icon
The splash icon should be in **.png** format.
> * Go to the **assets/images** and delete the default splash icon (**splash.png**).
> * Now upload your app icon as png in the **assets/images** folder and rename it to **spash.png**
***
## 8.2.4 Change On-Boarding Images
These images must be in **.svg** format. We have used images from the following site: [https://storyset.com/](https://storyset.com/?fbclid=iwar0xg3xecpfvfv_lqopgfic7c6-cdkh7mgdd4ylcxwfkyn4alordhk84hso). You can get the images from there too.
* Select your 3 images and rename them to **inro\_1.svg, intro\_2.svg** and **intro\_3.svg**.
* Go to the **assets/images** folder and paste and replace with the existing images.
{% hint style="info" %}
You can disable the onboarding screen from the app if you want. You can do that directly from the admin panel. If so, you don't have to do this step.
{% endhint %}
# 14. Run The App
{% hint style="warning" %}
Before doing that, Please make sure that you have followed all of the previpus steps. Otherwise, it won't work.
{% endhint %}
{% hint style="info" %}
Before doing this, connect An Android Emulator from Android Studio or A Real Android device or An iOS Simulator from Xcode, or An real iOS device.
{% endhint %}
Before running the app, clean the project & get the packages by running the following commands one after one:
```
flutter clean
```
```
flutter pub get
```
And finally, run the following command to run the app:
```
flutter run
```
# 15. Releasing the Android App
at Google Play Store
{% hint style="info" %}
Make sure that you have done all the things that are required for the android release.
{% endhint %}
To test the released android app, run the following command on the terminal:
```
flutter build apk --split-per-abi
```
You will get 3 apk files from the **build/app/output/apk/release** folder. You can test the **app-armeabi-v7a-release.apk** file on your android device.
{% hint style="warning" %}
If you want to publish the app in the google play store, don’t upload any of the following apk files. Use an **appbundle** file which is recommended by Google
{% endhint %}
To generate an appbundle, run the following command on the terminal:
```
flutter build appbundle
```
After that, you will get a .aab file in the **build/app/output/appbundle/release** folder.
{% hint style="success" %}
Now you can upload this .aab file to the google play store.
{% endhint %}
# 16. Releasing the iOS App
at Apple AppStore
{% hint style="info" %}
Make sure that you have done all the things that are required for the ios release.
{% endhint %}
{% hint style="success" %}
Follow the official doc from the flutter team [here](https://flutter.dev/docs/deployment/ios).
{% endhint %}
# 17. Subscriptions Setup
In-App-Purchase (Sell subscriptions to users )
This is a premium feature to sell subscriptions to your users. Users can purchase subscriptions using Google Pay and Apple Pay.
{% hint style="info" %}
An extended license is required for this feature. You need to upgrade your license to **Extended** from your admin panel. Otherwise, you can't assign articles as **premium** and the subscription feature won't be available in the app.
{% endhint %}
# 17.1 Android Setup
## Setup Payment Profile
From your **Google Developer Console Account > Setup > Payment Profile**, you need to add your payment profile. Like adding your bank account. If you have already added that, you can ignore it.
## License Testing Setup
In this step, you need to add some **testers** who can test the IAP product in the app and purchase points without any real payment.
**From your Google Developer Console Account > Setup > License testing**, Add some email addresses.
## Upload Initial Build at Google Play Store
To activate **IAP** for your app in the Google Play Store, you need to add the **billing permission** in the code section and upload an initial build at the Google Play Store as **Internal/Close Testing**. (Only the testers you will assign in the upcoming step can test the app). You shouldn't upload it on production.
{% hint style="info" %}
Choosing Internal testing is easier. You don't have to go through the review process and don't have to provide app meta details.
{% endhint %}
#### Add the Billing Permission
From the App source code, Go to the **lms\_app/android/app/src/main/AndroidManifest.xml** file and **enable** the selected line shown in the picture below. This permission will enable the billing and IAP at the Google Play Store.
{% hint style="info" %}
If you already uploaded your app in production and released it at the Google Play Store, you also need to follow the same step (Add billing permission and upload it as an Internal/Close Testing version).
{% endhint %}
Without uploading any new version in the **Internal/Closed Testing**, you won't see the IAP features.
{% hint style="info" %}
Before going to the next steps, make sure you have uploaded a new build in the Internal/Closed Testing and published it.
{% endhint %}
## Configure Subscriptions
After publishing a new version with Close testing, you will see the **Subscriptions** option on your app sidebar.
#### Create Subscriptions
From **Your App > Monetize >** **Subscriptions**, create a subscription by clicking on the **Create Subscription** button.
* Add **Product ID**.
{% hint style="info" %}
Product ID can be anything but unique. You must add the duration in days in your product ID. For example,
**myplan\_7** (for 7 days),
**myanotherplan\_30** (for 30 days)
{% endhint %}
{% hint style="danger" %}
You can't use any other number in your product ID except the days. Example,
**myplan1\_30, myplan2\_365**
This is not acceptable.
{% endhint %}
Look at the shown below, you will understand how to use product IDs.
* Add **Product Name** which will be shown on the app.
* After creating the product, add subscription details > Description.
* Add base plan ID.
{% hint style="info" %}
You have to create a **base plan** for your product. You can create many base plans but only one will be active. A base plan ID can be anything but unique. No extra requirements for that.
{% endhint %}
* Select Type > Prepaid and select the plan duration.
{% hint style="danger" %}
Plan duration must be aligned with your product\_id. For example, if you select 1 week then your product ID must contain 7. If you select 1 month then your product ID must contain 30.
{% endhint %}
* Now save the base plan.
{% hint style="success" %}
That's it. Your first subscription plan has been created. This way you can create as many plans as you want. We have used 3 plans for our demo app.
{% endhint %}
# 17.2 iOS Setup
## Sign A Paid Application Agreement
The first and foremost thing you have to do is to accept the agreement. Go to **app store connect -> Agreements, Tax, and Banking**. You will see two agreements. One for Free Apps and the second for Paid Apps.
Free apps agreement doesn’t require you to add your bank account and fill in the Tax information, but Paid Apps do require. You need to accept the Paid Apps agreement. Once you accept the agreement and fill in the necessary information, your status of agreements will be active. Just like this 👇🏻👇🏻👇🏻
## Configure Subscriptions in App Store Connect
From your Appstore Connect, go to **Your App** **> Subscriptions.**
* Create A subscription group. Group name can be anything. You will create all of your subscription products within this group.
* In that subscription group, create a subscription product by clicking on the + button.
* Enter reference name and Product ID.
{% hint style="info" %}
Product ID can be anything but unique. You must add the duration in days in your product ID. For example,
**myplan\_7** (for 7 days),
**myanotherplan\_30** (for 30 days)
{% endhint %}
{% hint style="danger" %}
You can't use any other number in your product ID except the days. Example,
**myplan1\_30, myplan2\_365**
This is not acceptable.
{% endhint %}
Look at the shown below, you will understand how to use product IDs.
* After creating the product, Select your plan duration.
{% hint style="danger" %}
Plan duration must be aligned with your product\_id. For example, if you select 1 week then your product ID must contain 7. If you select 1 month then your product ID must contain 30.
{% endhint %}
* Select countries and set prices for your subscription.
* Add **AppStore Localization** which will be visible to the users.
* Save the product. That's it.
{% hint style="info" %}
That's it. Your first subscription plan has been created. This way you can create as many plans as you want. We have used 3 plans for our demo app.
{% endhint %}
#### Add the In-App Purchase Feature in Xcode
From the app source code open the **lms\_app/ios** folder in your **Xcode** App. Now go to the **Runner > Signing & Capabilities** and click on the **+ Capability** and add the **In-App Purchase** option. That's it.
# 17.3 Code Setup for Subscriptions
{% hint style="info" %}
Make sure that you have completed all of the previous steps of 17, 17.1 & 17.2.
{% endhint %}
### 17.3.1 Get IAP Files
You will get an **iAP.zip** file from us in your email after contacting us with your purchase code. Unzip it and you will get a folder named **iAP**. Paste this folder into the **news\_app/lib** folder.
### 17.3.2 Configure Subscription IDs
Go to the **lib/iAP/iap\_config.dart** file and add your **Product IDs** here separated with commas as shown in the picture below.
### 17.3.3 Enable Subscriptions
After that set the iAPEnaled value to **true**.
### 17.3.4 Enable the Disabled Code
1. Go to the **lib/screens/tabs/profile\_tab/subscription\_tile.dart** file and enable all the codes that were disabled.
{% hint style="info" %}
To enable all the code from a single file, Press **CMD + A** to select all the text, and then press **CMD + /**\
\
*Note: CMD is for Mac. For Windows Press CTLR. (CTLR + A and then CTLR + /)*
{% endhint %}
2. Go to the **lib/utils/next\_screen.dart** file and enabled the selected line shown in the picture below. Also, enable the package line at the top of this file in the same way.
{% hint style="info" %}
Remove the double slash (**//**) to enable a single line.
{% endhint %}
3. Go to the **lib/screens/tabs/profile\_tab/profile\_tab.dart** file and enable the selected lines shown in the picture below.
That's it. Your subscription setup is completed. Now, you can test the app and the products and publish your app in production by uploading a new version.
{% hint style="info" %}
To test the In-App Purchases feature, use a real Android or iOS phone. Emulators/Simulators won't support this.
{% endhint %}
# 18. 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.
# 19. Migrate to V6.0
1. Use the new source code, new configurations, and new database.
### FAQ
1. **Can I use the previous database with this update?**\
\- No. We had to change the data structure for new features and enhancements.
2. **Can I update my app which is already on Playstore and Appstore?**\
\- Yes. Use your previous package name and Keystore file.
