TypeScript Chat App
Building a TypeScript Chat App
Guide from the video: https://www.pubnub.com/docs/chat/chat...
TypeScript chat application, we will leverage tools such as Yarn, Node, and your favored code editor. Kick-off the beginning stages by downloading the JS chat repository's getting started folder. Once you have your zip file on deck, proceed to extract the files and start initializing your terminal window to run Yarn and install all necessary dependencies.
Once all dependencies are installed, navigate to the 'lib' directory to start building the package. The TypeScript files would be converted into JavaScript files, leading to a ready package of JavaScript files. Further, move to the 'get-started samples' directory.
Creating '.env' file:
An essential step in our venture is creating our configuration file and setting up the environmental variables. An 'env.example' file present in your file system will steer you in this process. Populate this file with the appropriate key configurations, freely available in the key setup instructions on your start page.
After successfully obtaining your keys, rename your 'env' files, eliminating 'example' from the title. Populate the 'env' file with your publish and subscribe API keys, consequently allowing your application access to these key variables.
Run Yarn dev command:
Server-start your application by running the Yarn dev command that provides instructions on how to test your newly crafted chat application. The launch of the application in a new tab allows you to conduct the primary testing of the application.
Code Reading:
A thorough understanding of the code's functioning enables its efficient application. The application uses an SDK initialized with API keys sourced from our previously created ENV file. Channels, labeled as chat rooms, foster communication between users, and their creation employs user ID's from a predetermined dictionary of user data.
The chat application employs the direct message or one-on-one conversation scenario as exemplified in the 'createDirectConversation' function in the chat SDK. The 'useEffect' function enables UI updates and change events, while the 'handleSend' function facilitates sending the messaged data back into the direct conversation.
CSS:
Fine-tuning stages involve adding a time utility to track the arrival of each message—further, the usage of CSS styles aids in customizing the layout, flow, and color as per the desired brand image.
We have successfully built a fully functioning Typescript chat application. The guide covers all the stages from setup to a full run of the application, making it easy and fun to follow. There's room for further enhancements depending on your implementation context and personal preferences, such as typing indicators or message reactions. You are now equipped to continue the development journey and take this basic chat application to the next level! Happy coding!
