Setup Firebase

Firebase used for Google Login , Phone Login, Dynamic Links, Push notifications, Monitoring, Analytics and Crashlytics

Go to Firebase developer console and Create a project.

1. Click in add app
2. Choose Android, repeat this step for iOS and Web also
3. add your desired app package
4. Register an app and download a google-services.json file and GoogleService-Info.plist file for iOS
5. Save it, we will use it later

Setup Push notifications for iOS

Push notifications for iOS needs apple apns certificate files in .p12 format, if you need help to create it click here: Firebase developer console

1. CLick In Project Settings
2. Click in Cloud Messaging
3. In iOS app settings
4. Upload both Production and Development apple APNs certificate .p12 files
5. Save

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 Push notifications for Web

Push notifications for Web needs Web Push Token

1. CLick In Project Settings
2. Click in Cloud Messaging
3. In Web app settings
4. Copy Key-pair
5. Save it for later use

IMPORTANT

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

Setup Google Places

Google Places used to Set City and Country including Geo Coordinates

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 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

Agora.io used for Live Streaming, Video Call and Voice Call

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

Setup Facebook

Facebook used for Facebook Login in Android , iOS and Web

Go to Facebook Developer and Login or Register

1. Select Facebook Login product and click the Setup.
2. Select Android as the App platform. Then iOS, Then Web
3. Add key hash for release and debug. *
4. Click the Save button.
5. Copy facebook_app_id, access_token and fb_login_protocol_scheme
6. Go to App Review -> Request permissions and Features
7. Click in request advanced access to permissions bellow: email and public_profile
8. Save it, we will use it later

* You need to Generate Key hash for facebook Login to work.

Setup Apple Login

Apple Login used for Apple Login in iOS , Android and Web

Before you can start integrating (or even testing) Sign in with Apple you need a paid membership to the Apple Developer Program. Sign in with Apple is one of the restricted services which is not available for free with just an Apple ID (source).

Setup #

Register an App ID

If you don't have one yet, create a new one at https://developer.apple.com/account/resources/identifiers/list/bundleId following these steps:

• Click "Register an App ID"
• In the wizard select "App IDs", click "Continue"
• Set the Description and Bundle ID, and select the Sign In with Apple capability
  • Usually the default setting of "Enable as a primary App ID" should suffice here. If you ship multiple apps that should all share the same Apple ID credentials for your users, please consult the Apple documentation on how to best set these up.
• Click "Continue", and then click "Register" to finish the creation of the App ID

In case you already have an existing App ID that you want to use with Sign in with Apple:

• Open that App ID from the list
• Check the "Sign in with Apple" capability
• Click "Save"

If you have change your app's capabilities, you need to fetch the updated provisioning profiles (for example via Xcode) to use the new capabilities.

Create a Service ID

The Service ID is only needed for a Web or Android integration. If you only intend to integrate iOS you can skip this step.

Go to your apple developer page then "Identifiers" and follow these steps:

Next go to https://developer.apple.com/account/resources/identifiers/list/serviceId and follow these steps:

• Click "Register an Services ID"
• Select "Services IDs", click "Continue"
• Set your "Description" and "Identifier"
  • The "Identifier" will later be referred to as your clientID
• Click "Continue" and then "Register"

Now that the service is created, we have to enable it to be used for Sign in with Apple:

• Select the service from the list of services
• Check the box next to "Sign in with Apple", then click "Configure"
• In the Domains and Subdomains add the domains of the websites on which you want to use Sign in with Apple, e.g. example.com. You have to enter at least one domain here, even if you don't intend to use Sign in with Apple on any website.
• In the Return URLs box add the full return URL you want to use, e.g. https://example.com/callbacks/sign_in_with_apple
• Click "Next" and then "Done" to close the settings dialog
• Click "Continue" and then "Save" to update the service

In order to communicate with Apple's servers to verify the incoming authorization codes from your app clients, you need to create a key at https://developer.apple.com/account/resources/authkeys/list:

• Click "Create a key"
• Set the "Key Name" (E.g. "Sign in with Apple key")
• Check the box next to "Sign in with Apple", then click "Configure" on the same row
• Under "Primary App ID" select the App ID of the app you want to use (either the newly created one or an existing one)
• Click "Save" to leave the detail view
• Click "Continue" and then click "Register"
• Now you'll see a one-time-only screen where you must download the key by clicking the "Download" button
  • Also note the "Key ID" which will be used later when configuring the server

Now everything is set up on Apple's developer portal and we can start setting up the server.

Server #

In your Parse Server you need to add a post endpoint for this to work, Add copy and paste the code bellow, then change com.angopapo.heyto to your own Android Package name

                    const express = require("express");
                    const bodyParser = require("body-parser");

                    var appleAuth = express();

                    appleAuth.use(bodyParser.urlencoded({ extended: false }));
                    appleAuth.post("/apple/login", (request, response) => {

                    const redirect = `intent://callback?${new URLSearchParams(request.body).toString()}
                        #Intent;package="com.angopapo.heyto"; scheme=signinwithapple;end`;
                        console.log(`Redirecting to ${redirect}`);
                        response.redirect(307, redirect);
                    });

                    const listener = appleAuth.listen(appleAuthPort, () => {
                        console.log("Verify server is running on port: " + listener.address().port);
                    });
                

iOS #

At this point you should have added the Sign in with Apple capability to either your own app's capabilities or the test application you created to run the app.

In case you don't have Automatically manage Signing turned on in Xcode, you will need to recreate and download the updated Provisioning Profiles for your app, so they include the new Sign in with Apple capability. Then you can download the new certificates and select them in Xcode.

In case XCode manages your signing, this step will be done automatically for you. Just make sure the Sign in with Apple capability is activated as described in the example below.

Additionally this assumes that you have at least one iOS device registered in your developer account for local testing, so you can run the example on a device.

Your App

• First and foremost make sure that your app has the "Sign in with Apple" capability (Runner (file browser side bar) -> Targets -> Runner -> Signing & Capabilities), as otherwise Sign in with Apple will fail without visual indication (the code will still receive exceptions)
• Either integrate the example server as shown above, or build your own backend
  • Ensure that the clientID used when validating the received code parameter with Apple's server is dependent on the client: Use the App ID (also called "Bundle ID" in some places) when using codes from apps running on Apple platforms, and use the service ID when using a code retrieved from a web authentication flow

Go to lib-> app-> config.dart and Update: appleLoginClientId, appleAndroidLoginRedirectUrl and appleWebLoginRedirectUrl

Setup Giphy

Agora.io used to send Gifs in Messages

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

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 (Purchase using this link)
• Digital Ocean 2nd Recommended (Purchase using this link)
• Heroku and mLab
• AWS and Elastic Beanstalk
• Google App Engine
• Microsoft Azure
• Pivotal Web Services

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

1. Extract Zip file Downloaded from codecanyon
2. Navigate to heyto_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 heyto_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
9. Then run $ cd ios then $ pod install and wait to finish

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

Setup iOS App

1. Open iOS Project and Change App name, Admob and Facebook App

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
3. Open Android Project and Change App name, Admob and Facebook App

Setup Web App

1. Open index.html and change description and google-signin-client_id
2. Open firebase-messaging-sw.js and change firebase.initializeApp content

Customize Logo and Splash (Android, iOS and Web)

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 $ 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 admincp.zip you can found it in Main Files.zip
2. run $ npm install in Admin Panel root Make sure you have NodeJS installed
3. Open Configs.php file and change: Website root url, AppId, RestApiKey and MasterKey of your Parse Server App.
4. 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.0.0 you can:

1. See all classes records, search and download files
2. Add new gifts
3. Edit Users Data
4. Suspend / Activate User account

---

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 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 with us. We will give you best support. Thanks.

• Email: heyto@angopapo.com

Support