How to make a messenger for free with ionic, socket.io and mysql – Part 1

I understand that ‘How to make a messenger” is a term search only by newbie programmers. And the experienced programmer always focus on a real skill like learning python or JavaScript. But yet I have to say that, these terms new programmer are searching for is absolutely right for them. Because it’s really hard for new or would be programmer to learn by skills then projects. Come on, they have to visualize the output or see the output to understand what is happening and whats really matter. Don’t get me wrong. I just want to say that if they are willing to learn angular or ionic, they should first practice 2/3 easy projects without any prior knowledge on them. Then they will understand the poetry and architecture of this particular thing. After that they should definitely focus on very basic. And that is how they can relate every lesson with those project work they have done. That’s how they can visualize and understand easily. So let’s start…

What you need to know first

Although as a blogger, I mostly try to write for new programmers. I assume you who are currently reading this post is a absolute beginner. But if you don’t know that this kind of projects need various kind of module, package and framework. A single article can’t focus on everything from zero to hundred.

The solution is that I am skipping the detailing for those things which tutorials are very available on web already. But of course I am mentioning about those and trying to give resource to learn them. Below are what we need with short details and tutorial source. Go get some basic practice before we jump into our project.

Ionic 4 Framework

So we are going to make our chat apps on top of ionic. Ionic is a framework for app development for multiple device using JavaScript. We are going to use Ionic 4 for Angular. You just need to learn environment setup and some practice with some UI component. There developer documentation have everything you need to know for this –

https://ionicframework.com/getting-started

https://ionicframework.com/docs/components

Angular Framework

Angular is a JavaScript framework which allow us to use typescript to develop application on MVC architecture. MVC stand for Model View Controller. It actually is a powerful architecture for software back-end but framework like angular enable us to maintain MVC on front-end also. Here are some resource to learn the basic of Angular and understand what is MVC –

https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller

https://angular.io/docs

MySQL Database System

Primarily I have choose to use mysql database as the data volt. It will store our messages and user information. You can search on the web for ‘database’ and ‘MySQL’ term to get yourself acknowledged. Also practice with some SQL query. We will need them with socket. MySQL can be practice locally by install local server like xampp or wamp.

https://www.apachefriends.org/index.html – for local server to practice mysql. You also can learn the basic of xampp from the web. It will help you to understand how you can maintain MySQL databases from the phpMyadmin control panel

http://www.mysqltutorial.org/mysql-cheat-sheet.aspx

Socket.io

By default, when a user send some message and we directly handle it and save it to database, others user will not see the message automatically, simply it will not be a real-time connection with database. So we need to use some connector which will make a secure, real-time and fast connection between the database and the client (web browser or app on user mobile). For this there is a very lite and trusted engine called socket.io. Here is the link for socket.io practice with JavaScript, node and more.

https://socket.io/get-started/chat/

https://socket.io/docs/

Next Part: Setting up the development environment with ionic 4

I was about to a whole post but now it seems then the post will be gigantic. So I am breaking to parts by topic and will make a series tutorial. This was the first part. Practice with the framework and tools we have discuss above. Our next post will be to setting up the development environment. Till then practice and enjoy.

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.