# Guide

The goal of InfyChat is to give an easy way for everyone can chat using web browser at an affordable price.

# Technologies Used

This system uses multiple technologies to give the best possible experience.

• PHP with Laravel Framework
• MySQL
• JQuery
• AJAX

# Installation Guide

We tried our best to make the installation of the system as easy as possible. System Requirements It is assumed that you have primary knowledge Laravel installation knowledge since this application is built on Laravel.

# System Requirement

It is assumed that you have primary knowledge Laravel and JS application installation knowledge since this application is built on Laravel with JS.

You can read about server Requirements here

You need to enable curl extension.

You need to add cacert.pem certificate path in your php.ini file. Click here to see how to set it.

You need update below variables in php.ini file if you want to send bigger files (Optional).

upload_max_filesize = 50M

max_file_uploads = 50

post_max_size = 100M

# Setup InfyChat System

If you have purchased the InfyChat system then you will be able to find 2 different zip files into it.

1. dist.zip - For Non-Technical Users
2. src.zip - For Technical Users

# Setup InfyChat into Local Environment

You can setup InfyChat into your local by using both zip files, but we recommend to use dist file so you have to perform minimal steps.

Here are some steps to setup InfyChat into your local environment :

1. Install xampp/wamp (if you don't have it).

2. Create folder InfyChat

• if you are using wamp then create InfyChat folder under you_path_to_wamp/www/
• if you are using xamp then create InfyChat folder under you_path_to_xamp/htdocs/

3. Unzip dist/src zip to InfyChat folder

4. Point the domain to the uploaded folder

You need to create virtual host first to setup InfyChat. You can find steps here to create virtual host.

• You can find steps here to create virtual host on XAMPP.
• You can find steps here to create virtual host on WAMP.

Point your domain or subdomain to the public directory inside the InfyChat folder.

Please note that, InfyChat must be installed on a primary domain or subdomain. Installing on a sub-folder will not work, for example:

    example.com/InfyChat (Invalid)
    localhost/InfyChat (Invalid) if you are putting it in sub folder or root website)
    example.com (Valid)
    local.InfyChat.com (Valid)
    InfyChat.test (Valid)

5. Open the link

Open the link to the domain in the browser (Example: https://local.InfyChat.com).

# Non-Technical Users

If you are non-technical person and want to set up InfyChat on your server then you can directly copy the dist.zip folder to your web root directory on server and the following steps:

# 1. Copy files to web server

Upload dist.zip to your web server's root (public_html) and extract it there.

# 2. Setup Default DB

1. Open PHPMyAdmin on your server and do a login.

2. Click on the Databases tab.

3. Create a new database and specify a Database name of your choice and Click Create button.

4. Now on the left, select the database (chat) OR the one that you have created.
5. Click Import in the top menu

6. Under Import, choose the default sql file from dist/database/chat.sql and click button Go.

# 3. Setup environment .env file

1. Open .env file from your server's root folder.

2. Update your .env file

You can find here which env you need to replace

You can also use your choice of storage driver to store your media assets if you want. All of your attachments will be placed into that. And you should be ready to go.

# 4. Update Pusher Configuration

Go to pusher website and do sign up and if you have an account you can login.

1. After Login you will get below screen.

2. Click on “Create new app” button. After clicking this button you get below screen.

3. Now give your app name, select your cluster, select “JS” from front-end tech, “laravel” from back-end tech and click on “create my app” button. As shown in below image.

4. After creating app yow will redirect to below screen. After that click on “App settings” menu as pointed in below screen.

5. After clicking on “App Settings” you will redirect to below screen. From there select “Enable client events” checkbox and click on “Update” button.

6. Now click on “App Keys” menu and you will get below screen.

7. Now add this values in you env file.

    - PUSHER_APP_ID - Your pusher app id
    - PUSHER_APP_KEY - Your pusher app key
    - PUSHER_APP_SECRET - Your pusher app secret
    - PUSHER_APP_CLUSTER - Your pusher app cluster
   

# 5. Admin login

You can login as admin using below credentials.

email: admin@gmail.com

password: admin

# 6. Landing page

You can access InfyChat app url by YOUR_APP_URL. Now you can see below landing page.

Click on the Register button and do register using you email.

Now check your email you will get below activation mail.

Now click on this “Activate your account” button and you will be redirected to the login page as shown in below image and login using your email & password.

# Technical Users

If you are a developer and have a sound knowledge of installing the Laravel on the server then you can get started with the src.zip folder by following the below steps.

# 1. Setup environment .env file

You need to change the following information into your environment (.env) file.

- APP_NAME - Name of your Application/Library System
- APP_URL - Change this URL with your server URL (including trailing path if you are putting it in sub folder or root website)
- DB_HOST - Put your database hostname here
- DB_PORT - Put your database port here if it does not default to 3306
- DB_DATABASE - Change it to your database name
- DB_USERNAME - Name of your database user
- DB_PASSWORD - Password of your database user

You will also need to set up mail configuration, you can read more about here for that setup based on mail service that you use.

- MAIL_DRIVER
- MAIL_HOST
- MAIL_PORT
- MAIL_USERNAME
- MAIL_PASSWORD
- MAIL_ENCRYPTION
- MAIL_FROM_ADDRESS 
- MAIL_FROM_NAME

You have to add One Signal configuration, you can find steps here to configure one signal notification :

- ONE_SIGNAL_APP_ID=
- ONE_SIGNAL_API_KEY=

Add Google & Facebook Auth Configuration :

• You can find steps here to setup google auth.

• You can find steps here to setup facebook auth.

  • GOOGLE_CLIENT_ID=

  • GOOGLE_CLIENT_SECRET=

  • GOOGLE_REDIRECT="YOUR_APP_URL/login/google/callback"

  • FACEBOOK_APP_ID=

  • FACEBOOK_APP_SECRET=

  • FACEBOOK_REDIRECT="YOUR_APP_URL/login/facebook/callback"

Note: replace YOUR_APP_URL by your domain.

You will also need to set up pusher configurations.

- PUSHER_APP_ID - Your pusher app id
- PUSHER_APP_KEY - Your pusher app key
- PUSHER_APP_SECRET - Your pusher app secret
- PUSHER_APP_CLUSTER - Your pusher app cluster

You can also use your choice of storage driver to store your media assets if you want. All of your attachments will be placed into that. And you should be ready to go.

# 2. Composer install (For Laravel)

You need to install all laravel dependencies with the following command.

composer install

Once the composer installation is completed, run a command to set up a key.

php artisan key:generate

# 3. Install npm Dependencies

Install node modules,

npm install

# 4. Run migrations

Run migrations and seeders for creating a database and fill default data

php artisan migrate --seed

# 5. Install Passport

Install passport for authentication

php artisan passport:install

# 6. Import default DB (Optional)

If you are not able to run migrations for some reason. for e.g. if using shared or FTP Hosting then you can import a pre-populated database file from dist folder to your database.

# 7. Build the Project

Build a project with a laravel mix. If you are running in dev mode then run,

npm run dev

Or if you are planning to use in production then run,

npm run prod

That's it and you are ready to go.

# Key Features and Concepts

Here are the Key Features and Concepts that InfyChat provides.

# Conversations

When you start chatting with any user you can see that conversation as opened and also on the conversations list as well. You can also chat with some other user by opening a new conversation popup and select the specific user to start to chat with him/her.

Also, Users can get a list of active chats with real-time unlimited chatting.

# Read receipt

Users can get real-time delivery and read receipt updates of chat messages on both sides.

# Files Upload

You are allowed to Multiple upload two-way file sharing like images, videos and some supporting documents e.g docs, Xls, pdf files, etc. And Light-box for getting a full-screen preview for images.

# Youtube Video Integration

In this feature, when a user sends any youtube video links to any user, the system will automatic detects it as a youtube video and it displays its thumbnail on chat.

# Current Status Indication

Online/Offline and Last seen status indication on the top of the chat and profile drawer as well. When a user is typing something to another user then Typing status is indicating to opposition user.

# Emoji 😄 💥 💖

You'll find all current smileys and people emojis in our chat app. Have fun with diving into the colorful world of emojis! ☺️

# Delete Conversation

By using this feature you can delete conversation with specific people.

# Draft Message

This feature is pretty cool, when you are sending message to someone and you have type lots of lines and your tab is closed, so don't worry you don't need to write all of that lines again, just go to that users conversation, and all your lines are there.

# Incoming message Notification

Users can get message notification for new messages with labels and counts on the conversations list.

# Member Profile

You can see detailed information of the user including user photo, current status, phone number, and his/her bio as well.

# User Profile

By using this feature, Logged in user can Customize his/her avatars. In the sense of updating his/her photo, mobile number and bio as well.

# Users and Roles Management

Admin can manage all users from the admin panel. By creating users, admin can provide username and password to new users and also user can register on his own. There are system default roles like Admin and Member. But admin can redefine as per his own choice and can create a new one as well.

# Optimizations for Animation

Many optimizations used for better UX such as smart caching or GPU powered animations.

# Use Initials

When people don't upload their profile photo we are rending user initials from people's name.

# Security

we are providing security from XSS by encoding user inputs so there is no possibility for xss. We also provide security from SQL Injection, so if any user will give any vulnerable input it will not affect our system.