Xây dựng ứng dụng Charlotte Light Rail

Charlotte Light Rail tại Ga Đông / Tây

Đây là câu chuyện của Ứng dụng Charlotte Light Rail. Làm thế nào và tại sao, chúng tôi xây dựng nó.

Tại sao?

Chúng tôi là đội Luna. Chúng tôi yêu Charlotte. Chúng tôi muốn làm cho nó tốt hơn. Vì vậy, chúng tôi đã thực hiện ứng dụng miễn phí này. Nó có thể giúp bạn và cộng đồng truy cập vào thành phố trên Light Rail.

Chúng tôi hy vọng ứng dụng này truyền cảm hứng cho nhiều người hơn sử dụng Light Rail, để họ có thể tận hưởng thành phố, nhiều như chúng tôi. South End và Uptown có rất nhiều thứ để cung cấp. Thêm vào đó, Light Rail đang mở rộng thông qua NoDa, vào Khu vực trường đại học.

Vấn đề

Làm thế nào để tôi đi xe lửa nhẹ? Nơi mà trạm gần nhất? Khi tàu tiếp theo sắp tới? Khi tàu của chuyến tàu cuối cùng? Nó có giá bao nhiêu? Đây là những câu hỏi kinh điển cho người dân địa phương và du khách.

Vâng, có một ứng dụng cho điều đó!

Dung dịch

Ứng dụng Charlotte Light Rail cung cấp một cách tập trung vào bản đồ để xem vị trí của bạn, ga gần nhất, khi chuyến tàu tiếp theo đến, lịch trình đầy đủ và trả lời các câu hỏi nhanh như: Giá bao nhiêu?

Làm sao? - Công cụ của chúng tôi

Chúng tôi đã xây dựng ứng dụng trong React Native, một công nghệ tuyệt vời của Facebook. React Native cho phép chúng tôi kết nối kiến ​​thức hiện có của mình về React, một thư viện Javascript, để tạo ra một ứng dụng di động, bản địa, hợp pháp. Đây là một trải nghiệm học tập thú vị cho Team Luna, vì chúng tôi đã phát triển web. Bây giờ chúng tôi cũng là nhà phát triển di động.

Giống như bất kỳ dự án phần mềm nào, chúng tôi đã sử dụng rất nhiều công cụ khác, như Mapbox, Xcode, Cocoapods, CodePush và Firebase Analytics. Chúng tôi đã sử dụng Trello, Slack, xuất hiện.in, Phác thảo, Invision và GitHub để được tổ chức.

Quá trình

Quá trình của chúng tôi để xây dựng ứng dụng đã lặp đi lặp lại. Chúng tôi đã nghiên cứu, vẽ các khái niệm và bắt đầu phát triển sớm. Trello đã tổ chức các nhiệm vụ của chúng tôi. Chúng tôi đã kết hợp công việc không đồng bộ với hackathons trực tiếp. Vâng! Rất nhiều pizza, khoai tây chiên, bia, và rượu vang tốt. Chúng tôi đã nói chuyện trong Slack. Chúng tôi đã có các cuộc trò chuyện video xuất hiện. Chúng tôi đã đẩy mã lên GitHub.

Hội đồng quản trị Trello giữ nhiệm vụ Team Luna

Khái niệm và khung lưới

Sau khi xác định danh sách các tính năng chính của chúng tôi, chúng tôi đã nhảy vào vẽ các khái niệm của chúng tôi bằng bút chì và giấy. Chúng tôi sử dụng phương pháp 3 lần. Cũng được gọi là điên crazy Eights. Lấy một tờ giấy. Gấp trong nửa 3 lần. Điều đó làm 8 phần. Vẽ một giao diện ứng dụng trong mỗi phần có kích thước điện thoại thông minh.

Phác thảo ứng dụng ban đầu bằng phương pháp gấp 3 tờ giấy

Phiên bản 0.1

Sau khi chúng tôi có một khái niệm vững chắc, chúng tôi bắt đầu phát triển. Phiên bản làm việc đầu tiên của chúng tôi sử dụng các thành phần React Native tiêu chuẩn với kiểu dáng vani đơn giản. Chúng tôi đã phát triển độc lập với thiết kế, biết rằng sự tương tác và hình ảnh sẽ đến sau, sau khi người dùng thử nghiệm.

Phiên bản ứng dụng 0.1 trong vanilla React Native thành phần

Phiên bản 0.2

Chúng tôi nhanh chóng gặp vấn đề đầu tiên với Phiên bản 0.1. Chúng tôi đã sử dụng Apple Maps để hiển thị các lát bản đồ và API Google Khoảng cách để tính toán khoảng cách và thời gian. Điều đó không được phép theo bản in tốt của Google. Vì vậy, chúng tôi đã chuyển sang MapBox cho cả lát xếp bản đồ và API khoảng cách.

MapBox tích hợp tốt với React Native. Nó cung cấp sự linh hoạt phát triển hơn và nhiều lệnh gọi API hơn trong tầng miễn phí, nơi chúng tôi hy vọng sẽ duy trì. Ứng dụng Charlotte Light Rail miễn phí. Chúng tôi sẽ giữ nó theo cách đó cho Charlotte, bằng cách giữ chi phí vận hành thấp.

Phiên bản 0,3

Chúng tôi cố tình trì hoãn thiết kế độ trung thực cao. Nhiều người trong số các bạn có thể nghĩ rằng chúng tôi điên rồ và lạc hậu. Chúng tôi đã làm điều này trên mục đích. Chúng tôi đã có một nhà thiết kế trên Team Luna khi chúng tôi bắt đầu phát triển. Và chúng tôi đã không thử nghiệm người dùng trên các khung lưới ban đầu của chúng tôi. Chúng tôi biết thiết kế sẽ phát triển với thông tin phản hồi. Tuy nhiên, cuối cùng chúng tôi đã thực hiện những mockup độ trung thực cao đầy màu sắc hơn.

Mockup độ trung thực cao

Áp dụng những phong cách thêm niềm say mê cho sự phát triển của chúng tôi. Nó vui hơn khi phát triển một ứng dụng hấp dẫn, hơn là kết hợp các thành phần React Native đơn giản của vanilla. Các ứng dụng đã đi vào cuộc sống!

Phản hồi của người dùng

Chúng tôi đã hiển thị ứng dụng cho bạn bè để phản hồi. Tính năng khiến người dùng bối rối nhất là thao tác vuốt nửa vòng tròn đầy đủ. Đầu tiên, nó không rõ ràng. Thứ hai, nó chồng lấp Trung tâm điều khiển vuốt dưới cùng của iOS. Đó là khả năng sử dụng kém. Vì vậy, chúng tôi đã thực hiện các chế độ quét trên mạng để xem lịch trình vào một nút đồng hồ.

Thiết kế sau khi người dùng kiểm tra và phản hồi

Nộp hồ sơ

Tất nhiên, ứng dụng đã trải qua nhiều lần lặp lại trước khi gửi. Nhưng 4 tháng, 500 giờ, 12 hackathon, 8 phiên xuất hiện, 450 lần cam kết, 95 yêu cầu kéo và 16 chi nhánh sau đó chúng tôi đã gửi cho Apple! Trình là một buổi tối thú vị. Một điều mà tất cả chúng ta đều nhớ.

Tin nhắn chờ đợi để xem lại

Phiên bản 1.0 - Phát hành

Đệ trình đầu tiên của chúng tôi đã được Apple chấp thuận, trong 1 ngày. Chúng tôi đã dành rất nhiều thời gian để làm theo Nguyên tắc Giao diện Con người và tránh các sự cố từ chối ứng dụng phổ biến.

Ứng dụng Charlotte Light Rail - Phiên bản 1.0 được phê duyệt!

Bây giờ thì sao

Đối với bạn, tải xuống Ứng dụng Charlotte Light Rail. Đi tham quan thành phố. Ghé thăm South End. Du lịch Uptown. Dễ dàng đến các trạm Light Rail.

Biểu tượng ứng dụng Charlotte Light Rail

Đối với Team Luna, chúng tôi sẽ duy trì ứng dụng, truyền bá và khuyến khích mọi người đi xe lửa. Charlotte có rất nhiều thứ để cung cấp. Đây là một phần của chúng tôi để giúp những người khác tận hưởng thành phố.

Đội Luna

Tại Team Luna, chúng tôi đã cam kết xây dựng các ứng dụng hữu ích, học tập suốt đời, vận động cho các nhà phát triển và thúc đẩy cộng đồng công nghệ địa phương ở Charlotte. Chúng tôi đến với nhau trong các cuộc họp mặt địa phương. Hãy theo dõi chúng tôi tại ReactJs, CharlotteJs, Docker, Python, Django, Skookum Tech Talks và Nightshift.