React Native Academy · Oppitunti

Viimeistely, testaus ja julkaisu molemmissa kaupoissa

Kirjoittakaa yksikkötestit keskeisille hookeille, lisätkää Maestro E2E -prosessi kriittiselle polulle, optimoikaa paketti, luokaa kauppamateriaalit ja lähettäkää sovellus sekä App Storeen että Google Playhin.

Oppitunti 4/413 vaihetta

Viimeistely, testaus ja julkaisu molemmissa kaupoissa on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu React Native Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Native Academy-kurssilla on yhteensä 4 oppituntia.

Viimeinen vaihe: viimeistely, testaus ja julkaisu

Jokaisen sovellusprojektin viimeinen vaihe vaatii eniten kurinalaisuutta: käyttäjien todella huomaamien yksityiskohtien viimeistelyä, regressiot ennen tuotantoon pääsyä havaitsevien testien kirjoittamista sekä molempien kauppojen lähetysprosessin toteuttamista. Jokainen näistä vaikuttaa nopealta, mutta vie yhtä paljon aikaa kuin ominaisuuksien toteuttaminenkin – varaa aikaa sen mukaisesti. Hyvin viimeistelty sovellus, jolla on kattavat testit, voidaan julkaista luottavaisin mielin.

Käyttöliittymän viimeistely: yhdenmukaiset välit ja typografia

Viimeistely alkaa suunnittelutokeneista – yhdestä totuuden lähteestä väleille, fonttikokoille, fonttipainoille, kulmien pyöristyksille ja väreille. Määritä ne theme.ts-tiedostossa ja tuo ne kaikkialle sen sijaan, että kovakoodaisit esimerkiksi padding: 16 -arvon eri puolille näkymiä. Yhdenmukaisuus saa sovelluksen tuntumaan laadukkaalta: kun kaikilla painikkeilla on sama korkeus, kaikissa otsikoissa käytetään samaa fonttia ja kaikilla korteilla on sama varjo, käyttöliittymä tuntuu harkitulta.

// src/theme.ts
export const theme = {
  colors: {
    primary: '#007AFF',
    background: '#F2F2F7',
    surface: '#FFFFFF',
    text: '#000000',
    textSecondary: '#8E8E93',
    error: '#FF3B30',
    success: '#34C759',
  },
  spacing: {
    xs: 4, sm: 8, md: 16, lg: 24, xl: 32
  },
  typography: {
    largeTitle: { fontSize: 34, fontWeight: '700' },
    title: { fontSize: 22, fontWeight: '600' },
    body: { fontSize: 17, fontWeight: '400' },
    caption: { fontSize: 12, fontWeight: '400' },
  },
  borderRadius: { sm: 8, md: 12, lg: 16, full: 999 },
};

Saavutettavuuden tarkistus

Saavutettavuus on sekä lakisääteinen vaatimus että laadun mittari. Tarkista sovelluksesta seuraavat asiat: kaikkien kuvakepainikkeiden saavutettavuusnimikkeet (accessibilityLabel), iOS:n vähintään 44×44 pt:n ja Androidin 48×48 dp:n kosketuskohteiden vähimmäiskoot, oikeat saavutettavuusroolit (accessibilityRole='button' napautettaville kohteille) sekä värikontrasti (leipätekstille vähintään 4.5:1). Testaa ruudunlukijan toiminta iOS:n Accessibility Inspectorilla tai Androidin TalkBackilla.

// Accessible icon button
<TouchableOpacity
  onPress={handleDelete}
  accessibilityLabel='Delete habit'
  accessibilityRole='button'
  accessibilityHint='Permanently removes this habit and its history'
  style={{ padding: 12 }}  // Ensures 44pt touch target with 20pt icon
>
  <Ionicons name='trash-outline' size={20} color='#FF3B30' />
</TouchableOpacity>

// Screen reader text for images
<Image
  source={{ uri: habit.icon }}
  accessibilityLabel={`${habit.name} habit icon`}
  accessible={true}
/>

Yksikkötestien kirjoittaminen keskeisille hookeille

Testaa yksikkötesteillä käyttöliittymästä riippumaton liiketoimintalogiikka – laskennat, mockatuilla kyselyillä toimivat hookit ja apufunktiot. Putken laskenta on tähän erinomainen kohde: testaa reunatapaukset, kuten tyhjä taulukko, yksi päivä, keskellä oleva aukko ja tilanne, jossa tätä päivää ei ole suoritettu. Käytä @testing-library/react-native-kirjastoa ja renderHook-funktiota Reactin tilaa ja efektejä käyttävien mukautettujen hookien testaamiseen.

// src/utils/__tests__/streaks.test.ts
import { calculateStreak } from '../streaks';

describe('calculateStreak', () => {
  it('returns 0 for empty completions', () => {
    expect(calculateStreak([])).toBe(0);
  });

  it('returns 1 when only today is completed', () => {
    const today = new Date().toISOString().split('T')[0];
    expect(calculateStreak([today])).toBe(1);
  });

  it('returns correct streak for consecutive days', () => {
    const dates = ['2026-06-21', '2026-06-20', '2026-06-19'];
    // Mock today as 2026-06-21 in tests
    expect(calculateStreak(dates)).toBe(3);
  });

  it('stops at a gap', () => {
    // Today=21, gap at 20, then 19
    const dates = ['2026-06-21', '2026-06-19'];
    expect(calculateStreak(dates)).toBe(1);
  });
});

Komponenttitestit React Native Testing Librarylla

Kirjoita komponenttitestit eniten käytetyille käyttöliittymäelementeille: HabitCard-komponentille, joka hahmontaa tavan nimen ja putken, CheckInButton-komponentille, joka vaihtaa tilaa painettaessa, sekä OfflineBanner-komponentille, joka näkyy vain offline-tilassa. Mockaa riippuvuudet (Supabase, React Query) testirajalla, jotta komponentit testataan erillään ilman todellisia verkkokutsuja.

// src/components/__tests__/HabitCard.test.tsx
import { render, fireEvent } from '@testing-library/react-native';
import { HabitCard } from '../HabitCard';

const mockHabit = {
  id: '1', name: 'Morning Run', icon: 'run',
  color: '#007AFF', streak: 5
};

it('renders habit name and streak', () => {
  const { getByText } = render(<HabitCard habit={mockHabit} onPress={() => {}} />);
  expect(getByText('Morning Run')).toBeTruthy();
  expect(getByText('5 days')).toBeTruthy();
});

it('calls onPress when tapped', () => {
  const onPress = jest.fn();
  const { getByTestId } = render(
    <HabitCard habit={mockHabit} onPress={onPress} testID='habit-card' />
  );
  fireEvent.press(getByTestId('habit-card'));
  expect(onPress).toHaveBeenCalledTimes(1);
});

Maestro E2E: kriittisen käyttäjäpolun testi

Kirjoita Maestrolle kulku kriittistä käyttäjäpolkua varten: kirjaudu sisään, luo tapa, kuittaa se, varmista putken päivittyminen ja kirjaudu ulos. Tämä havaitsee integraatiovirheitä, joita yksikkötestit eivät löydä – navigointitila, verkkokutsut ja käyttöliittymän tila toimivat kaikki yhdessä. Suorita kulku oikeaa simulaattoria tai laitetta vastaan jokaisessa CI-koontiversiossa ennen sen siirtämistä seuraavalle testikanavalle.

# maestro/critical-path.yaml
---
appId: com.yourcompany.habittracker
---
- launchApp:
    clearState: true
- tapOn: 'Sign In'
- inputText: 'test@example.com'
- tapOn: 'Password'
- inputText: 'TestPass123!'
- tapOn: 'Sign In'
- waitForAnimationToEnd
- assertVisible: 'My Habits'
- tapOn: 'Add Habit'
- inputText: 'Morning Run'
- tapOn: 'Save'
- waitForAnimationToEnd
- assertVisible: 'Morning Run'
- tapOn:
    id: 'check-in-btn-1'
- waitForAnimationToEnd
- assertVisible: '1 day'  # Streak shows 1 day
- tapOn: 'Settings'
- tapOn: 'Sign Out'
- assertVisible: 'Sign In'

Pakettikoon optimointi

Analysoi ja pienennä JavaScript-paketti ennen lähettämistä. Tunnista suuret riippuvuudet react-native-bundle-visualizer-työkalulla. Yleisiä säästökohteita ovat moment.js-kirjaston (280 kt) korvaaminen date-fns-kirjastolla (puunravisteltava, noin 5 kt tuontia kohden), käyttämättömien kuvakepakettien poistaminen (tuo vain käyttämäsi kuvakkeet) sekä laiska lataus (React.lazy + Suspense) raskaille näkymille, kuten asetuksille tai perehdytykselle, joissa käyttäjät käyvät harvoin ensimmäisen käynnistyksen jälkeen.

# Analyze bundle
npx react-native-bundle-visualizer

# Opens a visual treemap in browser showing:
# - node_modules breakdown by size
# - Your source code size
# - Duplicate modules

# Common large packages to replace:
# moment (280KB) -> date-fns tree-shaking
# lodash (full, 70KB) -> lodash-es specific imports
# FontAwesome all icons -> import only used icons

# Result: each 100KB reduction = ~50KB gzip reduction
# = faster first install + lower Play/App Store size

Kauppamateriaalien luominen

Luo vaaditut kauppamateriaalit ennen lähettämistä: sovelluskuvake (iOS:lle 1024×1024, Androidille mukautuva kuvake), aloitusruutu (kaikki kokovariantit Expon splash-asetusten kautta), kuvakaappaukset (vähintään 3–6 jokaista vaadittua laitekokoa kohden) ja esittelygrafiikka (Androidille 1024×500). Käytä Figma-kaltaista suunnittelutyökalua ja laitekehyslisäosia ammattimaisten kuvakaappausten luomiseen ilman markkinointisuunnittelijaa.

// app.json — icon and splash configuration
{
  'expo': {
    'icon': './assets/icon.png',        // 1024x1024 PNG
    'splash': {
      'image': './assets/splash.png',
      'resizeMode': 'contain',
      'backgroundColor': '#007AFF'
    },
    'ios': {
      'icon': './assets/icon.png'
    },
    'android': {
      'icon': './assets/icon.png',
      'adaptiveIcon': {
        'foregroundImage': './assets/adaptive-icon.png',
        'backgroundColor': '#007AFF'
      }
    }
  }
}

Lopullinen tuotantokoontiversio

Käynnistä tuotannon EAS-koontiversiot molemmille alustoille. Varmista ennen koontia, että versionumero ja version code ovat oikein – niiden muuttaminen jälkikäteen edellyttää uutta koontiversiota. Suorita molemmat koonnit rinnakkain ajan säästämiseksi. Kun molemmat ovat valmiit, lataa ne TestFlightiin ja Play Consolen sisäiseen testaukseen ja tee vielä yksi savutesti täsmälleen samalla tuotantobinaarilla ennen tarkistettavaksi lähettämistä.

# Verify versions before building
cat app.json | grep '"version"'
# -> "version": "1.0.0"
# -> "versionCode": 1
# -> "buildNumber": "1"

# Build both platforms in parallel
eas build --platform ios --profile production &
eas build --platform android --profile production &
wait

# Or use the combined command:
eas build --platform all --profile production

# After builds complete, check status:
eas build:list --status finished --limit 2

Tuotantokoontiversion savutestaus

Asenna täsmälleen sama tuotantobinaari oikealle laitteelle ennen sen lähettämistä tarkistettavaksi. Lataa iOS:n .ipa TestFlightiin ja Androidin .aab Play Consolen sisäiseen testaukseen. Testaa alusta asti rekisteröityminen, keskeinen ominaisuus, push-ilmoitukset ja ostosprosessi (jos sovellettavissa) – älä koskaan oleta, että kehitysversion toiminta vastaa tuotantokoontiversiota. Tuotantokoontiversioissa on erilaiset allekirjoitus-, pienennys- ja ProGuard-asetukset, jotka voivat paljastaa kehityksessä näkymättömiä virheitä.

// Pre-submission smoke test checklist:

// Install production build on physical device
// (not simulator — push notifications require real device)

// Test:
// [ ] Fresh install and sign up flow
// [ ] Sign out and sign in with existing account
// [ ] Core feature: create, complete, view streak
// [ ] Push notification: schedule and receive
// [ ] Background behavior: close and reopen app
// [ ] Deep links from browser/email
// [ ] Offline: airplane mode then restore network
// [ ] Landscape orientation (if not locked)
// [ ] All tabs and major screens load without crash
// [ ] Performance: no jank on FlatList scroll

Lähettäminen molempiin kauppoihin

Lähetä sovellus molempiin kauppoihin samanaikaisesti, jotta tarkistusaikataulut pysyvät samassa tahdissa ja voit julkaista molemmilla alustoilla samana päivänä. Käytä molemmissa eas submit -komentoa. App Storen tarkistus kestää yleensä 1–3 päivää; Google Playssa ensimmäisen sovelluksen tarkistus kestää 1–7 päivää (päivitykset käsitellään nopeammin). Pidä markkinointimateriaalit valmiina (sovelluksen verkkosivusto, somejulkaisut ja lehdistöpaketti), jotta voit ilmoittaa julkaisusta heti, kun molemmat kaupat ovat hyväksyneet sovelluksen. Seuraa molempien kauppojen tarkistusnäkymiä päivittäin tarkistusjakson aikana.

# Submit to App Store (TestFlight first, then App Review)
eas submit --platform ios --latest

# Submit to Play Console (internal -> production)
eas submit --platform android --latest

# Or submit both at once:
eas submit --platform all --latest

# After submission:
# iOS: App Store Connect > App > 1.0 Prepare for Submission
#      > Add for Review > Submit to App Review
# Android: Play Console > Production > Create release
#           > Promote internal build > Review > Start rollout

Pikatesti

Testaa tämän oppitunnin React Native Mobile Development -käsitteiden ymmärtämistä.

Oppitunnin kertaus

Tässä oppitunnissa opit: tarkistamaan ja viimeistelemään sovelluksen suunnittelutokeneilla, saavutettavuusnimikkeillä ja kosketuskohteiden vähimmäiskoilla, kirjoittamaan yksikkötestejä putkilogiikalle ja komponenttitestejä RNTL:llä sekä kirjoittamaan Maestrolle kriittisen käyttäjäpolun E2E-kulun ja lähettämään sovelluksen sekä App Storeen että Play Storeen. Onneksi olkoon – olet suorittanut React Native Mobile Development -opintopolun! Sinulla on nyt taidot rakentaa, testata ja julkaista tuotantolaatuisia React Native -sovelluksia molemmille alustoille.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit
30
Oppitunnit
120

Usein kysytyt kysymykset

Onko oppitunti ”Viimeistely, testaus ja julkaisu molemmissa kaupoissa” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “Viimeistely, testaus ja julkaisu molemmissa kaupoissa”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. React Native Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Viimeistely, testaus ja julkaisu molemmissa kaupoissa”?

Kirjoittakaa yksikkötestit keskeisille hookeille, lisätkää Maestro E2E -prosessi kriittiselle polulle, optimoikaa paketti, luokaa kauppamateriaalit ja lähettäkää sovellus sekä App Storeen että Google… Harjoittelet React Native Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Native Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Native Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Viimeistely, testaus ja julkaisu molemmissa kaupoissa”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Native Academy-oppitunnilla?

Kyllä. Jokainen React Native Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

  1. Arkkitehtuurin ja teknologiapinon suunnittelu
  2. Todennusprosessi ja suojatut reitit
  3. Ydintoiminto: tietosyöte offline-tuella
  4. Viimeistely, testaus ja julkaisu molemmissa kaupoissa
← Takaisin: React Native Academy