Read the full tutorial here: >> How to Build an Ionic Chat App
This example shows How to Build an Ionic Chat App:
This demo uses:
- CometChat
- Ionic
- Capacitor
- Chooser
- Image Picker
- Firebase
- React
- Uuid
- Validator
To run the demo follow these steps:
- Head to CometChat Pro and create an account
- From the dashboard, add a new app called "ionic-chat-app"
- Select this newly added app from the list.
- From the Quick Start copy the APP_ID, APP_REGION and AUTH_KEY. These will be used later.
- Also copy the REST_API_KEY from the API & Auth Key tab.
- Navigate to the Users tab, and delete all the default users and groups leaving it clean (very important).
- Download the repository here or by running
git clone https://github.com/hieptl/ionic-chat-app.gitand open it in a code editor. - Head to Firebase and create a new project
- Create a file called env in the root folder of your project.
- Import and inject your secret keys in the env file containing your CometChat and Firebase in this manner.
REACT_APP_FIREBASE_API_KEY=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
REACT_APP_FIREBASE_AUTH_DOMAIN=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
REACT_APP_FIREBASE_STORAGE_BUCKET=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
REACT_APP_COMETCHAT_APP_ID=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
REACT_APP_COMETCHAT_REGION=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
REACT_APP_COMETCHAT_AUTH_KEY=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx- Install capacitor cli with version 2.4.1
npm install -g @capacitor/cli@2.4.1- Install ionic cli
npm install -g @ionic/cli- cd to your root folder and hit npm i to install the packages.
- Run the following statement.
cap sync- Run cd to the ios/App folder then run pod install to install the pods. Once pods are installed run cd .. to go back to the root folder.
- build the project by running the following statement.
ionic build- Copy the build folder to your native platform
cap copy- Make sure to include .env file in your gitIgnore file from being exposed online.
- Run the project by using Android Studio/Xcode. Fore more information you can refer to the Ionic documentation
Questions about running the demo? Open an issue. We're here to help ✌️