Розробка системи хештегів в мобільному додатку

Розробка системи хештегів в мобільній програмі

Хештеги в мобільній програмі — це три окремих завдання: парсинг #тег при вводі тексту, автодополнення в редакторі, та сторінка тега з контентом. Кожне з них має нюанси, які не видні з ТЗ.

Парсинг та виділення у тексті

Хештег у тексті повинен бути кликабельним та візуально виділеним — синім або фірмовим кольором. На iOS це NSAttributedString з кастомними атрибутами:

func attributedText(from text: String) -> NSAttributedString {
    let attributed = NSMutableAttributedString(string: text)
    let hashtagPattern = #"#[\w\u0400-\u04FF]+"#  // підтримка кириліці
    let regex = try! NSRegularExpression(pattern: hashtagPattern)
    let matches = regex.matches(in: text, range: NSRange(text.startIndex..., in: text))
    for match in matches {
        attributed.addAttribute(.foregroundColor, value: UIColor.systemBlue, range: match.range)
        attributed.addAttribute(.link, value: "hashtag://\(match.range)", range: match.range)
    }
    return attributed
}

Обробка тапу — через UITextView.delegate метод textView(_:shouldInteractWith:in:interaction:). Перехопіть URL-схему hashtag:// та відкрийте екран тега.

На Compose — AnnotatedString з SpanStyle:

buildAnnotatedString {
    val hashtagRegex = Regex("#[\\w\\u0400-\\u04FF]+")
    var lastIndex = 0
    hashtagRegex.findAll(text).forEach { match ->
        append(text.substring(lastIndex, match.range.first))
        pushStringAnnotation("HASHTAG", match.value)
        withStyle(SpanStyle(color = MaterialTheme.colorScheme.primary)) { append(match.value) }
        pop()
        lastIndex = match.range.last + 1
    }
    append(text.substring(lastIndex))
}

Важливо: regex для хештегів повинен підтримувати не тільки ASCII, а й кирилицю, арабський та інші Unicode-алфавіти — \w у більшості реалізацій не покриває їх без явного вказання Unicode-діапазонів.

Автодополнення при вводі

При вводі # у поле створення поста запусніть пошук за базою хештегів. Логіка:

1. Відстежуйте позицію курсора в тексті.
2. Шукайте # перед курсором без пробілів.
3. Текст після # — пошуковий запит.
4. Запитайте GET /hashtags/suggest?q=сп з debounce 200ms.
5. Покажіть dropdown під полем введення (не над ним — клавіатура перекриває).

На iOS dropdown — окремий UITableView, додаваний у UIWindow поверх основного контенту. Позиціонуйте по caretRect(for:) з UITextInput. При виборі хештега з списку — вставте у текст через replace(_:withText:) та сховайте dropdown.

На Compose — ExposedDropdownMenuBox або кастомний Popup прив'язаний до поля введення.

База хештегів та аналітика

Таблиця hashtags (id, name, posts_count). При публікації поста парсіть хештеги, шукайте або створюйте запис у hashtags, створюйте зв'язок post_hashtags (post_id, hashtag_id). posts_count оновлюється через чергу.

Сторінка хештега — GET /hashtags/{name}/posts з пагінацією. Сортування за датою або популярністю (пости з найбільшим engagement за останні N днів). Trending hashtags: worker рахує posts_count за останні 24 години, результат кешується у Redis на 30 хвилин.

Нормалізація імен

Хештеги нечутливі до регістру: #React, #react, #REACT — один тег. Зберігайте у lowercase, при пошуку — LOWER(name) = LOWER(?) або індекс на LOWER(name). Пробілі та спецсимволи у імені хештега — видаліть при нормалізації.

Часові рамки

Парсинг та кликабельні хештеги у тексті — 1 день. Автодополнення при вводі — ще 1 день. Сторінка тега з лентою — 1-2 дні. Повна система — 2-3 робочих дні. Вартість розраховується індивідуально.