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
 Mục lụcPhá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ựngTrong hướng dẫn này, bạn Tìm hiểu cách xây dựng một ứng dụng trong đó:
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:
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:
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
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 CometchatBạn sẽ cần tạo một ứ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. 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 cometchatCometchat 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:
Đ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 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ạnKhi ứ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. Trong khi khóa ID Widget và API REST có thể được tìm thấy trên trang Widgets của bạn Định cấu hình Cometchat trong ứng dụng của bạnTrong 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ửaFirebase 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;
Tạo cơ sở dữ liệu thời gian thựcFirebase 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
Sau đó, chọn khu vực bạn muốn sử dụng Cuối cùng, hãy bắt đầu cơ sở dữ liệu ở chế độ kiểm traTest mode Thêm một dịch vụ xác thựcChú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
Sau đó, chọn khu vực bạn muốn sử dụng Cuối cùng, hãy bắt đầu cơ sở dữ liệu ở chế độ kiểm tra Thêm một dịch vụ xác thựcChú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
Nhận chi tiết cấu hình của bạn 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.
Chọn cài đặt dự án Trong Ứng dụng của bạn, chọn một ứng dụng web,: 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-appNhấ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ạnBạ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.
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 cometchatUUID: 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.jsTệ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ậnBâ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. |
