Liberte seu desenvolvedor de aplicativos internos Parte 28: Gerenciando as configurações do usuário

Você tem uma ideia para um aplicativo, mas não tem o conhecimento de programação para começar a construí-lo? Nesta série semanal de blogs, mostrarei a você, que não é programador, passo a passo o processo de criação de aplicativos para iPhone, iPod touch e iPad. Junte-se a mim a cada semana nesta aventura e você experimentará como pode ser divertido transformar suas ideias em realidade! Esta é a parte 28 da série. Se você está apenas começando, confira o início da série aqui .

Quase todos os aplicativos precisam armazenar e recuperar configurações específicas do usuário. As configurações do usuário incluem informações como nome, ID, endereço de e-mail, senha, pontuação máxima (para jogos), preferências e assim por diante.

Onde gerenciar as configurações do usuário?

Uma das primeiras perguntas que você precisa se fazer é 'onde quero que meus usuários gerenciem as configurações do aplicativo?' Os usuários geralmente podem acessar as configurações em um dos dois lugares:

1. Diretamente no aplicativo
2. Através do iOS integrado Definições aplicativo ( figura 1 )

Figura 1 - Você pode optar por editar as preferências do seu aplicativo no aplicativo Configurações integrado.

Normalmente, se você tiver configurações que os usuários alteram com frequência, permita que eles as editem diretamente no aplicativo. Isso ajuda a evitar a irritação do usuário ter que sair constantemente do seu aplicativo, alterar a preferência no Definições app e, em seguida, volte ao seu aplicativo novamente.

A Apple tem uma ótima documentação que mostra como gerenciar preferências por meio do Definições aplicativo em seu Guia de programação de preferências e configurações , que eu recomendo que você confira se quiser seguir esse caminho.

No entanto, como esse caminho já está bem documentado pela Apple, neste post vou mostrar como usar um Definições cena no Revisão do iApps app para permitir que os usuários gerenciem as configurações diretamente no aplicativo. Além disso, usaremos os Core Data para armazenar as várias configurações do usuário. Por enquanto, vamos ignorar o fato de que as informações de senha que estamos armazenando e recuperando devem ser criptografadas (discutiremos a criptografia em um post futuro).

Nós vamos continuar de onde paramos no meu postagem anterior onde demonstrei como realizar a edição in-loco na visualização de tabela. Você pode obter a versão mais recente do Revisão do iApps projeto de esse link . Como sempre, recomendo que você mesmo execute as instruções passo a passo para obter a melhor experiência de aprendizado, mas se ficar preso ao longo do caminho, poderá obter o projeto completo em esse link .

Examinando com as classes User e UserEntity

Assim como com as outras entidades que recuperamos usando Core Data, criei um objeto de controlador de negócios User que pode recuperar o UserEntity que contém as configurações do usuário do banco de dados.

Vamos dar uma olhada no Do utilizador e UserEntity Aulas.

1. Abra o Revisão do iApps projeto em Xcode.

1. No Project Navigator, clique no botão UserEntity.h arquivo para selecioná-lo e você poderá ver as propriedades mostradas em Figura 2 .

Figura 2 - UserEntity propriedades

Observe que, além do o email e senha propriedades, também primeiro nome , sobrenome , e ID do usuário propriedades. Não implementaremos essas outras propriedades agora, mas queria que você visse que elas existem.

1. Agora volte para o Project Navigator, selecione o User.h arquivo e você será capaz de ver o getUser declaração de método mostrada em Figura 3 .

Figura 3 - A User.h Arquivo

Observe o getUser método retorna apenas um único UserEntity objeto em vez de um NSMutableArray . Isso porque há apenas um registro de usuário para este aplicativo.

1. Agora clique no User.m arquivo no Navegador de Projetos. Na parte inferior do arquivo de código você pode ver o getUser implementação do método mostrado em Figura 4 .

Figura 4 - A getUser método

Como você pode ver, ainda estamos usando o getAllEntities método que usamos em outros objetos de negócios neste aplicativo. Mas o código então verifica se algum UserEntity objetos são retornados deste método ( userList.count > 0 ) e, em caso afirmativo, retorna o primeiro registro na matriz. Caso contrário, o método retorna nada (nada). Se você já se perguntou como criar um método que retorna um único registro do Core Data, é isso!

Implementando as classes User e UserEntity na cena de configurações

Agora que sabemos mais sobre o Do utilizador e UserEntity classes, vamos usá-los no Definições cena.

1. No Project Navigator, selecione o SettingsViewController.h Arquivo.

1. Adicione o importar declaração e declaração de propriedade mostrada em Figura 5 .

Figura 5 - Adicione o importar declaração e do utilizador declaração de propriedade

1. No Project Navigator, selecione o SettingsViewController.m arquivo e adicione o importar instruções e declaração de variável de instância mostrada em Figura 6 (não se esqueça de adicionar as chaves ao redor da variável de instância).

Figura 6 - Adicione o importar declarações e userEntity variável de instância.

1. No viewDidLoad método, adicione o código mostrado em Figura 7 .

Figura 7 - Adicione este código ao viewDidLoad método.

Este código cria uma instância do Do utilizador classe e armazena-o no do utilizador propriedade. Em seguida, ele chama o objeto do usuário getUser método e armazena o resultado UserEntity objeto no userEntity variável de instância. Por fim, ele pega o o email e senha valores das propriedades do objeto e os armazena nos campos de texto de e-mail e senha.

Adicionando o modo de edição à cena de configurações

Como mencionei no meu post anterior, do jeito que está agora é muito fácil para o usuário alterar acidentalmente seu endereço de e-mail e senha. Faz sentido adicionar um Editar botão que o usuário deve clicar antes de poder alterar essas configurações. Vamos fazer isso agora.

1. No Project Navigator, selecione o PrincipalStoryboard.storyboard arquivo e, em seguida, vá até o Definições cena.

1. Arraste um Item de botão da barra do Pesquisador de objetos no canto inferior direito da janela do Xcode e arraste-o para o lado direito da Definições barra de navegação da cena até ver o retângulo arredondado aparecer ( Figura 8 ) e solte o botão do mouse. Isso adiciona o botão à barra de navegação.

Figura 8 - Adicionar um Item de botão da barra para o lado direito da barra de navegação.

1. Com o item do botão da barra ainda selecionado, vá para o Attributes Inspector (terceiro botão da direita na barra de ferramentas do Inspector) e defina o Título para Editar . O botão agora deve se parecer com Figura 9 .

Figura 9 - A Editar botão

1. Para evitar que o usuário altere o endereço de e-mail e a senha antes de clicar no botão Editar, selecione o campo de texto na Endereço de email célula e desmarque a Interação do usuário ativada caixa de seleção na parte inferior do Inspetor de atributos. Depois, faça o mesmo com o campo de texto na Senha célula.

1. Como não queremos que o usuário clique no Conecte-se a menos que haja credenciais válidas de endereço de e-mail e senha, clique no botão Conecte-se botão na superfície de design e, em seguida, vá para o Inspetor de atributos e desmarque o Habilitado botão. Isso torna o texto do botão cinza como mostrado na Figura 10 .

Figura 10 - A Conecte-se botão está desabilitado.

1. Agora precisamos criar um método de ação que seja acionado quando o usuário tocar no Editar botão. Para isso, clique no botão Editar botão no Definições cena para selecioná-la. Em seguida, exiba o Assistant Editor clicando no botão central no grupo de botões Editor no canto superior direito da janela do Xcode. Isso deve exibir o SettingsViewController.h Arquivo. Caso contrário, selecione o arquivo na barra de salto do Editor Assistente.

1. Em seguida, vá para o Connections Inspector (o botão à direita na barra de ferramentas Inspectors) e clique na conexão bem à direita do seletor ação. Arraste o mouse para baixo na SettingsViewController.h arquivo acima do fechamento @fim declaração até que você veja o Inserir ação pop-up como mostrado em Figura 11 .

Figura 11 - Crie um método de ação para o Editar botão.

1. No pop-up Criar Conexão, defina o Nome para editar Alternar e depois clique no Conectar botão. Isso adiciona um novo editar Alternar: método para o arquivo de cabeçalho como mostrado em Figura 12 .

Figura 12 - A editar Alternar: declaração de método

1. Antes de implementar o editar Alternar: método, vá para o Project Navigator e clique no botão SettingsViewController.m Arquivo. Perto do topo do arquivo de código, adicione o isEditMode variável de instância mostrada em Figura 13 .

Figura 13 - A isEditMode variável de instância

1. Agora adicione o código mostrado em Figura 14 para o editar Alternar: método.

Figura 14 - Adicionar código ao editar Alternar: método

Este código verifica primeiro se a cena está atualmente no modo de edição. Se for, nada acontece porque não temos nenhum código na primeira parte do E se declaração ainda. Se a cena não é no modo de edição, aqui estão os principais passos realizados por este código:

• Altera o texto do botão de Editar para Feito

• Oculta o botão padrão 'voltar' e exibe uma Cancelar botão em seu lugar

• Desativa o Conecte-se , Inscrever-se , e Comentários botões

• Habilita os campos de texto no Endereço de email e Senha células

• Define o foco para o Endereço de email campo de texto

• Define o isEditMode bandeira para SIM

Testando o botão Editar

Vamos fazer uma pausa na construção do aplicativo e testar o que fizemos até agora.

1. Clique no Xcode Corre botão, e quando o aplicativo aparecer no Simulador, clique no botão Configurações e comentários opção. Você deve ver a cena mostrada em Figura 15 .

Figura 15 - A Editar botão em tempo de execução

Observe o Editar botão no lado direito da barra de navegação e o botão Revisão do iApps botão 'voltar' no lado esquerdo. Se você tentar clicar no Endereço de email ou Senha campos de texto, não há resposta e o Conecte-se botão está desabilitado.

1. Clique no Editar botão e a cena deve mudar como mostrado em Figura 16 .

Figura 16 - A Definições cena no modo de edição

o Editar o texto do botão muda para Feito , a Revisão do iApps O texto do botão 'voltar' muda para Cancelar . Além disso, o Endereço de email campo de texto tem foco e agora pode ser editado conforme evidenciado pela aparência do teclado. Agradável!

1. Nós não adicionamos o Feito ainda a lógica do botão, então para fechar o aplicativo no Simulador, volte para o Xcode e clique no botão Pare botão.

Adicionando lógica ao botão Concluído

Em última análise, o Editar botão e Feito botão são um no mesmo. O texto do botão é simplesmente alterado com base se a cena está ou não no modo de edição. Então, para adicionar lógica que é acionada quando o usuário toca no Feito botão, precisamos adicionar código ao mesmo editar Alternar: método com o qual você trabalhou anteriormente.

1. Desta vez, adicione código à primeira parte do E se declaração como mostrado em Figura 17 (observe que você receberá temporariamente um erro na última linha de código até concluir a próxima etapa).

Figura 17 - Adicionar código ao E se declaração.

Aqui estão os principais passos executados por este código:

• Verifica se o UserEntity objeto existe (ele existirá se o registro do usuário já tiver sido criado. Caso contrário, um novo UserEntity objeto é criado.

• O texto de e-mail e senha é retirado dos campos de texto e armazenado nas propriedades do UserEntity objeto.

• Nas próximas três linhas de código, os valores temporários são armazenados no ID do usuário , primeiro nome , e sobrenome propriedades da entidade. Vamos alterar esse código posteriormente para adicionar essas informações, mas, por enquanto, vamos apenas definir os valores padrão (sinta-se à vontade para adicionar seu próprio nome em vez do meu!)

• A seguir, um salvarEntidades mensagem é enviada ao Do utilizador objeto de negócios. Isso salva o UserEntity ao banco de dados.

• o Conecte-se botão está habilitado

• UMA cancelarEditMode mensagem é enviada para a visualização. Você está recebendo um erro do compilador porque ainda não criamos esse método.

1. Agora adicione o cancelarEditMode método mostrado em Figura 18 .

Figura 18 - A cancelarEditMode método

Eu quebrei esse código em um método separado porque ele precisa ser reutilizado em outro lugar, como você verá daqui a pouco. Aqui estão os principais passos executados por este código:

• Muda o título do Feito botão para Editar e habilita o botão

• Esconde o Cancelar botão e exibe o padrão Revisão do iApps 'botão 'voltar

• Habilita o Inscrever-se e Comentários botões

• Desativa a interação do usuário nos campos de texto de e-mail e senha

• Conjuntos isEditMode para NÃO

Testando o botão Concluído

Agora vamos ver como o Feito a funcionalidade do botão funciona em tempo de execução.

1. Clique no Começar botão no Xcode e quando o aplicativo aparecer no Simulador, navegue até o Definições cena.

1. Clique no Editar botão para colocar a cena no modo de edição.

1. Digite um Endereço de email e pressione aba .

1. Introduzir um Senha . Conforme você digita a senha, observe que cada caractere é ocultado automaticamente após digitá-lo.

1. Clique no Feito botão e a aparência da cena deve mudar como mostrado em Figura 19 .

Figura 19 - Finalizado com o modo de edição

Como você pode ver, o teclado está oculto, o Feito botão muda de volta para um Editar botão e o Cancelar botão muda de volta para o Revisão do iApps botão. Neste ponto, você não pode clicar no Endereço de email ou Senha campos de texto, mas você pode clicar no Conecte-se botão (embora não faça nada agora).

1. Para provar a si mesmo que as configurações que você especificou foram realmente salvas no banco de dados, volte para o Xcode e clique no botão Pare botão e, em seguida, clique no botão Corre botão e navegue de volta para o Definições cena, onde você pode ver seu endereço de e-mail e senha. Quando você terminar de se maravilhar com sua obra, volte para o Xcode e clique no botão Pare botão novamente!

Habilitando e desabilitando o botão Concluído

Como está agora, assim que você clicar no Editar botão e a cena entra no modo de edição, você pode clicar imediatamente no Feito botão sem ter inserido um endereço de e-mail ou senha. Obviamente, isso não é desejável, então vamos corrigir esse problema.

1. Role até a parte inferior do SettingsViewController.m arquivo e adicione o isLoginReady método mostrado em Figura 20 .

Figura 20 - A isLoginReady método

Este código retorna SIM se houver texto em ambos os Endereço de email e Senha campos de texto. Esta não é uma verificação muito robusta. Normalmente, adicionamos um código que verifica um endereço de e-mail válido e adicionamos regras para senhas aceitáveis. Faremos isso em um post futuro, mas por enquanto, vamos apenas verificar se há algum caractere em ambos os campos de texto.

1. Agora precisamos criar um método de ação que possa ser chamado de ambos os campos de texto quando o usuário digitar um caractere. Para fazer isso, vá para o Project Navigator, selecione o PrincipalStoryboard.storyboard arquivo e clique na cena Configurações para selecioná-lo. Se o Editor Assistente ainda não estiver exibido, clique no botão central no grupo de botões Editor. Se o SettingsViewController.h arquivo não é exibido no Editor Assistente, vá para a barra de salto e selecione-o.

1. Clique no Endereço de email campo de texto para selecioná-lo e, em seguida, vá para o Inspetor de conexões (o botão na extremidade direita da barra de ferramentas do Inspetor). Clique na conexão bem à direita do Edição alterada evento e, em seguida, arraste para baixo no SettingsViewController.h arquivo logo acima do fechamento @fim declaração. Quando você vê o Inserir ação Aparecer ( Figura 21 ), solte o botão do mouse. O evento Editing Changed é acionado para um campo de texto sempre que o usuário adiciona ou exclui um caractere.

Figura 21 - Criar um novo método de ação para o Endereço de email campo de texto.

1. No pop-up Criar Conexão, defina o Nome do método de ação para setDoneEnabledValue e depois clique no Conectar botão. Isso adiciona uma declaração de método ao arquivo de cabeçalho.

1. Agora vamos conectar o Senha campo de texto para o mesmo método de ação. Na superfície de design, clique no botão Senha campo de texto para selecioná-lo. Vá para o Inspetor de Conexão e clique na conexão à direita do Edição alterada evento. Arraste o mouse para baixo para o setDoneEnabledValue método de ação e quando você vê o Ação de conexão popup aparecer, solte o botão do mouse.

1. Agora vamos implementar o novo setDoneEnabledValue método. Para fazer isso, vá para o Project Navigator e clique no botão SettingsViewController.m arquivo para selecioná-lo. Role até a parte inferior do arquivo de código e adicione o código mostrado em Figura 22 .

Figura 22 - Implementar o setDoneEnabledValue método.

Este código passa a isLoginReady mensagem para o controlador de exibição e armazena o valor booleano retornado no Feito propriedade habilitada do botão. Se os campos de texto de e-mail e senha estiverem preenchidos, o botão estará habilitado, caso contrário, estará desabilitado.

1. Para completar nossa lógica, precisamos do setDoneEnabledValue: método para disparar quando o usuário entra no modo de edição pela primeira vez ( Feito pode ser ativado/desativado com base no fato de um endereço de e-mail e senha já terem sido inseridos). Para fazer isso, adicione uma chamada ao setDoneEnabledValue: método para o editar Alternar: método como mostrado em Figura 23 .

Figura 23 - Adicionar uma chamada ao setDoneEnabledValue: método.

Adicionando lógica para o botão Cancelar

1. Role até a parte inferior do SettingsViewController.m arquivo e adicione o cancelar método mostrado em Figura 24 .

Figura 24 - A cancelar método

Este código executa as seguintes etapas principais:

• Restaura o endereço de e-mail e as senhas para seus valores originais

• Envia um cancelarEditMode mensagem para o controlador de exibição (eu disse que reutilizaríamos essa lógica!)

Normalmente conectamos um método a um botão usando o Connection Inspector como fizemos para o Editar / Feito botão. Como é que Cancelar botão sabe chamar esse método quando é tocado? Se você olhar para o código que adicionou ao editar Alternar: métodos senão declaração, você verá o código mostrado em Figura 25 .

Figura 25 - Cadastrando o cancelar método com o Cancelar botão

Este código cria o Cancelar botão. Observe o ação: valor do argumento é definido como @selector(cancelar) . Este é o código que informa ao Cancelar botão para chamar o cancelar método quando é tocado. Quando você compila um projeto no Xcode, os nomes de todos os métodos são convertidos em um identificador exclusivo. Em Objective-C, o @selector A diretiva obtém o id exclusivo do método especificado para que possa ser chamado posteriormente.

O Teste Final

Agora você está pronto para executar o teste final na funcionalidade do modo de edição do Definições cena.

1. No Xcode, clique no Corre botão. Quando o aplicativo aparecer no Simulador, navegue até o Definições cena.

1. Clique no Editar botão para colocar a cena no modo de edição.

1. Exclua todos os caracteres em qualquer Endereço de email ou o Senha campos de texto (ou ambos). o Feito botão deve ficar desabilitado. Digite caracteres nos campos de texto e no Feito botão deve ficar habilitado.

1. Clique no Cancelar botão e as informações que você excluiu devem ser restauradas.

Conclusão

Demorou um pouco de esforço, mas agora você tem uma cena de Configurações que permite editar as configurações diretamente em uma visualização de tabela. Ao longo do caminho, você aprendeu como criar um modo de edição para uma cena e como gerenciar os botões na barra de ferramentas de navegação. Não há muitas informações escritas sobre como executar essas tarefas na documentação da Apple ou em outros lugares da web, então você definitivamente deseja acompanhar este post para quando precisar no futuro!

< Próximo>>