CloudBees Rollout è una soluzione avanzata di segnalazione delle funzionalità che consente ai tuoi team di sviluppo di creare e distribuire rapidamente le applicazioni senza compromettere la sicurezza. Fornendo un meccanismo di rilascio graduale e un modo semplice per definire il pubblico di destinazione, CloudBees Rollout consente agli sviluppatori e ai product manager di ottimizzare i rilasci delle funzionalità e personalizzare l'esperienza dell'utente. CloudBees Rollout offre ai team il controllo sulle funzionalità che sono in fase di staging, produzione o qualsiasi ambiente che hai nella pipeline di distribuzione.
Hai mai aggiunto una nuova funzionalità alla tua applicazione mobile e volevi distribuirla e testarla solo con una percentuale o un segmento designato di utenti? O hai mai avuto il problema per cui una funzionalità che hai appena rilasciato presenta un difetto e devi nasconderlo immediatamente dalla tua base di utenti? Queste sono considerazioni di sviluppo comuni che possono aumentare la soddisfazione dell'utente finale e accelerare drasticamente il tempo del ciclo di rilascio se gestite correttamente. Questo blog ti mostrerà come creare flag di funzionalità nell'app React Native. Analizzeremo i processi di configurazione, installazione e implementazione in un formato dettagliato per dimostrare come impostare un flag booleano di base sul nostro componente utilizzando CloudBees Rollout in React Native. Sebbene questi siano alcuni casi di flag di funzionalità che possono aiutare a evitare potenziali conflitti, l'approccio viene utilizzato in molte applicazioni di grandi dimensioni tra cui Reddit, Gmail, Netflix, Google Chrome Canary, ecc.
Impostazione pre-sviluppo
Andiamo sul sito Web di CloudBees Rollout e registrati qui. Al momento della registrazione, riceverai una prova di 14 giorni.
Ora creiamo la nostra applicazione:
Imposta il nome dell'applicazione utilizzato su CloudBees Rollout:
Infine, dobbiamo scegliere la nostra applicazione language: react native e environment: production per ora.
Installazione
È ora di cd nel nostro progetto.
Ora possiamo installare CloudBees Rollout SDK nella nostra applicazione React Native utilizzando npm:
npm install rox-react-native --save
Crea un servizio di implementazione CloudBees
Nel nostro progetto, per prima cosa, creiamo una cartella chiamata services eseguendo mkdir services nella nostra consolle. Entriamo nella directory dei servizi eseguendo cd services e crea il nostro servizio di implementazione eseguendo touch flagService.js .
Ora scriviamo un po' di codice per il nostro servizio:
import Rox from 'rox-react-native';
import AsyncStorage from '@react-native-community/async-storage';
class FlagService {
constructor() {
Rox.setup('XXXXXXXXX', this._options());
this.isBooted = false
}
register() {
if (!this.isBooted) {
Rox.register('', this._flags());
this.isBooted = true
} else {
// sync with saved feature flags?
}
}
endSession() {
if (this.isBooted) {
this.isBooted = false
}
}
enableHiddenFeature() {
this._ensureBooted()
return this._flags.showHiddenFeatures.isEnabled()
}
_flags() {
return {
showHiddenFeatures: new Rox.Flag(),
titleColors: new Rox.Variant('White', ['White', 'Blue', 'Green', 'Yellow']),
}
}
_options() {
return {
version: '1.0.0',
AsyncStorage: AsyncStorage,
debugLevel: 'verbose',
freeze: Rox.FreezeOptions.freezeOptionNone
}
}
_boot() {
if (this._isProperlyImplemented() && !this.isBooted) {
this.setup()
this.register()
}
}
_isProperlyImplemented() {
return typeof (Rox) === 'object'
}
_ensureBooted() {
if (!this.isBooted) { return }
this._boot()
}
}
export default FlagService
Il FlagService avrà il modulo di rollout importato in modo che possiamo iniziare a creare un wrapper attorno ad esso. Il servizio inizia registrando l'applicazione CloudBees Rollout Rox.setup('XXXXXXXXX', this._options()); (assicurati di modificare XXXXXX con la tua chiave API specificata). Abbiamo creato un metodo di avvio che assicurerà che per ogni controllo del flag che convalidiamo, tutto sia implementato e avviato correttamente prima di eseguire il controllo del flag.
Questo servizio contiene solo un flag per il momento – showHiddenFeatures – che useremo nella sezione di esempio di flag di funzionalità per attivare un componente nascosto. In base alle opzioni di CloudBees Rollout, imposteremo la registrazione utilizzando l'implementazione asyncstorage per l'archiviazione/ottenimento di chiavi su/da come meccanismo di memorizzazione nella cache, oltre a includere la versione della nostra applicazione e impostare le opzioni di blocco su nessuna.
Puoi visualizzare ulteriore documentazione sull'API qui.
Esempio di segnalazione delle funzioni
Ora che abbiamo creato il servizio, è il momento di registrare il servizio all'avvio dell'applicazione. Quindi nel nostro metodo di rendering dell'applicazione, abbiamo aggiunto un'istruzione di condizione per testare il flag alternando due viste diverse. Infine, assicurati di importare il FlagService nel Launch Container; quindi registrarlo per garantire che i valori target corretti vengano visualizzati sull'applicazione.
....
import FlagService from './services/flagService'
const RolloutFlagService = new FlagService()
export default class LaunchContainer extends Component {
componentDidMount() {
RolloutFlagService.register()
}
render() {
if (RolloutFlagService.enableHiddenFeature()) {
return (
<Container style={styles.container}>
<Header />
<NewFeature />
</Container>
)
} else {
return (
<Container style={styles.container}>
<Header />
</Container>
)
}
}
}
export default LaunchContainer;
Ce l'hai fatta!
Una volta caricata l'applicazione con questa implementazione, CloudBees Rollout rileverà automaticamente la registrazione dell'applicazione e dovresti vedere il messaggio qui sotto! Ora sei pronto per iniziare ad aggiungere più flag alla tua applicazione. Tieni d'occhio il prossimo articolo in cui analizzeremo l'acquisizione di informazioni dettagliate sull'applicazione con le funzionalità di lancio, esperimento e Insight di rollout.
