React Native Android and Couchbase Lite

React Native permite que você crie aplicativos Android com aparência e comportamento nativos usando apenas JavaScript. Nesse caso, o React Native se encarrega de gerenciar o estado da interface do usuário e sincronizá-lo com os modelos. E, para nossa sorte, podemos usar o Couchbase Lite para adicionar sincronização e persistência a um aplicativo React Native. Neste tutorial, você aprenderá a criar um aplicativo simples para salvar documentos e replicá-los para Gateway de sincronização. Aqui estão os principais conceitos que você aprenderá:

Criar um projeto básico com o Couchbase Lite Android e o Couchbase Lite Java Listener
Integração do React Native em seu projeto
Adição de modelos e componentes de interface do usuário com JavaScript
Configuração do Couchbase Sync Gateway

Aqui está uma prévia do que você vai construir:

Você pode fazer o download do projeto concluído em GitHub.

Pré-requisitos

Node.js 4.0 ou superior
Estúdio Android e um emulador

Primeiros passos

Nesta seção, você criará um novo projeto do Android Studio do zero e integrar o React Native a ele.

Novo projeto do Android Studio

Antes de começar a escrever algum JavaScript, você precisa criar um novo projeto no Android Studio com todas as dependências. Abra o Android Studio e, na tela de boas-vindas, selecione Novo projeto. Na janela Novo projeto, digite TodoLite ReactNative Android para o nome do aplicativo e todolite-reactnative-android para o nome da pasta:

Defina o SDK mínimo necessário como API 16: Android 4.1 ou posterior e usar a API do Android recomendada atualmente. Depois de preencher os campos, a janela New Project deverá ter a seguinte aparência:

Clique em Next e escolha a opção Atividade em branco modelo:

Clique em Acabamento e você deverá ver o seguinte no navegador de projetos:

Agrupamento de dependências

Expanda a pasta do aplicativo e abra a pasta build.gradle arquivo. Certifique-se de abrir o arquivo localizado no diretório aplicativo (também chamada de módulo) e adicione o seguinte na pasta androide seção:

// workaround for "duplicate files during packaging of APK" issue
// see https://groups.google.com/d/msg/adt-dev/bl5Rc4Szpzg/wC8cylTWuIEJ
packagingOptions {
    exclude 'META-INF/ASL2.0'
    exclude 'META-INF/LICENSE'
    exclude 'META-INF/NOTICE'
}

// solução alternativa para o problema de "arquivos duplicados durante o empacotamento do APK

// consulte https://groups.google.com/d/msg/adt-dev/bl5Rc4Szpzg/wC8cylTWuIEJ

packagingOptions {

excluir 'META-INF/ASL2.0'

excluir 'META-INF/LICENSE'

excluir 'META-INF/NOTICE'

}

Em seguida, abra build.gradle na raiz (também chamado de arquivo gradle no nível do projeto) e adicione uma referência ao repositório Maven do Couchbase:

allprojects {
    repositories {
        jcenter()
        maven {
            url "http://files.couchbase.com/maven2/"
        }
    }
}

todos os projetos {

repositórios {

jcentro()

mentor {

url "http://files.couchbase.com/maven2/"

}

Agora, adicione as seguintes linhas ao nível superior dependências seção:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.1.0'

    compile 'com.couchbase.lite:couchbase-lite-android:1.1.0'
    compile 'com.couchbase.lite:couchbase-lite-java-listener:1.1.0'
    compile 'com.couchbase.lite:couchbase-lite-java-javascript:1.1.0'
    compile 'com.facebook.react:react-native:0.13.0'
}

dependências {

compilar fileTree(dir: 'libs', incluir: ['*.jar'])

testCompile 'junit:junit:4.12'

compilar 'com.android.support:appcompat-v7:23.1.0'

compilar 'com.couchbase.lite:couchbase-lite-android:1.1.0'

compilar 'com.couchbase.lite:couchbase-lite-java-listener:1.1.0'

compilar 'com.couchbase.lite:couchbase-lite-java-javascript:1.1.0'

compilar 'com.facebook.react:react-native:0.13.0'

}

Na barra de ferramentas do Android Studio, clique em Sync Project with Gradle Files (Sincronizar projeto com arquivos Gradle).

Configuração do Couchbase Lite e do Listener

Aberto AndroidManifest.xml localizado em app/src/main e adicione as permissões:

A atividade do React Native para Android

Você precisa adicionar algum código nativo para iniciar o tempo de execução do React Native e fazer com que ele renderize algo. Substitua o conteúdo de MainActivity.java com o seguinte e explicaremos o que está acontecendo a seguir:

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    private final String TAG = "TodoLite";
    private static final int DEFAULT_LISTEN_PORT = 5984;
    private int listenPort;
    private Credentials allowedCredentials;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Log.d(TAG, "onCreate method called");

        // 1
        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "TodoLite-ReactNative-Android", null);

        setContentView(mReactRootView);
        initCBLite();
    }

    private void initCBLite() {
        try {

            // 2
            allowedCredentials = new Credentials("", "");

            // 3
            View.setCompiler(new JavaScriptViewCompiler());

            // 4
            AndroidContext context = new AndroidContext(this);
            Manager.enableLogging(Log.TAG, Log.VERBOSE);
            Manager.enableLogging(Log.TAG_SYNC, Log.VERBOSE);
            Manager.enableLogging(Log.TAG_QUERY, Log.VERBOSE);
            Manager.enableLogging(Log.TAG_VIEW, Log.VERBOSE);
            Manager.enableLogging(Log.TAG_CHANGE_TRACKER, Log.VERBOSE);
            Manager.enableLogging(Log.TAG_BLOB_STORE, Log.VERBOSE);
            Manager.enableLogging(Log.TAG_DATABASE, Log.VERBOSE);
            Manager.enableLogging(Log.TAG_LISTENER, Log.VERBOSE);
            Manager.enableLogging(Log.TAG_MULTI_STREAM_WRITER, Log.VERBOSE);
            Manager.enableLogging(Log.TAG_REMOTE_REQUEST, Log.VERBOSE);
            Manager.enableLogging(Log.TAG_ROUTER, Log.VERBOSE);
            Manager manager = new Manager(context, Manager.DEFAULT_OPTIONS);

            // 5
            listenPort = startCBLListener(DEFAULT_LISTEN_PORT, manager, allowedCredentials);

            Log.i(TAG, "initCBLite() completed successfully with: " + String.format(
                    "http://%s:%s@localhost:%d/",
                    allowedCredentials.getLogin(),
                    allowedCredentials.getPassword(),
                    listenPort));

        } catch (final Exception e) {
            e.printStackTrace();
        }

    }

    private int startCBLListener(int listenPort, Manager manager, Credentials allowedCredentials) {
        LiteListener listener = new LiteListener(manager, listenPort, allowedCredentials);
        int boundPort = listener.getListenPort();
        Thread thread = new Thread(listener);
        thread.start();
        return boundPort;
    }

    @Override
    protected void onPause() {
        super.onPause();
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onPause();
        }
    }

    @Override
    protected void onResume() {
        super.onResume();
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onResume(this);
        }
    }


    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU &amp;&amp; mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

público classe Atividade principal se estende Atividade implementa PadrãoHardwareBackBtnHandler {

privado ReactRootView mReactRootView;

privado ReactInstanceManager mReactInstanceManager;

privado final Cordas TAG = "TodoLite";

privado estático final int DEFAULT_LISTEN_PORT = 5984;

privado int listenPort;

privado Credenciais allowedCredentials;

@Substituir

protegida vazio onCreate(Pacote savedInstanceState) {

super.onCreate(savedInstanceState);

Registro.d(TAG, "método onCreate chamado");

// 1

mReactRootView = novo ReactRootView(este);

mReactInstanceManager = ReactInstanceManager.construtor()

.setApplication(getApplication())

.setBundleAssetName("index.android.bundle")

.setJSMainModuleName("index.android")

.addPackage(novo MainReactPackage())

.setUseDeveloperSupport(BuildConfig.DEBUG)

.setInitialLifecycleState(LifecycleState.RESUMIDO)

.construir();

mReactRootView.startReactApplication(mReactInstanceManager, "TodoLite-ReactNative-Android", nulo);

setContentView(mReactRootView);

initCBLite();

}

privado vazio initCBLite() {

tentar {

// 2

allowedCredentials = novo Credenciais("", "");

// 3

Ver.setCompiler(novo Compilador JavaScriptView());

// 4

AndroidContext contexto = novo AndroidContext(este);

Gerente.enableLogging(Registro.TAG, Registro.VERBOSE);

Gerente.enableLogging(Registro.TAG_SYNC, Registro.VERBOSE);

Gerente.enableLogging(Registro.TAG_QUERY, Registro.VERBOSE);

Gerente.enableLogging(Registro.TAG_VIEW, Registro.VERBOSE);

Gerente.enableLogging(Registro.RASTREADOR DE ALTERAÇÕES DE TAGS, Registro.VERBOSE);

Gerente.enableLogging(Registro.TAG_BLOB_STORE, Registro.VERBOSE);

Gerente.enableLogging(Registro.TAG_DATABASE, Registro.VERBOSE);

Gerente.enableLogging(Registro.TAG_LISTENER, Registro.VERBOSE);

Gerente.enableLogging(Registro.TAG_MULTI_STREAM_WRITER, Registro.VERBOSE);

Gerente.enableLogging(Registro.TAG_REMOTE_REQUEST, Registro.VERBOSE);

Gerente.enableLogging(Registro.TAG_ROUTER, Registro.VERBOSE);

Gerente gerente = novo Gerente(contexto, Gerente.DEFAULT_OPTIONS);

// 5

listenPort = startCBLListener(DEFAULT_LISTEN_PORT, gerente, allowedCredentials);

Registro.i(TAG, "initCBLite() completed successfully with: " + Cordas.formato(

"http://%s:%s@localhost:%d/",

allowedCredentials.getLogin(),

allowedCredentials.getPassword(),

listenPort));

} captura (final Exceção e) {

e.printStackTrace();

}

privado int startCBLListener(int listenPort, Gerente gerente, Credenciais allowedCredentials) {

LiteListener ouvinte = novo LiteListener(gerente, listenPort, allowedCredentials);

int boundPort = ouvinte.getListenPort();

Tópico linha = novo Tópico(ouvinte);

linha.iniciar();

retorno boundPort;

}

@Substituir

protegida vazio onPause() {

super.onPause();

se (mReactInstanceManager != nulo) {

mReactInstanceManager.onPause();

}

@Substituir

protegida vazio onResume() {

super.onResume();

se (mReactInstanceManager != nulo) {

mReactInstanceManager.onResume(este);

}

@Substituir

público vazio onBackPressed() {

se (mReactInstanceManager != nulo) {

mReactInstanceManager.onBackPressed();

} mais {

super.onBackPressed();

}

@Substituir

público booleano onKeyUp(int keyCode, KeyEvent evento) {

se (keyCode == KeyEvent.KEYCODE_MENU &amplificador;&amplificador; mReactInstanceManager != nulo) {

mReactInstanceManager.showDevOptionsDialog();

retorno verdadeiro;

}

retorno super.onKeyUp(keyCode, evento);

}

@Substituir

público vazio invokeDefaultOnBackPressed() {

super.onBackPressed();

}

Algumas coisas estão acontecendo aqui:

Você cria uma atividade que cria um ReactRootViewinicia um aplicativo React dentro dele e o define como a exibição de conteúdo principal. Em seguida, você está chamando a função initCBLite que faz algumas coisas.
Aqui você define um nome e uma senha vazios a serem usados pelo Listener. Isso significa que, em teoria, qualquer pessoa poderia acessar seu banco de dados. Isso é aceitável para este tutorial, mas na produção você substituiria a linha por novas Credenciais().
Conecte o componente para compilar as visualizações JavaScript. Ainda não usaremos as visualizações do Couchbase neste tutorial, mas elas podem ser úteis.
Instanciar o Gerente e ativar o registro.
Inicie o Couchbase Listener informando a porta de escuta, a instância do gerenciador e as credenciais seguras.

Isso é tudo para a parte do Android, agora você pode voltar sua atenção para o JavaScript!

Terra do JavaScript

Na pasta raiz de seu projeto, execute:

$ npm init
$ npm install --save react-native
$ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

$ npm inicial

$ npm instalar --salvar reagir-nativo

$ enrolar -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

Isso cria um módulo de nó para seu aplicativo e adiciona a dependência npm react-native. Agora, abra o módulo package.json e adicione esta linha dentro do arquivo roteiros campo:

"start": "node_modules/react-native/packager/packager.sh"

1	"start": "node_modules/react-native/packager/packager.sh"

Olá mundo

Copie e cole o código a seguir em um novo arquivo index.android.js em sua pasta raiz:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var Home = require('./app/components/Home');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ToolbarAndroid
} = React;


var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#111111'
  },
  toolbar: {
    backgroundColor: '#e9eaed',
    height: 56,
  }
});


var TodoLite = React.createClass({
  render: function() {
    return (
      
        
        
        
      
    );
  }
});

AppRegistry.registerComponent('TodoLite-ReactNative-Android', () =&gt; TodoLite);

/**

* Exemplo de aplicativo React Native

* https://github.com/facebook/react-native

'use strict';

var Reagir = exigir('react-native');

var Início = exigir('./app/componentes/Home');

var {

Registro de aplicativos,

Folha de estilo,

Texto,

Ver,

Barra de ferramentasAndroid

} = Reagir;

var estilos = Folha de estilo.criar({

contêiner: {

flexível: 1,

cor de fundo: '#111111'

barra de ferramentas: {

cor de fundo: '#e9eaed',

altura: 56,

}

});

var TodoLite = Reagir.createClass({

renderizar: função() {

retorno (

);

}

});

Registro de aplicativos.registrarComponente('TodoLite-ReactNative-Android', () => TodoLite);

Construir e executar!

Para executar seu aplicativo, primeiro você precisa iniciar o servidor de desenvolvimento. Para fazer isso, basta executar o seguinte comando em sua pasta raiz:

npm start

1	npm iniciar

OBSERVAÇÃO: No momento da redação deste texto, talvez seja necessário executar brew update && brew reinstall watchman para atualizar o watchman se você receber o erro Erro ao construir o DepdendencyGraph: TypeError: Não é possível ler a propriedade 'root' de null.

Agora, crie e execute seu aplicativo Android em uma nova guia do Terminal:

./gradlew installDebug

1	./Gradlew installDebug

Abra-o no simulador do Android e você verá o seguinte:

Parabéns por ter colocado o ambiente de desenvolvimento em funcionamento! O React Native inclui excelentes recursos, como o live reload, que facilitam muito a iteração na interface do usuário do aplicativo, mas primeiro você deve definir os modelos e métodos para persistir os documentos no banco de dados do Couchbase Lite.

Um aplicativo Todo

Uma API simples

Criar um novo arquivo app/utils/api.js e adicione o seguinte:

var api = {
  
  // 1
  localDatabaseUrl: 'http://localhost:5984',
  
  // 2
  remoteDatabaseUrl: 'http://localhost:4984',
 
  // 3
  saveTodo(title){
    return fetch(this.localDatabaseUrl + '/todos', {
      method: 'post',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        type: 'list',
        title: title
      })
    }).then((res) =&gt; res.json());
  },
  
  // 4
  getTodos(){
    return fetch(this.localDatabaseUrl + '/todos/_all_docs?include_docs=true').then((response) =&gt; {
      if (response.status !== 200) {
        return fetch(this.localDatabaseUrl + '/todos', {
          method: 'put',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ok: true})
        }).then((res) =&gt; res.json());
      }
      return response.json();
    })
  },

  // 5
  startSync(){
    return fetch(this.localDatabaseUrl + '/_replicate', {
      method: 'post',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        source: 'todos',
        target: this.remoteDatabaseUrl + '/todos',
        continuous: true
      })
    }).then((res) =&gt; res.json());
  }
  
};

module.exports = api;

var API = {

// 1

localDatabaseUrl: 'http://localhost:5984',

// 2

remoteDatabaseUrl: 'http://localhost:4984',

// 3

saveTodo(título){

retorno buscar(este.localDatabaseUrl + '/todos', {

método: 'post',

cabeçalhos: {

'Content-Type': 'application/json'

corpo: JSON.stringify({

tipo: 'lista',

título: título

})

}).então((res) => res.json());

// 4

getTodos(){

retorno buscar(este.localDatabaseUrl + '/todos/_all_docs?include_docs=true').então((resposta) => {

se (resposta.status !== 200) {

retorno buscar(este.localDatabaseUrl + '/todos', {

método: 'colocar',

cabeçalhos: {

'Aceitar': 'application/json',

'Content-Type': 'application/json'

corpo: JSON.stringify({ok: verdadeiro})

}).então((res) => res.json());

}

retorno resposta.json();

})

// 5

startSync(){

retorno buscar(este.localDatabaseUrl + '/_replicate', {

método: 'post',

cabeçalhos: {

'Content-Type': 'application/json'

corpo: JSON.stringify({

fonte: 'todos',

alvo: este.remoteDatabaseUrl + '/todos',

contínuo: verdadeiro

})

}).então((res) => res.json());

}

};

módulo.exportações = API;

Aqui está o que você está fazendo:

Você declara o ponto de extremidade no qual o Couchbase Listener está sendo executado.
Nesse caso, o banco de dados remoto é o Sync Gateway. Ele seria substituído por sua instância de produção do Sync Gateway.
O método para manter um documento de tarefa.
Aqui, você está obtendo todos os documentos do Couchbase Lite.
Inicie uma replicação push do banco de dados do Couchbase Lite para o Sync Gateway. Também pode haver uma replicação pull.

Com uma API básica implementada, agora você pode voltar sua atenção para a criação da interface do usuário.

Criação da interface do usuário

Crie um novo arquivo em app/componentes/Home.js com o seguinte:

var React = require('react-native');
var api = require('./../utils/api');

var {
  Text,
  View,
  StyleSheet,
  ScrollView,
  TextInput,
  TouchableOpacity
  } = React;

var styles = StyleSheet.create({
    container: {
        flex: 1
    },
    buttonText: {
        fontSize: 18,
        color: 'white',
        alignSelf: 'center'
    },
    rowContainer: {
        padding: 10
    },
    rowTitle: {
        color: '#48BBEC',
        fontSize: 16
    },
    rowContent: {
        fontSize: 19
    },

    mainContainer: {
        flex: 1,
        padding: 30,
        marginTop: 65,
        flexDirection: 'column',
        justifyContent: 'center',
        backgroundColor: '#48BBEC'
    },
    searchInput: {
        height: 50,
        padding: 4,
        marginRight: 5,
        fontSize: 23,
        borderWidth: 1,
        borderColor: 'white',
        borderRadius: 8,
        color: 'white',
        margin: 5
    },
    buttonText: {
        fontSize: 18,
        color: '#111',
        alignSelf: 'center'
    },
    button: {
        height: 45,
        flexDirection: 'row',
        backgroundColor: 'white',
        borderColor: 'white',
        borderWidth: 1,
        borderRadius: 8,
        marginBottom: 10,
        marginTop: 10,
        alignSelf: 'stretch',
        justifyContent: 'center'
    },
});

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            newTodo: '',
            todos: []
        };
    }
    componentWillMount() {
        api.getTodos()
          .then((res) =&gt; {
              var todos = res.rows.map(function (row) {
                  return row.doc;
              });
              this.setState({
                  todos: todos
              });
          });
    }
    handleTodoChange(event) {
        this.setState({
            newTodo: event.nativeEvent.text
        });
    }
    handleSave() {
        api.saveTodo(this.state.newTodo)
        .then((res) =&gt; {
              api.getTodos()
                .then((res) =&gt; {
                    var todos = res.rows.map(function (row) {
                        return row.doc;
                    });
                    this.refs.inputText.value = '';
                    this.setState({
                        todos: todos,
                        newTodo: ''
                    });
                });
          });
    }
    handleSync() {
        api.startSync()
          .then(function(res) {
              console.log(res);
          });
    }
    render() {
        var lists = this.state.todos.map((item, index) =&gt; {
            return (
              
                  
                       {item.title} 
                  
              
            );
        });
        return (
          
              
              
                  Save
              
              
                  Sync
              
              
                  {lists}
              
          
        );
    }
}

Home.propTypes = {
    lists: React.PropTypes.array.isRequired
};

module.exports = Home;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

var Reagir = exigir('react-native');

var API = exigir('./../utils/api');

var {

Texto,

Ver,

Folha de estilo,

ScrollView,

TextInput,

TouchableOpacity

} = Reagir;

var estilos = Folha de estilo.criar({

contêiner: {

flexível: 1

buttonText: {

fontSize: 18,

cor: "branco,

alignSelf: "centro

rowContainer: {

acolchoamento: 10

rowTitle: {

cor: '#48BBEC',

fontSize: 16

rowContent: {

fontSize: 19

mainContainer: {

flexível: 1,

acolchoamento: 30,

marginTop: 65,

flexDireção: "coluna,

justifyContent: "centro,

cor de fundo: '#48BBEC'

searchInput: {

altura: 50,

acolchoamento: 4,

marginRight: 5,

fontSize: 23,

largura da borda: 1,

borderColor: "branco,

borderRadius: 8,

cor: "branco,

margem: 5

buttonText: {

fontSize: 18,

cor: '#111',

alignSelf: "centro

botão: {

altura: 45,

flexDireção: "linha,

cor de fundo: "branco,

borderColor: "branco,

largura da borda: 1,

borderRadius: 8,

marginBottom: 10,

marginTop: 10,

alignSelf: "esticar,

justifyContent: "centro

});

classe Início se estende Reagir.Componente {

construtor(adereços) {

super(adereços);

este.estado = {

novoTodo: '',

todos: []

};

}

componentWillMount() {

API.getTodos()

.então((res) => {

var todos = res.linhas.mapa(função (fila) {

retorno fila.doc;

});

este.setState({

todos: todos

});

}

handleTodoChange(evento) {

este.setState({

novoTodo: evento.nativeEvent.texto

});

}

handleSave() {

API.saveTodo(este.estado.novoTodo)

.então((res) => {

API.getTodos()

.então((res) => {

var todos = res.linhas.mapa(função (fila) {

retorno fila.doc;

});

este.refs.inputText.valor = '';

este.setState({

todos: todos,

novoTodo: ''

});

}

handleSync() {

API.startSync()

.então(função(res) {

console.registro(res);

});

}

renderizar() {

var listas = este.estado.todos.mapa((item, índice) => {

retorno (

{item.título}

);

});

retorno (

Salvar

Sincronização

{listas}

);

}

Início.propTypes = {

listas: Reagir.PropTypes.matriz.isRequired

};

módulo.exportações = Início;

Não se deixe intimidar pelo tamanho desse trecho de código. Tudo o que estamos fazendo aqui é declarar estilos e usar alguns componentes de IU do React Native incorporados para exibir uma entrada de texto, botões e rótulos de texto. Você pode encontrar a lista de componentes de IU incorporados aqui.

Atualização do componente raiz

A etapa final para que você possa ver seu excelente trabalho em ação é atualizar index.android.js para carregar o Início componente. Abaixo do exigir para importar react-nativoAdicione o seguinte:

var Home = require('./app/components/Home');

1	var Início = exigir('./app/componentes/Home');

Em seguida, substitua o valor de retorno do renderizar método com . Use o ⌘ + m no Genymotion para recarregar o JavaScript e você verá uma tela azul brilhante. Essa é uma boa notícia!

Replicações com o Couchbase Sync Gateway

Faça o download do Sync Gateway no link abaixo e descompacte o arquivo:

http://www.couchbase.com/nosql-databases/downloads

Em um novo arquivo chamado sync-gateway-config.json, cole o seguinte:

{
  "log": ["*"],
  "databases": {
    "todos": {
      "server": "walrus:",
      "users": { "GUEST": { "disabled": false, "admin_channels": ["*"] } }
    }
  }
}

{

"log": ["*"],

"bancos de dados": {

"todos": {

"servidor": "walrus:",

"usuários": { "CONVIDADO": { "desativado": falso, "admin_channels": ["*"] } }

}

E execute o Sync Gateway com esse arquivo de configuração:

~/Downloads/couchbase-sync-gateway/bin/sync_gateway /path/to/project/sync-gateway-config.json

1	~/Downloads/couchbase-sincronização-portal/caixa/portais de sincronização /caminho/para/projeto/sincronização-portal-configuração.json

Para tornar o ponto de extremidade do Sync Gateway acessível dentro do emulador de VM do Android, você precisa ativar uma porta do host para a VM. No Terminal, execute o seguinte:

adb reverse tcp:4984 tcp:4984

1	adb reverso tcp:4984 tcp:4984

Abra a interface de usuário do administrador para monitorar os documentos que foram salvos no Sync Gateway:

http://localhost:4985/_admin/

Tente adicionar mais documentos de tarefas e observe como eles são enviados automaticamente para o Sync Gateway.

Para onde ir a partir de agora

Parabéns! Você criou seu primeiro aplicativo React Native Android + Couchbase Lite. Agora você está pronto para adicionar mais componentes, como os seguintes:

Visualizações do Couchbase Lite para escrever consultas personalizadas
Autenticação do usuário em uma replicação
Implementação contínua do arquivo de configuração do Sync Gateway e outros componentes

Fique atento a um tutorial sobre a depuração de seu aplicativo React Native Android + Couchbase Lite usando Charles e Genymotion.

Sinta-se à vontade para compartilhar seus comentários, descobertas ou fazer perguntas nos comentários abaixo ou nos fóruns. Falamos com você em breve!

James Nocentini, redator técnico, celular, Couchbase

Um comentário

kpal maio 11, 2018 em 4:28 am

*Abra o AndroidManifest.xml localizado em app/src/main e adicione as permissões
A linha acima indica as permissões, mas nenhuma foi encontrada na caixa fornecida abaixo dela.

Acesse para responder

Deixar uma resposta Cancelar resposta

Você precisa fazer o login para publicar um comentário.

Platform

Self-Managed

Services

Capabilities

Why Couchbase?

Migrate to Capella

By Use Case

By Industry

By Application Need

Popular Docs

By Developer Role

Quickstart

Resource Center

About

Partnerships

Our Services

Partners: Register a Deal

Ready to register a deal with Couchbase?

Marriott

Todas as publicações

Primeiros passos com o React Native Android e o Couchbase Lite

Pré-requisitos

Primeiros passos

Novo projeto do Android Studio

Agrupamento de dependências

Configuração do Couchbase Lite e do Listener

A atividade do React Native para Android

Terra do JavaScript

Olá mundo

Construir e executar!

Um aplicativo Todo

Uma API simples

Criação da interface do usuário

Atualização do componente raiz

Replicações com o Couchbase Sync Gateway

Para onde ir a partir de agora

Autor

Postado por James Nocentini, redator técnico, celular, Couchbase

Um comentário

Deixar uma resposta Cancelar resposta