Exercício: criar o aplicativo de tela da loja de conserto de bicicletas

  • 10 minutos

Neste exercício, você aplicará o que aprendeu para concluir o processo de criação de um aplicativo de tela com base no design criado na unidade Exercício: projetar um aplicativo de loja de consertos de bicicletas usando o Figma.

Cenário

Você deseja criar um aplicativo de tela para seus colegas com base em um design do Figma. O aplicativo permite que seus colegas registrem participantes em potencial para uma venda VIP e coletem as preferências dos participantes usando um tablet dedicado.

Você capturará as informações dos participantes em uma planilha do Microsoft Excel para que a equipe de marketing possa entrar em contato com os clientes antes e depois do evento.

Etapas de preparação

Siga as etapas na unidade Criar um aplicativo de tela em um design do Figma para usar o design de loja de consertos de bicicletas que você criou. Na etapa 11, você pode nomear o aplicativo Bicycle VIP Event.

Baixe o arquivo de planilha do Excel Bicycle VIP registration.xlsx. Esse arquivo serve como fonte de dados do aplicativo. Salve-o em um local do Microsoft OneDrive for Business ao qual você tenha acesso.

Captura de tela da planilha do Microsoft Excel chamada Bicycle V I P registration.

Exercício

Conclua as etapas a seguir para criar o aplicativo de tela que armazena registros na planilha Bicycle VIP registration:

  1. Conecte-se à fonte de dados e selecione Adicionar dados na seção Dados do painel esquerdo no estúdio de tela do Power Apps.

    Captura de tela do estúdio de tela do Power Apps. O foco está na opção Adicionar dados na seção Dados do painel de navegação esquerdo.

  2. Selecione Excel Online (Business) como fonte de dados.

    Captura de tela do estúdio de tela do Power Apps. O foco está na fonte de dados do Excel Online Business.

  3. Selecione Conectar.

    Captura de tela do estúdio de tela do Power Apps. O foco está na opção Conectar para a fonte de dados do Excel Online Business.

  4. Vá para o local da planilha Bicycle VIP registration que você salvou na seção Etapas de preparação e selecione a planilha.

    Captura de tela do estúdio de tela do Power Apps. O foco está no arquivo do Excel Bicycle V I P registration.

  5. Selecione Registrations como a tabela e selecione Conectar.

    Captura do estúdio de tela do Power Apps. O foco está na tabela Registrations e no botão Conectar.

  6. Selecione a opção Usar coluna exclusiva da tabela do Excel como um identificador para Registrations, selecione _PowerAppsId_ e Conectar.

    Captura de tela do estúdio de tela do Power Apps. O foco está na ID do Power Apps e na opção Usar coluna exclusiva da tabela do Excel.

  7. Para conectar o controle msft_Form à fonte de dados, atualize a propriedade DataSource para Registrations.

    Captura do estúdio de tela do Power Apps. O foco está em Registrations como a propriedade DataSource.

  8. Para garantir a identificação dos controles nas etapas a seguir, Renomeie o cartão de dados e os componentes de entrada.

    Captura do estúdio de tela do Power Apps. O foco está em Renomear para um controle de cartão de dados.

    O resultado deve ser semelhante à imagem a seguir.

    Captura do estúdio de tela do Power Apps. O foco está nos componentes renomeados.

  9. Para conectar os cartões de dados às colunas na tabela do Excel, forneça o nome da coluna para a propriedade DataField para cada controle de cartão de dados, incluindo as aspas.

    • PreferencesDC - "Preference"

    • PhoneDC - "Phone"

    • CustomerEmailDC - "Email"

    • CustomerNameDC - "Name"

    Captura do estúdio de tela do Power Apps. O foco está na propriedade DataField para PreferencesDC e no valor da propriedade Preference.

  10. Para inserir os valores do aplicativo na tabela do Excel, forneça uma propriedade de texto de controle de entrada para a propriedade Update para cada controle de cartão de dados.

    • PreferencesDC - PreferencesInput.SelectedText.Value

    • PhoneDC - PhoneInput.Text

    • CustomerEmailDC - CustomerEmailInput.Text

    • CustomerNameDC - CustomerNameInput.Text

    Captura do estúdio de tela do Power Apps. O foco está na propriedade Update para Preferences DC e no valor da propriedade PreferencesInput.SelectedText.Value.

  11. Para salvar os valores na planilha do Excel e redefinir o formulário do aplicativo de tela no modo de entrada de dados, defina a propriedade OnSelect do botão Enviar como SubmitForm(msft_Form); NewForm(msft_Form);.

    Captura do estúdio de tela do Power Apps. O foco está na propriedade OnSelect para msft_Button.

Agora você tem um aplicativo completo que permite o registro de clientes para a próxima venda VIP. Para testar o aplicativo, selecione os ícones Salvar e Reproduzir. Para compartilhar o aplicativo com seus colegas, selecione o ícone Compartilhar.

Captura do estúdio de tela do Power Apps. O foco está nos ícones Compartilhar, Reproduzir e Salvar.

O vídeo a seguir demonstra as etapas desta unidade.

Próximas etapas

Agora você aprendeu a criar um aplicativo de tela com base em um design do Figma. Esse aplicativo está conectado a uma fonte de dados, e você e seus colegas podem usá-lo para registrar informações e preferências do cliente para uma venda VIP. Em seguida, você pode validar o que aprendeu neste módulo.