Setup Firebase

Create a firebase project

Go to Firebase developer console and Create a project.

1. Click in add app
2. Choose Android
3. Add your desired app package
4. Save it

Setup Push notifications for Android

Push notifications for Android needs SenderID and FCM Token

1. CLick In Project Settings
2. Click in Cloud Messaging
3. In Top settings
4. Copy both Server key token (FCM) and Sender ID
5. Save it for later use

Setup dynamic links

Dynamic links is used to share the app

1. CLick In Engage
2. Click in dynamic links
3. Enter all information needed for the link
4. Save it for later use

Setup Google Places

Go to Google Cloud Console and Login with same firebase email

1. Select the project (It has been created in firebase)
2. In Search bar, Enter Places API and Google Maps Javascript then choose it from list
3. Activate it if not activated yet
4. Click the menu button and select APIs & Services > Credentials.
5. On the Credentials page, click Create credentials > API key.
6. The API key created dialog displays your newly created API key.
7. Save it, we will use it later

The new API key is listed on the Credential's page under API keys.

REMEMBER: Restrict the API key before using it in production. Check how to do it.

Setup Google Admob

Google Admob used to show Banner and Rewarded Video Ads Only for iOS and Android

Go to Admob and Login or Register.

1. Click Apps in the sidebar.
2. Select App or Create new. (Android and iOS)
3. Click the icon in the App ID column
4. Copy the ID of an app.
5. Save it, we will use it later

Now create your ads for Profile banner and Rewarded Video

1. Click Apps in the sidebar.
2. Select the name of the app you're creating this ad unit for. ...
3. Click Ad units in the sidebar.
4. Click Get started.
5. Click Select for the Banner or Rewarded Video ad format
6. Enter a name for this ad unit.
7. Save and get ID
8. Save it, we will use it later

Setup Agora.io

Create an app

Go to Agora.io and Login or Register.

1. Create new app
2. Choose Testing mode: APP ID
3. Copy App ID
4. Save it, we will use it later

Note: Agora.io is used for Live Streaming

Setup Sendgrid

Create a SendGrid API Key

Go to sendgrid.com and Login or Register.

1. Click on Settings>API Keys
2. Click on Create API Key button
3. Enter a name for API Key
4. Choose Full Access
5. Click on Create and View
6. Save it, we will use it later

Create a Sender

1. Click on Settings>Sender Authentication
2. Click on Verify single sender button
3. Click on Create API Key button
4. Fill out the form and Create
5. Save it, we will use it later

Note: Sendgrid is used to send emails, for reset password feature

Setup Giphy

Create an app

Go to Giphy developers and Login or Create an Account.

1. Create an app
2. Select API and continue to create
3. Copy API key
4. Save it, we will use it later

Note: Giphy is used to send Gifs in livestreaming

Setup Parse Server Backend

We used Parse Server has backend, for more information about it, click on the link.You have several options on how to get Parse Server as BaaS or install your Self-hosted Parse Server.

1) Cloud Services: There are several companies offering Parse Server.

• Back4app Recommended
• SashiDo
• Glitch
• Flynn

2) Self-Hosted: You can install Parse server in your own Hosting Provider. Required NodeJS

• a2hosting 1st Recommended
• Digital Ocean 2nd Recommended
• Heroku and mLab
• AWS and Elastic Beanstalk
• Google App Engine
• Microsoft Azure
• Pivotal Web Services

Note: The tutorial is about Back4app.com if you want to work with any other, you need to do it yourself, hire developer or pay installation fees

Create a Back4app account and app

Go to Back4app.com signup and Create a project.

1. Access your parse server settings: App Settings > Security & Keys
2. Copy the Application ID, Client key and Master key
3. Save it for later use

Setup Live Query Url

1. Access your parse server settings: App Settings > Sever Settings
2. Click on Server URL and Live Query settings
3. Enter your desired url and save
4. Save it for later use

Import Project, setup App and Customize

Install or Update flutter

Since this project is developed with Flutter, make sure to correctly install flutter and dart in your computer

If you need help to install flutter click here: Install Flutter

Import and Setup Project

You can use Android Studio or Visual Studio Code, make sure to use latest versions

1. Extract Zip file Downloaded from codecanyon
2. Navigate to challenge_app.zip file and extract it too
3. Open android Studio to Import the project
4. Click on Import Android Studio project
5. Navigate to extracted challenge_app folder
6. Click in OK or import then wait for Android Studio to load setup all files and index them.
7. Open terminal or cmd
8. In your project root run $ flutter pub get and wait to finish

After that, we will update all credentials we saved in steps before.

Update configuration file

Open the file global_config.dart located in the folder lib/configuration/, and fill the info listed bellow:

1. appName - your app's name
2. appVersion - your app's version
3. packageName - your app's package name
4. companyName - your company name
5. initialCountry - initial country code for the app
6. serverUrl - the domain of your parse server (for Back4app: https://parseapi.back4app.com/")
7. liveQueryUrl - parse server live query url
8. appId - parse server application ID
9. clientKey - parse server client key
10. agoraAppId - agora.io app's id
11. appEmailAddress - sendgrid.com sender (the email configure as sender in sendergid)
12. senderGridApiKey - sendgrid.com API Key

Setup Android App

1. Open terminal or cmd
2. In your project root run $ flutter pub run change_app_package_name:main com.your.package.name

Setup Firebase in the app

Go to Firebase CLI installation to install the firebase cli in your Computer, and login using the cli.

1. Open the project's root in the terminal or cmd
2. Run the following command to install Flutterfire: dart pub global activate flutterfire_cli
3. Run the `configure` command, select a Firebase project and platforms: flutterfire configure

Customize Logo and Splash

1. Go to assets-> images and override icon.png and icon_text.png with your own Logos and Branding
2. In your project root run $ flutter pub run flutter_native_splash:create

Install and Setup Admin Panel

Parse Server has Parse Dashboard But since it's not easy to use, we decided to offer an easy and modern Admin Panel for you.

To Install Admin Panel is very easy and also it can be installed on any hosting provider, Shared, VPS, Dedicated, Cloud or others. Keep in mind that you need a Parse Server running somewhere, and at least 1 app is running, in order to get this Admin panel to work properly.

Upload Admin Panel Files to your hosting.

1. Extract admin_panel.zip you can found it in Main Files.zip
2. run $ npm install in Admin Panel root Make sure you have NodeJS installed
3. run $ composer install in Admin Panel root Make sure you have Composer installed
4. Open Configs.php file and change: Website root url, AppId, RestApiKey and MasterKey of your Parse Server App.
5. Upload in your hosting and Test by opening the url where you placed your admin panel in your browser.

Configuration

Note: Don't create user manualy in your parse dashboard, make sure you registered user in the app.

1. Setup Admin User(s)

     Go to Parse Dashboard, and Under Classes, click in  Users

     Choose User to turn admin, navigate to role column and set it's value from user to admin 

2. Open your admin panel link and login.

     Open your browser and input your admin panel url

     Login using email and password of any User you set admin role. 

How to use

Once Logged in, you will directly see how easy is to use Admin Panel, It allows you to see and manage almost everything of your app, but for advanced use, for example to delete objects, you will need to use your Parse Dashboard But we process that, we will add more feature in the next version.

With Admin Panel version 1.1 you can:

1. See all classes records
2. Add new gifts
3. Add new category
4. View Users/Admin Data
5. View Stories Data
6. View Lives Data
7. End a Livestreaming
8. View Comments Data
9. View Videos Data
10. Play Videos Data
11. View Challenges Data
12. View Reports Data
13. View and manage Payouts
14. See Payouts Notification
15. View Payments

Add your own Gifts

Gifts are animated images that Users can offer each others for any reason, Heyto apps accept only Lottie files in Json format. You can download lottie files here

1. Open your Admin panel
2. Navigate to Gifts
3. Click and choose Add new gift
4. Enter the gift Name, credits, category and file

Gift Name is just for you to identify it, Gift Tickets is an amount that is needed for someone to purchase it and Gift File is a file download in Lottie website or created with After Effect and bodymovin, also it must be in JSON format extension.

Add your own Categories

Gifts are animated images that Users can offer each others for any reason, Heyto apps accept only Lottie files in Json format. You can download lottie files here

1. Open your Admin panel
2. Navigate to category
3. Click and choose Add new category
4. Enter the category Name and file

Sources and Credits

This Admin Panel uses there programing languages

• PHP
• Javascript

We also used these:

• HTML
• CSS
• Javascript
• Composer

---

Supports

Thank you for reading the documentation. If you still have any question or any problem, please contact us. We'll give you the best support. Thanks.

• Support email address: workcompany27@gmail.com