Git Product home page Git Product logo

niborium / meddelandecentralen Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 1.5 MB

Assignment Web developer .NET, course: Web applications with real-time communication. Chat application for Concorde Hotel New York employees to manage work orders and chat with colleagues. Built with Blazor server (ASP.NET Core) with SignalR and BlazorStrap 5 (Bootstrap 5 Components for Blazor Framework). Created by Robin Karlsson WU21

HTML 45.50% C# 36.68% CSS 17.82%
asp-net-core microsoft-signalr blazor-server blazorstrap signalr-client signalr-hub csharp css3 html5 dependency-injection

meddelandecentralen's Introduction

Meddelandecentralen

Chattapplikation för anställda hos Concorde Hotel New York för att hantera arbetsordrar och chatta med kollegor.

Teknik

Skapad med:
Blazor server (ASP.NET Core) med SignalR Hubs
SignalR Client
BlazorStrap V5

Installationsanvisning

För utvecklare och testning (lokalt):
Ladda ner koden som zip eller klona ner med git clone via Code-knappen uppe till höger.

Nödvändig förutsättning (Om inte installerat redan på dator): Download .NET

I din terminal så kör du:
dotnet restore
dotnet run

Nu kan du surfa in på applikationen på angiven port och testa applikationen.

Vill du publicera/deploya applikationen så finns information nedan:
Host and deploy ASP.NET Core
Deploy .NET Core apps with Visual Studio
Publish .NET apps with the .NET CLI

Inlämning 1 - Planering

Val av idé:
"2. En chatt där alla kan prata med alla, "som Slack ungefär", i så fall måste det vara tydligt vilket rum som är aktuellt och om rummets status påverkas."

Typ (Arbetsorder):
Tanken är att meddelandet som skickas innehåller tidstämpel (datum + klockslag), vem som skickat meddelandet, gällande vilket rum, meddelande, status och tilldelad till. Sedan kan man i realtid kunna toggla denna status via två knappar (andra anställda beroende på om det är åtgärdad eller under utredning) när man klickar på knappen så tilldelar den användaren automatiskt.

Typ (Chattmeddelande):
tidstämpel (datum + klockslag), vem som skickat meddelandet och meddelande.

Initial planering (Kanban):

  1. Öppna nedan Kanban bild i större storlek
  2. Öppna Kanbanbrädet - Endast behöriga - Robin & Viktor
  3. Se milstolpar och uppgifter
    Kanban

Observera att ovan är en Initial planering av arbetet. Det kan tillkomma uppgifter eller redigeras uppgifter under arbetets gång.

Inlämning 2 - Lägesrapport

Klassdiagram:
Classdiagram

#Bidirectional Dependency (Chathub < - - > MessageServiceBase)
Ändringar i SendMessage-funktionen (MessageServiceBase) kan påverka SendMessage-funktionen (ChatHub)
Ändringar i SendMessage (ChatHub) kan påverka SendMessage-funktionen (MessageServiceBase).
Kan resultera i att meddelanden inte skickas korrekt. (Chatt & Arbetsorder)

Ändringar i MessageServiceBase (SendInvestigate & SendDone) kan påverka SendInvestigate & SendDone-funktionen (ChatHub)
Ändringar i SendInvestigate & SendDone (ChatHub) kan påverka SendInvestigate & SendDone-funktionen (MessageRendrer).
Kan resultera i att tilldening och statusuppdatering (Under utredning och Åtgärdad) för meddelanden inte skickas korrekt eller att meddelanden inte tas emot korrekt.

Kanban uppdatering:
Ligger före planeringen med god marginal och har egentligen endast förbättring av meddelande formatet som kvarstår. Det som kvarstår utöver det är tester (det som finns uppgifter för) och även eventuell förbättring av gränssnittet.

  1. Öppna nedan Kanban bild i större storlek
  2. Öppna Kanbanbrädet - Endast behöriga - Robin & Viktor
  3. Se milstolpar och uppgifter
    Kanban

meddelandecentralen's People

Contributors

niborium avatar

Stargazers

 avatar

Watchers

 avatar

meddelandecentralen's Issues

Grundstruktur och paket [MILSTOLPE1]

Kopplad till krav:

  1. Innehålla ett server-side API skrivet med ASP.NET och C#
  2. Använda ramverket SignalR för realtidskommunikation mellan klientgränssnittet och server-side API:et

Uppskattad tidåtgång: 1h

Skapa projektet (dotnet new blazorserver -o Meddelandecentralen)
Dokumentation: https://learn.microsoft.com/sv-se/aspnet/core/blazor/tutorials/signalr-blazor?view=aspnetcore-6.0&tabs=visual-studio-code&pivots=server

Skapa extra mappar:
Artefacts
Hubs
Models

  • gitignore för vs, vscode, bin och obj
  • Ta bort WeatherForecast och allt som ligger med i template

Installera paket:
SignalR client: dotnet add package Microsoft.AspNetCore.SignalR.Client
Blazorstrap: https://blazorstrap.io/V5/
https://www.nuget.org/packages/BlazorStrap

[Klient] Konfigurera BlazorStrap + CSS uplift (BlazorStrap) [MILSTOLPE1]

Uppskattad tidåtgång: 3-4h

  1. Konfigurera BlazorStrap enligt dokumentation: https://blazorstrap.io/V5/
    Nuget installerat sedan tidigare (Grundstruktur + paket).
  2. Ändra standard knappar till BlazorStrap knappar.
  3. Kontrollera layout och ändra om så att vi kan nyttja Containers för responsivitet.
  4. Se över annat i gränssnittet som kan ersättas med Forms eller andra BlazorStrap komponenter (endast för att förbättra utseendet)

Dokumentation:
https://blazorstrap.io/V5/

[Server] SignalR Hub, Service och Endpoint [MILSTOLPE1]

Kopplad till krav:

  1. Innehålla ett server-side API skrivet med ASP.NET och C#
  2. Möjliggöra kollaborativa funktioner mellan två samtidigt anslutna klienter i realtid, exempelvis via meddelanden eller delad information.
  3. Använda ramverket SignalR för realtidskommunikation mellan klientgränssnittet och server-side API:et

Uppskattad tidåtgång: <2h

SignalR Hub
ChatHub.cs (Ska skapas i Hubs mappen)

SendMessage (Skicka meddelande till alla klienter)

Ovan ska tillgodose klassen (MessageModels som återfinns i Models) så vi skickar rätt meddelande innehållandes all information.

+Lägg till Service och endpoint för SignalR-hubben

Inspiration/Dokumentation Microsoft:
https://learn.microsoft.com/sv-se/aspnet/core/blazor/tutorials/signalr-blazor?view=aspnetcore-6.0&tabs=visual-studio-code&pivots=server

[Server] MessageModel.cs [MILSTOLPE1]

Kopplad till krav:

  1. Innehålla ett server-side API skrivet med ASP.NET och C#

Uppskattad tidåtgång: <1h

En ny klass ska skapas och läggas in i mappen (Models):

MessageModel.cs
public Guid Id { get; set; }
public string Date { get; set; }
public enum Messagetype
{
Workorder,
Chat
}
public Messagetype MessagetypeSetting { get; set; }
public string Room{ get; set; }
public string Author { get; set; }
public string Message { get; set; }
public string Status { get; set; }
public string Assigned { get; set; }

    public MessageModel(Guid id, string date, Messagetype messagetypesetting, string room, string author,string message, string status, string assigned)
    {
      Id = id;
      Date = date;
      MessagetypeSetting = messagetypesetting;
      Room = room; 
      Author = author;
      Message = message;
      Status = status;
      Assigned = assigned;
    }

Ovan är initiala tanken, men klasserna kan behöva uppdateras under arbetets gång för att tillgodose behovet.

[Klient] Skapa meddelande (Arbetsorder & Chattmeddelande) [MILSTOLPE1]

Kopplad till krav:

  1. Innehålla ett grafiskt klientgränsnitt för hotellets personal.
  2. Möjliggöra kollaborativa funktioner mellan två samtidigt anslutna klienter i realtid, exempelvis via meddelanden eller delad information.

Uppskattad tidåtgång: 5h~

Jag vill som användare kunna meddelande via ett formulär på sidan där jag vill kunna välja vilket typ av meddelande jag vill skicka (Arbetsorder eller Chattmeddelande). Gör ett dynamiskt formulär enligt egen utformning som tillgodoser behovet.

Arbetsorder:
Datum/tidsstämpel (sätts automatiskt)
Användare
Rum
Meddelande
Status (Ej åtgärdad - sätts automatiskt)
Tilldelad till (Ej tilldelad - sätts automatiskt)

Chattmeddelande:
Datum/tidsstämpel (sätts automatiskt)
Användare
Meddelande

+Knapp för att skicka ovan formulär

Inspiration/Dokumentation Microsoft:
https://learn.microsoft.com/sv-se/aspnet/core/blazor/tutorials/signalr-blazor?view=aspnetcore-6.0&tabs=visual-studio-code&pivots=server

[Klient] Skriv ut meddelanden (RecieveMessage) [MILSTOLPE1]

Kopplad till krav:

  1. Innehålla ett grafiskt klientgränsnitt för hotellets personal.
  2. Möjliggöra kollaborativa funktioner mellan två samtidigt anslutna klienter i realtid, exempelvis via meddelanden eller delad information.

Uppskattad tidåtgång: 3-4h

Skriv ut alla meddelanden som skickas på sidan enligt tidigare format.

Arbetsorder:
Datum/tidsstämpel (sätts automatiskt)
Användare (Av användare)
Rum (Av användare)
Meddelande (Av användare)
Status (Ej åtgärdad - sätts automatiskt)
Tilldelad till (Ej tilldelad - sätts automatiskt)

Chattmeddelande:
Datum/tidsstämpel (sätts automatiskt)
Användare (Av användare)
Meddelande (Av användare)

Inspiration/Dokumentation Microsoft:
https://learn.microsoft.com/sv-se/aspnet/core/blazor/tutorials/signalr-blazor?view=aspnetcore-6.0&tabs=visual-studio-code&pivots=server

[Server] Uppdatera ChatHub.cs för att stödja #12 (Under utredning & Åtgärdad) [MILSTOLPE1]

Kopplad till krav:

  1. Innehålla ett server-side API skrivet med ASP.NET och C#
  2. Möjliggöra kollaborativa funktioner mellan två samtidigt anslutna klienter i realtid, exempelvis via meddelanden eller delad information.
  3. Använda ramverket SignalR för realtidskommunikation mellan klientgränssnittet och server-side API:et

Uppskattad tidåtgång: 2-3h

ChangeStatusInvestigate (Uppdatera status till Under utredning och ändrar tilldelad till aktuell användare)
ChangeStatusDone (Uppdatera status till Åtgärdad och ändrar tilldelad till aktuell användare)

Inspiration/Dokumentation Microsoft:
https://learn.microsoft.com/sv-se/aspnet/core/blazor/tutorials/signalr-blazor?view=aspnetcore-6.0&tabs=visual-studio-code&pivots=server

Förbättra meddelandeformat

Förbättra meddelandena som skrivs ut så det är bättre formaterade.
Formatera text strängen så det är radbrytning och att det är tydligare med fetstilat för egenskaperna.

Avser både Arbetsorder och Chatt

[Klient] Knapp för "Under utredning" & knapp "Åtgärdad" tillägg för arbetsorder (RecieveMessage) [MILSTOLPE1]

Kopplad till krav:

  1. Innehålla ett grafiskt klientgränsnitt för hotellets personal.
  2. Möjliggöra kollaborativa funktioner mellan två samtidigt anslutna klienter i realtid, exempelvis via meddelanden eller delad information.

Uppskattad tidåtgång: 2-3h

För varje arbetsorder ska det finnas två knappar att trycka på:

  1. [Under utredning] - denna ska sätta om statusen för aktuellt meddelande till "Under utredning" och tilldelad till aktuell användare.
    Förslag är att man gör en Modal som man får mata in vilken användare som väljer detta som sedan skickas in i funktionen.

  2. [Åtgärdad] - denna ska sätta om statusen för aktuellt meddelande till "Åtgärdad" och tilldelad till aktuell användare.
    Förslag är att man gör en Modal som man får mata in vilken användare som väljer detta som sedan skickas in i funktionen.

Modal kan vi använda från BlazorStrap:
https://blazorstrap.io/V5/components/modal

Det måste finnas två funktioner för hubConnection som togglar om detta på klienterna.
Så vi uppdaterar korrekt list item med rätt värden (enligt ovan).

Går att hämta inspiration från hubConenction.on i code i:
https://learn.microsoft.com/sv-se/aspnet/core/blazor/tutorials/signalr-blazor?view=aspnetcore-6.0&tabs=visual-studio&pivots=server

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.