CHATAPP
OVERVIEW
Welcome to the Chat App! Users can send images, take photos, send their location, and chat with others. I use Firebase to store messages and pictures while using Dialogflow for the in-app chatbot. Yes, you can talk with a chatbot! Simple and understandable, using Gifted Chat to help design and set up the UI component, it will feel natural to use.
OBJECTIVE
To build a chat app for mobile devices using React Native. The App will provide users with a
chat interface and options to share images and their location.
Extra: Integrate a chatbot to
help respond to user's questions about the chat app.
TOOLS
React Native, Expo, Google Firebase, Google Dialogflow
CLIENT-SIDE
First, I set up a development environment to work with React Native and Expo. I designed the App's UI and accessibility functionality using Native UI components and chat features from the Gifted Chat library.
LOGIN DESIGN
I styled it according to the given screen design. I am testing my skill in replicating a set style for the Chat app's finished product.
CHAT UI '& ACCESSIBILITY
The UI used many critical points from popular chat app interfaces to build the chat screen. It is better to use designs that work naturally to many users. Next was the chat functionality, using the Gifted Chat library, which made it very streamlined to connect and set message-sending.
STORING DATA ON THE CLIENT-SIDE
What if you lost your internet connection and needed to view an old message you had sent? Phase 4 added the feature to store messages locally using async Storage. Allowing users to view older messages, you can send and receive updated messages once online.
BACKEND
Here, I set up Real-Time Applications and data Storage, including anonymously Authenticating users with Firebase and storing conversations in the Firestore Database.
FIREBASE
Google's Firebase helps host databases, services, authentication, and integration for various applications, making it perfect for the chat app. Using their authentication, users can anonymously sign in with Firebase. With Firebase, Firestore helps store conversations, photos, and videos in its database. This functionality is beneficial when reading an old message from a friend or yourself.
DIALOGFLOW
Dialogflow, provided by Google, is a natural language understanding platform I used to design and integrate a conversational user interface into mobile apps. With Dialogflow integrated into the Chat App, I could create a bot to respond to users' questions. From App-related questions to elementary conversations (e.g., Hello, Can I ask you a question? What is a Chat App?)
COMMUNICATION FEATURES
It lets users send and take photos from their device library or camera. It uses Google Firebase Cloud Storage to store images and send messages via Gifted chat. It also uses Reacts Native map to allow users to send their current location in a map view via Gifted chat.
CHALLENGES
Looking back, integrating the chatbot was the most challenging and fun experience. Since this was the first time I added an extra feature that was not in the main objective, I had to find ways to get it to work with Gifted Chat and learn about hiding secret keys through environment variables. I had to search through multiple documents and do lots of trial and error, but in the end, I learned so much from it.
DURATION
Development of Chat App had its ups and down with 2 weeks for its completion.
LOOKING BACK
The Chat app aims to provide users with a chat interface and options to share images and their
location. I added a chatbot feature that informs of features and descriptions within the
application.
The final result is that I have achieved all main objects and side objectives,
making
the Chat app easy and accessible.
Next time, I want to tackle multiple chats, like private and public messages. It would help complete the goal of a Chat app. Other minor changes would be adding font resizing and image backgrounds besides set colors.
CREDITS
Lead Developer: Michael Pietroski
Tutor: Rylan Albach
Mentor: Enrique Gonzalez