Hướng dẫn how do you make a chat app in javascript? - làm cách nào để tạo một ứng dụng trò chuyện bằng javascript?

Hướng dẫn từng bước này sẽ hướng dẫn bạn cách xây dựng ứng dụng trò chuyện JavaScript bằng tiện ích trò chuyện và Firebase của Cometchat.

Show

Hướng dẫn how do you make a chat app in javascript? - làm cách nào để tạo một ứng dụng trò chuyện bằng javascript?

Mục lục

    Phát triển ứng dụng và web đã đi một chặng đường dài trong vài năm qua. Chúng tôi sử dụng rất nhiều ứng dụng trò chuyện mỗi ngày, bao gồm Facebook Messenger, WhatsApp và Snapchat. Sử dụng các dịch vụ phụ trợ cometchat và firebase, bạn sẽ học cách tạo ứng dụng trò chuyện với JavaScript với nỗ lực tối thiểu.

    Những gì bạn sẽ xây dựng

    Trong hướng dẫn này, bạn Tìm hiểu cách xây dựng một ứng dụng trong đó:

    • Cho phép người dùng cuối đăng ký, tạo tài khoản mới trong cometchat
    • Cho phép người dùng đăng nhập và có một cấu hình ngắn (tên, uid, ảnh, về)
    • Xác thực người dùng với Cometchat và Firebase

    Bạn cũng sẽ sử dụng tiện ích trò chuyện cometchat và định cấu hình nó như vậy:

    • Danh sách người dùng/danh bạ có thể hiển thị cho tất cả người dùng với thanh tìm kiếm
    • Tất cả người dùng có thể nhắn tin và chia sẻ hình ảnh, âm thanh, video, tài liệu,
    • Tất cả người dùng có thể bắt đầu cuộc gọi bằng giọng nói và video nhau và các nhóm
    • Người dùng có thể tạo/thoát nhóm và thêm/xóa người dùng khác
    • Trò chuyện nhóm qua văn bản, giọng nói và trò chuyện video được bật cho tất cả người dùng

    Những gì bạn sẽ cần

    Để làm theo hướng dẫn này, bạn cần có một sự hiểu biết cơ bản về HTML, CSS và JavaScript. Bạn cũng sẽ cần:

    • Tài khoản Google để sử dụng với Firebase
    • Một tài khoản cometchat
    • Node.js được cài đặt trên máy của bạn

    Thiết lập dự án

    Để thiết lập dự án của bạn, hãy, bạn có tên là JavaScript-Chat-app và DDD các tệp và thư mục saujavascript-chat-app and ddd the following files and folders

    • CSS: Sẽ chứa tất cả kiểu dáng cho ứng dụng trò chuyện JavaScript của bạn: will contain all styling for your JavaScript chat application
    • IMG: Lưu trữ hình ảnh được sử dụng bởi ứng dụng như logo và nền: stores images used by the application such as the logo and background
    • JS: Chứa các ứng dụng mã JavaScript và logic kinh doanh: contains the applications JavaScript code and business logic
    • Ảnh chụp màn hình: Thư mục này chứa hình ảnh được sử dụng trong tệp readme.md: this folder contains images used in the README.md file
    • favicon.ico: favicon.ico cho ứng dụng.: the favicon.ico for the application.
    • index.html: sẽ được hiển thị khi người dùng truy cập ứng dụng: will be displayed when users visit the application
    • đăng nhập.html: sẽ được hiển thị khi người dùng đăng nhập vào ứng dụng: will be displayed when users login to the application
    • .gitignore: Chứa các tệp được loại trừ khỏi GIT. Bạn cần bao gồm tệp config.js vì nó sẽ chứa các khóa bí mật cho ứng dụng của bạn: contains files to be excluded from git. You need to include the config.js file because it will contain the secret keys for your application
    • Readme.md: mô tả ứng dụng và cung cấp hướng dẫn về cách chạy ứng dụng.: describes the application and provides instructions for how to run the application.

    Bạn sẽ tạo nội dung của các tệp và thư mục cần thiết khi bạn làm theo hướng dẫn.

    Bạn cần tạo tệp styles.css bên trong thư mục CSS trong dự án của bạn để lưu trữ bảng kiểu ứng dụng. Tệp Styles.css trên GitHub chứa tất cả các kiểu cho ứng dụng.styles.css file inside the css folder in your project to store the applications stylesheet. The styles.css file on GitHub contains all the styles for the application.

    Thư mục IMG trên GitHub chứa tất cả các tài sản hình ảnh theo yêu cầu của ứng dụng. Bạn nên tải xuống và thêm chúng vào thư mục IMG bên trong dự án của bạn.img folder inside your project.

    Cài đặt phụ thuộc JavaScript

    Để sử dụng ứng dụng trong trình duyệt web, bạn cần thiết lập một máy chủ HTTP đơn giản để phục vụ các tệp HTML, CSS và JavaScript. Đối với điều này, bạn sẽ sử dụng máy chủ http.

    Chạy lệnh npm install -g http-server cài đặt http-server từ npm. & Nbsp;

    Khi mô-đun được cài đặt, bạn có thể khởi động máy chủ bằng cách điều hướng đến thư mục gốc của dự án và chạy máy chủ http

    Thiết lập Cometchat

    Bạn sẽ cần tạo một ứng dụng mới:

    • Đăng nhập vào bảng điều khiển Cometchat của bạn
    • Nhấp vào ‘Thêm ứng dụng mới

    Cung cấp tên cho ứng dụng của bạn và chọn khu vực bạn muốn sử dụng.

    Hướng dẫn how do you make a chat app in javascript? - làm cách nào để tạo một ứng dụng trò chuyện bằng javascript?

    Tạo một ứng dụng mới trong bảng điều khiển cometchat

    Xóa người dùng và nhóm hiện có

    Cometchat sẽ tự động tạo một số người dùng và nhóm để sử dụng với ứng dụng của bạn. Bạn có thể loại bỏ những thứ này một cách an toàn vì bạn sẽ tạo người dùng mới sẽ được chia sẻ giữa ứng dụng của bạn và Cometchat.

    Tạo tiện ích trò chuyện cometchat

    Cometchat cung cấp các công cụ để giúp bạn tạo và thiết kế cửa sổ ứng dụng trò chuyện sau đó có thể dễ dàng được nhúng vào ứng dụng của bạn dưới dạng tiện ích. & NBSP;

    Để tạo tiện ích trò chuyện mới với Cometchat, hãy làm theo các bước bên dưới:

    • Chọn widget widget trò chuyện từ menu bên trái
    • Nhấp vào Widget Widget trò chuyện mới

    Điều này sẽ tạo một tiện ích mới cho bạn mà bạn có thể tùy chỉnh để thay đổi thiết kế hoặc thêm và xóa các tính năng khác nhau

    Hướng dẫn how do you make a chat app in javascript? - làm cách nào để tạo một ứng dụng trò chuyện bằng javascript?

    Sửa đổi một tiện ích trò chuyện trong bảng điều khiển cometchat

    Bạn có thể tìm thêm thông tin về các tiện ích trò chuyện và các tùy chọn khác nhau trong tài liệu. Tuy nhiên, chúng tôi đã cố gắng hết sức để làm cho các tính năng dễ dàng khám phá và vì bạn sẽ thấy tiện ích mạnh mẽ có nghĩa là không cần phải xây dựng mọi thứ từ đầu.

    Tìm thông tin đăng nhập ứng dụng của bạn

    Khi ứng dụng của bạn đã được tạo, bạn có thể tìm thấy ID ứng dụng và khóa AUTH trên trang ‘Khởi động nhanh.

    Hướng dẫn how do you make a chat app in javascript? - làm cách nào để tạo một ứng dụng trò chuyện bằng javascript?

    Trong khi khóa ID Widget và API REST có thể được tìm thấy trên trang Widgets của bạn

    Hướng dẫn how do you make a chat app in javascript? - làm cách nào để tạo một ứng dụng trò chuyện bằng javascript?

    Định cấu hình Cometchat trong ứng dụng của bạn

    Trong hướng dẫn này, chúng tôi sẽ sử dụng tiện ích Cometchat. Khi người dùng đăng nhập vào ứng dụng của chúng tôi, họ không chỉ đăng nhập vào ứng dụng của chúng tôi, họ cũng đăng nhập vào nền tảng Cometchat.

    Để sử dụng tiện ích Cometchat hoặc SDK trong ứng dụng của bạn, bạn cần cung cấp thông tin cần thiết để liên lạc với nền tảng Cometchat.

    Trong thư mục JS, bạn đã tạo trước đó Thêm một tệp mới cấu hình.js để lưu trữ thông tin đăng nhập tài khoản của bạn với nội dung bên dưới:js folder your created earlier add a new file config.js to store your account credentials with the content below:

    Hãy chắc chắn thay thế các giá trị ví dụ bằng các giá trị từ tài khoản Cometchat của bạn.

    Thiết lập cơ sở lửa

    Firebase là một nền tảng back-end do Google cung cấp để xây dựng các ứng dụng đầy đủ. Nó cung cấp cho các lập trình viên các tùy chọn xác thực, lưu trữ, cơ sở dữ liệu, lưu trữ, thử nghiệm A/B và các dịch vụ khác.

    Firebase giúp bạn tập trung vào việc phát triển mặt trước của các ứng dụng của bạn trong khi nó thực hiện các công việc ẩn cho bạn.

    Bạn sẽ cần tạo một dự án Firebase mới: & NBSP;

    • Đi đến bảng điều khiển Firebase
    • Tạo một dự án mới

    Tạo cơ sở dữ liệu thời gian thực

    Firebase cung cấp hai loại cơ sở dữ liệu (đám mây Firestore và cơ sở dữ liệu thời gian thực). Đối với hướng dẫn của anh ấy, bạn sẽ sử dụng cơ sở dữ liệu thời gian thực.

    Trong thanh bên bên trái

    • Mở menu ‘Bản dựng
    • Nhấp vào 'Cơ sở dữ liệu thời gian thực' và sau đó ‘Tạo cơ sở dữ liệu

    Hướng dẫn how do you make a chat app in javascript? - làm cách nào để tạo một ứng dụng trò chuyện bằng javascript?

    Sau đó, chọn khu vực bạn muốn sử dụng

    Hướng dẫn how do you make a chat app in javascript? - làm cách nào để tạo một ứng dụng trò chuyện bằng javascript?

    Cuối cùng, hãy bắt đầu cơ sở dữ liệu ở chế độ kiểm traTest mode

    Hướng dẫn how do you make a chat app in javascript? - làm cách nào để tạo một ứng dụng trò chuyện bằng javascript?

    Thêm một dịch vụ xác thực

    Chúng tôi sẽ sử dụng dịch vụ xác thực Firebase, để quản lý tài khoản người dùng. Dịch vụ sẽ được cấu hình để người dùng cần cung cấp tên người dùng (địa chỉ email) và mật khẩu để sử dụng ứng dụng.

    Trong thanh bên bên trái

    • Mở menu ‘Bản dựng
    • Nhấp vào 'Cơ sở dữ liệu thời gian thực' và sau đó ‘Tạo cơ sở dữ liệu

    Hướng dẫn how do you make a chat app in javascript? - làm cách nào để tạo một ứng dụng trò chuyện bằng javascript?

    Sau đó, chọn khu vực bạn muốn sử dụng

    Hướng dẫn how do you make a chat app in javascript? - làm cách nào để tạo một ứng dụng trò chuyện bằng javascript?

    Cuối cùng, hãy bắt đầu cơ sở dữ liệu ở chế độ kiểm tra

    Hướng dẫn how do you make a chat app in javascript? - làm cách nào để tạo một ứng dụng trò chuyện bằng javascript?

    Thêm một dịch vụ xác thực

    Chúng tôi sẽ sử dụng dịch vụ xác thực Firebase, để quản lý tài khoản người dùng. Dịch vụ sẽ được cấu hình để người dùng cần cung cấp tên người dùng (địa chỉ email) và mật khẩu để sử dụng ứng dụng.

    Nhấp vào 'Xác thực' và sau đó ‘Bắt đầu

    • Sau đó, chọn ‘email/mật khẩu, từ Danh sách của nhà cung cấp bản địa làm phương thức xác thực của bạn.
    • Cuối cùng, bật tùy chọn ‘Email/Mật khẩu và nhấp vào‘ Lưu.

    Hướng dẫn how do you make a chat app in javascript? - làm cách nào để tạo một ứng dụng trò chuyện bằng javascript?

    Nhận chi tiết cấu hình của bạn

    Hướng dẫn how do you make a chat app in javascript? - làm cách nào để tạo một ứng dụng trò chuyện bằng javascript?

    Khi cơ sở dữ liệu của bạn được thiết lập, điều duy nhất còn lại là để có được chi tiết cấu hình của bạn. Bạn sẽ sử dụng những thứ này để xác thực ứng dụng của bạn với dịch vụ Firebase.

    • Bạn có thể tìm thấy chi tiết cấu hình của mình trong bảng điều khiển Firebase:javascript-chat-app
    • Nhấp vào biểu tượng Gear bên cạnh Tổng quan về Dự án

    Chọn cài đặt dự án

    Trong Ứng dụng của bạn, chọn một ứng dụng web,:

    Hướng dẫn how do you make a chat app in javascript? - làm cách nào để tạo một ứng dụng trò chuyện bằng javascript?

    Tiếp theo bạn cần đăng ký ứng dụng của mìnhconfig.js file you created earlier.

    Nhập tên cho ứng dụng của bạn, ví dụ: JavaScript-Chat-app

    Nhấp vào ‘Đăng ký Ứng dụngfirebase.js file will be responsible for interfacing with Firebase's Realtime Database service and  initialize the email/password authentication service provider enabling users to sign in with their email/password. The projects secret keys will be retrieved from the config.js file.

    Bạn có thể bỏ qua màn hình tiếp theo và nhấp vào ‘Tiếp tục điều khiểnjs folder create a new firebase.js file with the following content:

    Các giá trị cấu hình ứng dụng của bạn sau đó sẽ được hiển thị trong phần Ứng dụng của bạn

    Hướng dẫn how do you make a chat app in javascript? - làm cách nào để tạo một ứng dụng trò chuyện bằng javascript?

    Bạn sẽ cần thêm các giá trị này vào tệp config.js bạn đã tạo trước đó.

    Khởi tạo Firebase trong ứng dụng của bạnlogin.html file in your project:

    Tệp firebase.js sẽ chịu trách nhiệm giao tiếp với dịch vụ cơ sở dữ liệu thời gian thực của Firebase và & NBSP; Khởi tạo nhà cung cấp dịch vụ xác thực email/mật khẩu cho phép người dùng đăng nhập bằng email/mật khẩu của họ. Các khóa bí mật dự án sẽ được lấy từ tệp Config.js.

    • Bên trong thư mục JS của bạn, hãy tạo tệp firebase.js mới với nội dung sau:
    • Trang đăng nhập
    • Trang đăng nhập chịu trách nhiệm xác thực người dùng bằng dịch vụ xác thực FireBase. Nó chấp nhận thông tin đăng nhập của người dùng và tạo và giải thích cho họ hoặc đăng nhập chúng, tùy thuộc vào việc họ có phải là người dùng mới hay không. & NBSP;
    • Thêm HTML sau vào tệp đăng nhập.html trong dự án của bạn:

    Trong HTML ở trên bạn có & nbsp; Bao gồm một số thư viện của bên thứ ba:

    Cometchat Widget: Giúp tích hợp tiện ích cometchat

    UUID: Thư viện UUID được sử dụng để tạo ID duy nhất cho mỗi tài khoảnauth.js will be used to handle this functionality

    Trình xác nhận: Được sử dụng để xác thực biểu mẫu đăng nhập

    Firebase: Giúp chúng tôi tương tác với Firebase và sử dụng các dịch vụ Firebase bao gồm Xác thực Firebase và Cơ sở dữ liệu thời gian thực Firebasejs folder create a new auth.js file with the following content:

    Cũng như sử dụng các thư viện của bên thứ ba, bạn cần tạo một số tệp để xử lý logic cho ứng dụng của bạn: auth.js, config.js, firebase.js, util.js, login.js. Bạn đã tạo Config.js và firebase.js, tuy nhiên bây giờ bạn sẽ cần thêm các tệp khác.

    Tệp Auth.js

    Ứng dụng cần cung cấp một cách để người dùng đăng nhập và có một hồ sơ ngắn. Một lần & nbsp; Người dùng đã đăng nhập vào ứng dụng, người dùng không thể quay lại trang đăng nhập nhưng nếu người dùng chưa đăng nhập vào ứng dụng, người dùng không thể truy cập trang chủ. auth.js sẽ được sử dụng để xử lý chức năng nàyjs folder create a new util.js file with the following content:

    Auth.js sẽ được sử dụng trên cả đăng nhập và trang chủ và sẽ được thực hiện trước khi có bất kỳ hành động nào khác. Tệp này sẽ chịu trách nhiệm kiểm tra xem người dùng hiện tại có đăng nhập hay không sử dụng chức năng getLoggedInuser () được cung cấp bởi SDK của tiện ích cometchat. Nếu người dùng chưa đăng nhập vào ứng dụng, người dùng sẽ được chuyển hướng đến trang đăng nhập. & NBSP;

    Trong thư mục JS, hãy tạo tệp auth.js mới với nội dung sau:

    Trong thư mục JS, hãy tạo tệp đăng nhập mới và sao chép nội dung của login.js trên githubjs folder create a new login.js file and copy the contents of the login.js on GitHub

    Đọc qua tệp, sau khi nhấp vào nút Đăng ký, hàm RegentNewAccount () sẽ được gọi. Nó chấp nhận một đối tượng JSON dưới dạng tham số chứa thông tin của người dùng bao gồm địa chỉ email, mật khẩu và xác nhận mật khẩu. Trước khi tiến hành, thông tin của người dùng được xác thực bằng cách sử dụng hàm ValidatenewAccount (). Nếu thông tin hợp lệ, Avatar và ID duy nhất của người dùng sẽ được tạo. Sau đó, ứng dụng đăng ký một tài khoản người dùng mới với dịch vụ xác thực FireBase cũng như COMetchat bằng cách sử dụng SDK cometchatWidget.

    Để đăng nhập vào ứng dụng trò chuyện, người dùng cần nhấp vào nút ‘Đăng nhập. Đoạn mã bên dưới mô tả cách xử lý logic kinh doanh cho tính năng đăng nhập. Thông tin đăng nhập của người dùng sẽ được lấy từ các yếu tố đầu vào trước và ứng dụng xác nhận thông tin đó. Nếu thông tin đầu vào là hợp lệ, ứng dụng sẽ cho phép người dùng đăng nhập bằng dịch vụ xác thực FireBase và cometchatwidget. Người dùng được xác thực sau đó sẽ được chuyển hướng đến trang chủ.

    Trang chủ

    Sau khi người dùng đã đăng nhập vào ứng dụng, người dùng sẽ được chuyển hướng đến trang chủ sẽ hiển thị tiện ích Cometchat.

    Thêm HTML sau vào tệp index.html trong dự án của bạn:index.html file in your project:

    Tệp Index.js

    Tệp này chịu trách nhiệm hiển thị lời chào đến người dùng, xử lý logic khi nhấp vào nút Đăng xuất đăng nhập và khởi chạy tiện ích Cometchat.

    Phần quan trọng nhất của đoạn mã trên là làm thế nào để khởi chạy tiện ích cometchat. Theo tài liệu tiện ích Cometchat, trước tiên bạn cần khởi tạo tiện ích Cometchat, nếu khởi tạo được hoàn thành thành công, mã để khởi chạy tiện ích Cometchat sẽ được thực thi. Bên cạnh đó, tất cả các cấu hình sẽ được lấy từ tệp ‘config.js. & Nbsp;

    Nhấp vào nút Đăng nhập của Nhật Bản, sẽ gọi chức năng đăng nhập trên mạng được cung cấp bởi SDK COMetchat. Nếu chức năng được thực thi thành công, bạn cần chuyển hướng người dùng đến trang đăng nhập.

    Sự kết luận

    Bây giờ bạn đã xây dựng ứng dụng trò chuyện nắm tay của mình bằng tiện ích cometchat và firebase. & Nbsp; Bạn đã thấy cách tích hợp hầu hết các chức năng Cometchat như nhắn tin và nhắn tin thời gian thực. & NBSP;

    Tôi hy vọng bạn thích hướng dẫn này và bạn có thể xây dựng thành công ứng dụng trò chuyện JavaScript. Đã đến lúc bận rộn và xây dựng các ứng dụng liên quan khác với các kỹ năng bạn đã nhận được từ hướng dẫn này. Bạn có thể bắt đầu xây dựng ứng dụng trò chuyện của mình miễn phí bằng cách đăng ký bảng điều khiển Cometchat.

    Thông tin về các Tác giả

    Hiep le là một kỹ sư phần mềm. Ông rất quan tâm đến việc xây dựng các sản phẩm phần mềm và là một kỹ sư phần mềm toàn thời gian. Hầu hết các công việc của anh ấy đều tập trung vào một điều - để giúp mọi người học hỏi

    Làm cách nào để tạo một ứng dụng trò chuyện?

    Làm thế nào để tạo một ứng dụng trò chuyện trong 3 bước dễ dàng..
    Tên & Logo. Để tạo một ứng dụng, hãy chọn một mẫu hoặc một ứng dụng trống và đặt tên và biểu tượng ..
    Đặt các tính năng. Chọn các tính năng từ nhà sản xuất ứng dụng trò chuyện phù hợp nhất với nhu cầu của bạn ..
    Công bố. Nhấn nút xuất bản và chúng tôi sẽ thực hiện phần còn lại để xuất bản ứng dụng trò chuyện của bạn ..

    Làm cách nào để tạo một trang web trò chuyện?

    Cách xây dựng một trang web phòng trò chuyện..
    Bước 0: Quyết định trọng tâm. Tất cả các trang web cần một hướng, và một phòng trò chuyện cũng không ngoại lệ. ....
    Bước 1: Chọn một nền tảng để xây dựng với (WordPress) ....
    Bước 2: Chọn một máy chủ web và tên miền. ....
    Bước 3: Cài đặt WordPress và chọn một chủ đề và plugin để sử dụng. ....
    Bước 4: Có kế hoạch kiểm duyệt ..

    Trò chuyện dựa trên web là gì?

    WebChat là một định dạng cho phép khách hàng giao tiếp trực tiếp với các thương hiệu trực tuyến, thường là trên trang web của họ và trong thời gian thực.Cửa sổ trò chuyện web bật lên dưới dạng lớp phủ của trang web trong trình duyệt, cho phép người dùng nhập tin nhắn trực tiếp vào trường văn bản và thường đính kèm hình ảnh và các tệp khác.a format that allows customers to communicate directly with brands online, often on their websites and in real time. The web chat window pops up as an overlay of the website page in the browser, allowing the user to type messages directly into a text field, and often attach images and other files as well.