DEV Community: Leon Arantes

Como o CodePush pode salvar tempo e simplificar as atualizações do seu app?

Leon Arantes — Thu, 11 Jan 2024 23:50:54 +0000

Na corrida contínua para manter aplicativos móveis atualizados e reativos às necessidades dos usuários, a agilidade é a chave. É aí que entra o CodePush, uma ferramenta poderosa que tem revolucionado o processo de atualização de aplicativos, permitindo a nos desenvolvedores fazerem mudanças instantâneas sem a complexidade das lojas de aplicativos tradicionais.

A Agonia das Atualizações Tradicionais

Atualizar um aplicativo móvel pode ser um verdadeiro desafio. Desde a necessidade de submeter uma nova versão à loja de aplicativos até a espera pela aprovação, o tempo entre a identificação de um problema e a correção pode ser significativo. E o que dizer das pequenas correções ou melhorias que não justificam uma atualização completa?

CodePush: A Solução Ágil

Imagine poder implementar alterações no código do seu aplicativo e vê-las refletidas instantaneamente nos dispositivos dos usuários, sem a necessidade deles baixarem uma nova versão. É aqui que o CodePush brilha. Essa ferramenta permite enviar atualizações de forma direta para os aplicativos em execução, contornando o processo de aprovação das lojas de apps.

Vantagens Claras

Tempo Reduzido: Corrija bugs e implemente melhorias sem esperar pelas revisões das lojas de aplicativos.
Engajamento Aprimorado: Mantenha os usuários satisfeitos com atualizações rápidas e contínuas.
Maior Controle: Teste novos recursos com grupos específicos de usuários antes de implementar em larga escala.
Economia de Recursos: Elimine downloads desnecessários, economizando dados e tempo dos usuários.

Momentos críticos onde a agilidade é o mais importante

1. Vulnerabilidades de Segurança Emergentes

Imagine um cenário onde uma nova vulnerabilidade de segurança é descoberta em seu aplicativo móvel após o lançamento. Com milhares de usuários confiando nele diariamente, cada momento conta. O CodePush aqui se torna uma ferramenta crucial: em vez de esperar pela aprovação da loja de aplicativos para uma atualização de segurança, os desenvolvedores podem agir instantaneamente, enviando um patch diretamente para os dispositivos dos usuários. Essa agilidade na resposta pode impedir potenciais violações de dados e proteger a reputação do aplicativo.

2. Problemas Críticos de Funcionamento

Um aplicativo enfrenta um bug crítico que impede os usuários de realizar transações financeiras ou acessar conteúdo essencial. Em uma situação como essa, cada minuto sem correção impacta a experiência do usuário e, consequentemente, a reputação do aplicativo. Aqui, o CodePush se destaca ao permitir que os desenvolvedores implementem rapidamente uma solução direta nos dispositivos dos usuários afetados, contornando a espera por uma atualização completa da loja de aplicativos. Essa agilidade é crucial para minimizar os danos e restaurar a confiança dos usuários.

Importância do CodePush Nessas Situações

Nos dois cenários apresentados, a capacidade de resposta rápida é crucial para minimizar danos, preservar a confiança do usuário e proteger a reputação do aplicativo. O CodePush desempenha um papel vital, permitindo atualizações instantâneas, sem atrasos das lojas de aplicativos. Essa agilidade possibilita aos desenvolvedores corrigir problemas de segurança ou bugs críticos imediatamente, oferecendo uma solução rápida e eficaz para situações caóticas que exigem intervenção imediata.

Conclusão

O CodePush é uma ferramenta inestimável para qualquer equipe de desenvolvimento de aplicativos móveis que busca agilidade, eficiência e satisfação do usuário. Ao permitir atualizações rápidas e diretas nos dispositivos dos usuários, ele redefine a maneira como pensamos sobre as atualizações de aplicativos.

Não deixe seu aplicativo ficar estagnado por longos períodos de revisão. Com o CodePush, economize tempo, simplifique atualizações e mantenha seu app sempre atualizado, sem frustrar seus usuários.

How CodePush can save time and simplify your App’s Updates?

Leon Arantes — Tue, 09 Jan 2024 20:12:56 +0000

In the ongoing race to keep mobile applications updated and responsive to user needs, agility is key. This is where CodePush comes in, a powerful tool that has revolutionized the app update process, allowing developers to make instant changes without the complexity of traditional app stores.

The Agony of Traditional Updates

Updating a mobile app can be quite a challenge. From the need to submit a new version to the app store to waiting for approval, the time between identifying a problem and fixing it can be significant. And what about minor fixes or improvements that don’t warrant a full update?

CodePush: The Agile Solution

Imagine being able to implement changes in your app’s code and seeing them instantly reflected on users’ devices without them having to download a new version. This is where CodePush shines. This tool allows direct updates to running applications, bypassing the app store approval process.

Clear Advantages

Reduced Time: Fix bugs and implement improvements without waiting for app store reviews.
Enhanced Engagement: Keep users satisfied with quick and continuous updates.
Greater Control: Test new features with specific user groups before implementing them on a large scale.
Resource Savings: Eliminate unnecessary downloads, saving users’ data and time.

Critical Moments Where Agility Matters Most

1. Emerging Security Vulnerabilities
Imagine a scenario where a new security vulnerability is discovered in your mobile app after its release. With thousands of users relying on it daily, every moment counts. CodePush becomes a crucial tool here: instead of waiting for app store approval for a security update, developers can act instantly by sending a patch directly to users’ devices. This agility in response can prevent potential data breaches and protect the app’s reputation.

2. Critical Functioning Issues
An app faces a critical bug preventing users from making financial transactions or accessing essential content. In a situation like this, every minute without a fix impacts user experience and, consequently, the app’s reputation. Here, CodePush excels by allowing developers to quickly implement a solution directly on the devices of affected users, bypassing the wait for a complete app store update. This agility is crucial to minimize damage and restore user trust.

CodePush’s Importance in These Scenarios

In both presented scenarios, quick responsiveness is crucial to minimize damage, preserve user trust, and protect the app’s reputation. CodePush plays a vital role by enabling instant updates, without delays from app stores. This agility enables developers to immediately address security issues or critical bugs, offering a swift and effective solution for chaotic situations requiring immediate intervention.

Conclusion

CodePush is an invaluable tool for any mobile app development team seeking agility, efficiency, and user satisfaction. By allowing quick and direct updates to users’ devices, it redefines how we think about app updates.

Don’t let your app remain stagnant during lengthy review periods. With CodePush, save time, simplify updates, and keep your app always updated without frustrating your users.

React Native: Multiple Environments Setup (Schemas/Flavors)

Leon Arantes — Wed, 18 May 2022 14:33:43 +0000

Many times when developing an application, we developers need to create different builds with different configurations. Facilitating the maintenance and testing process. Usually 3 different builds are created: development, staging and production.

Installing react-native-config

Install the package



// yarn 
yarn add react-native-config

// npm 
npm install react-native-config --save

For iOS also run pod install after package is installed.

And below line of code to android/app/build.gradle to apply plugin



apply plugin: "com.android.application"
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle" // <- add this line

Create .env files for each configuration

.env.development



ENV=development
API_URL=https://api.dev.com

.env.staging



ENV=staging
API_URL=https://api.staging.com

.env.production



ENV=production
API_URL=https://api.com

Setup for Android

Now we need to define envConfigFiles in build.gradle associating builds with env files. To achieve this, add the below code before the apply from call, and be sure to leave the build cases in lowercase.

android/app/build.gradle



apply plugin: "com.android.application"

// add this block
project.ext.envConfigFiles = [
   productiondebug: ".env.production",
   productionrelease: ".env.production",
   developmentrelease: ".env.development",
   developmentdebug: ".env.development",
   stagingrelease: ".env.staging",
   stagingdebug: ".env.staging"
]
// ---

apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradl

Adding Product Flavor on project below line compileSdkVersion

android/app/build.gradle



android {
    ndkVersion rootProject.ext.ndkVersion
    compileSdkVersion rootProject.ext.compileSdkVersion

    // add this block
    flavorDimensions "default"
    productFlavors {
        production {
            minSdkVersion rootProject.ext.minSdkVersion
            applicationId "com.zenix"
            targetSdkVersion rootProject.ext.targetSdkVersion
            resValue "string", "build_config_package", "com.zenix"
        }
        staging {
            minSdkVersion rootProject.ext.minSdkVersion
            applicationId "com.zenix.staging"
            targetSdkVersion rootProject.ext.targetSdkVersion
            resValue "string", "build_config_package", "com.zenix"
        }
        development {
            minSdkVersion rootProject.ext.minSdkVersion
            applicationId "com.zenix.development"
            targetSdkVersion rootProject.ext.targetSdkVersion
            resValue "string", "build_config_package", "com.zenix"
        }
    }
   // ---
...

Names should match based on productFlavors, so productiondebug will match debug in this case and generate debug build of App with configuration from .env.production.

Also add matchingFallbacks in buildTypes as shown below:
android/app/build.gradle



 buildTypes {
        debug {
            signingConfig signingConfigs.debug
            matchingFallbacks = ['debug', 'release'] // <- add this line
        }
        release {
            signingConfig signingConfigs.debug
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }

Create scripts on package.json



"android:staging": "react-native run-android --variant=stagingdebug",
"android:staging-release": "react-native run-android --variant=stagingrelease",
"android:dev": "react-native run-android --variant=developmentdebug",
"android:dev-release": "react-native run-android --variant=developmentrelease",
"android:prod": "react-native run-android --variant=productiondebug",
"android:prod-release": "react-native run-android --variant=productionrelease",

Android Change App name and App Icon

Just copy the android/app/main folder and rename it to the referring names placed in the flavors in our case we put it
development and staging.

Duplicate main file
Rename file to development or staging and remove file java
To change the app icons, just add it inside the specific mipmap of the build development, staging or main(production).
To change app name, open file and rename

android/app/src/development/res/values/strings.xml



<resources>
    <string name="app_name">zenix dev</string>
</resources>

android/app/src/staging/res/values/strings.xml



<resources>
    <string name="app_name">zenix stg</string>
</resources>

The result should be like

Setup for iOS

Duplicate schema on Xcode 2 times

Click on duplicate only

Rename target to TargetDev and TargetStg
The result should be like:
Next step open manage schemas
Check that the names have been changed correctly
zenix copy to zenixDev
Now we
Select schema build settings same as selected schema and add this script
cp "${PROJECT_DIR}/../.env.development" "${PROJECT_DIR}/../.env.development"

Edit schema > Build > Pre-actions

Repeat the same process for the debug mode pre-actions
Finishing the development configuration, we need to do the same process for staging, changing the script from development to staging
Correctly name the info.plist files of each schema

Rename info.plist on dev build settings
Schema*Dev* > Build Settings > Search filter > info.plist File
zenix dev-Info.plist
Rename info.plist on dev build settings
Schema*Stg* > Build Settings > Search filter > info.plist File
zenix stg-Info.plist
Open Podfile and change target to abstract_target and rename abstract_target to ProjectName+CommonPods like:



target 'zenix' do // <- Remove this

abstract_target 'zenixCommonPods' do // <- Add this

Inside the abstract_target add the targets



 target 'zenixDev' do
 end

 target 'zenixStg' do
 end

 target 'zenix' do
 end

Now just give a pod install in the ios folder

iOS Change App Icon and App Name

Select the target name and go to general and search for Display name

Further down there will be the app icon, just select another app icon
The result should be like:

See the source code

https://github.com/LeonArantes/react-native-multilpe-enviroments