Trace - SOCIAL NETWORK WITH VIDEOS, STORIES, LIVE STREAMING, NEWS FEED, CHAT, VIDEO AND AUDIO CALLS

Created: 02/08/2023
Latest Update: 15/09/2024
Email: matulaalberto@gmail.com
By: Appsdabanda

Trace test drive on iOS Emulator 🔥🔥🔥



This documentation was created to serve as a guide to help anyone to install Trace on your computer and run it for testing reasons then makes changes if you want it to. Navigate through the left side menu to access the different section of this guide.

Thank you for purchasing our App. If you have any question, please feel free to contact us from here.

Setup Firebase

Watch this video From our youtube channel

Please like and subscribe to help us grow up.

Leave a comment on youtube if you want some help, our team will contact you.



Or you can follow these steps:

Go to Firebase developer console and Create a project.

  1. Click in add app
  2. Choose Android
  3. Add your desired app package
  4. Register an app and download a google-services.json file
  5. Save it, we will use it later


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


IMPORTANT

- Phone Number Login for Android needs SHA-1 and SHA-256 correctly added in firebase

Setup Zegocloud

Zegocloud used for Live Streaming, Video Call and Voice Call


Watch this video From our youtube channel

Please like and subscribe to help us grow up.

Leave a comment on youtube if you want some help, our team will contact you.



Or you can follow these steps:

Go to Zegocloud.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

Setup Branch.io

Branch used for Deep linking or Dynamic links


Watch this video From our youtube channel

Please like and subscribe to help us grow up.

Leave a comment on youtube if you want some help, our team will contact you.


Setup Parse Server Backend

We used Parse Server has backend, for more information about it, click on the link.


Watch this video From our youtube channel

Please like and subscribe to help us grow up.

Leave a comment on youtube if you want some help, our team will contact you.

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.

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

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

Import Project, setup Apps 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


Watch this video From our youtube channel

Please like and subscribe to help us grow up.

Leave a comment on youtube if you want some help, our team will contact you.

Click to watch.


Or you can follow these steps:

  1. Extract Zip file Downloaded from codecanyon
  2. Navigate to Trace_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 toochat_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.


Customize Logo and Splash

  1. Go to assets-> images and override ic_logo.png and ic_logo_white.png with your own Logos (Light and Dark)
  2. In your project root run $ dart run flutter_native_splash:create



Set Cloud Code on Trace and Install Onesignal on Back4App

For push notifications, following user, sending gifts, PK logic




Setup OneSinal for Push Notifications

Maximize Engagement Minimize Churn




Enable Live Query for real time updates

on Parse Server Dashboard [Back4App] On Trace social.




Adding .svga files From Parse DashBoard. Back4App

on Parse Server Dashboard [Back4App] On Trace social.

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.

Trace Admin panel Setup on cPanel 🔥🔥🔥


Upload Admin Panel Files to your hosting.

  1. Extract trace_admin_panel.zip you can found it in Main Files.zip
  2. Open Configs.php file and change: Website root url, AppId, RestApiKey and MasterKey of your Parse Server App.
  3. Upload in your hosting and Test by opening the url where you placed your admin panel in your browser.

Configuration

DON'T CREATE USER MANUALLY IN YOUR PARSE DASHBOARD, MAKE SURE YOU REGISTERED USER IN WITH 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 or update 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, search and download files
  2. Add new gifts
  3. View Users/Admin Data
  4. View Stories Data
  5. View Lives Data
  6. View Comments Data
  7. View Posts Data
  8. Login Settings to Enable or Disabled Logins system New

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.

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: matulaalberto@gmail.com

Have you enjoyed the App and its documentation? Please, don't forget to rate this item and leave your review here

Appsdabanda