Πώς να φτιάξετε το τελευταίο στοιχείο επαναλαμβανόμενης συζήτησης Web

Πιθανότατα έχετε ήδη διαβάσει πολλά πώς-tos και πώς-don'ts για web chats. Θέλω να πω, συνεχώς συζητάμε τις ημέρες μακριά (εκτός των ωρών γραφείου, φυσικά), γι 'αυτό είναι ένα αρκετά κοινό θέμα. Αλλά εδώ είναι η ερώτησή μου: πόσες φορές μπορείτε να εφαρμόσετε μια εφαρμογή συνομιλίας χωρίς αντιγραφή / επικόλληση και πόσο γρήγορα; Και τι εάν θα μπορούσατε να δημιουργήσετε μια ολόκληρη δέσμη τέτοιων εφαρμογών με την τελική συνιστώσα;

Η εφαρμογή αυτή χρειάστηκε εννέα μήνες. Και πολλή τύχη για να το πάρει ακριβώς το ίδιο! Πηγή: funtube

Εδώ είναι το πράγμα: τι θα μπορούσατε αν θα μπορούσατε να δημιουργήσετε ένα στοιχείο web chat που μπορείτε να επαναχρησιμοποιήσετε όσες φορές θέλετε, αυτό είναι ανεξάρτητο από συγκεκριμένα σενάρια και ότι μπορείτε να ενσωματώσετε σε οποιαδήποτε εφαρμογή με μόνο μερικές διαφορετικές διαμορφώσεις; Είναι αυτό ένα όνειρο; Οχι, καθόλου. Ας δούμε πώς να το κάνουμε αυτό.

Πολύ πιο εύκολο, έτσι; Πηγή: tugimnasiacerebral

Φάση έρευνας: Απαιτήσεις συγκέντρωσης

Όλα τα καλά έργα ξεκινούν με τη συγκέντρωση απαιτήσεων. Για παράδειγμα, ανάγκασε τους συναδέλφους μου να μου μιλήσουν ηλεκτρονικά με τη δικαιολογία της «έρευνας». Αυτό μου επέτρεψε να δω τις πιο συνηθισμένες, τις καλύτερες και τις χειρότερες συμπεριφορές πολλών εφαρμογών.

Αλλά τα πρώτα πράγματα πρώτα. Τι περιμένουμε όταν ανοίξουμε την έκδοση ιστού μιας εφαρμογής συνομιλίας;

  • Αναπαραγόμενη εμφάνιση και αίσθηση: Οι εκδόσεις ιστού και κινητού πρέπει να φαίνονται (σχεδόν) ίδιες. Θέλετε συνέπεια.
  • Ανάγκη για ταχύτητα: Σκεφτείτε τη γρήγορη φόρτωση, την γρήγορη αποστολή αρχείων και τις γρήγορες αντιδράσεις στις εισόδους σας.
  • Η ανθεκτικότητα είναι απαραίτητη: Η εφαρμογή συνομιλίας πρέπει να είναι ισχυρή. Είναι αναμενόμενο. Όντας μια διαδικτυακή έκδοση, η σύνδεση είναι πάντα εκεί και, κατά πάσα πιθανότητα, είναι επίσης καλή σύνδεση.

Με αυτές τις απαιτήσεις στο μυαλό, μπορείτε να αρχίσετε να σκέφτεστε την εμπειρία. Ας δούμε τι αποδείχθηκε ως συμπεριφορά.

Νέα συζήτηση

Αυτό είναι εύκολο: για να συνομιλήσετε με κάποιον, ξεκινήστε να πληκτρολογείτε.

Η συνηθέστερη συμπεριφορά σε μια νέα συζήτηση είναι να αποκρύψετε το συνημμένο (ή άλλες διαθέσιμες επιλογές) και να εμφανίσετε το κουμπί Αποστολή. Δεδομένου ότι είναι μια εφαρμογή Ιστού, το πλήκτρο Enter είναι πάντα διαθέσιμο και θα πρέπει πάντα να στείλει το μήνυμα, αλλά ο οπτικός υπαινιγμός για το πότε μπορείτε να στείλετε το μήνυμα γίνεται η προεπιλογή.

Ξεκινώντας μια συνομιλία.

Λήψη μηνυμάτων

Έτσι, τι συμβαίνει όταν λαμβάνετε περισσότερα από ένα μηνύματα; Χρειάζεστε μια υπόδειξη για να υποδείξετε τα μη αναγνωσμένα. Από τις διάφορες προσεγγίσεις που είδα, ο πιο χρησιμοποιούμενος είναι ένας διαχωριστής (συνήθως μια έγχρωμη γραμμή) ανάμεσα στα μηνύματα που έχετε ήδη διαβάσει και αυτά που δεν έχετε. Αλλά όταν τα μηνύματα διαβάζονται, μερικοί διαχωριστές ξεθωριάζουν μερικά δευτερόλεπτα μετά το άνοιγμα της συνομιλίας, άλλοι όταν εστιάζετε στην είσοδο και άλλοι μόνο όταν απαντάτε.

Διαφορετικοί τρόποι για την εμφάνιση νέων μη αναγνωσμένων μηνυμάτων.

Συνημμένα

Η εμπειρία αποστολής και λήψης αρχείων αλλάζει από εφαρμογή σε εφαρμογή. Αλλά όλοι αναμένουμε τουλάχιστον να μάθουμε τι μας στέλνουμε, ανεξάρτητα από το όνομα αρχείου. Έχουμε την τάση να αναγνωρίζουμε έναν τύπο αρχείου με το εικονίδιο και όχι με το όνομα ή την επέκτασή του, οπότε προτιμάται η μεταφορά αρχείων, οπτικής παρουσίασης ή εικονιδίου. Οι περισσότεροι από εμάς θα ήθελα επίσης να προεπισκόπηση αυτών των αρχείων, αλλά δεν υποστηρίζουν όλες οι εφαρμογές. Τα πιο συνηθισμένα αρχεία που μπορούν να προβληθούν είναι τα αρχεία PDF, τα έγγραφα του Office, οι εικόνες και τα βίντεο. Άλλες μορφές απαιτούν συνήθως λήψη.

Και όταν πρόκειται για τη μεταφόρτωση ενός αρχείου, ορισμένες εφαρμογές επιτρέπουν τη μεταφόρτωση μόνο εάν είναι ξεχωριστές από τα μηνύματα, ενώ άλλες επιτρέπουν τίτλους και σχόλια που είναι συνημμένα στο αρχείο που ανεβάζετε. Ανεξάρτητα από την κατοχή ενός τίτλου ή όχι, κατά τη μεταφόρτωση, η αντιπροσώπευση τύπου αρχείου είναι ένα πλεονέκτημα.

Χειρισμός συνημμένων.

Όπως μπορείτε να δείτε, υπάρχουν πολλά που πρέπει να λάβετε υπόψη από την άποψη της εμπειρίας των χρηστών. Τελικά πρόκειται για την εμπειρία που θα θέλατε να παρέχετε στους χρήστες σας. Υπάρχουν μερικές αλληλεπιδράσεις που είναι οι προεπιλεγμένες, οπότε η διατήρηση των χρηστών σας ευτυχώς ικανοποιώντας τις προσδοκίες τους είναι πάντα μια ασφαλής επιλογή. Αλλά αν νιώθετε σαν πρωτοπόρος, πρωτοπόρος ... και πρέπει να εφαρμόσετε τη λύση που νομίζετε ότι είναι καλύτερη. Λάβετε υπόψη ότι ορισμένες επιλογές μπορεί να είναι πιο εύκολο να εφαρμοστούν από άλλες, γι 'αυτό πάρτε και αυτό υπόψη.

Η έρευνα παρέχει αποτελέσματα

Στη συνέχεια συγκέντρωσα τις σημειώσεις μου (οι συνάδελφοί μου δεν αισθανόταν πλέον το φόβο των ψεύτικων συνομιλιών μας) και έκαναν κάποιες ενημερωμένες αποφάσεις σχετικά με τη διεπαφή χρήστη της συνομιλίας μου:

  • Οι συνομιλίες παρατίθενται κατακόρυφα.
  • Η φωτογραφία χρήστη είναι στρογγυλή και ελαφρώς διαχωρισμένη από το ίδιο το μήνυμα.
  • Τα μηνύματα εμφανίζονται μέσα σε ένα πλαίσιο "μπαλόνι".
  • Τα μηνύματα του χρήστη ευθυγραμμίζονται προς τα δεξιά, ενώ τα ληφθέντα μηνύματα εμφανίζονται στα αριστερά.
  • Για νέα μηνύματα, πήγα με τη γραμμή διαχωρισμού.
  • Οι εικόνες, οι gifs και τα βίντεο έχουν ενσωματωμένη προεπισκόπηση.
  • Άλλοι τύποι αρχείων έχουν μια κοινή παράσταση (χωρίς αναγνώριση τύπου αρχείου).

Χωρίς άλλο λάθος, εδώ είναι το αποτέλεσμα:

Προσαρμόσιμο μήνυμα καλωσορίσματος στην κορυφή. Ομαδοποιούνται ανά ημέρα και ένα ελκυστικό διαχωριστικό για τον εντοπισμό μη αναγνωσμένων μηνυμάτων.

Αυτό ταιριάζει με όσα συνηθίζετε να βλέπετε σε άλλες εφαρμογές. Ένα επαναχρησιμοποιήσιμο στοιχείο σας επιτρέπει να συναντάτε εύκολα τα πιο συνηθισμένα σενάρια και εγγυάται μελλοντικές υλοποιήσεις.

Εφαρμογή επαναχρησιμοποίησης

Πρέπει μόνο να χτίσετε μια επαναχρησιμοποιήσιμη συνιστώσα μία φορά, αλλά μπορείτε να την χρησιμοποιήσετε όσες φορές θέλετε. Έτσι, δημιουργείτε ένα αντικείμενο το οποίο αργότερα θα αναφέρεται από οποιονδήποτε αριθμό εφαρμογών, το καθένα με τις δικές του περιπτώσεις χρήσης, τις προδιαγραφές και τις ρυθμίσεις. Για να καταστεί αυτό δυνατό, χρειάζεστε λειτουργίες API, ώστε να μπορείτε να ορίσετε τις σωστές ρυθμίσεις και να θέσετε αυτό το μωρό σε λειτουργία. Αλλά πριν από αυτό, υπάρχει και κάποια άλλη δουλειά.

Δημιουργία ενός μοντέλου δεδομένων

Η εφαρμογή του μοντέλου δεδομένων μας επιτρέπει να έχουμε ένα μοναδικό αναγνωριστικό που χρησιμοποιούμε σε μια οντότητα επέκτασης, επιτρέποντας μια συγκεκριμένη χρήση συζήτησης ανά εγγραφή.

Το ξέρω? Πηγή: memegenerator

Φανταστείτε, για παράδειγμα, ένα ηλεκτρονικό κατάστημα. Σε αυτήν την περίπτωση, ένα μοναδικό αναγνωριστικό μπορεί να συσχετιστεί με ένα συγκεκριμένο προϊόν ή μπορεί να συσχετιστεί με τον χρήστη που είναι συνδεδεμένος αυτήν τη στιγμή, για να διατηρηθεί η συνομιλία ενεργοποιημένη σε ολόκληρο τον ιστότοπο. Έτσι, από την πλευρά της εφαρμογής, χρειάζεται μόνο να δημιουργήσετε ένα αναγνωριστικό μία φορά ανά σχετικό "στοιχείο".

Ας καλέσουμε αυτό το υποκείμενο οντότητας. Θα χρειαστεί να παράσχουμε μια συνάρτηση στο στοιχείο μας που να επιτρέπει τη δημιουργία ενός νέου αντικειμένου Θέματος και να επιστρέφει το αναγνωριστικό του, το οποίο καλούμε SubjectId. (Περισσότερα για αυτό αργότερα.)

Τώρα, έχουμε μια μοναδική συζήτηση. Καλά, σωστά;

Προϊόν (id, περιγραφή, EAN, ...) + Θέμα (Id, όνομα, ...) = Product_Subject (Product.Id, Subject.Id)

Αποθήκευση συνομιλιών

Για να αποθηκεύσετε συνομιλίες, θα δημιουργήσουμε μια οντότητα Post. Αυτή η οντότητα περιλαμβάνει:

  • Το ίδιο το μήνυμα: 'Μήνυμα' (Κείμενο)
  • Οι πληροφορίες για τον αποστολέα: 'PostBy' (UserId)
  • Όταν το μήνυμα εστάλη: 'PostedOn' (DateTime)
  • Το Θέμα στο οποίο ανήκει: 'SubjectId' (SubjectId)

Για να καταφέρουμε να δουλέψουμε αυτόν τον ξεχωριστό διαχωριστή, πρέπει να παρακολουθούμε το τελευταίο μήνυμα ανάγνωσης. Εδώ θα κάνουμε: LastSeenPost (SubjectId, PostId, UserId).

Ας ρίξουμε μια πιο προσεκτική ματιά σε αυτό. Για να δείξουμε στον χρήστη ποιο μήνυμα ήταν η τελευταία ανάγνωση, πρέπει να γνωρίζουμε σε ποιο θέμα ανήκει. Και ναι, το μαντέψατε, αυτό είναι το SubjectId. Πρέπει να γνωρίζουμε ποιο μήνυμα είναι, δηλαδή το PostId. Και σε ποιον χρήστη ανήκει, αυτό είναι το UserId. Με όλες αυτές τις πληροφορίες, το τέχνασμα είναι στη συνέχεια να ενημερώσει αυτήν την καταχώρηση όταν στέλνουμε ένα μήνυμα.

Διαχείριση Συνημμένων

Για να αποθηκεύσετε τα αρχεία, δημιουργούμε την οντότητα προσάρτησης. Τώρα, επειδή θέλουμε η συνομιλία να εμφανίζεται όσο το δυνατόν πιο ομαλή, δεν αποθηκεύουμε τα δυαδικά δεδομένα των αρχείων σε αυτήν την οντότητα Συνημμένου, αλλά σε μια ξεχωριστή μορφή που ονομάζεται Αρχείο.

Κατά τη φόρτωση των μηνυμάτων, ανακτούμε τις πληροφορίες του Θέματος μέχρι το Επίπεδο συνημμένων, αλλά λαμβάνουμε το ίδιο το αρχείο σε άλλη χρονική στιγμή. Διαφορετικά, η απάντηση στο αίτημά μας θα επιστρέψει όλο το δυαδικό περιεχόμενο κάθε αρχείου και αυτό θα μπορούσε να διαρκέσει πολύ για να φορτώσει και να αποθαρρύνει τους χρήστες της συνομιλίας.

Επομένως, η οντότητα προσάρτησης είναι:

PostId (PostId), Όνομα αρχείου (Κείμενο), Τύπος αρχείου (Κείμενο), UploadedOn (DateTime).

Και η οντότητα αρχείου είναι:

AttachmentId (AttachmentId), Αρχείο (BinaryData).

Το αποτέλεσμα είναι αυτό το μοντέλο δεδομένων:

Το μοντέλο δεδομένων μας.

Χρόνος κωδικοποίησης

Τώρα που έχουμε το μοντέλο δεδομένων μας, είναι ο χρόνος κωδικοποίησης! Ας συνδέσουμε μερικές τελείες.

Η αποστολή ενός μηνύματος είναι πολύ βασική. Όταν ο χρήστης κάνει κλικ στο κουμπί Αποστολή ή στο πλήκτρο Enter, το μόνο που χρειάζεται να κάνουμε είναι να αποθηκεύσουμε την οντότητα Post στη βάση δεδομένων. Η αποστολή αρχείων είναι η ίδια, αλλά η οντότητα Συνημμένου χρειάζεται PostId, οπότε πρέπει πρώτα να δημιουργήσουμε μια κενή καταχώρηση Post.

Εδώ, επιτρέψτε μου να σας δείξω αυτό που μοιάζει.

(Αποποίηση: Ο κώδικας που πρόκειται να απολαύσετε είναι όλος ο ψευδοκώδικας. Στους αναγνώστες συνιστάται να μην χρησιμοποιούν αυτόν τον κωδικό.)

Αυτή η ενέργεια ονομάζεται όταν κάνουμε κλικ στο κουμπί Αποστολή που μιλήσαμε πριν.

Ομοίως, η αποστολή ενός αρχείου γίνεται με αυτόν τον τρόπο:

Θυμηθείτε όταν είπα ότι θα ενημερώσουμε την ενότητα LastSeenPost; Λοιπόν, μόλις στείλαμε ένα μήνυμα ή ένα αρχείο, οπότε τώρα είναι ο χρόνος.

Εδώ είναι ο κώδικας:

Τώρα μπορούμε να στείλουμε μηνύματα και αρχεία κατά την ενημέρωση του τελευταίου αναγνωσμένου μηνύματος.

Το κουμπί αποστολής λειτουργεί !! Φοβερός!

Αυτό είναι πολύ όμορφο, αλλά είναι σε πραγματικό χρόνο; Πρόκειται να γίνει!

Ενεργοποίηση της επικοινωνίας σε πραγματικό χρόνο

Ενώ χτίσαμε ένα στοιχείο συνομιλίας, κάποιος άλλος έχτισε ένα στοιχείο που επιτρέπει την επικοινωνία σε πραγματικό χρόνο (ευχαριστίες, τυχαίο άτομο). Έτσι, πήγα με την Firebase, επειδή η ρύθμισή της είναι γρήγορη και η ολοκλήρωση είναι εύκολη. Το Firebase έρχεται με έναν "κοινοποιούντα" και έναν "ακροατή". Όταν στέλνουμε νέα μηνύματα πυροδοτούμε τον κοινοποιούντα και ο ακροατής θα πει στο συστατικό τι πρέπει να κάνει. για παράδειγμα, ανανεώστε τη λίστα των μηνυμάτων.

Συνδεθείτε με οποιαδήποτε εφαρμογή

Έτσι, ας ανακεφαλαιώσουμε. Μιλήσαμε για το μοντέλο δεδομένων, τις ενέργειες και σε πραγματικό χρόνο. Υπάρχει μόνο ένα πράγμα που λείπει: πώς να αποκτήσετε αυτό το μοναδικό αναγνωριστικό που πρέπει να αποθηκεύσουμε στην πλευρά της εφαρμογής. Ξέρετε, ότι το SubjectId.

Θυμηθείτε όταν είπα ότι θα πρέπει να επεκτείνετε μια οντότητα να συνδέσει το SubjectId με το "στοιχείο σας" και θυμάστε ότι μια Δημοσίευση πρέπει να γνωρίζει σε ποιον SubjectId ανήκει;

Αυτή η οντότητα είναι το κλειδί. Από τη μία πλευρά, χρησιμοποιείται από το στοιχείο για να προσδιορίσει σε ποια συνομιλία ένα μήνυμα ανήκει. Από την άλλη πλευρά, το αναγνωριστικό του είναι αυτό που χρησιμοποιείτε για να ξέρετε ποιο στοιχείο έχει αυτή τη συγκεκριμένη συνομιλία.

Για να διατεθεί αυτό το αναγνωριστικό, πρέπει να το κάνουμε:

Και αυτό είναι το πώς λειτουργεί: Αν θέλετε μια συνομιλία ανά χρήστη, στην εφαρμογή σας, όταν ένας χρήστης συνδέεται, ελέγχετε αν ο χρήστης έχει ένα συνδεδεμένο SubjectId. Αν όχι, ποιον θα καλέσετε; Όχι όχι τα Ghostbusters, αλλά η λειτουργία CreateSubjectId και αποθηκεύστε το παρεχόμενο SubjectId μαζί με το UserId. Στη συνέχεια, όταν χρησιμοποιείτε το στοιχείο, το μόνο που χρειάζεται να κάνετε είναι να παρέχετε το SubjectId στο νεοσυσταθέν, καταπληκτικό επαναχρησιμοποιήσιμο στοιχείο, έτσι ώστε να γνωρίζει ακριβώς ποια μηνύματα (μηνύματα) θα εμφανίζονται ή θα αποθηκεύονται για αυτόν τον χρήστη.

Blend the Best, παραδώστε το καλύτερο

Έτσι, τώρα έχουμε τη βασική λογική για την κατασκευή ενός στοιχείου συνομιλίας.

Όσον αφορά το UI, η επιλογή είναι δική σας. Et voilà! Έχετε μια λειτουργική εφαρμογή συνομιλίας!

Θέλετε να δείτε το αποτέλεσμα και να το δοκιμάσετε; Προχωρήστε στον ιστότοπο του Silk UI για δοκιμαστική μονάδα. Υπάρχει επίσης η δυνατότητα να μάθετε λίγο περισσότερο για τη δομή και πώς λειτουργεί και, φυσικά, μπορείτε να δοκιμάσετε την πλατφόρμα με την οποία την έχτισα.