Chat4all

A chatting initiative without language barriers

This idea for this MVP is only to create a chat between two users texting in their original languages but the application changes to the target language. For example, in Colombian airport, a foreigner can ask something to a regular person who doesn’t speak the language.

About the team:

Since the team is composed of just two integrants, we concluded that both members can move freely inside the development of the different components of the application. Also, the application will be a new challenge for the team, in a matter of developing web/mobile applications that perform real-time text communication between users.

We thought that the best option was to create the functional part first and later try to do better the User experience trying to improve the front-end of our chat.

We created a Trello board based on our main mockup, we determined which features could be successfully developed, and how many of these tasks were completed. We concluded that our constraints were learning-wise, leading to some delays but otherwise, our experience developing these proposed features was satisfactory. We did all the functional parts for this MVP.

About hardware, we were using an AWS micro instance (EC2 AMI2) to allocate our application, databases, codebase, web server (Nginx).

The backend for the application was implemented using Python with Django, a framework used for the quick development of web applications. Django was used alongside the Django Rest Framework, an extension of Django that lets developers generate REST APIs and authentication to do a safe connection between users. We used a client to connect with our database server which was allocated for developer purposes in the same server of the codebase and web server.

The frontend was implemented using the JavaScript Ionic framework for hybrid mobile applications. With Ionic, the React JavaScript library was used for the making of progressive web apps (PWA) for its use on mobile devices and through web browsers.

Challenges

For this MVP we thought that we were going to use Google Translate API, but when we tried to use it, we had problems due to the paywall imposed by Google to make use of this API, for this reason, we had to go with a different option to implement the instant translation feature.

Another challenge that we had could be the way that we were connecting our client to the WebSocket server, we were getting a lot of messages from only one message and at some point, we had our application memory full and consequently, the app got broken. We solved this with a handler function to conclude the message received after the first one.

For us, it is a challenge to work with React library because it is our first time using this library, for this reason, each task that we have to do is new for us. For example, we saw two ways to solve the tasks in react (classes or hooks) and we have tried to understand a little bit the difference between them, for example, the main file (home) is made with hooks but my peer is more comfortable using classes for this reason he changed the base code to fetch data from API in a different component called (translation).

Try this MVP project:

Click on this link:

How to Run Chat4all

To use the app you can download directly in your android cellphones. if you want to run this in your web browser, you should have already installed node js and you should install all dependencies that we have in package.json

For APK:

This apk is going to be working until April 1.

Download in your cellphone and click yes in all permissions questions.

Click here to download in your android cellphone: Chat4all_MVP

Browser mode:

npm install

after that, you can type Ionic (if you haven’t installed, please do it)

ionic serve

Enjoy it!!

This video shows how It works:

Conclusion

  • Ionic stands as a very good resource to use if you don’t have plenty of experience developing a frontend for web pages and mobile applications, its already-made components let us create a good-looking mobile app using web technologies in a short time.
  • Using React for our projects can guarantee a better-looking codebase and things done quicker thanks to its reusability philosophy. Learning React was a good experience overall and we won’t doubt to keep looking at it later.
  • Although making the REST API with Django was a painful test-and-trial experience, in the end, it was worth it, making an API that would be easy to understand and navigate through.
  • The use of the Yandex Translate API taught us that sometimes the best alternative can be out of reach, in this case, the paywall behind Google Translate API made us thought that probably we had to implement another idea.