Q-municate

Ask tech team
From QuickBlox Developers (API docs, code samples, SDK)
(Redirected from Chattar)
Jump to: navigation, search

Contents

Q-municate

Q-municate is an open source code of chat application with a wide range of communication features included (such as one-to-one messaging, group chat messaging, file transfer, push notifications, audio/video calls). We are happy to offer you a chat application out of the box. You can customize this application to on your needs (with attribution as stated in the license). QuickBlox is used for the backend https://quickblox.com

Live demo

iOS - App Store

Android - Google Play

Web - Live app

WP - Microsoft Store

How to build your own Chat app

You can build your own chat app using Q-municate as a basis in just 5 minutes! All you need is to:

1. Register a QuickBlox account

If you don't have one yet, just register your account at https://admin.quickblox.com/register

Register your account.jpg

You can read more about how to create an account here.

2. Login to QuickBlox admin panel

Login into admin panel at https://admin.quickblox.com/signin You can read more about how to sign in to admin panel here.

3. Create a new app.

If you don't have an app yet, you can follow a detailed guide about app creation at here.

4. Get app credentials

Click on the app title in the list to reveal the app details. You are going to need App ID, Authorization key and Authorization secret later in our Q-municate source code.

Info about app.jpg

5. Launch the Q-municate app

Just follow our platform-based guide below.

Q-municate iOS

1. Get the source code.

You can find our source code on github: QuickBlox/q-municate-ios

You can also address all Q-municate based issues there.

2. Open project file.

We are using Cocoapods in our Xcode project. So, in order to work with it you need to open Q-municate.xcworkspace file:

Q-municate-workspace.png

3. Change app credentials.

Our app credentials are located in AppDelegate class implementation. Open AppDelegate.m:

Qm-ios-project-tree.png


On line 20 you will see these constants:

Qm-appdelegate-app-credentials.png


Replace all of their values with app credentials from your admin panel.

4. Configure your own facebook app.

In order to enable facebook login in your Q-municate you need to configure facebook app. You can follow our guide here.

5. Configure push notifications.

To enable and receive push notification you need to create APNS certificates and upload them to your admin panel. Follow our guide here.

6. Compile and enjoy.

And now you are ready to go and can enjoy chatting in your own chat app.

Qm-ios-workspace.png

Q-municate Android

In order to run Q-municate Android with your own QuickBlox endpoints you need to follow the next steps:

1. Get the source code.

You can find our source code on github QuickBlox/q-municate-android or download zip;

2. Open project file.

There are two ways to open the project:

2.1. Unzip downloaded archive into any folder and open this project in Android Studio as a new project;

2.2. Clone Q-municate repository by using Android Studio tools.

3. Configure your Android Studio project

Create gradle.properties file and move it here q-municate-android/Q-municate_app/

File gradle.properties must contain the following:

Section 1 - Credentials of your application from the QuickBlox admin panel;

prodAppID=\"00000\"

prodAuthKey=\"xxxxxxxxxxxx\"

prodAuthSecret=\"xxxxxxxxxxxx\"

Section 2 - Facebook App ID of your application (how to create Facebook App see here);

prodFacebookAppID=\"xxxxxxxxxxxxx\"

Section 3 - Push registration ID (Project number) for your application (see How to create Google App and How to generate API key and configure push notifications in QuickBlox admin panel);

prodPushRegistrationAppID=\"xxxxxxxxxxxxx\"

GradlePropertiesSettings.png

4. Build and run your own chat

Step 1 - Select build type of your application;

Step 2 - Run your application;

Step 3 - Congratulations! Now you have your own chat application for android!

RunOwnChat.png

Q-municate Web

Get the source code

Source code - https://github.com/QuickBlox/q-municate-web

Setup environment

If you want to build your own app using Q-municate as a base, please do the following:

  1. Install nodeJS and Ruby before start.
  2. Download the project from GitHub.
  3. Run npm install -g bower in your terminal as an administrator.
  4. Run gem install compass in your terminal as an administrator.
  5. Run npm install -g grunt-cli in your terminal as an administrator.
  6. Run bower install to install all additional packages in your terminal.
  7. Run npm install to install all additional packages in your terminal as an administrator.
  8. Copy the credentials (App ID, Authorization key, Authorization secret) and your Facebook App ID (How to generate and save Facebook application ID) into your Q-municate project code in config.js.


Js qm project.png

Build and run

  1. Run grunt build or grunt (build with jshint verification) in your terminal to build Q-municate (q-municate-web/dist).
  2. Run grunt serve in your terminal to open Q-municate in a browser window (https://localhost:9000).


Gruntserve.jpg

Q-municate Windows Phone

1. Download the project from https://github.com/QuickBlox/q-municate-dotnet

2. Copy credentials from you admin panel into your Q-municate project code. Open ApplicationKeys.cs file in the root of the project and change App ID, Authorization key, Authorization secret to match the values from a previous step.

WinPhoneCredentials.PNG