Shortzz

LiveStream + Realtime chats

Introduction

Here is the quick documentation to setup the web part of the Shortzz application created in PHP Laravel. Please follow all the steps correctly and carefully setup the project.

System Required

Change Base URL

  • Find the shortzz_flutter.zip from the folder downloaded from codecanyon and open in android studio.

  • Open shortzz_flutter>lib/utils/const_res.dart

  • Replace "apiKey" with your apiKey.

  • Replace "baseUrl" with your BaseUrl.

  • Replace "itemBaseUrl" with your new ImageBaseUrl.

  • All of these values can be found at the end of the backend documentation. so it is a must to follow backend documentation before starting here.

db_1

Change package name

  • Android

    • Step 1 : Go to android > app

    • Step 2 : Click to build.gradle

    • Step 3 : Here, change the only applicationId And it's done.

    android

  • iOS

    • Step 1 : Now right click on iOS directory, flutter > Open iOS module in Xcode

    iOS_package_name_1

    Once the project gets opened in Xcode successfully, follow the steps below.

    • Step 2 : Go to runner > Signing & Capabilities

    • Step 3 : Change your bundle identifier as you want, and it's done.

    iOS_package_name_2

Change app name

  • Android

    • Step 1 : Go to android > app > src > main > AndroidManifest.xml and make changes shown in the below image.

    android_app_name

  • iOS

    • Step 1 : Now right click on iOS directory flutter > Open iOS module in Xcode

    iOS_package_name_1

    • Step 2 : Now go to Runner > General > Display Name, change it as you want.

    iOS_app_name

Change app color

    • Step 1 : Now go to your project lib > utils > color_res.dart as shown in the below image.

    change_app_color

Change app font family

    • Step 1 : Select any font from google font

      • Here’s how you download the font:

      • Visit the https://fonts.google.com/

      • Search for your font.

      • Once you find it, click to open.

      • Click on the Download Family button on the top right side of your screen.

      • Extract the compressed file.

      payment_1

    • Step 2 : Import the Font into Project

      To import the Font in your project:

    • Copy-Paste [font].ttf file into the fonts folder.

    payment_1

    • Step 3 : Add Font to Pubspec.yaml

    To add Font to pubspec.yaml file:

    • Replace the family name with your font family. To get the family name, simply take the first part before the dash sign (-). For example, if the downloaded font name is Montserrat-Regular , take the Montserrat as your family name

    • Go to pubspec.yaml file:

    • Replace the asset path with the path where your font is residing.

    • Then pub get to successfully load your font

    payment_1

Change app icon

    • Step 1 : Generating Different Sized Icons

      Go to https://www.appicon.co/ and upload the icon image and tick the iPhone and Android options and click on Generate. This site generates different sized Icons for both android and IOS at the same time.

    payment_1

      It will Download the Zip file named AppIcons with the android and Assets.xcassets named folders along with images for appstore and playstore which can be directly uploaded as an icon in both the stores

    payment_1

    Now, open your Project in Android Studio.

    • Step 2 : Adding Icons in Android.

    Navigate to android/app/src/main/res and right-click on res folder and click "open in Finder". Now delete all the mipmap folders in res folder and paste the mipmap folders from AppIcon/android folder which you have downloaded.

    payment_1

    • Step 3 : Adding Icons in IOS

    Now navigate to the ios/Runner/Assets.xcassets. Now after you are in Runner folder, right-click on Runner folder and click “open in Finder”. Now delete the Assets.xcassets folder and paste the Assets.xcassets folder from AppIcon/Assets.xcassets which you have downloaded.

    payment_1

    • Step 4 : Run the Application

    After manually changing the images in android and IOS folders now go to lib/main.dart and run the flutter project using the below command in the flutter console.

    flutter run
    payment_1

Configure Firebase

    • Go to the firebase project you might created while following backend documentation.

    • If you don't have, follow the steps below and create one project.

    • At first, follow this link https://firebase.google.com/

    firebase_1

    • Now, we first have to create a Firebase project. Firebase project will go through and describe what it is. This allows us to add an app to that project. It can have many projects inside of Firebase.

    firebase_2

    • Now, we have to give a name and id to the project, enable Google Analytics for the project, set an analytics location, and accept all the terms and conditions. Firebase console automatically creates a unique id for the project.

    • Step 1 : Giving a name to the project

    firebase_3

    • Step 2 : Enable Google analytics for the project

    firebase_4

    • Step 3 : First Choose default Firebase account and then create project

    firebase_5
    firebase_6

Add Android app to Firebase

    • In the next step, we have to choose the platform to add Firebase to our application. The platform can be Android, iOS, Web etc..

    android_firbase_1

    • Your package name is generally the applicationId in your build.gradle (app-level) file

    • See this page for information on using keytool to get the SHA-1 hash of your signing certificate

    • Add your applicationid in the first field and SHA-1 to the third field as shown in the image below.

    android_firbase_2

    • Download the google-services.json file & place it in your project's app root directory.

    android_firbase_3
    android_firbase_3

    • Back in the Firebase console-setup workflow, click Next to skip the remaining steps and then finish and complete

    android_firbase_4

Add iOS app in Firebase

    • We have to choose the platform to add Firebase to our application. Click on iOS.

    ios_firbase_1

    • On the next screen, enter your iOS bundle ID & App nickname and click on Register App. You can find your bundle ID in the General tab for your app's primary target in Xcode. If specified, the app nickname will be used throughout the Firebase console to represent this app. Nicknames aren't visible to users.

    ios_firbase_2

    • Download the GoogleService-Info.plist file & move the GoogleService-Info.plist file you just downloaded into the root of your Xcode project and add it to all targets. Make sure the config file is not appended with additional characters, like (2).

    ios_firbase_3

    • Back in the Firebase console-setup workflow, click Next to skip the remaining steps and the finish.

    ios_firbase_4

Email sign in

    • Click to Authentication and sign in mathod tab

    • Then click on email/password provider

    android_firbase_1
    android_firbase_1
    android_firbase_1

    • Then both button switch to enable and save

    android_firbase_1

    • Your email and password successfully Enable

    android_firbase_1

Google sign in

    • Click to Authentication and sign in mathod tab

    android_firbase_1

    • Click to Enable

    • Select your support email and save

    android_firbase_1

    • Successfully Enable google sign in method

    android_firbase_1

    • Set Google ‘REVERSED_CLIENT_ID’

    • Open GoogleService-Info.plist file and find ‘REVERSED_CLIENT_ID’ and Copy it.

    • And paste it in project > target > info > URL Types

    ios_firbase_4

Apple sign in

    • Click to Authentication and sign in mathod tab

    • Then click to apple provider

    android_firbase_1

    • Click to Enable and save it

    android_firbase_1

    • your apple provider Successfully Enable

    android_firbase_1

Create APNs Auth key for push notification

    • Open https://developer.apple.com/account

    • Log in using your Apple developer credential.

    • You obtain a provider certificate from your developer account In the certificates section first as shown in the below image.

    • Select Certificate, IDs & Profiles tab.

    apns_1

    • Select keys tab.

    • Tap on the + button.

    apns_2

    • A key can be generated which gives the FCM full access over the Apple Push Notification service (APNs). On the "Keys" menu item, register a new key. The name of the key can be anything, however you must ensure the APNs service is enabled:

    apns_3
    apns_3

    • Click "Continue" & then "Save". Once saved, you will be presented with a screen displaying the private "Key ID" & the ability to download the key. Copy the ID, and download the file to your local machine:

    apns_3

    Copy Key ID & Download File

    • The file & Key ID can now be added to your Firebase Project. On the Firebase Console, navigate to the "Project settings" and select the "Cloud Messaging" tab. Select your iOS application under the "iOS app configuration" heading.s

    apns_4
    apns_5

    • Upload the downloaded file and enter the Key & Team IDs;

    apns_6

Enable firestore

    • Step 1 : Click on Firestore Database and Create database.

    firebase_1
    firebase_1

    • Step 2 : Model will be open click on Next.

    firebase_1

    • Step 3 : Then click Enable button

    firebase_1

    • Step 4 : After create Database, You have to change rules of database then click publish button. Follow step, shown below.

    firebase_1
      firebase_1

    • Step 5 : Create 2 indexes in firestore.

    firebase_1
    firebase_1
    firebase_1
    firebase_1

Setup Agora

    • Follow This guide and setup project at agora and collect App id

    • Go to your flutter project and Paste Here : bubbly>lib>utils>const.dart

    firebase_1
    firebase_1
    firebase_1

    • Paste here : bubbly>lib>utils>const.dart

    firebase_1

Branch.io Setup

In App Purchase

  • Create Coin Plans in Admin Panel.

    • Click Add Coin Plan.

    • Set Price , Diamond and Play Store Id (a unique Product Id you created while following above Documentation).

    • Click Submit.

    coin_add

    • For Android, Purchase will start working once the app gets approved on playstore.

    • For iOS, Purchase will start working once in app purchases gets approved by apple on appstore connect.

Update info

    • To upgrade your project, you have to Add/Update/Remove files. Please check below file for the information.

    • File name : README.md

    • Please be careful while making an updates this way, It might result in errors sometimes.

    • If it comes any issues while making an update, you are absolutely responsible for that since updating existing project is not included in the support.

Want to talk with us?