8 Weeks의 Cross-Platform App을 제작하는 방법 : 실제 사례 연구
수십 년 동안 앱을 구축했습니다. 아무것도 꽉 마감일보다 속도에 대해 더 많은 것을 가르쳤다.
물류 시작은 우리에게 왔습니다. 운전자와 파견자를 위한 크로스 플랫폼 앱이 필요합니다. 마감일? 8 주. 예외는 없습니다.
우리는 하루에 56 배달했습니다. 우리가 어떻게 했는지 정확히 알고 있습니다.
공지사항
클라이언트, B2B 물류 회사는 모바일 앱이 없습니다. 그들의 드라이버는 종이 로그 및 전화 통화를 사용. Dispatchers juggled 스프레드 시트.
그들은 원했습니다:
- 파견자를 위한 실시간 추적
- 드라이버의 작업 할당
- Photo 의 배송
- 농촌 지역을위한 오프라인 모드
플랫폼: iOS 및 Android. 단일 codebase. 2개월 미만
왜 크로스 플랫폼? 우리는 그것을 얻을 것이다.
왜 크로스 플랫폼?
기본 앱으로 간주됩니다. 두 개의 별도의 팀. 두 개의 코드베이스. 14–16주 최소.
Cross-platform은 우리에게 하나의 코드베이스를주었습니다. 우리는 두 플랫폼에서 코드의 85 %를 재사용했습니다. 그것은 진짜 번호에서React Native의 문서— 기업 보고서 60-90 % 코드 재사용.
| 제품 설명 | 네이티브 (iOS + Android) | 크로스플랫폼(React Native) |
|---|---|---|
| 개발 시간 | 14–16주 | 8 주 |
| 코드 재사용 | 0% | 85% |
| 팀 크기 | 6 개발자 | 4 개발자 |
| 초기 비용 | $120,000–$160,000 | $80,000–$100,000 |
| - 연혁 | 제품정보 | ~95 %의 기본 (실제 시험) |
| - 연혁 | 두 개의 코드베이스 | 1개의 codebase |
무역 떨어져? 고급 카메라 필터와 같은 일부 기본 기능은 더 긴 시간을 구축했다. 그러나 물류 앱의 경우, 크로스 플랫폼은 완벽하게 작동했습니다.
에 따르면Statista 설문 조사, 개발자의 38%는 Cross-platform 프로젝트를 위해 React Native를 사용합니다. 그것은 가장 인기있는 프레임 워크입니다.
우리의 기술 더미
우리는 질 희생 없이 발달을 sped 공구를 선택합니다.
- 관련 기사: React Native로
- 관련 상품: 제품정보- 초기 설정에서 2 주 저장
- 이름 *: 비밀번호- 인증, 소방서, 클라우드 기능
- CI/CD: GitHub 작업 + Azure DevOps의테스트
- 오류 추적: 회사 소개
- 웹 사이트: 진폭
왜 Flutter에 React Native가? 클라이언트는 기존 JavaScript 개발자가 있었습니다. Dart를 배울 필요가 없습니다.
엑스포는 몇 분 안에 기기에서 앱을 실행합니다. Xcode 또는 Android Studio를 설정하지 않았습니다.
8-Week 타임 라인
매주 사정. 정확한 일정입니다.
주 1: 재단&프로토타입
- Expo 프로젝트를 설정
- 설치 expo-location, expo-camera, expo-file-system
- 내비게이션 구조 설계 (bottom 탭 + 스택)
- Figma의 clickable 프로토 타입 생성
- 클라이언트는 금요일에 의해 흐름을 승인
주 2 : 인증&사용자 역할
- 이메일/password로 Firebase Auth
- 2개의 역할: 운전사, 파견자
- 데이터 액세스를 제한하는 Firestore 규칙
- iOS 시뮬레이터 및 Android 에뮬레이터 모두 테스트
주 3 : 실시간 작업위원회
- Firestore 청취자 작업 업데이트
- FlatList 와 pull-to-refresh
- 작업 상태: 보류, 허용, in-transit, 완료
- 드라이버는 인근 작업 만 볼 수 있습니다 (geolocation filter)
주 4 : 오프라인 모드
- 이름 *
redux-persist의 장점+@react-native-async-storage/async-storage - 자주 묻는 질문
- Sync queue: 온라인 뒤로 전송된 업데이트
- 비행기 모드로 테스트 — work
Week 5: 사진 업로드&이름 *
익스플로러카메라 / 갤러리- 이미지 클라이언트 측을 압축하십시오<200KB
- Firebase 스토리지
- 납품 증거를 위한 창조된 동적인 모양
주 6: Dispatcher 대시보드
- 검색 및 필터가있는 웹 같은 테이블보기
- 실시간 맵 표시 드라이버 위치
- 드라이버 성능 메트릭 (on-time Delivery Rate)
- 이름 *
react-native-maps에 대해서지도에
주 7 : 테스트&관련 링크
- Jest (80% 적용)를 가진 단위 시험
- E2E는 Detox와 테스트합니다.
- 모든 빌드에 대한 Sentry 오류 추적
- 10개의 진짜 운전사를 가진 사용자 합격 테스트
주 8 : 폴란드어&계정 만들기
- 성능 최적화 (레이지 로딩 이미지, 렌더링 감소)
- 앱 스토어 스크린 샷 및 설명
- 제출하기Apple 앱 스토어·Google Play 스토어
- 2 일 안에 찬성되는 둘 다
개발공정
우리는 2 주 인쇄를 ran. Slack을 통해 매일 standups. 의견 반복 매 3 일.
회사 소개 모든 pull request 트리거 GitHub Actions 워크플로우: lint, test, build with Expo, 그 후 Expo Go를 사용하여 테스트 장치에 업로드.
긴 배치 주기 없음. 장치에서 테스트 할 커밋에서 : 약 10 분.
테스트 및 QA
우리는 가능한 모든 것을 자동화했습니다.
- 단위 테스트: Jest + React Native Testing Library
- E2E: 중요한 교류를 위한 해독 (로그인, 일 합격, 사진 올려주기)
- 수동 테스트 : iOS용 TestFlight, Android용 내부 트랙
- 오류 추적 : 시작 전에 12 버그를 기록
하나의 실제 예: 갤러리에서 이미지를 선택할 때 Android에서 충돌. Sentry는 우리에게 정확한 줄 번호를주었습니다. 2 시간에서 고정.
배포 및 실행
제품정보eas 구조제작된 생산은 간단합니다.
우리는 단계 롤아웃을 사용 : 사용자의 1 % 첫날, 10 % 두 번째 날, 100 % 하루에 세.
주요 문제 없음. iOS 17의 한 알림 권한 버그 - 한 시간 내에 핫픽스를 밀어.
결과 및 미터
앱은 일주일에 8 갔다.
- 드라이버: 첫 달에 150 활성
- 채용공고: 월 3,200
- 사진 업로드: 2,800
- Crash-free 비율: 99.6% (특허)
- App Store 등급: 4.7 별
- Dispatcher 만족: 92% (내부 조사)
클라이언트는 두 개의 네이티브 앱을 구축하기에 비해 $40,000을 절약했습니다. 그게 다야팟캐스트연구 견적 - 교차 플랫폼은 30 ~ 50 %의 비용을 절감합니다.
학습 방법
- 엑스포로 시작그것은 설치에 2 주를 저장했습니다. 만약 엑스포에서 네이티브 모듈이 필요하면 나중에 거부할 수 있습니다.
- 계획 오프라인 모드 일찍.우리는 주 4에 그것을 추가했습니다. 주 7까지 기다리면 마감일을 놓았습니다.
- 매일 실제 기기에서 테스트합니다.시뮬레이터는 버그를 놓습니다. 우리는 매일 Expo Go에 빌드를 밀어.
- 더 이상 엔지니어하지 마십시오.우리는 Firebase와 Firestore를 사용했습니다. 사용자 정의 백엔드 없음. 그것은 40%로 발달 시간을 삭감했습니다.
- 클라이언트 의견 매 3 일.rework를 방지하십시오. 우리는 짧은 비디오 데모를 보냈습니다 — 쓰지 않는 specs.
최종 사고
8 주 크로스 플랫폼 앱이 가능합니다. 올바른 도구, 견고한 타임 라인 및 일정 통신이 필요합니다.
React Native, Expo, Firebase 및 GitHub 동작을 사용했습니다. 각 선택 저장된 시간.
비즈니스를 위한 크로스 플랫폼 앱을 고려한다면, 명확한 타임라인을 시작하세요. 특징 주름을 피하십시오. 당신이 알고있는 프레임 워크를 사용합니다.
우리는 물류, 소매 및 의료 분야에서 수행했습니다. 각 프로젝트는 새로운 것을 가르쳤다.
같은 방법을 배송
우리가 이것을 검사하는 방법 (9월 2026): 우리는 9월 2026년에 타임 라인, 더미 및 연결을 재 검사했습니다; 인용된 그림은 이 포스트에서 명시된 케이스 study 측정입니다.
8 주 시스템은 운이 없습니다. 이 가이드는 그것의 부속을 덮습니다:
- Next.js SEO: SSG 대 ISR 대— 앱 마케팅 페이지에 대한 웹 사이드 렌더링 호출
- Next.js 핵심 웹 Vitals 최적화— 당신의 발사 필요를 일치하는 속도
- RAG 챗봇 구현- 배송 한 번 인앱 답변 추가
자주 묻는 질문
1. 8 주 안에 크로스 플랫폼 앱을 구축 할 수 있습니까?
예, 앱이 온건한 복잡성을 가지고 있다면. 우리의 타임라인은 5~8개의 스크린, 최소 네이티브 기능 및 표준 백엔드를 가진 앱을 위해 작동합니다. 복잡한 애니메이션 또는 하드웨어 통합을 위해 2 ~ 3 주를 추가하십시오.
2. 어떤 프레임 워크는 크로스 플랫폼 개발을 위해 빠릅니다: React Native 또는 Flutter?
React Native는 JavaScript/TypeScript를 알고 있다면 더 빠릅니다. Flutter는 Dart 학습을 요구합니다. 우리의 경험에서 React Native with Expo는 초기 설정에서 1 ~ 2 주를 절약합니다. 성능 크리티컬 앱(e.g., Graphics-heavy)의 경우 Flutter는 더 좋을 수 있습니다.
3. 크로스 플랫폼 앱에서 오프라인 모드를 어떻게 처리합니까?
제품정보redux-persist의 장점로컬로 Redux 상태를 캐시합니다. 작업 및 사용자 데이터는 AsyncStorage에 저장됩니다. 장치가 오프라인으로 이동할 때 앱은 캐시 된 데이터를 읽습니다. 온라인 후, 동기화 queue 푸시 업데이트.
4. 네이티브 및 크로스 플랫폼 개발 간의 전형적인 비용 차이는 무엇입니까?
에 따르면팟캐스트연구, 크로스 플랫폼은 30 ~ 50 %의 개발 비용을 줄일 수 있습니다. 우리의 고객을 위해, 저축은 $40,000이었습니다. 정비는 또한 당신이 1개의 codebase를 새롭게 하기 때문에 더 싼 입니다.
5. 앱이 iOS 및 Android 모두에서 잘 보이나요?
React Native의 일관된 구성 요소를 사용하고 필요한 경우 플랫폼 별 스타일링을 방지합니다. 매일 두 기기에 테스트합니다. Expo의 유니버설 빌드는 두 플랫폼에서 동일한 코드 실행을 보장합니다.
Cross-Platform 앱 패스너 구축
마감일이 있습니다. 우리는 과정이 있습니다.
으로DG10 대리점, 우리는 cross-platform 앱 개발을 전문화합니다. 우리는 입증 된 8 주 타임 라인을 따릅니다. React Native, Expo, Firebase 및 자동화된 CI/CD를 사용합니다.
더 많은 정보 지연 없음. 두 상점에서 작업 응용 프로그램.
오늘 저희에게 연락하십시오프로젝트 시작 우리는 48 시간 안에 당신의 주문 타임 라인을 지도할 것입니다.