paint-brush
The HackerNoon Mobile: Góc nhìn của nhà phát triển và bản phát hành của nhà văn trên toàn thế giới [Phiên bản 1.9]từ tác giả@fabian337
649 lượt đọc
649 lượt đọc

The HackerNoon Mobile: Góc nhìn của nhà phát triển và bản phát hành của nhà văn trên toàn thế giới [Phiên bản 1.9]

từ tác giả Marcos Fabian8m2024/02/15
Read on Terminal Reader
Read this story w/o Javascript

dài quá đọc không nổi

Giải thích về cách ứng dụng di động được tạo ra và một số quyết định đưa ra trong quy trình.
featured image - The HackerNoon Mobile: Góc nhìn của nhà phát triển và bản phát hành của nhà văn trên toàn thế giới [Phiên bản 1.9]
Marcos Fabian HackerNoon profile picture

Ứng dụng HackerNoon Mobile (có sẵn trên Apple và đang chờ sự chấp thuận của Google quá lâu) được phát hành vào quý 4 năm 2023 với mục đích tăng quyền truy cập vào toàn bộ thư viện HackerNoon. Ứng dụng di động tạo điều kiện thuận lợi cho người đọc vì đây là một trong những động cơ chính của ứng dụng. Hầu hết mọi thứ chúng tôi thực hiện trên web đều đơn giản hơn trên thiết bị di động vì nó mang lại trải nghiệm được cá nhân hóa và bạn có thể tận hưởng tính năng chính của ứng dụng từ mọi nơi, mọi lúc. Bản phát hành 1.9, ra mắt ngay hôm nay, là cải tiến lớn nhất của chúng tôi, đáng chú ý nhất là với 12 ngôn ngữ có sẵn và trải nghiệm viết trong ứng dụng của chúng tôi. Chúc mừng nhà văn trên toàn thế giới!


Những đặc điểm chính:

  1. Đọc - toàn bộ thư viện HackerNoon hơn 100 nghìn câu chuyện đều có sẵn.
  2. Danh sách phát Trình phát Âm thanh- nghe các bài viết và tạo danh sách phát với những câu chuyện yêu thích của bạn.
  3. Viết (MỚI!) - khả năng viết và gửi truyện cho người biên tập.
  4. Thăm dò ý kiến - bỏ phiếu và thảo luận về các xu hướng công nghệ mới nhất.


Trên ứng dụng dành cho thiết bị di động, bạn cũng có thể xem các trang như trang TechBeat với các câu chuyện thịnh hành trong ngày, trang Quản lý với các bài viết được sắp xếp theo chủ đề bạn thích, các trang danh mục / được gắn thẻ cũng sắp xếp các bài viết theo chủ đề, v.v. Với bản phát hành 1.9 này, chúng tôi hiện đã sớm thêm bản dịchvăn bản trên ứng dụng để ứng dụng ngày càng hoàn thiện hơn.


Từ góc độ nhà phát triển, ứng dụng di động rất cần thiết. Nó đã được đề cập đến trong hầu hết các cuộc họp sản phẩm của HackerNoon trước khi phát hành. Vì lý do nào đó, nhiều cuộc trò chuyện đã dẫn đến:

Sẽ thật tốt nếu chúng ta có một ứng dụng di động để thực hiện xy hoặc z.

Là một nhà phát triển và là người yêu thích thử thách, tôi luôn tự hỏi tại sao việc xây dựng một ứng dụng di động lại khó đến vậy. Thực tế thì câu trả lời đơn giản hơn tôi nghĩ.

Nó xảy ra như thế nào?

Hóa ra tôi đã biết đến Ionic Framework vài năm trước và nghĩ rằng nó rất thú vị nhưng chưa bao giờ thực sự viết bất kỳ mã nào để kiểm tra nó. Vào thời điểm đó, khung này chỉ hoạt động với Angular, điều này có thể ảnh hưởng đến quyết định dùng thử nó của tôi, vì tôi là một nhà phát triển React nhiều hơn. Vào thời điểm đó, Ionic chưa phổ biến và ý tưởng tạo ra một ứng dụng lai không phù hợp với suy nghĩ của nhiều người. Dù sao đi nữa, có một lần, trong một cuộc họp về sản phẩm, họ đang nói về ứng dụng di động và tôi quyết định xem lại Ionic và đoán xem, họ đã mở rộng khuôn khổ của mình sang Vue và React, hoặc tôi thực sự cảm thấy thoải mái với nó.


Điều đầu tiên tôi làm là cài đặt khung và tạo một ứng dụng Android nhanh chóng. Tôi rất ấn tượng bởi quá trình này dễ dàng và dễ hiểu. Có thể chỉ cần bỏ một vài thành phần và có một ứng dụng di động thật điên rồ, nhưng Ionic đã làm cho nó có thể chỉ chạy một số lệnh và xây dựng ứng dụng trên nhiều nền tảng bao gồm iOS và Android. Tôi cảm thấy thực sự thoải mái với khuôn khổ này và vào thời điểm đó, tôi cảm thấy mới mẻ rằng mình đã sẵn sàng đối mặt với thử thách. Sự trùng hợp xảy ra sau đó khi tôi thấy một dự án mới về việc tạo ứng dụng di động HackerNoon đầu tiên. Tôi nhanh chóng nhặt nó lên và bắt đầu làm việc với nó.

Quá trình

Lần đầu tiên tôi bắt đầu bằng cách cài đặt Ionic vào máy Linux của mình, tạo một ứng dụng hoàn toàn mới và nghiên cứu một số tài liệu của họ. Chạy các lệnh ma thuật này để bắt đầu phát triển: npm install -g @ionic/cli ionic start // create ionic Serve // run local Sau khi chơi với nó, tôi bắt đầu chuyển các thành phần từ phiên bản web HackerNoon sang dự án mới này. Trong vòng vài giờ tôi đã tạo được một vài trang. Các nhà thiết kế của HackerNoon ( @Devans & @Kien ) thực sự đã làm rất tốt việc kết hợp mọi thứ và mang lại cho ứng dụng một bản chất và giao diện đẹp. Hầu hết nó được phát triển giống như cách bạn phát triển trong React, ngoại trừ Ionic sử dụng Typescript, tốt cho chúng. Máy linux của tôi là điểm khởi đầu tốt khi tôi đã phát triển gần 50% ứng dụng dựa trên Android nhưng gặp khó khăn khi thử nghiệm phiên bản iOS. Có một giải pháp với Linux là cài đặt Mac OS trên máy ảo, sau đó cài đặt XCode, rồi thử nghiệm ứng dụng trên iOS, nhưng sau đó tôi không thể giải quyết được tình trạng lag và chậm. Khi đã tự tin với tiến trình của ứng dụng, tôi đã đưa ra quyết định nâng cấp MacBook Pro của mình để bắt đầu phát triển cho iOS. Cho đến nay, đó là một quyết định đúng đắn vì nó cho tôi thấy ở nhiều cấp độ tầm quan trọng của việc phát triển cho tất cả các nền tảng, mặc dù tôi vẫn yêu thích Linux. Vì vậy, làm việc trên ứng dụng này với MacBook Pro mới của tôi thực sự đã mở mang tầm mắt.

Những thách thức

Đây là một trải nghiệm học tập đầy thử thách cần phải vượt qua. Ngay cả lỗi đơn giản nhất cũng phải mất hàng giờ để tìm ra. Rất vui là tôi đã ghi lại mỗi lần tôi gặp khó khăn để điều đó không xảy ra vào lần tiếp theo. Là nhà phát triển chính của dự án này, tôi đã phải đưa ra một số lựa chọn khó khăn về cơ sở hạ tầng của ứng dụng, xây dựng toàn bộ api, đồng thời tìm hiểu Ionic và làm quen với nó. Dưới đây là một số thách thức chính:


  1. Gỡ lỗi/kiểm tra: tất cả các nhà phát triển đều biết kiểm tra quan trọng như thế nào khi phát triển ứng dụng ở mọi cấp độ. Khi làm việc trên ứng dụng di động, lần đầu tiên tôi bắt đầu phát triển trên web. Tôi thực sự nghĩ rằng tôi phải triển khai mọi lúc để thử nghiệm trên thiết bị di động. Tôi đã dành rất nhiều thời gian chỉ vì tôi không biết rằng Ionic có cách thử nghiệm trên thiết bị di động nhưng ở địa phương. Vì vậy, hầu hết thời gian, css của tôi hoặc một số trình xử lý sự kiện sẽ bị hỏng do cách triển khai không giống nhau. Sau khi thử nghiệm trên thiết bị di động cục bộ, quá trình này diễn ra suôn sẻ hơn.
  2. Thông báo : Khi tôi mới bắt đầu làm việc trên ứng dụng dành cho thiết bị di động, tôi thấy hai plugin thú vị mà tôi có thể sử dụng cho các thông báo là Thông báo cục bộ và Thông báo đẩy. Thông báo cục bộ là các thông báo được quản lý cục bộ trên ứng dụng mà không cần tương tác với máy chủ phụ trợ. Tôi tự động nghĩ rằng thông báo cục bộ là lựa chọn phù hợp và nhanh hơn để triển khai, vì vậy tôi đã triển khai nó khá dễ dàng. Tuy nhiên, đó không phải là những gì chúng tôi đang tìm kiếm. Thông báo đẩy là cách tốt nhất nhưng khó thực hiện hơn một chút và cần thiết lập thêm cũng như máy chủ phụ trợ. Chúng tôi thực hiện đơn giản bằng cách chỉ gửi một thông báo vào buổi trưa trên núi mỗi ngày, mặc dù chúng tôi có thể muốn gửi nhiều hơn một chút. Nếu bạn có ứng dụng dành cho thiết bị di động và đã chấp nhận thông báo, bạn sẽ nhận được loại thông báo này về câu chuyện hàng đầu trong ngày của HackerNoon.
  3. Danh sách phát/trình phát : Đây là một trong những tính năng chính của ứng dụng. Thật vui khi xây dựng nhưng thật khó để gỡ lỗi đơn giản vì nó có nhiều chức năng. Việc đảm bảo mọi nút đều thực hiện đúng nhiệm vụ của nó khá tốn thời gian khi thử nghiệm. Thật kỳ lạ khi xây dựng trình phát âm thanh câu chuyện vì tôi đã thử nhiều plugin âm thanh để hoạt động trên thiết bị di động. Vấn đề chính tôi gặp phải là tôi xây dựng trình phát nhưng âm thanh không phát hoặc chất lượng âm thanh rất tệ. Đôi khi âm thanh sẽ hoạt động ở chế độ phát triển nhưng không hoạt động ở chế độ sản xuất. Những gì thực sự hoạt động là api Audio gốc. Sau đó rất đơn giản, chỉ cần chuyển url nguồn và thêm các nút hành động. Danh sách phát ít thách thức hơn vì tất cả những gì bạn cần là lưu các câu chuyện trên cơ sở dữ liệu để tạo danh sách phát. Các chức năng như sắp xếp danh sách phát theo thứ tự, thay đổi giọng nói, sắp xếp lại thứ tự và khả năng thêm toàn bộ nhóm câu chuyện vào danh sách phát của bạn thực sự rất thú vị khi triển khai. Có thể trong tương lai chúng ta sẽ có các danh sách phát công khai, nơi bạn có thể xem những gì người khác đang nghe, tất nhiên là có mối quan tâm của họ. Danh sách phát của tôi hiện tại trông như thế này:
  4. Cập nhật Ionic so với cập nhật iOS và cập nhật Xcode: Tôi nghĩ đây là phần khó chịu nhất, khi bạn có một phiên bản thực sự tốt hoạt động 100% và sau đó, nó không hoạt động, hoặc không tải hoặc không đăng nhập Tôi nhớ các biểu mẫu đầu vào hoạt động trên Ionic nhưng sau đó các phiên bản Ionic được nâng cấp và các sự kiện đầu vào không hoạt động, do đó khiến tôi nghĩ rằng lỗi nằm ở phần phụ trợ. Hoặc thử nghiệm ứng dụng để rồi nhận ra rằng tôi không thể xem nhật ký trên safari nữa vì tôi đã cập nhật điện thoại của mình và tính năng đó không còn được Apple hỗ trợ nữa. Hoặc cố gắng xây dựng một phiên bản mới của ứng dụng nhưng không thành công vì xcode đã cập nhật và cần phải thay đổi một số thứ trên mã của tôi. Đó thực sự là những khoảnh khắc khó chịu và tốn thời gian. Ít nhất nó chỉ xảy ra khi đang phát triển 👍.
  5. Đăng nhập Google trên Android: Đây là một trong những lỗi của ứng dụng, người dùng Android thực sự không thể đăng nhập bằng phương pháp google. Đây là một lỗi điên rồ vì nó đã xảy ra trong quá trình sản xuất. Mặc dù nó thực sự đơn giản nhưng nó cũng là một phần của quá trình học tập khi phát triển thiết bị di động. Hóa ra có hai loại khóa cần thiết để đăng nhập vào google, một loại dành cho quá trình phát triển được thiết lập trên firebase và một loại khác dành cho sản xuất cũng cần được thiết lập trong firebase. Vấn đề ở đây là cửa hàng Google Play thực sự tạo ra khóa sản xuất cần thay thế khóa phát triển. Không có cách nào để tôi biết được điều đó và dẫn đến việc tôi phải mất hàng giờ để tìm ra vấn đề là gì. Chỉ mất chưa đến 30 giây để khắc phục khi tôi nhận ra tất cả những gì cần thiết là thay chìa khóa.
  6. Viết: … đây thực sự là một chuyến tàu lượn siêu tốc. Vấn đề chính chỉ là tìm và biên tập có thể hoạt động trên thiết bị di động và Ionic. Tôi đã thử khoảng 20 trình chỉnh sửa khác nhau và hầu hết đều không thành công trên thiết bị di động trong khi vẫn hoạt động hoàn hảo trên web. Một số không tải được bàn phím, một số viết các chữ cái khác với những chữ cái được nhấn và một số không thể cài đặt được. Cuối cùng khi tôi tìm được một cái hoạt động được thì lúc gõ phím rất lag nên thực sự rất tẻ nhạt. Thật may mắn, tôi đã thử dùng nó với một biên tập viên khác, QuillJS(!), và nó có vẻ hoạt động tốt hơn mong đợi. Đó thực sự là trình soạn thảo tôi đang sử dụng để viết câu chuyện này. Về cơ bản, tính năng này ngăn không cho phát hành các bản cập nhật mới vì chúng tôi thực sự muốn cho phép người dùng viết trên ứng dụng di động.

Những gì tôi thích?

Toàn bộ quá trình phát triển rất tuyệt vời và tôi chắc chắn khuyên các nhà phát triển khác hãy thử sức. Càng làm việc với ứng dụng, tôi càng quen với nó và cảm thấy thoải mái hơn với quá trình phát triển. Tôi thực sự hài lòng khi thấy ứng dụng này trên điện thoại của mình và điều hướng qua tất cả các trang. Tính năng ấn tượng nhất đối với tôi là danh sách phát/trình phát do HackerNoon tự nhiên cung cấp và là một trong những tính năng chính của ứng dụng. Thông báo đẩy là tính năng mà tôi có lẽ đã học được nhiều nhất vì đây là một tính năng hoàn toàn mới và tôi đã biết cách hoạt động của thông báo trên thiết bị di động và kiến thức đó chắc chắn có thể được áp dụng trong tương lai cho các tính năng khác.


Nếu bạn chưa có, vui lòng tải xuống ứng dụng và chia sẻ suy nghĩ của bạn trong phần bình luận ⬇️. ✌️

Đây là phiên bản Apple:


Đây là phiên bản Android: