Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

App Clips ger ett snabbt sätt att komma åt specifika funktioner i en iOS-app utan att ladda ner allt. De gör det möjligt för användare att enkelt uppleva och dra nytta av en app, vilket kan uppmuntra dem att ladda ner hela appen.

Hur appklipp skiljer sig från traditionella appar

Den huvudsakliga skillnaden mellan en App Clip och en traditionell app ligger i deras nivå av funktionalitet och funktioner. Appklipp ger snabb åtkomst till en specifik funktion i en app. Designade för att lätt kunna upptäckas och lanseras, App Clips ger användarna den nödvändiga funktionaliteten för att slutföra en uppgift.

När uppgiften är klar avinstalleras klippet automatiskt efter en period av inaktivitet.

Appklipp lanseras vanligtvis från webbplatser, NFC-taggar, skanning av QR-koder och mer.

Å andra sidan måste traditionella appar laddas ner fullständigt och installeras på en användares enhet före användning. De är vanligtvis mer omfattande och ger hela utbudet av funktioner och användarupplevelse. Traditionella appar hanterar mer frekventa användningsfall, som deras utveckling bör ta hänsyn till.

instagram viewer

Designa ett effektivt appklipp med React Native

Eftersom App Clips är en iOS-plattformsfunktion måste du arbeta med iOS-projektet i en React Native-app.

Det finns inget etablerat sätt att bygga ett iOS-appklipp med hjälp av React Native. Det finns dock några faktorer att ta hänsyn till i ekvationen som hjälper dig att bygga ett effektivt och funktionellt appklipp.

Storleken på appklippet

En stor stötesten du kommer att möta är att hålla storleken på din appklipp under den 10 megabyte som krävs.

Ett appklipp och dess motsvarande fullständiga app kommer att dela vissa kärnfunktioner. Till exempel kan båda apparna kunna skicka aviseringar och göra API-anrop. Du bör dock utelämna alla onödiga funktioner, beroende på appklippets mål.

Denna begränsade funktionalitet innebär att App Clip kommer att ha en mindre uppsättning inbyggda beroenden som krävs för att fungera.

Eftersom App Clips ger en fokuserad, lätt upplevelse, bör du vara tydlig om de inbyggda beroenden som definieras för App Clip. Du kommer att definiera dessa beroenden i iOS Podfile innan du installerar Pods manuellt.

Funktionell UI-design för appklippet

Appklipp byggs vanligtvis identiskt med hela appupplevelsen. Att bestämma hur ditt App Clip bäst kan spegla hela appen samtidigt som du förblir fokuserad på sin uppgift och är lätt är något att överväga. Ta Shazams appklipp och hela appen:

2 bilder

Deras designarkitektur är i huvudsak densamma, liksom vissa grundläggande funktioner. Din App Clips design bör fokusera på funktionalitet och praktisk. Bygg den för att fungera smidigt och bara visa information för användaren när det är absolut nödvändigt.

Kodens struktur

Du kan dra fördel av de delade likheterna mellan ett appklipp och hela appen när du planerar strukturen för din kod.

Att dela kod mellan de två målapparna skulle vara idealiskt för underhåll. Genom att dela en gemensam kodbas kan du också minska antalet externa bibliotek och beroenden som läggs till i projektet.

Den delade kodbasen kan vara en uppsättning JavaScript-filer som innehåller appens affärslogik. Du kan sedan konfigurera ditt Xcode-projekt för att använda denna kodbas genom att lägga till den delade kodbasen som ett beroende.

Du bör se till att båda versionerna av din app inkluderar eventuell delad kod. Använd ett verktyg som Metro Bundler för React Native-appen och Xcodes byggfassystem för App Clip.

Kom igång Skapa appklippet

För att bygga ditt första React Native-drivna appklipp, öppna React Native iOS-projektet inuti Xcode efter att ha skapat ett enkelt React Native-projekt med npx react-native init.

Apple lanserade App Clips med sin iOS 14-programuppdatering, så du behöver din simulator som kör iOS 14 för att ett App Clip ska kunna köras.

Så här skapar du ett nytt App Clip-mål i Xcode:

  1. Välj Arkiv > Nytt > Mål > Appklipp (sök efter "App Clip" i sökfältet för att lägga till App Clip-målet till ditt projekt):
  2. Fortsätt sedan för att fylla i alternativen för App Clip:

För att införliva en App Clip-upplevelse i det befintliga Xcode-projektet kommer Xcode att lägga till en ny byggfas till appmålet. Du kan köra App Clip inom Xcode i det här inledande skedet, men det kommer att visas tomt eftersom inga UI-komponenter finns närvarande.

För att konstruera användarupplevelsen för App Clip kommer du att integrera React Native-kod för att definiera alla nödvändiga UI-element. Genom att utnyttja React Native kan du skapa ett intuitivt och responsivt gränssnitt för ditt appklipp som fungerar effektivt på alla iOS-enheter.

Efter att ha integrerat React Native-koden i Xcode-projektet kan du förhandsgranska App Clip UI och göra eventuella justeringar.

Som tidigare nämnts, att bygga ett appklipp med React Native skiljer sig inte från att bygga en vanlig iOS-applikation med React Native. Se bara till att hålla koll på appklippets storlek när du bygger och lägger till nya beroenden för appen.

Framtida möjligheter för appklipp

Appklipp kan potentiellt revolutionera hur vi interagerar med mobilappar och den fysiska världen. Du kan använda dem för kontaktlösa betalningar, wayfinding, augmented reality, Internet of Things (IoT), on-demand-tjänster, evenemangsbiljetter och åtkomstkontroll. Räkna med att nya och kreativa användningsfall för App Clips dyker upp när tekniken utvecklas.

Kort sagt, App Clips ger snabb och enkel åtkomst till appfunktioner, vilket gör dem till en effektiv och bekväm lösning för användare på språng.