Engineering

Een Vue chat app bouwen: Sendbird’s UIKit gebruiken in een Vue.js applicatie

Een Vue chat app bouwen: Sendbird’s UIKit gebruiken in een Vue.js applicatie

Gebouw
chat
is een complexe onderneming. Of u nu bouwt voor
gezondheidszorg
,
gaming
,
diensten op aanvraag
of elke andere industrie, het bouwen van chat met veel mogelijkheden vergt inspanning. Het is ook essentieel om de juiste tech stack te kiezen; in deze tutorial onderzoeken we hoe we chat kunnen bouwen met Vue.js, een populair front-end JavaScript web framework voor het bouwen van gebruikersinterfaces en kleine applicaties. U leert ook hoe u Sendbird’s
UIKit
, een functierijke set van
chat UI
componenten, in uw Vue chat app.

Er zijn momenten waarop u componenten geschreven in een ander frontend framework wilt renderen naar uw app; bijvoorbeeld wanneer u een project migreert tussen frontend frameworks of wanneer u een bibliotheek van derden gebruikt (bv. vuetify) die niet is geport naar het framework van uw keuze. In deze gevallen zijn een aantal overbruggingsbibliotheken beschikbaar. Het is bijvoorbeeld mogelijk om Hoekig componenten in Reageer apps met angular2react of Vue componenten in een Svelte project met svelte-adapter. Voor deze tutorial gebruiken we
Veuary
om de React en Vue werelden te overbruggen.

Voorwaarden

Om te beginnen met het bouwen van je Vue chat app, heb je het volgende nodig
node.js
geïnstalleerd en een Sendbird Applicatie ID. Als je dat nog niet hebt gedaan, kun je
maak een Sendbird account aan
en maak een applicatie aan in het
dashboard
.

U kunt uw Application ID vinden in het Sendbird dashboard.

Wat we gaan bouwen: Hoe je Vue chat app eruit moet zien

In deze tutorial bouwen we een Vue chat-app met een soortgelijke UX als WhatsApp voor desktop. De
definitieve projectcode
is beschikbaar op GitHub, en we raden u ook aan de
live demo
.

Ons project wordt gebouwd met Vue 3 en de app zal een volledig werkende versie van Sendbird’s
React UIKit
in de hoofd Vue chat app. De Vue app geeft configuraties door aan de UIKit en UIKit geeft ook gebruikersinformatie terug aan Vue. Met deze tweerichtingscommunicatie kunnen we de naam en het aantal ongelezen berichten van een Sendbird-gebruiker weergeven in de kop van onze Vue-app. Het resultaat ziet er zo uit.

Uw Vue chat-app instellen

Vue heeft een handige opdrachtregel-tool om snel toepassingen te scaffleren. Voer gewoon het volgende uit, waar je je project ook wilt hebben.

Dit commando doorloopt de opties bij het maken van een nieuw project. De voor deze tutorial gebruikte instellingen staan hieronder.

Voer de onderstaande commando’s uit om de app in dev-modus te starten.

U zou nu een glimmende nieuwe landingspagina moeten zien wanneer u een bezoek brengt aan
http://localhost:5173
. Zo moet het eruit zien:

Veaury installeren en configureren

Veaury is een bibliotheek die de rendering van React-componenten in Vue-apps mogelijk maakt. Het is vermeldenswaard dat Vue-componenten in React-apps ook worden ondersteund, maar die vallen buiten het bereik van deze tutorial. Veaury werkt met zowel Vue 3 als Vue 2, en de bibliotheek kan worden geïnstalleerd vanaf npm met het volgende commando:

Om onze nieuw gemaakte Vue chat app React componenten te laten importeren en renderen, moet je een kleine wijziging aanbrengen in de build configuratie. Daarom moeten we het bestand vite.config.js in ons project bijwerken om de Veaury-plugin te gebruiken.

Na deze configuratiewijziging kunt u alle React-componenten die u wilt toevoegen aan een map genaamd react_app. Die React-componenten kunnen dan worden geïmporteerd in .vue-bestanden en gerenderd in standaard Vue-componenten.

Een React-component maken in ons Vue-project

Eerst moet je een nieuwe React component aanmaken in react_app. Deze component is verantwoordelijk voor het importeren, configureren en renderen van UIKit.

U hoeft niets speciaals te doen aan deze React-component om hem mooi te laten spelen met Vue. De code hier doet het volgende:

  1. Importeert Sendbird UIKit afhankelijkheden
  2. Initialiseert UIKit met een app id en user id
  3. Gebruikt withSendbird HOC voor toegang tot de Sendbird SDK. Dit geeft ons toegang tot de gebruikersinformatie die moet worden doorgegeven aan de Vue-app.

Het is vermeldenswaard dat de props die worden doorgegeven aan ChatReactComponent worden doorgegeven van een ouder Vue-component. Het doorgeven van props hier is de manier om de React-kant te laten communiceren met Vue. Hoe deze eigenschappen moeten worden gedefinieerd en ingevoerd, wordt in het volgende deel behandeld.

UIKit toevoegen aan de pagina

Voeg vervolgens het ChatReactComponent toe aan je Vue chat app. De pagina die moet worden bijgewerkt is views/HomeView.vue. Verwijder alle code die momenteel in views/HomeView.vue staat en voeg onderstaande code toe.

Deze code doet het volgende:

  1. Importeert Veaury en onze nieuwe React chat component
  2. Converteert ons React-component naar een Vue-component met behulp van de functie applyPureReactInVue van Veaury
  3. Stel in de setup-functie de gegevens en callbacks in om als props door te geven aan onze React-component
  4. Definieer onze HTML om een top header weer te geven. De kop bevat de gebruikersnaam en het aantal ongelezen berichten. Deze gegevens worden in een latere stap van deze tutorial teruggegeven door UIKit.
  5. Render de React Chat-component in de HTML, waarbij de eerder gedefinieerde gegevens en callbacks als attributen op het Chat-element worden doorgegeven.
  6. Voeg tenslotte wat styling toe om het geheel er mooi uit te laten zien

U ziet nu UIKit rendering in de browser wanneer u een bezoek brengt aan
http://localhost:5173
. Zo moet het eruit zien:

Gebruikersinformatie doorgeven aan Vue

Tenslotte worden de gebruikersinformatie en het aantal ongelezen berichten teruggegeven aan uw Vue chat-app, zodat deze die informatie kan weergeven in de bovenste balk van de applicatie. Deze informatie is toegankelijk via de Sendbird SDK. Om vanuit UIKit toegang te krijgen tot de SDK, kun je een handige functie genaamd getSdk gebruiken. Als u die functie aanroept zoals hieronder getoond, krijgt u de onderliggende SDK. U kunt dan de relevante methoden openen om te krijgen wat nodig is (aantal ongelezen berichten en gebruikersinformatie) en die informatie teruggeven aan Vue met behulp van de callbacks die als props worden doorgegeven (setUnreadMessageCount & setSbUserInfo).

De bovenste balk van de app toont nu een zichtbare gebruikersnaam en het aantal berichten. Let op de gebruikersnaam “Bob” en het aantal ongelezen berichten van 1 in de onderstaande schermafbeelding.

Conclusie

Gefeliciteerd! Je hebt nu Sendbird UIKit draaien in je Vue app. In deze tutorial hebben we besproken hoe je een Vue chat app kunt maken met behulp van de feature-rijke, voorgemaakte ontwerpcomponenten die Sendbird UIKit biedt. Nu kun je vrolijk groepen maken en beginnen met chatten!

Vergeet niet dat gegevens in beide richtingen stromen tussen de Vue- en React-code; een verstandige volgende stap zou zijn om te proberen verschillende soorten eigenschappen door te geven aan de Chat React-component en die eigenschappen te gebruiken om UIKit op een alternatieve manier te configureren, bijvoorbeeld door de themakleuren van UIKit in te stellen.

Als u hulp nodig heeft met
Sendbird Chat
of de
UIKit
zie dan onze
documenten voor Chat
en
docs voor UIKit
! U vindt hier richtlijnen over hoe u chat in uw app kunt gebruiken met rijke voorgebouwde UI-componenten. U kunt ook antwoorden vinden in de
Sendbird Gemeenschap
, een forum waar je vragen kunt stellen en beantwoorden over alles wat met
Sendbird
. Aarzel niet om contact met ons opnemen als je hulp nodig hebt – onze experts helpen je graag. Vrolijk babbelen! 💻

Categories: Engineering