Node.js- 강화 채팅방 웹 앱 : 부트 스트랩이있는 채팅방 UI 빌드

키 테이크 아웃

이 튜토리얼은 Node.js-powered 웹 앱에서 bootstrap을 사용하여 채팅방 UI를 만드는 방법을 보여줍니다. 프로세스에는 프로젝트에 부트 스트랩을 추가하고 채팅 UI 레이아웃을 생성하고 CSS를 추가하여 메시지 편집 영역을 뷰포트 하단으로 강제합니다. 튜토리얼은 부트 스트랩을 수정하는 것을 포함하여 부트 스트랩을 프로젝트에 통합하는 특정 단계를 개요합니다. 채팅 UI 레이아웃은 부트 스트랩 그리드 시스템을 사용하여 구축되며 사용자 정의 CSS 규칙이 추가되어 메시지 편집 영역이 뷰포트 하단에 배치되도록합니다.

이 기사는 Microsoft의 Web Dev Tech 시리즈의 일부입니다. Sitepoint를 가능하게하는 파트너를 지원해 주셔서 감사합니다.

이 node.js 튜토리얼 시리즈는 클라우드에 완전히 배포 된 Node.js-powered 실시간 채팅룸 웹 앱을 구축하는 데 도움이됩니다. 이 시리즈에서는 Windows 시스템에서 Node.js를 설정하는 방법을 배웁니다 (또는 Mac에있는 경우 개념을 배우십시오), Express를 사용하여 웹 프론트 엔드를 개발하는 방법, Node.js Express 앱을 배포하는 방법 Azure, Socket.io를 사용하여 실시간 레이어를 추가하는 방법 및 모두 함께 배포하는 방법. 튜토리얼은 옵션의 Visual Studio와 Node.js 도구를 개발 환경으로 사용합니다. 두 도구의 무료 다운로드에 대한 링크를 제공했습니다. 이것은 중간 수준의 기사의 초보자입니다. html5와 javaScript를 알고있을 것으로 예상됩니다.
• 1 부 - Node.js 소개 2 부 - Node.js 및 Azure로 Express에 오신 것을 환영합니다. Part 3 - node.js, mongo 및 socket.io 파트 5 - 채팅실을 websockets 를 연결합니다 Part 6 - 피날레 및 디버깅 원격 노드 .js 앱
• 4 부 - 부트 스트랩이있는 채팅방 ui 구축 실습 node.js 튜토리얼 시리즈의 파트 4에 오신 것을 환영합니다.
이 할부에서는 2 부와 파트 3에서 구축 한 채팅방 백엔드에 트위터 부트 스트랩 스타일의 프론트 엔드를 추가하는 방법을 보여 드리겠습니다. 부트 스트랩이란 무엇입니까? Bootstrap은 웹 사이트 및 웹 애플리케이션을 구축하는 데 큰 인기있는 HTML 및 CSS 프레임 워크입니다. Github의 최고의 프로젝트입니다. 부트 스트랩은 반응 형 웹 디자인을 지원하므로 페이지의 레이아웃이 장치 (데스크탑, 태블릿, 모바일)에 적응할 수 있습니다. 프로젝트에 부트 스트랩을 추가합니다 프로젝트에 부트 스트랩을 추가하려면 부트 스트랩을 위해 미니저 CSS 및 JS 파일을 다운로드해야합니다. 이 링크에서 부트 스트랩을 다운로드 할 수 있습니다. Bootstrap을 다운로드 한 후 파일을 풀고 폴더 CSS, JS 및 글꼴을 프로젝트의 공개 폴더로 복사하십시오. 기존 폴더 구조와 몇 가지 불일치가 나타납니다. 스타일 시트와 JavaScript 폴더를 통합합니다. 스타일 시트 용 CSS의 부트 스트랩 명칭 및 JavaScript의 JS를 다른 타사 라이브러리와 공유하는 것을 선호합니다. 스타일 시트의 파일을 CSS로 복사하고 비어 있어야하므로 JavaScript 폴더를 삭제하십시오. 다음 Layout.jade로 이동하여 다음 줄을 변경하십시오
to :

link(rel='stylesheet' href='/stylesheets/style.css')

> 다음으로, 우리는 bootstrap css 파일 링크를 헤더에 추가하고 Layout.jade 파일의 HTML5 앱에 대한 적절한 메타 태그를 추가하려고합니다. Style.css 링크가 포함 된 줄 바로 앞에 다음 줄을 추가해야합니다.

다음으로 는 부트 스트랩이 구성 요소 및 플러그인에 필요한 JavaScript 파일을 추가하려고합니다. 레이아웃 끝에 다음 줄을 추가하십시오.

완성 된 레이아웃. jade

link(rel='stylesheet' href='/css/style.css')

채팅 제작 ui 레이아웃 채팅 사용자 인터페이스 레이아웃을 개발할 때입니다. 먼저 Bootstrap에 대해 읽고이 긴 튜토리얼을 살펴볼 수 있습니다. 모든 채팅 엔진에는 최근에받은 메시지를위한 영역과 사용자가 메시지를 작성하고 보낼 영역이 있습니다. 역사적으로, 레이아웃은 편집 영역이 바닥에 첨부되어 있고 메시지가 상단에있는 것이 었습니다. 약간의 작업없이 HTML 페이지의 요소를 뷰포트 하단으로 수정하는 것은 쉽지 않습니다. 바닥 글을 바닥에 고정하기 위해이 샘플을 따라갈 것입니다. index.jade 파일을 수정하고 컨텐츠 블록 아래에서 모든 코드 줄을 제거하려고합니다. 먼저, 우리는 수신 된 메시지가 포함 된 페이지의 영역을 추가합니다. 클래스 랩으로 DIV를 추가하여 시작하겠습니다. Jade에서는
를 생성하기 위해 .wrap 만 쓸 필요가 있습니다. 들여 쓰기를 사용함으로써, 우리는 jade 템플릿 엔진에 더 많은 들여 쓰기 요소가 덜 들여 쓰기 요소 내에 들어갈 것이라고 신호를 보낼 수 있습니다. 다른 튜토리얼에서 놓친 경우이 Jade 튜토리얼을 살펴보십시오.

다음으로, 우리는 클래스 컨테이너-유체와 함께 다른 div를 추가하여 페이지에 유체 너비를 추가하려고합니다. 내부에서는“노드 채팅방에 오신 것을 환영합니다”라는 H1 요소와 ID 메시지가 포함 된 DIV와 DIV와 클래스 푸시가있는 최종 DIV가 채팅방의 메시지 편집 영역을 아래로 밀어내는 데 사용할 수 있습니다. 뷰포트.

다음으로, 우리는 메시지 편집 영역을 개발할 것입니다. 텍스트 상자와 발송 버튼을 바르고라는 DIV 내에서 컨테이너-유체라는 DIV 내에 캡처하려고합니다. 바닥 글 div는 랩 Div.

meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible" content="IE=edge")
link(rel='stylesheet' href='/css/bootstrap.min.css')
link(rel='stylesheet' href='/css/bootstrap-theme.min.css')

와 동일한 들여 쓰기를 가질 것입니다. 다음으로, 부트 스트랩 그리드 시스템 (여기서 읽음)을 사용하여 메시지 편집 영역을 2로 나눕니다. 열 중 하나는 대부분의 공간을 차지하며 메시지를 작성하기위한 텍스트 상자가 포함되며 두 번째 열에는 메시지를 보내기위한 블록 레벨 버튼이 포함됩니다. Jade가 단락 표기법을 사용하여 요소의 속성을 지정할 수있는 방법에 유의하십시오. 코드는 다음과 같습니다.
<.> 완성 된 index.jade

link(rel='stylesheet' href='/stylesheets/style.css')

CSS 추가 메시지 편집 영역을 뷰포트 하단으로 강제로 강제 우리는 메시지 편집 영역을 뷰포트 하단으로 강제하려고합니다. 공개/css/style.styl 페이지에 몇 가지 사용자 정의 CSS 규칙을 추가하려고합니다. 이 파일은 Stylus CSS Preprocessor를 사용하지만 생성 된 CSS 파일에 재검토 될 구두 CSS를 붙여 넣을 수도 있습니다. 먼저, 전체 페이지가 높이의 100%를 차지하도록 할 것입니다.

둘째, 랩 영역이 최대 높이를 차지할 수있는 최대 높이를 차지하지만 바닥 글 및 메시지 편집 영역의 바닥에 60px 마진을 남깁니다.

셋째, 편집 영역을위한이 공간이 존중되고 바닥 글에 할당하려고합니다.

link(rel='stylesheet' href='/css/style.css')

.

마지막으로 스타일의 이유로 바닥 글에 미묘한 배경색을 추가합시다.

<.> 완성 된 style.styl

스크린 샷 모든 것을 올바르게 수행하면 다음과 같이 보이는 UI로 끝나야합니다.

결론 voila! 우리는 Bootstrap과 Jade/Stylus Preprocessors를 사용하여 Node.js가 제공하는 채팅방에 멋진 UI 레이아웃을 추가했습니다. 다음 할부에서는 WebSockets를 통해 UI와 Node.js 백엔드를 연결하는 방법을 보여 드리겠습니다. 파트 5를 계속 지켜봐주십시오! 5 부 - 채팅실을 WebSockets와 연결하는 것이 여기에 있습니다. 내 트위터 계정을 따르면이 기사와 다른 기사에 대해 최신 정보를 유지할 수 있습니다. <..> 더 많은 node.js azure에서 학습 Node.js에서보다 심층 학습을 위해 내 코스는 Microsoft Virtual Academy에서 확인할 수 있습니다. 또는 유사한 node.js 주제에 대한 일부 짧은 형식 비디오 :

meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible" content="IE=edge")
link(rel='stylesheet' href='/css/bootstrap.min.css')
link(rel='stylesheet' href='/css/bootstrap-theme.min.css')

6 부 시리즈 : node.js 로 앱을 구축합니다

노드를 통과하는 산책 (coding4fun) script(type=’text/javascript’ src=’/js/bootstrap.min.js’)
이 기사는 Microsoft의 Web Dev Tech 시리즈의 일부입니다. 프로젝트 스파르타와 새로운 렌더링 엔진을 여러분과 공유하게되어 기쁩니다. MANDE.IE의 Mac, iOS, Android 또는 Windows 장치에서 무료 가상 머신 또는 원격으로 테스트를 받으십시오. node.js-powered chatroom 웹 앱을 구축하는 것에 대한 자주 묻는 질문 (FAQ) node.js-powered chatroom 웹 앱에서 채팅 UI를 사용자 정의 할 수 있습니까?
node.js-powered chatroom 웹 앱에서 채팅 UI 사용자 정의 CSS 및 JavaScript를 수정하여 수행 할 수 있습니다. 채팅 UI와 관련된 파일. 선호도에 맞게 채팅 UI의 색상, 글꼴 및 레이아웃을 변경할 수 있습니다. 또한 타사 라이브러리를 통합하거나 자신의 사용자 정의 코드를 작성하여 이모티콘, 파일 공유 및 음성 메시지와 같은 추가 기능을 추가 할 수도 있습니다. 변경 사항이 예상대로 작동하고 앱에 버그를 도입하지 않도록 변경 사항을 철저히 테스트해야합니다. 채팅 UI를 구축하기위한 모범 사례는 무엇입니까? , 유용성과 단순성에 집중하는 것이 중요합니다. 채팅 UI는 최초 사용자에게도 직관적이고 사용하기 쉬워야합니다. 또한 반응이 있어야하므로 모든 장치와 화면 크기에서 잘 보이고 기능해야합니다. 다른 모범 사례에는 사용자에게 피드백 제공 (예 : 메시지가 보내거나 읽은 시점 표시), 사용자 정의 (테마 또는 글꼴 크기 변경 등), 접근성 보장 (예 : 이미지에 대한 Alt Text 제공 및 제작 등이 포함됩니다. 키보드를 통해 탐색 할 수 있는지 확인하십시오. WebSocket은 단일 TCP 연결을 통해 전이중 통신 채널을 제공하는 프로토콜입니다. 이를 통해 클라이언트와 서버 간의 실시간 통신이 가능합니다. Node.js에서는 socket.io와 같은 라이브러리를 사용하여 WebSocket 기능을 쉽게 구현할 수 있습니다. 이를 통해 메시지를 즉시 보내고 수신 할 수있어 사용자에게 완벽한 채팅 경험을 제공합니다.

node.js-powered Chatroom 웹 앱에서 오류를 처리하는 방법?

오류 처리는 어떻게 처리 할 수 ​​있습니까? 모든 웹 앱의 중요한 측면입니다. Node.js에서는 미들웨어 기능을 사용하여 오류를 처리 할 수 ​​있습니다. 이러한 기능은 코드 실행 중에 발생하는 오류를 포착하고 처리 할 수 ​​있습니다. 시도/캐치 블록을 사용하여 동기 코드의 오류를 처리 할 수도 있습니다. 유익한 오류 메시지를 사용자에게 제공하고 디버깅 목적으로 오류를 기록하는 것이 중요합니다.

채팅방 웹 앱의 보안을 보장하는 방법
Chatroom 웹 앱의 보안 보장 여러 단계가 포함됩니다. 먼저 HTTPS를 사용하여 대중 교통에서 데이터를 암호화해야합니다. 둘째, 크로스 사이트 스크립팅 (XSS) 공격을 방지하기 위해 사용자 입력을 소독해야합니다. 셋째, 세션 납치를 방지하기 위해 안전한 쿠키를 사용해야합니다. 넷째, 무차별 인력 공격을 방지하기 위해 속도 제한을 구현해야합니다. 마지막으로 최신 보안 패치의 혜택을 받기 위해 Node.js 및 기타 모든 소프트웨어를 최신 상태로 유지해야합니다. node.js-powered chatroom 웹 앱을 어떻게 확장 할 수 있습니까?
node.js-powered chatroom 웹 앱 스케일링은 다양한 방법을 통해 달성 할 수 있습니다. 일반적인 방법 중 하나는 수평 스케일링으로, 증가 된 하중을 처리하기 위해 더 많은 서버를 추가하는 것이 포함됩니다. 또 다른 방법은 수직 스케일링으로, 기존 서버에 더 많은 리소스 (예 : CPU 또는 RAM)를 추가하는 것이 포함됩니다. 로드 밸런싱을 사용하여 여러 서버에 트래픽을 균일하게 배포 할 수 있습니다.
채팅방 웹 앱을 테스트하려면 어떻게해야합니까?
채팅방 웹 앱을 테스트하는 것은 예상대로 작동하고 제공하는지 확인하기 위해 중요합니다. 좋은 사용자 경험. 단위 테스트를 사용하여 개별 기능, 통합 테스트를 테스트하여 앱의 다양한 부분이 어떻게 작동하는지 테스트하고 엔드 투 엔드 테스트를 통해 사용자의 관점에서 앱을 테스트 할 수 있습니다. 수동 테스트를 사용하여 자동화 된 테스트가 누락 될 수있는 문제를 포착 할 수 있습니다.
node.js-powered chatroom 웹 앱을 배포하려면 node.js-powered chatroom 배포 웹 앱은 Heroku, AWS 또는 Google Cloud와 같은 다양한 플랫폼을 사용하여 수행 할 수 있습니다. 이 플랫폼은 앱을 쉽게 배포, 스케일링 및 모니터링 할 수있는 도구 및 서비스를 제공합니다. 또한 CI/CD (Continuous Integration/Continuous Deployment) 도구를 사용하여 배포 프로세스를 자동화하고 앱을 항상 최신 상태로 유지하는 것을 고려해야합니다.

채팅실 웹 앱의 성능을 어떻게 모니터링 할 수 있습니까?

Chatroom 웹 앱의 사용자 경험을 어떻게 개선 할 수 있습니까?
사용자 경험 향상 채팅방 웹 앱 중 다양한 방법을 통해 달성 할 수 있습니다. 먼저 빠르고 반응이 좋은 앱이 더 나은 사용자 경험을 제공하므로 성능에 중점을 두어야합니다. 둘째, 장애인을 포함한 모든 사용자가 앱에 액세스 할 수 있도록해야합니다. 셋째, 사용자 피드백을 듣고 제안에 따라 개선해야합니다. 마지막으로 새로운 기능을 추가하고 버그를 수정하려면 앱을 정기적으로 업데이트해야합니다.

위 내용은 Node.js- 강화 채팅방 웹 앱 : 부트 스트랩이있는 채팅방 UI 빌드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!