사용자:Senouis/리버티게임 안드로이드 애플리케이션

• 상위 문서로

이 문서는 리버티게임 공식 모바일 앱에 대해 다룬다. 일단 iOS는 앱 스토어 수수료 문제로 인해 장기 계획으로 두고, 안드로이드 버전을 먼저 출시한다.

주어진 시간이 많지 않으므로 리버티게임 내 개발자 풀 구축이 가능한 Visual Studio Code + 타입스크립트에 React Native를 얹어 개발하거나 모바일 앱 개발 속도 하나는 정말 빠른 Delphi 11 Community Edition으로 개발할 예정

단, 필요 인원은 5인 이하로 한정할 예정(위 두 IDE의 사용 조건임)

• Why?
  • 풍부한 라이브러리를 가진 통일된 컴파일 언어로 바이너리를 만들면서 두 모바일 플랫폼에 동시 대응해야 함
    • 추가로, UI/UX 디자인이 하나의 언어로 쉬워야 함
  • Java/Kotlin은 거의 안드로이드 앱 개발에 최적화되어 논외, Objective-C와 Swift도 마찬가지로 iOS만 가능
  • 유니티/고도 엔진 3 같은 게임 엔진으로 앱을 만드는 방법도 고민하였으나, 웹 페이지 렌더링을 바닥부터 짜야 하기에 긴 개발 기간과 많은 인력이 필요
  • PHP는 당연히 안 됨
  • C/C++은 메모리 관리 신경쓰는 부분이 있어, 그 시간에 다른 언어로 메모리 관리 걱정 없이 프로그램 설계에 노력을 더 투하하는 것이 나음(틀:Xash3D가 현재 무의미한 또 하나의 중요한 이유)
• 남는 것은 Typescript로 만든 앱, 그리고 Delphi 기반 앱
  • Typescript는 React Native만 쓸 수 있으면 인력도 구하기 쉬워 최우선 대상이 됨
    • 기존 커먼자스 / 소도구 스크립트 연계 능력은 최고이며, 연계가 가능한프로젝트들이 있어 가장 선호되는 옵션임
    • WebView 추가 라이브러리를 사용하여 웹페이지를 Embed
  • 다만, React Native를 따로 배워야 하며 당장 쓰지 못한다면, Delphi 관련 자료를 만든 적이 있기에 스터디를 Delphi로 진행한다는 전제 하에 Delphi도 선택지에 넣었음
    • 아래 구현 사항은 Delphi 개발 기준으로 서술했으며, 생각 외로 리소스 편집기나 자료구조 등 미리 준비된 것이 많음
    • 다만 IDE가 영어로 되어 있으며 한국어 언어 팩이 없는 것이 감점 요소

편집 테스트는 리버티게임:연습장, 모듈:연습장 페이지에서 시행할 예정.

왜 필요한가?

미디어위키 엔진은 전통적으로 모바일 웹 브라우징에서 상당히 약한 모습을 보이는데, 적합한 스킨도 많지 않고(사이드바 기능도 없는 쓰레기 같은 미네르바 노이에가 기본값이다), CodeEditor가 오히려 편리한 데스크탑 환경과 달리 터치스크린 제스처가 기본인 모바일 환경은 타이핑이 어렵다는 점과 겹쳐 스마트폰으로 리버티게임에 게임을 만드는 기여를 어렵게 하고 있다.

무엇이 필요한가?

• 크게 화면 상단의 문서 뷰어, 문서 편집 창, 보호(후순위 구현), 이동(후순위 구현), 팝업 메뉴로 나뉜다.
• 앱 시작 시 리버티게임:대문을 기본적으로 보여준다.

뷰어 창

중앙의 화면과 아래의 문서 명이 적힌 텍스트 입력 상자가 존재

방법 1: 직접 앱에서 렌더링(비권장)

• action=parse로 미디어위키 API를 호출하면 mw-parser-output 클래스의 div태그로 감싸진 HTML Element들이 반환된다. -> 이것을 사용하는 래퍼를 델파이 웹페이지뷰어 프레임워크 컴포넌트 사용해서 렌더링
• CSS는 미디어위키:Common.css를 먼저 앱 내에 별도의 파일로 넣어두고, 추후에 가젯별 CSS을 앱에 포함하면서, 사용자 CSS 로드 기능을 추가할 필요가 있다.
  • 리버티게임 앱을 시작할 때 CSS 파일을 업데이트하는 기능?
• 커먼자스와 가젯 스크립트는 JS 파일을 action=raw로 가져와 보여진 HTML 페이지에 추가로 실행
  • 사용자가 어떤 가젯을 사용하는지 알 필요가 있음

방법 2: 웹페이지를 그대로 보여주되, 편집 버튼만 숨기기(권장)

• TWebBrowser 컴포넌트 사용(Delphi) or React-Native-Webview 라이브러리 사용(React Native)
• 문서명은 URL을 적절하게 처리(URL 디코딩 및 공백 문자 변환하여 substring으로 자르기)하여 표시
• 편집 기능 사용방법은 두 가지 구현법이 있음
  • 웹 페이지에서 'ca-edit' id의 엘레먼트(편집 버튼)에서 display CSS 속성을 none으로 설정하고 별도의 편집 버튼을 앱 안에 구현(비권장): FMX의 TwebBrowser에서 불가능하므로 웹에서 사전에 자바스크립트 등으로 앱 접속을 감지하는 방법으로 세팅
  • Delphi: 컴포넌트의 OnShouldStartLoadWithRequest 이벤트에서 ?action=edit를 감지해 페이지 이동을 후킹하는 방법을 사용(권장): 이 경우 문단 정보도 감지해 action=raw에 같이 보내도록 파싱 필요
  • React-Native: 여기를 참조

편집 창

• 편집 창을 열면 action=raw로 미디어위키 API를 호출하고 파싱하여 편집 창에 렌더링 + 유저가 편집 가능한지 확인(편집 불가일 경우 편집 창을 열지 않고 대신 action=raw의 결과만 보여줌)
• 제스처 기반 문서 작성: 타이핑을 별도의 창으로 분리하고, 기본적으로 HTML Element 별로 편집하여 터치스크린 제스처로 문서 내 디스플레이 위치를 조정하게 하는 방법이 필요하다 -> 모바일용 Microsoft OneNote에 가까운 편집 창 형태가 되어야 한다.

  • VisualEditor로도 텍스트의 화면 내 위치 지정은 불가능하므로, CSS 속성 지정(position:relative; + left 값 설정(기본 0%) + inline-size 값 설정(기본 100%) + overflow-wrap:break-word;)이 된 p 태그가 필요하다. 지금 이 설명문이 어떻게 보이는지 참조하라.

  • 데스크탑용 문법 삽입 상자와 다른 모바일 전용 문법 삽입 창이 필요하다: 해당 기능은 특정 미디어위키 확장 기능에 의존하므로, 확장 기능의 동작을 앱에서도 구현할 필요가 있다.
• 저장 버튼을 누르면 먼저 편집 요약을 적도록 하고, 다시 저장 버튼을 누르면 mw:API:Edit 전송하고 성공 응답을 받은 경우에 편집 창을 닫음
  • 편집 충돌의 경우를 감안하라.
• 추가로 구현이 필요한 확장 기능
  • 리버티게임:특수 함수: 기본값 및 파라미터 삽입용 텍스트 상자 추가 기능이 필요
  • Scribunto 확장 기능이 부여하는 invoke 파서

보호/이동(후순위 구현)

• 보호 창의 경우 먼저 권한 확인 후 권한이 없으면(일반 사용자 이하) 팝업 창을 띄우며 닫고, 그렇지 않은 경우 드롭다운 메뉴들이 포함된 창
  • 편집 방어와 이동 기능만 드롭다운으로 설정 가능하게 한 다음, mw:API:Protect 명세에 따라 요청을 보냄
• 이동은 사유와 세부 옵션 세팅을 보호 창과 같은 방식으로 보여주고, mw:API:Move 명세에 따라 요청을 보냄
• 요청 성공 시 창을 닫고, 요청 실패 시 팝업 메뉴로 안내

앱 팝업 메뉴: 로그인/로그아웃 버튼과 설정

• 로그인 안 된 상태에서 로그인 버튼을 누르면 ID/비밀번호 입력 칸 및 로그인 버튼이 있음
• 미디어위키가 지원하는 OAuth 활용해 로그인: 리버티게임 계정과 앱을 연결
  • 2단계 인증 지원 필요: 본인 계정으로 테스트
• 설정 창은 별도의 레이어 위에 보여줌
  • 앱 버전 표시, 글자 크기, 임시 저장 데이터 비우기, CSS 업데이트

그 외

• 자동 저장 기능은 거의 필수다. 문서 별로 JSON 포맷의 임시 저장 파일을 만들자.
  • 파일명은 'TempEdit/(문서명).json' 혹은 'TempEdit/(문서명).(문단 제목).json'이 될 것이다.
  • 최초 로드 시 JSON에 있는 데이터가 렌더링되어 모바일 편집기에 나타난다. 편집 탭의 저장 버튼을 누르면 JSON이 삭제된다.
  • 임시 저장 비우기 기능이 설정에 있어야 한다.