{"id":3673,"date":"2017-06-05T02:03:15","date_gmt":"2017-06-05T09:03:15","guid":{"rendered":"https:\/\/www.couchbase.com\/blog\/?p=3673"},"modified":"2023-06-19T02:15:21","modified_gmt":"2023-06-19T09:15:21","slug":"persist-abstract-data-nativescript-typescript-application","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/pt\/persist-abstract-data-nativescript-typescript-application\/","title":{"rendered":"Dados persistentes e abstratos em um aplicativo Typescript Nativescript"},"content":{"rendered":"

Aaron Ullal<\/a> \u00e9 um\u00a0Desenvolvedor freelancer na FactoryMind, amante das pessoas e da vida, vivendo em beta permanente. Ele<\/em>\u00a0<\/em>\u00e9 um desenvolvedor full stack baseado na bela cidade de Trento, na It\u00e1lia.<\/em><\/p>\n

TI apaixonada por mais <\/em>do que <\/em>7 anos, ele est\u00e1 <\/em>atualmente<\/em>\u00a0focado no desenvolvimento m\u00f3vel usando o Native<\/em>S<\/em>e projetar solu\u00e7\u00f5es arquitet\u00f4nicas para plataformas complexas.<\/em><\/p>\n

\"Aaron<\/p>\n

O Couchbase \u00e9 uma \u00f3tima ferramenta para manter os dados dentro do nosso aplicativo. Se voc\u00ea nunca ouviu falar dele, trata-se de um armazenamento de objetos de documentos que permite salvar seus dados.<\/p>\n

Se voc\u00ea estiver usando NativeScript-Angular, j\u00e1 existem alguns tutoriais excelentes sobre como come\u00e7ar e alguns recursos mais avan\u00e7ados. Neste artigo, vamos nos concentrar no NativeScript com TypeScript.<\/p>\n

O que abordaremos<\/strong><\/p>\n

Neste artigo simples, veremos como salvar e recuperar algumas informa\u00e7\u00f5es do usu\u00e1rio:<\/p>\n

    \n
  1. Instala\u00e7\u00e3o do Couchbase<\/li>\n
  2. Cria\u00e7\u00e3o de uma classe TypeScript que fornece uma camada de abstra\u00e7\u00e3o sobre o Couchbase, tornando-o muito mais f\u00e1cil de usar (sem instru\u00e7\u00f5es complexas para inser\u00e7\u00e3o e recupera\u00e7\u00e3o de dados)<\/li>\n
  3. Implementa\u00e7\u00e3o do padr\u00e3o singleton na classe<\/li>\n<\/ol>\n

    Ao final do tutorial, seremos capazes de usar instru\u00e7\u00f5es como<\/p>\n

    userSettings.name =\u00a0\"Frank\"\u00a0\/\/boom! written in our db\r\n\r\ntext=\u201d{{\u00a0userSettings.name }}\u201d\u00a0\/\/boom! read from our db<\/pre>\n
    sem ter que escrever consultas extensas para ler e escrever!<\/p>\n
    Al\u00e9m disso, todo o c\u00f3digo deste artigo est\u00e1 dispon\u00edvel em este<\/a><\/u>\u00a0reposit\u00f3rio do GitHub. Sinta-se \u00e0 vontade para fazer o clone e brincar com ele.<\/p>\n
    Sem mais delongas, vamos come\u00e7ar!<\/p>\n
    Instalar o plug-in do Couchbase<\/strong><\/p>\n
    Vamos criar um novo aplicativo NativeScript usando o modelo TypeScript.<\/p>\n
    tns create ns-couchbase-demo --tsc<\/pre>\n
    Na pasta raiz de nosso projeto NativeScript rec\u00e9m-criado, vamos dar o seguinte comando para adicionar o plug-in e salv\u00e1-lo em nossa lista de depend\u00eancias:<\/p>\n
    plugin tns add nativescript-couchbase\r\n\r\n<\/pre>\n
    Depois que o plug-in for instalado com \u00eaxito, vamos criar uma classe que ser\u00e1 usada para armazenar e recuperar as informa\u00e7\u00f5es do usu\u00e1rio de que precisamos.<\/p>\n
    Classe de camada de abstra\u00e7\u00e3o<\/strong><\/p>\n
    OPCIONAL: <\/strong>Normalmente, \u00e9 uma boa ideia criar uma interface para definir as propriedades que precisamos incluir.<\/p>\n
    Navegue at\u00e9 a pasta app do nosso projeto e crie uma pasta models. Aqui, definiremos nosso arquivo Models.ts (app\/models\/Models.ts):<\/p>\n
    export\u00a0module\u00a0Models{\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0export\u00a0interface\u00a0IUserSettings\u00a0{\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0username :string;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fullname :string;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0email :string;\r\n\r\n}\r\n\r\n}\r\n\r\n<\/pre>\n
    Depois de definir nossa interface, vamos criar a classe que de fato a implementa. Chamaremos a classe de UserSettings.<\/p>\n
    Dentro dessa classe, tamb\u00e9m precisamos armazenar as informa\u00e7\u00f5es relacionadas ao nosso banco de dados Couchbase.<\/p>\n
    let CouchBaseModule\u00a0=\u00a0require(\"nativescript-couchbase\");\r\n\r\nimport\u00a0{\u00a0Models\u00a0}\u00a0from\u00a0'..\/models\/Models';\r\n\r\nexport\u00a0class\u00a0UserSettings implements Models.IUserSettings{\r\n\r\n\u00a0 \u00a0private\u00a0DATABASE_NAME =\u00a0'appname-db';\r\n\r\n\u00a0 \u00a0private\u00a0USER_SETTINGS_DOC_ID\u00a0=\u00a0'usersettings';\r\n\r\n\u00a0 \u00a0private\u00a0_database;\r\n\r\n\u00a0 \u00a0private\u00a0_userSettingsDocument:\u00a0Models.IUserSettings;\r\n\r\n\u00a0 \u00a0private\u00a0_userSettingsObj:\u00a0Models.IUserSettings;\r\n\r\n\u00a0 \u00a0private _instance :UserSettings;\r\n\r\n}\r\n\r\n<\/pre>\n
    Vamos detalhar isso:<\/p>\n
    Nas duas primeiras linhas, solicitamos o plug-in do Couchbase que instalamos anteriormente, juntamente com o m\u00f3dulo Models que usaremos para aproveitar a tipagem forte do TypeScript.<\/p>\n
    Em seguida, definimos algumas outras propriedades privadas que usaremos posteriormente:<\/p>\n
    DATABASE_NAME: Esse \u00e9 o nome do banco de dados. Certifique-se de que ele n\u00e3o contenha letras mai\u00fasculas (e que tenha menos de 240 caracteres).<\/p>\n
    USER_SETTINGS_DOC_ID: nome do documento do Couchbase.<\/p>\n
    banco de dados: Essa \u00e9 a inst\u00e2ncia do conector de banco de dados.<\/p>\n
    _userSettingsDocument: O Couchbase \u00e9 um banco de dados n\u00e3o orientado a documentos. Ele n\u00e3o tem tabelas, mas usa uma entidade de armazenamento prim\u00e1rio conhecida como Document. Basicamente, um documento \u00e9 uma cole\u00e7\u00e3o de pares chave-valor, em que o valor pode ser praticamente qualquer coisa (cadeia de caracteres, n\u00fameros, matrizes etc.). \u00c9 isso que torna o Couchbase a solu\u00e7\u00e3o n\u00famero um se voc\u00ea precisar armazenar uma variedade de dados n\u00e3o relacionais: simplicidade e flexibilidade.<\/p>\n
    _userSettingsObj: este \u00e9 o objeto JavaScript que usaremos para sincronizar as informa\u00e7\u00f5es com o documento do Couchbase.<\/p>\n
    Abordaremos o motivo pelo qual declaramos a vari\u00e1vel _instance mais tarde, quando implementarmos o padr\u00e3o singleton.<\/p>\n
    Agora que j\u00e1 cobrimos isso, vamos ver como funciona o construtor da nossa classe:<\/p>\n
     <\/p>\n
    constructor()\u00a0{\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0this._database =\u00a0new\u00a0CouchBaseModule.Couchbase(this.DATABASE_NAME);\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0this._userSettingsDocument =\u00a0this._database.getDocument(this.USER_SETTINGS_DOC_ID);\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0if\u00a0(!this._userSettingsDocument)\u00a0{\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0console.log(\"Document does not exist yet :)\");\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0this._userSettingsObj =\u00a0{\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0username:\u00a0\"\",\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0email:\u00a0\"\",\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0fullname:\u00a0\"\",\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0}\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0this._database.createDocument(this._userSettingsObj,\u00a0this.USER_SETTINGS_DOC_ID);\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0this._userSettingsDocument =\u00a0this._database.getDocument(this.USER_SETTINGS_DOC_ID);\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0}\r\n\r\n\u00a0 \u00a0}\r\n\r\n<\/pre>\n
    Mais uma vez, vamos ver em detalhes o que est\u00e1 acontecendo em nosso construtor:.<\/p>\n
    this._database = new CouchBaseModule.Couchbase(this.DATABASE_NAME);<\/p>\n
    Aqui estamos instanciando o Couchbase e informando a qual banco de dados queremos nos conectar.<\/p>\n
    this._userSettingsDocument = this._database.getDocument(this.USER_SETTINGS_DOC_ID);<\/p>\n
    Essa linha diz ao Couchbase para obter nosso documento (a cole\u00e7\u00e3o que usamos para armazenar nossas informa\u00e7\u00f5es).<\/p>\n
     <\/p>\n
    \u00a0if\u00a0(!this._userSettingsDocument)\u00a0{\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0console.log(\"Document does not exist yet :)\");\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0this._userSettingsObj =\u00a0{\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0username:\u00a0\"\",\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0email:\u00a0\"\",\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0fullname:\u00a0\"\",\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0}\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0this._database.createDocument(this._userSettingsObj,\u00a0this.USER_SETTINGS_DOC_ID);\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0this._userSettingsDocument =\u00a0this._database.getDocument(this.USER_SETTINGS_DOC_ID);\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0}<\/pre>\n
     <\/p>\n
    Se o nosso documento ainda n\u00e3o existir (por exemplo, pela primeira vez), criaremos um objeto vazio do tipo UserSettings e tamb\u00e9m criaremos um novo documento. O segundo par\u00e2metro que atribu\u00edmos \u00e0 fun\u00e7\u00e3o createDocument \u00e9 o id do documento. Se n\u00e3o fornecermos esse par\u00e2metro, o Couchbase atribuir\u00e1 ao documento um UUID automaticamente.<\/p>\n
    Fant\u00e1stico! Agora que nosso construtor est\u00e1 pronto, vamos ver como podemos definir e recuperar informa\u00e7\u00f5es sobre nosso usu\u00e1rio.<\/p>\n
    Vamos configurar alguns getters e setters para conseguir exatamente isso.<\/p>\n
     <\/p>\n
    \/*====== USERNAME GETTER AND SETTER ======*\/\r\n\r\n\u00a0 \u00a0get\u00a0username():\u00a0string\u00a0{\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0this._userSettingsObj =\u00a0this._database.getDocument(this.USER_SETTINGS_DOC_ID\r\n\r\n);\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0let username =\u00a0this._userSettingsObj.username;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0return\u00a0username;\r\n\r\n\u00a0 \u00a0}\r\n\r\n\u00a0 \u00a0set\u00a0username(value:\u00a0string)\u00a0{\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0this._userSettingsObj =\u00a0this._database.getDocument(this.USER_SETTINGS_DOC_ID\r\n\r\n);\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0this._userSettingsObj.username =\u00a0value;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0this._database.updateDocument(this.USER_SETTINGS_DOC_ID\r\n\r\n,\u00a0this._userSettingsObj);\r\n\r\n\u00a0 \u00a0}<\/pre>\n
    Como de costume, vamos detalhar o c\u00f3digo.<\/p>\n
    No getter, fazemos tr\u00eas coisas:<\/p>\n
    1) Lemos os dados de nosso documento em nosso objeto<\/p>\n
    2) Obtenha o valor desejado (nesse caso, o nome de usu\u00e1rio)<\/p>\n
    3) Devolva-o<\/p>\n
    F\u00e1cil de fazer :)<\/p>\n
    No setter, fazemos o seguinte:<\/p>\n
    1) Obtemos a vers\u00e3o mais recente de nosso userSettingsObject, lendo-a no banco de dados<\/p>\n
    2) Definimos a propriedade username como o valor passado para a fun\u00e7\u00e3o<\/p>\n
    3) Atualizamos nosso documento no banco de dados. Ao contr\u00e1rio da fun\u00e7\u00e3o createDocument, o primeiro par\u00e2metro \u00e9 o ID do documento e o segundo \u00e9 o pr\u00f3prio objeto.<\/p>\n
    Mas... por que precisamos obter o getDocument primeiro? Por que n\u00e3o podemos simplesmente atualizar o documento com o objeto?<\/p>\n
    Fico feliz que voc\u00ea tenha perguntado!<\/p>\n
    Basicamente, sempre que atualizamos um documento, o Couchbase mant\u00e9m o registro da altera\u00e7\u00e3o. Cada documento tem uma propriedade _rev; esse valor \u00e9 atualizado pelo Couchbase sempre que ocorre uma opera\u00e7\u00e3o de grava\u00e7\u00e3o no documento. Se tentarmos atualizar um documento com um _rev mais antigo, o Couchbase o rejeitar\u00e1.<\/p>\n
    Padr\u00e3o Singleton<\/strong><\/p>\n
    Quem n\u00e3o gosta de padr\u00f5es de design? Hoje vamos implementar um padr\u00e3o muito simples, por\u00e9m eficaz: o singleton. O padr\u00e3o singleton, quando implementado corretamente, \"restringe a instancia\u00e7\u00e3o<\/a>\u00a0de um classe<\/a>\u00a0para um objeto<\/a>. Isso \u00e9 \u00fatil quando \u00e9 necess\u00e1rio exatamente um objeto para coordenar as a\u00e7\u00f5es em todo o sistema\", que \u00e9 exatamente o nosso caso.<\/p>\n
    Basicamente, garantimos que tenhamos apenas uma inst\u00e2ncia da nossa classe lendo e gravando no nosso banco de dados.<\/p>\n
    Como podemos fazer isso? Uma maneira simples de conseguir isso \u00e9 com as duas etapas a seguir:<\/p>\n
    1) Tornar nosso construtor privado (Introduzido no ts 2.0)<\/p>\n
    2) Implementar um m\u00e9todo getInstance que retorna a inst\u00e2ncia atual, se ela existir, ou uma nova inst\u00e2ncia, se for a primeira chamada<\/p>\n
    ETAPA 1:<\/p>\n
    private\u00a0constructor()\u00a0{....}\r\n\r\n<\/pre>\n
    ETAPA 2:<\/p>\n
    Agora podemos ir em frente e criar nosso m\u00e9todo getInstance(), que ter\u00e1 a seguinte apar\u00eancia:<\/p>\n
    public\u00a0static\u00a0getInstance()\u00a0:UserSettings{\r\n\r\n\u00a0 \u00a0if(!this._instance){\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 this._instance =\u00a0new\u00a0UserSettings();\r\n\r\n\u00a0 \u00a0 }\r\n\r\nreturn\u00a0this._instance;\r\n\r\n}\r\n\r\n<\/pre>\n
    \u00d3timo! Abstra\u00edmos os dados e implementamos o padr\u00e3o singleton. Vamos ver como podemos usar nossa nova e brilhante classe UserSettings.<\/p>\n
    Editaremos os arquivos main-page.xml e main-page.ts existentes.<\/p>\n
    Primeiro, definiremos um layout b\u00e1sico da interface do usu\u00e1rio. Para esta demonstra\u00e7\u00e3o, usaremos um campo de texto para obter a entrada do usu\u00e1rio, um bot\u00e3o para salvar o valor no banco de dados e um r\u00f3tulo para exibir o valor atual no banco de dados. Como voc\u00ea pode ver, se nenhum dado estiver armazenado no banco de dados, o r\u00f3tulo exibir\u00e1 simplesmente \"Nenhum dado armazenado no banco de dados\".<\/p>\n
    Esta \u00e9 a apar\u00eancia do nosso arquivo main-page.xml:<\/p>\n
    <Page xmlns=\"https:\/\/schemas.nativescript.org\/tns.xsd\" navigatingTo=\"navigatingTo\">\r\n\r\n\u00a0 \u00a0 <Page.actionBar>\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 <ActionBar title=\"My App\" icon=\"\" class=\"action-bar\">\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 <\/ActionBar>\r\n\r\n\u00a0 \u00a0 <\/Page.actionBar>\r\n\r\n\u00a0 \u00a0 <StackLayout>\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 <TextField hint=\"username\" text=\"{{ username }}\" \/>\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 <Button text=\"SAVE MY USERNAME\" tap=\"onTap\" class=\"btn btn-primary btn-active\"\/>\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 <Label text=\"{{ dbusername || 'no data stored in the db' }}\" textWrap=\"true\"\/>\r\n\r\n\u00a0 \u00a0 <\/StackLayout>\r\n\r\n<\/Page>\r\n\r\n<\/pre>\n
    Muito bem! Agora que temos um layout b\u00e1sico, podemos continuar adicionando alguma l\u00f3gica \u00e0 interface do usu\u00e1rio.<\/p>\n
    Esta \u00e9 a apar\u00eancia do nosso arquivo main-page.ts:<\/p>\n
    import\u00a0{\u00a0Observable\u00a0}\u00a0from\u00a0'data\/observable'; \/\/bind data to our view\r\n\r\nimport\u00a0{\u00a0UserSettings\u00a0}\u00a0from\u00a0'.\/UserSettings'; \/\/woohoo our amazing database interaction layer\r\n\r\nimport\u00a0{\u00a0EventData\u00a0}\u00a0from\u00a0'data\/observable'; \/\/use with typescript for intellisense\r\n\r\nimport\u00a0{\u00a0Page\u00a0}\u00a0from\u00a0'ui\/page'; \/\/use with typescript for intellisense\r\n\r\nlet userSettings =\u00a0UserSettings.getInstance();\r\n\r\nlet mainPageViewModel;\r\n\r\nclass\u00a0MainPageViewModel\u00a0extends\u00a0Observable{\r\n\r\n\u00a0 \u00a0 public\u00a0username;\r\n\r\n\u00a0 \u00a0 public\u00a0dbusername\r\n\r\n\u00a0 \u00a0 constructor(){\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 super();\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 this.dbusername =\u00a0userSettings.username;\r\n\r\n\u00a0 \u00a0 }\r\n\r\n}\r\n\r\nexport\u00a0function\u00a0navigatingTo(args:\u00a0EventData)\u00a0{\r\n\r\n\u00a0 \u00a0 let page =\u00a0<Page>args.object;\r\n\r\n\u00a0 \u00a0 mainPageViewModel =\u00a0new\u00a0MainPageViewModel();\r\n\r\n\u00a0 \u00a0 page.bindingContext =\u00a0mainPageViewModel;\r\n\r\n}\r\n\r\nexport\u00a0function\u00a0onTap(){\r\n\r\n\u00a0 \u00a0 userSettings.username =\u00a0mainPageViewModel.username;\r\n\r\n\u00a0 \u00a0 mainPageViewModel.set(\"dbusername\",userSettings.username);\r\n\r\n}\r\n\r\n<\/pre>\n
    O que fizemos? Nas primeiras linhas, apenas importamos um monte de coisas, verificando os coment\u00e1rios para ver o que os m\u00f3dulos fazem. Em seguida, temos:<\/p>\n
    let userSettings =\u00a0UserSettings.getInstance();\r\n\r\n<\/pre>\n
    \u00c9 assim que obtemos a inst\u00e2ncia da nossa classe UserSettings.<\/p>\n
    Continuando, declaramos outra classe pequena:<\/p>\n
    class\u00a0MainPageViewModel\u00a0extends\u00a0Observable{\r\n\r\n\u00a0 \u00a0 public\u00a0username;\r\n\r\n\u00a0 \u00a0 public\u00a0dbusername\r\n\r\n\u00a0 \u00a0 constructor(){\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 super();\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 this.dbusername =\u00a0userSettings.username;\r\n\r\n\u00a0 \u00a0 }\r\n\r\n}\r\n\r\n<\/pre>\n
    Como voc\u00ea pode ver, o MainPageViewModel estende a classe Observable. Se voc\u00ea n\u00e3o estiver familiarizado com Observables, saiba que eles s\u00e3o basicamente objetos JavaScript que acionam uma notifica\u00e7\u00e3o se uma das propriedades for alterada. Voc\u00ea pode saber mais aqui<\/a><\/u>.<\/p>\n
    Nosso modelo de visualiza\u00e7\u00e3o tem duas propriedades: nome de usu\u00e1rio (que vinculamos ao nosso campo de texto) e nome de usu\u00e1rio (que vinculamos ao nosso r\u00f3tulo). Sempre que criamos uma nova inst\u00e2ncia de nossa classe, atribu\u00edmos ao dbusername qualquer valor presente em nossa inst\u00e2ncia userSettings, que, por sua vez, vai e l\u00ea os dados em nosso banco de dados (lembra-se do m\u00e9todo get username() getter?).<\/p>\n
    export\u00a0function\u00a0navigatingTo(args:\u00a0EventData)\u00a0{\r\n\r\n\u00a0 \u00a0 let page =\u00a0<Page>args.object;\r\n\r\n\u00a0 \u00a0 mainPageViewModel =\u00a0new\u00a0MainPageViewModel();\r\n\r\n\u00a0 \u00a0 page.bindingContext =\u00a0mainPageViewModel;\r\n\r\n}<\/pre>\n
    Essa fun\u00e7\u00e3o \u00e9 chamada sempre que navegamos em nossa p\u00e1gina. Instanciamos nossa classe MainPageViewModel e a atribu\u00edmos \u00e0 vari\u00e1vel mainPageViewModel e a vinculamos \u00e0 nossa p\u00e1gina. De forma simples e direta.<\/p>\n
    Por \u00faltimo, mas n\u00e3o menos importante, definimos o comportamento para o clique do bot\u00e3o:<\/p>\n
    export\u00a0function\u00a0onTap(){\r\n\r\n\u00a0 \u00a0 userSettings.username =\u00a0mainPageViewModel.username;\r\n\r\n\u00a0 \u00a0 mainPageViewModel.set(\"dbusername\",userSettings.username);\r\n\r\n}<\/pre>\n
    Mais uma vez, \u00e9 muito simples: Gravamos no banco de dados o valor que o campo de texto cont\u00e9m (mainPageViewModel.username est\u00e1 vinculado ao campo de texto) e, em seguida, atualizamos o valor de dbusername para atualizar o r\u00f3tulo. Uma imagem vale mais que mil palavras, portanto, aqui vai um GIF!<\/p>\n
    \"\"<\/p>\n
    Esta postagem faz parte do Programa de Reda\u00e7\u00e3o da Comunidade Couchbase<\/em><\/a><\/p>","protected":false},"excerpt":{"rendered":"
    O Couchbase \u00e9 uma \u00f3tima ferramenta para manter os dados dentro do nosso aplicativo. Se voc\u00ea nunca ouviu falar dele, trata-se de um armazenamento de objetos de documentos que permite salvar seus dados.<\/p>\n
    Se voc\u00ea estiver usando NativeScript-Angular, j\u00e1 existem alguns tutoriais excelentes sobre como come\u00e7ar e alguns recursos mais avan\u00e7ados. Neste artigo, vamos nos concentrar no NativeScript com TypeScript.<\/p>","protected":false},"author":53,"featured_media":13873,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[1814,1821,1816,1819],"tags":[1589],"ppma_author":[9026],"class_list":["post-3673","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-application-design","category-couchbase-architecture","category-couchbase-server","category-data-modeling","tag-nativescript"],"acf":[],"yoast_head":"\nPersist and Abstract Data in a Nativescript Typescript Application - The Couchbase Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.couchbase.com\/blog\/pt\/persist-abstract-data-nativescript-typescript-application\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Persist and Abstract Data in a Nativescript Typescript Application\" \/>\n<meta property=\"og:description\" content=\"Couchbase is a great tool to persist data inside our app. If you haven\u2019t heard of it, it\u2019s a document object storage that allows you to save your data.  If you are using NativeScript-Angular, there are already some great tutorials on how to get started and some more advanced features. In this article we\u2019ll focus on NativeScript with TypeScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.couchbase.com\/blog\/pt\/persist-abstract-data-nativescript-typescript-application\/\" \/>\n<meta property=\"og:site_name\" content=\"The Couchbase Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-06-05T09:03:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-19T09:15:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2017\/06\/AaronUllal-300x200.png\" \/>\n<meta name=\"author\" content=\"Laura Czajkowski, Developer Community Manager, Couchbase\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Laura Czajkowski, Developer Community Manager, Couchbase\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/persist-abstract-data-nativescript-typescript-application\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/persist-abstract-data-nativescript-typescript-application\/\"},\"author\":{\"name\":\"Laura Czajkowski, Developer Community Manager, Couchbase\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/5f1a0ece4e644bc8c037686fbc8f3220\"},\"headline\":\"Persist and Abstract Data in a Nativescript Typescript Application\",\"datePublished\":\"2017-06-05T09:03:15+00:00\",\"dateModified\":\"2023-06-19T09:15:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/persist-abstract-data-nativescript-typescript-application\/\"},\"wordCount\":1443,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/persist-abstract-data-nativescript-typescript-application\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"keywords\":[\"nativescript\"],\"articleSection\":[\"Application Design\",\"Couchbase Architecture\",\"Couchbase Server\",\"Data Modeling\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.couchbase.com\/blog\/persist-abstract-data-nativescript-typescript-application\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/persist-abstract-data-nativescript-typescript-application\/\",\"url\":\"https:\/\/www.couchbase.com\/blog\/persist-abstract-data-nativescript-typescript-application\/\",\"name\":\"Persist and Abstract Data in a Nativescript Typescript Application - The Couchbase Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/persist-abstract-data-nativescript-typescript-application\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/persist-abstract-data-nativescript-typescript-application\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"datePublished\":\"2017-06-05T09:03:15+00:00\",\"dateModified\":\"2023-06-19T09:15:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/persist-abstract-data-nativescript-typescript-application\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.couchbase.com\/blog\/persist-abstract-data-nativescript-typescript-application\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/persist-abstract-data-nativescript-typescript-application\/#primaryimage\",\"url\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"contentUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"width\":1800,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/persist-abstract-data-nativescript-typescript-application\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.couchbase.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Persist and Abstract Data in a Nativescript Typescript Application\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#website\",\"url\":\"https:\/\/www.couchbase.com\/blog\/\",\"name\":\"The Couchbase Blog\",\"description\":\"Couchbase, the NoSQL Database\",\"publisher\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.couchbase.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\",\"name\":\"The Couchbase Blog\",\"url\":\"https:\/\/www.couchbase.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png\",\"contentUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png\",\"width\":218,\"height\":34,\"caption\":\"The Couchbase Blog\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/5f1a0ece4e644bc8c037686fbc8f3220\",\"name\":\"Laura Czajkowski, Developer Community Manager, Couchbase\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/image\/9deb07d5daaa00220534c31768bc4409\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bc8eebaf25cbe39bc12fd7b1ef92550becc3953ab877a3f0285a59ec2d30b754?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bc8eebaf25cbe39bc12fd7b1ef92550becc3953ab877a3f0285a59ec2d30b754?s=96&d=mm&r=g\",\"caption\":\"Laura Czajkowski, Developer Community Manager, Couchbase\"},\"description\":\"Laura Czajkowski is the Snr. Developer Community Manager at Couchbase overseeing the community. She\u2019s responsible for our monthly developer newsletter.\",\"url\":\"https:\/\/www.couchbase.com\/blog\/pt\/author\/laura-czajkowski\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Persist and Abstract Data in a Nativescript Typescript Application - The Couchbase Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.couchbase.com\/blog\/pt\/persist-abstract-data-nativescript-typescript-application\/","og_locale":"pt_BR","og_type":"article","og_title":"Persist and Abstract Data in a Nativescript Typescript Application","og_description":"Couchbase is a great tool to persist data inside our app. If you haven\u2019t heard of it, it\u2019s a document object storage that allows you to save your data.  If you are using NativeScript-Angular, there are already some great tutorials on how to get started and some more advanced features. In this article we\u2019ll focus on NativeScript with TypeScript.","og_url":"https:\/\/www.couchbase.com\/blog\/pt\/persist-abstract-data-nativescript-typescript-application\/","og_site_name":"The Couchbase Blog","article_published_time":"2017-06-05T09:03:15+00:00","article_modified_time":"2023-06-19T09:15:21+00:00","og_image":[{"url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2017\/06\/AaronUllal-300x200.png","type":"","width":"","height":""}],"author":"Laura Czajkowski, Developer Community Manager, Couchbase","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Laura Czajkowski, Developer Community Manager, Couchbase","Est. reading time":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.couchbase.com\/blog\/persist-abstract-data-nativescript-typescript-application\/#article","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/persist-abstract-data-nativescript-typescript-application\/"},"author":{"name":"Laura Czajkowski, Developer Community Manager, Couchbase","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/5f1a0ece4e644bc8c037686fbc8f3220"},"headline":"Persist and Abstract Data in a Nativescript Typescript Application","datePublished":"2017-06-05T09:03:15+00:00","dateModified":"2023-06-19T09:15:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/persist-abstract-data-nativescript-typescript-application\/"},"wordCount":1443,"commentCount":1,"publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/persist-abstract-data-nativescript-typescript-application\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","keywords":["nativescript"],"articleSection":["Application Design","Couchbase Architecture","Couchbase Server","Data Modeling"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.couchbase.com\/blog\/persist-abstract-data-nativescript-typescript-application\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.couchbase.com\/blog\/persist-abstract-data-nativescript-typescript-application\/","url":"https:\/\/www.couchbase.com\/blog\/persist-abstract-data-nativescript-typescript-application\/","name":"Persist and Abstract Data in a Nativescript Typescript Application - The Couchbase Blog","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/persist-abstract-data-nativescript-typescript-application\/#primaryimage"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/persist-abstract-data-nativescript-typescript-application\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","datePublished":"2017-06-05T09:03:15+00:00","dateModified":"2023-06-19T09:15:21+00:00","breadcrumb":{"@id":"https:\/\/www.couchbase.com\/blog\/persist-abstract-data-nativescript-typescript-application\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.couchbase.com\/blog\/persist-abstract-data-nativescript-typescript-application\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.couchbase.com\/blog\/persist-abstract-data-nativescript-typescript-application\/#primaryimage","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","width":1800,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.couchbase.com\/blog\/persist-abstract-data-nativescript-typescript-application\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.couchbase.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Persist and Abstract Data in a Nativescript Typescript Application"}]},{"@type":"WebSite","@id":"https:\/\/www.couchbase.com\/blog\/#website","url":"https:\/\/www.couchbase.com\/blog\/","name":"Blog do Couchbase","description":"Couchbase, o banco de dados NoSQL","publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.couchbase.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/www.couchbase.com\/blog\/#organization","name":"Blog do Couchbase","url":"https:\/\/www.couchbase.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png","width":218,"height":34,"caption":"The Couchbase Blog"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/5f1a0ece4e644bc8c037686fbc8f3220","name":"Laura Czajkowski, gerente da comunidade de desenvolvedores, Couchbase","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/image\/9deb07d5daaa00220534c31768bc4409","url":"https:\/\/secure.gravatar.com\/avatar\/bc8eebaf25cbe39bc12fd7b1ef92550becc3953ab877a3f0285a59ec2d30b754?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bc8eebaf25cbe39bc12fd7b1ef92550becc3953ab877a3f0285a59ec2d30b754?s=96&d=mm&r=g","caption":"Laura Czajkowski, Developer Community Manager, Couchbase"},"description":"Laura Czajkowski \u00e9 a Snr. Developer Community Manager da Couchbase, supervisionando a comunidade. Ela \u00e9 respons\u00e1vel pelo nosso boletim informativo mensal para desenvolvedores.","url":"https:\/\/www.couchbase.com\/blog\/pt\/author\/laura-czajkowski\/"}]}},"authors":[{"term_id":9026,"user_id":53,"is_guest":0,"slug":"laura-czajkowski","display_name":"Laura Czajkowski, Developer Community Manager, Couchbase","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/bc8eebaf25cbe39bc12fd7b1ef92550becc3953ab877a3f0285a59ec2d30b754?s=96&d=mm&r=g","author_category":"","last_name":"Czajkowski","first_name":"Laura","job_title":"","user_url":"","description":"Laura Czajkowski \u00e9 a Snr. Developer Community Manager da Couchbase, supervisionando a comunidade. Ela \u00e9 respons\u00e1vel pelo nosso boletim informativo mensal para desenvolvedores."}],"_links":{"self":[{"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/posts\/3673","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/users\/53"}],"replies":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/comments?post=3673"}],"version-history":[{"count":0,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/posts\/3673\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/media\/13873"}],"wp:attachment":[{"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/media?parent=3673"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/categories?post=3673"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/tags?post=3673"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/ppma_author?post=3673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}