Introduction

SocialiFied Web

Thank you so much for purchasing our item.

Version: 2.2
Author: iOSAppsWorld

Created: 21 August 2023
Update: 21 August 2023

If you have any questions that are beyond the scope of this help file, Please feel free to email via Support.

Basic

As This is complete system with lots of modules for web and mobile apps, it is compulsory to have some basic knowledge in both server side and mobile app development if you want to do the installation, setup and publishing with your branding yourself.

Flutter SDK and JDK with path setup in your IDE.
Real server related knowledge like apache or local machine server,nodejs we preferred to use a real server.
Server related knowledge and we preferred cPanel in your server for quick installation
Basic knowledge in PHP, Yii2, Nodejs and Flutter if you want to do some customization yourself (Not compulsory).
basic knowledge about google cloud and firebase.

Server

Requires PHP v8.1 and MySQL.
Mod_rewrite Apache
Ctype PHP, JSON, PDO, XML, Zip, Gd Extension
Nodejs v18.16.0

Mobile app

Android studio or VC code
Flutter SDK setup (version 3.3.0 Stable)
JDK with path setup (only for vs code)
Xcode 13.2+ for IPA file build
Android studio for APK file build

Install on server

After download the code from codecayon, upload the backend code zip file (socialified_v2.2.zip) in your server root and extract the zip file. Backend admin panel can be installed on a domain or subdomain: For Example, yourdomain.com OR xyz.yourdomain.com.

Database setup

Step 1

Create a new database from your server MYSQL database

Create a DB user to the database and link that database to the DB user

Import Mysql database file into your database. database file can be find in doc/db folder in given code.
For new setup use socialified_v2_2.sql file
eg. For update use socialified_update_v2.1_to_2.2.sql file

Step 2

Db configuration can be updated in common/config/main-local.php.
Update dbname, username and password.

<?php
              return [
                  'components' => [
                      'db' => [
                          'class' => 'yii\db\Connection',
                          'dsn' => 'mysql:host=localhost;dbname=DB_NAME####',
                          'username' => '#####',
                          'password' => '######',
                          'charset' => 'utf8',
                      ],
                      'mailer' => [
                          'class' => 'yii\swiftmailer\Mailer',
                          'viewPath' => '@common/mail',
                          'transport' => [
                              'class' => 'Swift_SmtpTransport',
                              'host' => 'smtp-relay.sendinblue.com',  // e.g. smtp.mandrillapp.com or smtp.gmail.com
                              'username' => '############',
                              'password' => '###########',
                              'port' => '587', // Port 25 is a very common port too
                              'encryption' => 'tls', // It is often used, check your provider or mail server specs
                          ],
                      ],
                      


                  ],
              ];

Step 3

Site Url and Envato purchase code

Site url can be update from common/config/params.php

<?php

              'adminEmail' => 'admin@SocialiFied.co',
              'supportEmail' => 'support@SocialiFied.com',
              'senderEmail' => 'admin@SocialiFied.co',
              'senderName' => 'SocialiFied',
              
              'siteMode' => 2, // 1 for live, 2 for testing , 3 demo
              'siteUrl' => 'http://example.com',// domain here
              'enventoPurchaseCode' => '##########', // envato purchase code
              'storageSystem'=> 1,// storage system (local storage =1, AWS S3=2, AZURE=3)
              's3' => [
                  'key' => '##############',
                  'secret' => '##############',
                  'region' => '##############',
                  'defaultBucket' => '#########', //name
                  'storageUrl'=>'https://[bucket_name].s3.amazonaws.com'  //aws s3 storage url
                  
                  
              ],

Step 4

All done for appache srever, your software is ready to run.
Admin Url : youdomin.com/backend/web/index.php
Login information :
Username : admin
Password : 123456

Nodejs Chat Socket Setup

We are using nodeJs socket programming for chat, Use following instruction for socket setup
All nodeJs chat code will be in /chat forder

Step 1

Nodejs v18.16.0 must be installed on your server
To confirm you have nodejs install, try to run command in your console :

node -v

You must see installed version of nodejs

Step 2

You can update configuration filechat/config.json with given fields


{
  "port":4000,  //server port
    "live":{    // add your db information
      "host": "localhost",    
      "user": "######",
      "password": "######",
      "database": "#######"
    },
    "dev":{ // leave it blank
      "host": "####",
      "user": "#####",
      "password": "####",
      "database": "###"
    }
  },
  "encryptionKey":"##########################", // enter key for encryption chat eg. bbC2H19lkVsQDf74rtNMQdddFloLyws
  "storageUrl":"https://[bucket_name].s3.amazonaws.com   OR  https://yoursite.com/uploads",  //Use bucket url for AWS S3 OR use https://yoursite.com/upload for local storage   Check For S3
  "pushNotification":{    
      "databaseURL": "https://q#############.firebaseio.com"         See here
  },
  "voipNotification":{                                               Check documentation to create
    "key": "cert/AuthKey_#####.p8", // .p8 file
    "keyId": "########", //67J4MZG469
    "teamId": "########", // T937GPNTUY
    "bundleId":"###########"  //com.example.app
  }

Step 3

Firbase Setup

Download serviceAccountKey.json and put the file in /chat folder

Download Json File

Step 4

Start node server

After installing all dependencies and updated the configuration, you must start node server :
Open a terminal and nvigate to the /chat folder that contain the file "index.js"
Run following command to start server :


          cd /path/to/your/root forlder/chat
          node index.js

OR
For running server all time you can install forever package More Detail
Run following command to run server with forever:


          cd /path/to/your/root forlder/chat
          forever start index.js

Visit http://yourdomain:4000 in your browser. You will see following screen if server is started successfully.

Mandatory setup

Mail Configuration

Mail Configurations part admin can set his Mailer host, user name and his own encryption method and password for this SMTP Mail setup. This configuratin is used for sending mails.

MAil configuration can be updated in common/config/main-local.php.

<?php
        return [
            'components' => [
                'db' => [
                    'class' => 'yii\db\Connection',
                    'dsn' => 'mysql:host=localhost;dbname=DB_NAME####',
                    'username' => '#####',
                    'password' => '######',
                    'charset' => 'utf8',
                ],
                'mailer' => [
                    'class' => 'yii\swiftmailer\Mailer',
                    'viewPath' => '@common/mail',
                    'transport' => [
                        'class' => 'Swift_SmtpTransport',
                        'host' => 'smtp-relay.sendinblue.com',  // e.g. smtp.mandrillapp.com or smtp.gmail.com
                        'username' => '############',
                        'password' => '###########',
                        'port' => '587', // Port 25 is a very common port too
                        'encryption' => 'tls', // It is often used, check your provider or mail server specs
                    ],
                ],
                


            ],
        ];

Storage Setting

We are giving following three option to store media files. You can choose one storage system according to your requirements

Local server storage
AWS S3
Azure Storage

Local server storage setting

Storage system can update be update from common/config/params.php
set storageSystem=1 for local storage

<?php

        'adminEmail' => 'admin@SocialiFied.co',
        'supportEmail' => 'support@SocialiFied.com',
        'senderEmail' => 'admin@SocialiFied.co',
        'senderName' => 'SocialiFied',
        
        'siteMode' => 2, // 1 for live, 2 for testing , 3 demo
        'siteUrl' => 'http://example.com',// domain here
        'enventoPurchaseCode' => '##########', // envato purchase code
        'storageSystem'=> 1,//  storage system ( local storage =1, AWS S3=2, AZURE=3)
        's3' => [
            'key' => '##############',
            'secret' => '##############',
            'region' => '##############',
            'defaultBucket' => '#########', //name
            'storageUrl'=>'https://[bucket_name].s3.amazonaws.com'  //aws s3 storage url
            
        ],
        'azureFs' => [
            'accountName' => '###########',
            'accountKey' => '##########',
            'container' => '#######'
            
        ],

Firebase key Setting

We are using firebase to send push notification.

Firbase srever key can update be update from common/config/params.php

<?php
        
        'adminEmail' => 'admin@SocialiFied.co',
        'supportEmail' => 'support@SocialiFied.com',
        'senderEmail' => 'admin@SocialiFied.co',
        'senderName' => 'SocialiFied',
        
        'siteMode' => 2, // 1 for live, 2 for testing , 3 demo
        'siteUrl' => 'http://example.com',// domain here
        'enventoPurchaseCode' => '##########', // envato purchase code
        'storageSystem'=> 1,//  storage system ( local storage =1, AWS S3=2, AZURE=3)
        's3' => [
            'key' => '##############',
            'secret' => '##############',
            'region' => '##############',
            'defaultBucket' => '#########', //name
            'storageUrl'=>'https://[bucket_name].s3.amazonaws.com'  //aws s3 storage url
            
        ],
        'azureFs' => [
            'accountName' => '###########',
            'accountKey' => '##########',
            'container' => '#######'
            
        ],
        'testOtp' => '###',
        'apiKey.firebaseCloudMessaging'=> '##############',             See here
        'user.passwordResetTokenExpire' => 3600,

Agora key Setting

Setup Agora api key for audio video calling. You can get your keys. See here
After Getting the App ID, and App Certificate keys, update it from admin panel setting: Admin > Setting > App Setting

Twilio key Setting

After generate the SID , secret token, and twilio number update it on common/config/params.php

<?php
                
                            'adminEmail' => 'admin@SocialiFied.co',
                            'supportEmail' => 'support@SocialiFied.com',
                            'senderEmail' => 'admin@SocialiFied.co',
                            'senderName' => 'SocialiFied',
                            ...............
                            ..............
                            'twilioSid' => ##############, //Account SID 
                            'twilioToken' => ##############, //Secret token
                            'smsFromTwilio' =>##############,/// twilo number

Amazone S3 Setup

We are using amazone s3 for storage files and images.

Step 1

Create Bucket

You can create bucket on s3 to follow this URL:
https://docs.aws.amazon.com/quickstarts/latest/s3backup/step-1-create-bucket.html .
After create bucket. You have to create folders : chat, collection, competition, image, user, story,gift, verification and user

Step 2

Update AWS S3 Access key and secret access key

Use following url to create secret keys:
https://docs.aws.amazon.com/powershell/latest/userguide/pstools-appendix-sign-up.html#get-access-keys.

After generate the keys and secret, update it with bucket name on common/config/params.php

set storageSystem=2 for AWS s3 storage, and update s3 information as below

<?php
    
            'adminEmail' => 'admin@SocialiFied.co',
            'supportEmail' => 'support@SocialiFied.com',
            'senderEmail' => 'admin@SocialiFied.co',
            'senderName' => 'SocialiFied',
            
            'siteMode' => 1, // 1 for live, 2 for testing 
            'siteUrl' => 'http://example.com',// domain here
            'storageSystem'=> 2,  // storage system (local storage =1, AWS S3=2)
            's3' => [
                'key' => '##############',
                'secret' => '##############',
                'region' => '##############',
                'defaultBucket' => '##############', //bucket name
                'storageUrl'=>'https://[bucket_name].s3.amazonaws.com '  //aws s3 storage url
                
                
            ],

Azure Storage Setup

We are using microsoft azure for storage files and images.

Step 1

Create access keys (Account Name, Account Key, Container)

You can create azure setup from :
https://learn.microsoft.com/en-us/azure/storage/common/storage-account-keys-manage?tabs=azure-portal .

Step 2

Update Azure Access keys

After generate the keys update it on common/config/params.php

set storageSystem=3 for Azure storage, and update azureFs information as below

<?php
          'adminEmail' => 'admin@SocialiFied.co',
          'supportEmail' => 'support@SocialiFied.com',
          'senderEmail' => 'admin@SocialiFied.co',
          'senderName' => 'SocialiFied',
          
          'siteMode' => 1, // 1 for live, 2 for testing , 3 demo
          'siteUrl' => 'http://example.com',// domain here
          'enventoPurchaseCode' => '##########', // envato purchase code
          'storageSystem'=> 3,//  storage system ( local storage =1, AWS S3=2, AZURE=3)
          's3' => [
              'key' => '##############',
              'secret' => '##############',
              'region' => '##############',
              'defaultBucket' => '#########', //name
              'storageUrl'=>'https://[bucket_name].s3.amazonaws.com'  //aws s3 storage url
              
          ],
          'azureFs' => [
              'accountName' => '##############',
              'accountKey' => '##############',
              'container' => '##############',
              
          ],

Setup Agora api key for audio video calling

Create Agora api key from below url

URL https://www.agora.io

Project access URL

Admin Panel

Admin Url : youdomin.com/backend/web/index.php
Login information :
Username : admin
Password : 123456

Socket Url (socketApiBaseUrl)

http://yourdomain:4000

Rest API Endpoint Url (restApiBaseUrl)

youdomin.com/api/web/v1

API name will be added in the last of above api endpoint url. This will be done on the mobile side by programming. suppose if we need to call categories api, then mobile application is calling following url with adding api name "categories" like :

youdomin.com/api/web/v1/categories

if the above url is working then Rest api setup successfully.

Firebase app setup for social login and push notificatoions

Create new firebase project

Step 1

Create an app if its not created

Create web app

Click on add app under project setting section
Select 3rd option which is for web
Enter the website name

Setup keys

After creating the web app go to detail section of web app as shown in below screenshot
Now go to app_config_constants.dart file in flutter project
Go to firebase key settings section and replace the values from web app values mentioned in 1st screenshot shown below

Setup Google login

Open firebase app create above

Go to Authentication tab from left menu and click on get started

Enable google login

Now Go to google cloud console from below url

URL https://console.cloud.google.com/apis/credentials?project=socialified-23223

Select the app(from dropdown on top menu) that you already created in firebase

Select the Web client (auto created by Google Service) from OAuth 2.0 Client IDs section

Add your domain name in "Authorised JavaScript origins" as shown in below screenshot

Also copy the Client id and replace it in app_config_constants.dart file in flutter code as shown in screenshots

Setup Facebook login

Go to facebook developer console and create keys from the link shared in next step

URL Follow the https://developers.facebook.com/docs/development/create-an-app

Copy the facebook app id and replace it in app_config_constants.dart file as shown below

Make sure that your facebook developer account is verified and full fill all the conditions to work for facebook login, Facebook change the steps time to time so you will get clear instructions form facebook

Setup Google map api key for showing google map for location sharing in chat

Create Google map key from below url

Remember to enable Places API, Maps SDK for Android, Maps SDK for iOS and Geocoding API for your API key.

URL https://cloud.google.com/maps-platform/

Replace the Google map key in project as shown below

Change api urls

Go to "app_config_constants.dart" file and change api server(PHP) url and socket server(Node.js) url as shown in below screenshot

Change app name

Go to "app_config_constants.dart" file and change app and as below screenshot

Change localization strings

Go to "resources" folder and change the required strings in required language file

Build code and setup on server

For building web code for deployment, you have to run command:

flutter build web --web-renderer html --release

After successfully running the command, Go to /build/web/ and copy all files from this folder and upload it to your server domain.

Note: We are suggesting that to not deploy admin and web at same domain. In that case you can use subdomain for one. Like you can deploy your admin at https://app.your_domain.com and web at https://your_domain.com.

Support

If this documentation doesn't answer your questions, So, Please send us Email or contact via Skype.

Email : topiosappsworld@gmail.com
Skype : topiosappsworld@gmail.com

We are located in GMT +5:30 time zone and we answer all questions within 12-24 hours in weekdays. In some rare cases the waiting time can be to 48 hours. (except holiday seasons which might take longer).

Note: While we aim to provide the best support possible, please keep in mind that it only extends to verified buyers and only to issues related to our template like bugs and errors. Custom modifications or third party module implementations are not included.

Changelog

See what's new added, changed, fixed, improved or updated in the latest versions.

Version 2.2 (08 Sept. 2023)

Added Whose view my Story : User list of whose view my story
Added Post comment On/Off: User will ba able to On/Off comment of his post
Added Whose like my post: User list of whose like my post
Added Save Post in list
Added Edit Post
Added Public group chats
Modification Poll
Fixed Delete highlights
Fixed Record and play audio

Version 2.1 (21 August 2023)

Initial Release

Buy