Skip to content

Latest commit

 

History

History
86 lines (72 loc) · 3.57 KB

README.md

File metadata and controls

86 lines (72 loc) · 3.57 KB
Raw

ChatApp link

Description

The Chat App lets users chat with others. Users can send images, take photos, send their location, and talk to a chatbot. Using Firebase to store messages and images while using Dialogflow for the in-app chatbot.

Objective

To build a chat app for mobile devices using React Native. The app will provide users a chat interface and options to share images and their location.

Case Study

https://vppelli.github.io/portfolio-website/chat-app.html

Table of Content

ChatApp Demo

Future Features

  • The ability to record and play sounds.
  • The ability to upload the audio file.
  • The ability to send the audio file.

Setup

Step by step on how to set up and run the chat app.

  • Download the project or Clone this repository.
  • Make sure you have Node.js installed on terminal
  • Install Expo globally on terminal
  • Inside the terminal, navigate to the project folder and install all dependencies npm install
  • Starting up the Chat app

Both Firebase and Dialogflow use Google

  • Create a Firebase Account and setup
  • Create a Dialogflow Account and setup
  • Acquire the keys to both
  • Make sure Firebase you allow read, write: true
  • Adding your Firebase and Dialogflow keys into Project

I am using the Environment variables ( .env ) file. Environment variables in Node store sensitive data such as passwords, API credentials, and other information that should not be written directly in code. To use this create a .env file to store your Keys, Make sure you have it in the root of the project. Use Correct Naming EXPO_PUBLIC_ must go in front of [NAME]="SecretAPIkey"

  • Location for FirebaseConfig in App.js

  • Lunching Chat App
    • Download Expo Go on your mobile device
    • Create an Account to use
    • Make sure you are on the same network connection as the Hosted app
    • Inside the terminal, navigate to the project folder
    • type npx expo start This will start the app
    • Inside the Expo Go app you should see your app, Click it to view it!

Used

  • React Native
  • JavaScript
  • CSS
  • Gifted Chat
  • Google Dialogflow
  • Google Firebase
  • AsyncStorage offline usage

Dependencies

  • async-storage
  • netinfo
  • expo
  • firebase
  • react
  • react-native
  • dialogflow
  • gifted-chat
  • maps

Links

Expo: https://expo.dev

Firebase: https://firebase.google.com

Dialogflow: https://cloud.google.com/dialogflow?hl=en

To The Top