Lexicon: Discourse 사이트용 사용자 정의 네이티브 모바일 앱

[RyanKF (Ryan)]

여러분 안녕하세요,

간단히 말씀드리고자 이 글을 남깁니다. 동료들과 함께 Lexicon이라는 프로젝트를 오픈소스로 공개했습니다.

이것은 Discourse API를 기반으로 구축된 사전 제작 및 사용자 지정 가능한 네이티브 모바일 앱입니다. 다른 네이티브 모바일 프로젝트에 토론 및 메시징 기능을 빠르게 통합할 수 있도록 만들기 위해 개발했습니다.

수년간 Discourse 코어 팀과 커뮤니티가 해 온 수많은 노력 덕분에 이 프로젝트를 개발하는 과정이 정말 즐거웠습니다.

스크린샷은 소개에서 확인하실 수 있습니다.

기술에 관심 있는 분들을 위해 Quick Start를 준비했는데, 이를 통해 앱을 테스트하면서 이 Discourse 사이트를 둘러볼 수 있습니다!

질문, 의견, 피드백이 있으시면 주저 없이 연락해 주세요.

감사합니다,
Ryan

P.S. 어떤 카테고리에 이 글을 게시하는 것이 가장 좋을지 확신이 서지 않았습니다. 더 적합한 카테고리가 있다면 자유롭게 옮기셔도 됩니다.

[angus (Angus McLeod)]

명확한 문서화가 정말 감사해요, 특히 아키텍처 관련 부분이요. 로컬에서 직접 확인해 볼 날을 기다리고 있어요!

Push notifications | 개발 중

이 기능은 언제 출시될 예정인가요?

[4ong (Anatol Myshkin)]

정말 멋지네요 @RyanKF! 새 개발자들이 우선적으로 어떤 방향으로 도움을 주면 좋을까요? 저는 리액트로 모바일 앱을 개발해 본 경험이 있습니다.

[TimeDoctor (Jack Slater)]

정말 멋지네요. MIT 라이선스 아래 있는 것 같은데?

[anon73664359]

아, 이건 Fig처럼 네이티브 Discourse 클라이언트를 목표로 하는 건가요? 그렇다면 정말 마음에 듭니다!

[RyanKF (Ryan)]

Fig가 정말 멋져 보입니다! Discourse에 네이티브 iOS 경험을 제공하는 데 정말 성공적으로 잘 해낸 것 같습니다.

내가 볼 수 있는 몇 가지 차이점들…

태블릿 지원

Fig는 태블릿 지원을 아주 잘 갖추고 있습니다. 우리는 아직 이 부분을 다루지 않았습니다.

단일 사이트 앱

Discourse 모바일과 마찬가지로, Fig는 “사이트 관리자” 방식을 채택하여 여러 Discourse 사이트를 추가하고 탐색할 수 있도록 합니다. Lexicon은 Discourse 사이트를 위한 개별적이고, 경우에 따라 화이트라벨링된 앱을 만드는 데 더 집중하고 있습니다.

Lexicon 자체는 앱이 아닙니다

또한, Lexicon은 사용자가 직접 가져가서 커스터마이징하고 App Store / Play Store에 게시할 수 있는 "앱 템플릿"에 가깝습니다. Fig는 이미 게시된 앱을 제공합니다.

프리미엄 제공

Fig는 일부 기능에 대해 프리미엄 옵션을 제공합니다. Lexicon에는 프리미엄 옵션이 없습니다.

Lexicon을 통합, 커스터마이징 또는 게시할 다른 사람이 없을 경우에만 비용이 발생할 수 있습니다. 그런 경우, 우리에게 어떻게 참여할 수 있는지 기꺼이 논의하겠습니다.

그럼에도 불구하고, 이 사이트의 많은 사용자가 기술적이거나 반기술적(semi-technical)인 것을 알고 있으므로, 추가적인 도움 없이도 많은 사람들이 그 과정을 따라갈 수 있도록 문서가 충분히 상세하길 바랍니다.

기술 및 기기 지원

여기서 추측을 해본다면, Fig는 Swift를 사용하여 앱을 개발한 것으로 보이며, 이는 진정한 의미의 네이티브 앱이라 정말 훌륭합니다.

우리는 Lexicon을 React Native를 사용하여 개발했습니다. 이는 JavaScript를 의미합니다(이 접근 방식에 대해 모든 사람이 팬인 것은 아니라는 점은 이해할 수 있습니다).

React Native를 사용하는 우리의 이점 중 하나는 Android와 iOS 앱을 기본적으로 바로 게시할 수 있다는 점이며, 코드 재사용 비율이 높습니다.

우리의 코드베이스에서 Android와 iOS 간의 대부분의 차이는 Android의 플로팅 액션 버튼(Floating Action Button)과 iOS의 헤더 버튼과 같은 외관과 느낌(look-and-feel)에 대한 세부 사항입니다.

[RyanKF (Ryan)]

라이선스는 MIT입니다. 그리고 이번 발표의 다른 세부 사항들을 다루면서 LICENSE 파일을 저장소에 추가하는 것을 깜빡했네요. 지적해 주셔서 감사합니다!

[RyanKF (Ryan)]

이미 기여를 하고 싶다고 말씀해 주셔서 정말 대단하시네요 @4ong!

프론트엔드

프론트엔드 측면에서 개선하고 싶은 영역 중 하나는 게시글의 원본(raw) 콘텐츠에 포함된 기능 지원입니다.

게시글의 일반 마크다운 콘텐츠를 처리하는 것 외에도, Discourse의 커스텀 마크업으로 제공되는 여러 기능을 지원할 수 있습니다.

이미 알고 계실 수 있지만, Discourse는 인용구, 토글, 날짜, 심지어 투표와 같은 기능을 위한 커스텀 문법을 지원합니다.

상당히 일반적인 접근 방식으로, 코드 임베드와 같은 기본 기능에 대한 초기 지원을 구축한 후, 아직 구현되지 않은 기능에는 "<기능>은(는) 현재 지원되지 않습니다"라는 블록을 표시하고 있습니다.

저희 앱에서 이러한 “지원되지 않음” 블록을 완전히 제거하는 것이 목표입니다. 특히 투표(Polls)와 토글(Toggles) 기능은 지원되면 정말 좋겠습니다.

또한 Lexicon은 게시글의 원본 콘텐츠 기반으로 작동하기 때문에 OneBox 지원을 우회합니다. 따라서 최소한 링크 미리보기에 대한 기본 지원은 갖춰 두는 것이 좋겠습니다.

백엔드

궁극적으로 지원하고 싶은 기능 중 하나는 이메일에서 딥링크(deep-linking)를 사용하는 것입니다. 이는 구현이 쉽지 않을 것이며, 아마도 Ruby로 Discourse 플러그인을 개발해야 할 것입니다.

구체적으로, 사용자가 Discourse에서 온 이메일의 게시글 링크를 탭하면 딥링크를 통해 해당 게시글로 바로 앱(설치된 경우)이 열리도록 하는 기능입니다.

앱이 설치되어 있지 않거나 사용자가 모바일 기기가 아닌 경우, 기존과 마찬가지로 웹사이트로 연결됩니다.

이 기능을 맡아 보실 분이 계시다면 저에게 연락해 주세요. 이 기능이 작동하게 된다면 큰 성과가 될 것입니다.

---

수정: 아직 지원되지 않는 기능이 무엇인지 확인하시려면 지원되는 Discourse 기능 페이지 문서를 참고해 주세요. 푸시 알림(이미 작업 중)을 제외한 그 외의 기능이라면 자유롭게 도전해 보실 수 있습니다.

[RyanKF (Ryan)]

낙관적으로 말하면, 앞으로 몇 주 안에 가능할 것 같습니다. 아직 확신할 수 있는 약속은 드리기 어렵습니다.

우리는 이미 개념 증명(Proof-of-Concept) 단계를 넘어서서, 이제 남은 세부 사항들을 다듬고 있는 상태입니다.

이 기능을 지원하려면 여러분의 사이트에 우리의 Discourse 플러그인을 설치해야 합니다.

구체적인 내용을 말씀드리자면, 우리는 Lexicon 모바일 앱을 Expo로 개발했습니다. Expo는 React Native 앱을 위한 훌륭한 빌드 도구와 서비스 모음집이며, 푸시 알림 지원 기능도 포함되어 있습니다.

하지만 Expo의 푸시 서비스와 통합되는 기존 Discourse 플러그인을 찾지 못해, 결국 직접 개발해야 했습니다. 다행히도 기존 오픈소스 통합인 OneSignal이 우리가 필요로 하는 것과 매우 유사하여, 해당 프로젝트를 출발점으로 활용할 수 있었습니다. (pmusaraj 님께 진심으로 감사드립니다 ).

플러그인을 공개하고 모바일 앱과 통합하는 것 외에도, 문서 업데이트도 당연히 필요합니다. Lexicon은 여러분이 자신의 앱을 게시할 수 있게 해주므로, 단순히 App Store나 Play Store에 있는 단일 앱에 푸시 알림을 설정하는 것 이상의 의미를 가집니다.

따라서 프로젝트 사용자들이 올바르게 설정하는 과정을 잘 안내받을 수 있도록, 제대로 작동하도록 세심하게 살펴볼 것입니다.

[RyanKF (Ryan)]

모두의 피드백에 감사드립니다. 다른 궁금한 점이 있으시면 편하게 말씀해 주세요.

그리고 말씀드리지 못한 게 하나 있어요. 오늘 ProductHunt에 게시물을 올렸는데 반응이 꽤 좋습니다. 응원해 주시고 싶으시다면 링크를 클릭해 확인해 주세요!

Lexicon: An open-source, customizable mobile app for communities | Product Hunt

[anon73664359]

아, 알겠습니다. 설명해 주셔서 감사합니다! Lexicon이 정말 흥미롭네요. 태블릿 지원이 기대됩니다!

Discourse를 기반으로 소셜 미디어 플랫폼을 구축하려고 한다면, Lexicon이 그 목적에 이상적인 선택일까요? Lexicon이 향후 데스크톱 플랫폼으로 확장되지 않는다면, 데스크톱 지원이 장벽이 될 것 같습니다.

[JonathanShaw]

정말 흥미롭네요!

몇 가지 의견/질문이 있습니다:

1. DiscourseConnect가 지원되는지 명확하지 않습니다. 지원되는 기능 페이지에 해당 내용을 추가하는 것이 좋을 것 같습니다.

2. 튜토리얼과 문서 모두에서 Prose를 설치하는 방법이 너무 많습니다. 이 자료들이 더 잘 정리될 필요가 있다고 생각합니다. 도커 이미지를 사용하여 가장 단순하게 설정을 진행하려고 할 때 SSL 설정이 어떻게 이루어지는지 명확하지 않았습니다.

3. 직접 사용해 보고 싶지만, 이를 위한 명확한 방법이 없습니다. 메타(Meta)에서 앱을 제공해 주신다면 좋겠습니다.

4. 언급하신 푸시 알림과 딥 링크는 저에게 분명히 중요한 기능입니다.

5. 업데이트, 앱 배포, Prose 등의 복잡성을 고려하면, 이러한 모든 사항을 대신 처리해 주는 유료의 완제품 호스팅/지원 서비스에 관심이 생깁니다. 해당 서비스를 제공하는 것을 고려해 보시는 것도 좋을 것 같습니다. 가격이 어떻게 될지 궁금합니다.

[anon73664359]

@JonathanShaw

• 말씀하신 대로 푸시 알림과 딥 링크는 제 생각에 확실히 중요한 기능입니다.

태블릿 지원도 포함해서요, 맞죠?

[P2W (Mike Riddick)]

정말 훌륭한 작업입니다.

[anon73664359]

Lexicon에는 자체 Discourse 커뮤니티가 있나요? GitHub는 좋지만, 거기서는 Lexicon에 대해 제대로 된 방식으로 이야기를 나눌 수 없어요.

[sptrf (Sparkcyf)]

안녕하세요, 애플리케이션이 영문 이외의 문자(예: 중국어 문자)가 포함된 게시물을 로드할 때 문제가 발생하고 있는 것 같습니다. 이는 Discourse의 유니코드 사용자 이름 기능(Unicode usernames and group names)과 관련이 있을 것으로 추측하며, 상세한 오류 로그를 GitHub 저장소에 이슈로 등록했습니다:

Got exception while the username and content of the post are encoded with Chinese or other non-English characters

[Alex_Jupiter]

좋네요! 자동화된 콘텐츠 관리 솔루션을 이미 도입하셨나요? 일부 포럼에서 자주 보이는 악용과 스팸을 줄이고 싶어요.

[abhinavshukla]

Lexicon에 제시된 튜토리얼을 따라 Lexicon 모바일 앱을 설정해 보았습니다. 모든 단계를 완료하고 무료 discourse 인스턴스(https://meta.discourse.org/)를 위한 모바일 앱을 실행한 결과, 휴대폰과 터미널 로그에 각각 다음과 같은 오류가 발생했습니다.

터미널 오류:

다음 파일 중 어느 것도 존재하지 않습니다:

\generated\server\globalTypes(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.svg|.native.svg|.svg)

src\generated\server\globalTypes\index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.svg|.native.svg|.svg)
 5 | import { DEFAULT_CHANNEL } from '../constants';
  6 | import { Text } from '../core-ui';
>  7 | import { TopicsSortEnum } from '../generated/server/globalTypes';
    |                                 ^
   8 | import {
  9 |   anchorToMarkdown,
  10 |   errorHandler,

[abhinavshukla]

프로젝트를 설정한 후 다음 오류가 반복적으로 발생하고 있습니다:

**http://**를 MOBILE_HOST_PRONE에 지정했지만, 휴대폰에서 앱을 실행할 때 여전히 오류가 표시됩니다.

[abhinavshukla]

또 다른 오류는 다음과 같습니다:
애플리케이션을 시작할 수 없음: no-registered-application.