HackerNoon Mobile: 개발자의 관점과 World Wide Writer 릴리스 [버전 1.9]

HackerNoon 모바일 앱 ( 에서 사용 가능하며 현재 승인을 너무 오랫동안 기다리고 있음)은 전체 HackerNoon 라이브러리에 대한 액세스를 높이기 위한 목적으로 2023년 4분기에 출시되었습니다. 모바일 앱은 앱의 주요 동기 중 하나이므로 독자층을 촉진합니다. 웹에서 수행하는 거의 모든 작업은 개인화된 경험을 제공하고 언제 어디서나 앱의 주요 기능을 즐길 수 있기 때문에 모바일에서는 더 간단합니다. 오늘 출시되는 릴리스 1.9는 역대 최대 규모의 개선 사항으로, 특히 12개 언어를 사용할 수 있고 앱 내 쓰기 경험이 포함되어 있습니다. 월드와이드 작가님을 응원합니다!

주요 특징:

1. 읽기 - 10만 개 이상의 스토리 전체 HackerNoon 라이브러리를 사용할 수 있습니다.
2. 오디오 플레이어 재생 목록 - 기사를 듣고 좋아하는 이야기로 재생 목록을 만드세요.
3. 쓰기(신규!) - 스토리를 작성하고 인간 편집자에게 제출하는 기능입니다.
4. 설문조사 및 댓글 - 최신 기술 동향에 투표하고 토론합니다.

모바일 앱에서는 오늘의 트렌드 스토리가 포함된 TechBeat 페이지 , 좋아하는 주제별로 선별된 기사가 포함된 큐레이션 페이지, 주제별로 기사를 선별하는 카테고리 / 태그 페이지 등의 페이지도 볼 수 있습니다. 이번 1.9 릴리스에서는 곧 앱에 번역 과 글쓰기가 추가되어 계속해서 개선되고 있습니다.

개발자 입장에서는 모바일 앱이 절실히 필요했습니다. 이는 출시 전 거의 모든 HackerNoon 제품 회의에서 언급되었습니다. 어떤 이유로 많은 대화가 다음과 같은 결과로 이어졌습니다.

xy 또는 z를 수행할 수 있는 모바일 앱이 있으면 좋을 것입니다.

개발자 이자 도전을 좋아하는 사람으로서 저는 항상 모바일 앱을 구축하는 것이 왜 그렇게 어려운지 자문했습니다. 그러고 보니 답은 생각보다 간단했다.

어떻게 일이?

알고 보니 몇 년 전에 Ionic Framework를 접하고 그것이 흥미롭다고 생각했지만 실제로 테스트할 코드를 작성한 적이 없었습니다. 그 당시 프레임워크는 Angular에서만 작동했는데, 이는 제가 React 개발자에 더 가깝다는 점을 고려하여 시도해 보기로 한 결정에 영향을 미쳤을 것입니다. 그 당시에는 Ionic이 그다지 인기가 없었으며 하이브리드 애플리케이션을 만들겠다는 아이디어도 많은 사람들의 마음에 맞지 않았습니다. 어쨌든, 한번은 제품 회의에서 그들이 모바일 앱에 대해 이야기하고 있었고 저는 Ionic을 다시 살펴보기로 결정했고 그들이 프레임워크를 Vue 및 React로 확장했는데, 둘 중 하나는 정말 편안합니다.

제가 가장 먼저 한 일은 프레임워크를 설치하고 빠른 Android 앱을 만드는 것이었습니다. 과정이 얼마나 쉽고 이해하기 쉬운지에 깊은 인상을 받았습니다. 몇 가지 구성 요소만 삭제하고 모바일 앱을 만드는 것은 상상하기 힘든 일이지만, Ionic을 사용하면 몇 가지 명령만 실행하고 iOS 및 Android를 포함한 여러 플랫폼에서 앱을 빌드하는 것이 가능해졌습니다. 나는 프레임워크에 대해 정말 편안함을 느꼈고 그 순간 도전에 임했다는 사실이 조금 새로웠습니다. 첫 번째 HackerNoon 모바일 앱을 만드는 새로운 프로젝트를 보게 되면서 우연의 일치가 생겼습니다. 재빠르게 픽업해서 작업을 시작했습니다.

과정

처음에는 Linux 컴퓨터에 Ionic을 설치하고 새로운 앱을 만들고 해당 문서 중 일부를 조사했습니다. 다음 마법 명령을 실행하여 개발을 시작했습니다. npm install -g @ionic/cli ionic start // ionic Serve 만들기 // 로컬에서 실행 실행한 후 HackerNoon 웹 버전의 구성 요소를 이 새 프로젝트로 옮기기 시작했습니다. 몇 시간 안에 몇 페이지를 만들었습니다. HackerNoon 디자이너( @Devans & @Kien )는 모든 요소에 잘 어울리고 앱에 좋은 본질과 모양을 부여하는 데 정말 훌륭한 일을 해냈습니다. Ionic이 Typescript를 사용한다는 점을 제외하면 대부분은 React에서 개발하는 것과 동일한 방식으로 개발되었습니다. 내 Linux 컴퓨터는 Android 기반 앱의 거의 50%를 개발하는 좋은 출발점이었지만 iOS 버전을 테스트하는 데 어려움을 겪었습니다. Linux에는 가상 머신에 Mac OS를 설치하고 XCode를 설치한 다음 IOS에서 앱을 테스트하는 방법이 있었지만 지연과 속도 저하를 처리할 수 없었습니다. 앱의 진행 상황에 대해 확신이 생기자 결국 iOS용 개발을 시작하기 위해 MacBook Pro를 업그레이드하기로 결정했습니다. 비록 제가 여전히 Linux를 좋아하지만 모든 플랫폼에 대한 개발의 중요성을 여러 수준에서 보여 주었기 때문에 지금까지는 좋은 결정이었습니다. 그래서 새로운 MacBook Pro로 이 앱을 작업하는 것은 정말 놀라운 일이었습니다.

과제

이는 극복해야 할 과제로 가득 찬 학습 경험이었습니다. 가장 간단한 버그라도 알아내는 데 몇 시간이 걸렸습니다. 다행스럽게도 다음에는 이런 일이 일어나지 않도록 막힐 때마다 기록해 두었습니다. 이 프로젝트의 수석 개발자로서 저는 앱의 인프라 측면에서 몇 가지 어려운 선택을 해야 했고, 전체 API를 구축하는 동시에 Ionic을 배우고 익숙해져야 했습니다. 주요 과제는 다음과 같습니다.

1. 디버깅/테스트: 모든 개발자는 모든 수준의 애플리케이션을 개발할 때 테스트가 얼마나 중요한지 알고 있습니다. 모바일 앱을 개발하면서 처음에는 웹 개발을 시작했습니다. 사실 모바일에서 테스트하려면 매번 배포해야 한다고 생각했어요. Ionic이 모바일이 아닌 로컬에서 테스트하는 방법이 있다는 사실을 몰랐기 때문에 약간의 시간을 보냈습니다. 따라서 대부분의 경우 내 CSS 또는 일부 이벤트 핸들러는 동일한 구현이 아니기 때문에 중단됩니다. 모바일에서 로컬로 테스트한 후 프로세스가 더 유동적이기 때문입니다.
2. 알림 : 처음 모바일 앱 작업을 시작했을 때 알림에 사용할 수 있는 두 가지 흥미로운 플러그인, 즉 로컬 알림과 푸시 알림을 보았습니다. 로컬 알림은 백엔드 서버와 상호작용하지 않고 앱에서 로컬로 관리되는 알림입니다. 자동으로 로컬 알림이 선택을 구현하는 것이 옳고 빠르다고 생각했기 때문에 꽤 쉽게 구현했습니다. 그러나 그것은 우리가 찾던 것이 아니었습니다. 푸시 알림이 좋은 방법이었지만 구현하기가 조금 더 어려웠고 추가 설정과 백엔드 서버가 필요했습니다. 좀 더 보내고 싶을 수도 있지만 매일 정오 산장 시간에 하나의 알림을 보내 간단하게 유지합니다. 모바일 앱이 있고 알림을 수락한 경우 오늘의 HackerNoon 주요 뉴스에 대한 이러한 유형의 알림을 받아야 합니다.
3. 재생 목록/플레이어 : 앱의 주요 기능 중 하나입니다. 빌드하는 것은 즐거웠지만 기능이 너무 많아서 디버그하는 것은 고통스러웠습니다. 모든 버튼이 예상대로 작동하는지 확인하는 것은 테스트할 때 시간이 많이 걸리는 일이었습니다. 모바일에서 작동하기 위해 여러 오디오 플러그인을 시도하면서 스토리 오디오 플레이어를 구축하는 것이 이상했습니다. 제가 직면한 주요 문제는 플레이어를 제작했지만 오디오가 재생되지 않거나 오디오 품질이 정말 나빴다는 것입니다. 오디오가 개발 모드에서는 작동하지만 프로덕션 모드에서는 작동하지 않는 경우도 있습니다. 실제로 작동한 것은 기본 오디오 API였습니다. 그 후에는 간단했습니다. 소스 URL을 전달하고 작업 버튼을 추가하기만 하면 됩니다. 재생 목록을 만들기 위해 데이터베이스에 스토리를 저장하기만 하면 되기 때문에 재생 목록은 그다지 어렵지 않았습니다. 재생 목록 순서 지정, 음성 변경, 순서 변경, 전체 스토리 그룹을 재생 목록에 추가하는 기능과 같은 기능은 구현하기가 정말 멋졌습니다. 어쩌면 미래에는 다른 사람들이 무엇을 듣고 있는지 볼 수 있는 공개 재생목록을 갖게 될 수도 있습니다. 현재 내 재생목록은 다음과 같습니다.
4. Ionic 업데이트 vs iOS 업데이트 vs Xcode 업데이트: 정말 멋진 버전이 100% 작동하는데 꽝 작동하지 않거나, 로드되지 않거나, 로그가 안 나올 때 이것이 가장 실망스러운 부분이라고 생각합니다. in. 입력 양식이 Ionic에서 작동했지만 Ionic 버전을 업그레이드했는데 입력 이벤트가 작동하지 않아 오류가 백엔드에 있다고 생각하게 된 것을 기억합니다. 또는 앱을 테스트한 후 휴대폰을 업데이트했는데 해당 기능이 Apple에서 더 이상 지원되지 않았기 때문에 더 이상 Safari에서 로그를 볼 수 없다는 것을 깨달았습니다. 또는 새 버전의 앱을 빌드하려고 시도했지만 xcode가 업데이트되고 내 코드에서 무언가를 변경해야 했기 때문에 실패했습니다. 정말 실망스럽고 시간이 많이 걸리는 순간이었습니다. 적어도 개발 중에만 그런 일이 일어났습니다 👍.
5. Android의 Google 로그인: 이는 앱의 버그 중 하나였으며 Android 사용자는 문자 그대로 Google 방법을 사용하여 로그인할 수 없었습니다. 이것은 프로덕션에서 발생했기 때문에 미친 버그였습니다. 정말 간단하지만 모바일 개발에 있어서는 학습 과정의 일부이기도 했습니다. Google 로그인에는 두 가지 유형의 키가 필요한 것으로 나타났습니다. 하나는 Firebase에 설정된 개발 키이고 다른 하나는 Firebase에 설정해야 하는 프로덕션 키입니다. 여기서 문제는 Google Play 스토어가 실제로 개발 키를 대체해야 하는 프로덕션 키를 생성한다는 것입니다. 나는 그것을 알 방법이 없었고 문제가 무엇인지 알아내려고 몇 시간을 소비했습니다. 키를 교체하기만 하면 문제를 해결할 수 있다는 사실을 깨닫고 문제를 해결하는 데 30초도 채 걸리지 않았습니다.
6. 쓰기: ...정말 롤러코스터 같았어요. 가장 큰 문제는 모바일과 아이오닉에서 작동하는 검색과 편집기였습니다. 저는 약 20개의 다른 편집기를 사용해 보았지만 대부분 웹에서는 완벽하게 작업했지만 모바일에서는 실패했습니다. 일부는 키보드를 로드하지 않았고 일부는 누르는 것과 다른 문자를 썼으며 일부는 설치되지 않았습니다. 마침내 작동하는 것을 찾았을 때 입력하는 동안 저녁 식사가 너무 느려서 정말 지루했습니다. 감사하게도 다른 에디터 QuillJS(!) 에서 시도해 보았는데 예상보다 잘 작동하는 것 같습니다. 실제로 제가 이 이야기를 쓰는 데 사용하고 있는 편집기가 바로 그 사람입니다. 이 기능은 기본적으로 사용자가 모바일 앱에 글을 쓸 수 있도록 하고 싶었기 때문에 새로운 업데이트가 출시되는 것을 방지했습니다.

내가 좋아했던 것?

전체 개발 과정이 너무 멋졌기 때문에 다른 개발자에게도 시도해 보시길 권합니다. 앱을 많이 사용할수록 앱에 익숙해지고 개발 과정에 더 익숙해졌습니다. 내 휴대폰에서 앱을 보고 모든 페이지를 탐색하는 것은 정말 만족스러웠습니다. 나에게 가장 인상적인 기능은 HackerNoon의 유기적인 기능이자 앱의 주요 기능 중 하나인 재생 목록/플레이어였습니다. 푸시 알림은 아마도 완전히 새로운 기능이었기 때문에 가장 많이 배웠던 기능이었으며 모바일 알림이 어떻게 작동하는지 알게 되었고 이러한 지식은 향후 다른 기능에도 확실히 적용될 수 있습니다.

아직 앱이 없다면 앱을 다운로드 하고 댓글로 의견을 공유해주세요⬇️. ✌️

Apple 버전은 다음과 같습니다.

안드로이드 버전은 다음과 같습니다.