Para começar a desenvolver com WINDEV Mobile para uma plataforma iOS, vamos criar um primeiro projeto. Este projeto conterá uma janela usada para exibir uma mensagem.

Este primeiro exemplo apresentará os principais conceitos de desenvolvimento para iOS com WINDEV Mobile.

Antes de criar nosso primeiro projeto para iOS, o computador de desenvolvimento deve ser configurado.

Configuração necessária para iOS

Para desenvolver um aplicativo WINDEV Mobile para iPhone / iPad, você precisa de:

1 PC
1 Mac
1 iPhone e / ou iPad (opcional)

Por que um PC?
WINDEV Mobile 25 é um aplicativo do Windows que roda no Windows Vista, 7, 8, 10.
O aplicativo será criado no PC antes de ser compilado no Mac (projeto, análise, windows, etc.).
Você não precisa instalar nenhuma ferramenta Mac / Apple.

Por que um Mac?
Um Mac é necessário porque o projeto gerado no PC deve ser compilado em um compilador específico para gerar aplicativos iOS. A versão mínima do sistema operacional necessária é MacOs Catalina.
Xcode é o compilador Mac para gerar programas que rodam no iOS (ou seja, no iPhone e iPad).
A versão mínima recomendada do Xcode é a versão 11.
Consulte Compilar um projeto WINDEV Mobile no Xcode para obter mais detalhes (endereços de download, ...).

Meu primeiro projeto

Criando o projeto

Agora vamos criar nosso primeiro projeto para iOS.


	Responda	Um projeto corrigido está disponível. Para abrir este projeto, na página inicial do WINDEV Mobile (Ctrl + <), clique em "Tutorial" e selecione "Meu projeto iOS (Resposta)".

Para criar um projeto:

Inicie o WINDEV Mobile 25 se necessário.
Exiba a página inicial do WINDEV Mobile se necessário (Ctrl + <).
Na página inicial, clique em "Criar um projeto" e depois em "Aplicativo Android ou iOS".
O assistente de criação de projeto é iniciado. As diferentes etapas do assistente ajudam você a criar seu projeto. As informações especificadas neste assistente podem ser modificadas posteriormente.
Observação
Dica: Outro método para criar um projeto:
Clique entre os botões de acesso rápido do menu WINDEV Mobile.
A janela de criação do elemento aparecerá: clique em "Projeto".
A primeira etapa do assistente permite definir a plataforma de execução do projeto:
No nosso caso, selecione "Somente iOS" e vá para a próxima etapa do assistente.
O assistente propõe a criação de um projeto em branco ou baseado em um exemplo. Selecione "Criar um projeto em branco" e vá para a próxima etapa

O assistente se propõe a escolher o tipo de dispositivos afetados pelo projeto:

Gere um aplicativo para todos os iPhones e iPads.
Gere um aplicativo para todos os iPhones.
Gere um aplicativo para todos os iPads.

Gere um aplicativo para um dispositivo específico.


	Observação	Se o aplicativo se destina a operar em vários dispositivos iOS (telefones com diferentes tamanhos ou com diferentes resoluções, por exemplo), recomendamos que você use uma das seguintes opções; "Gere um aplicativo para todos os iPhones e iPads", "Gerar um aplicativo para todos os iPhones". Neste caso, WINDEV Mobile propõe a menor resolução para criar as janelas da aplicação. O uso de âncoras (consulte a Lição 3.2 Interface (IU) e a Lição 5.2 Desenvolvimento do aplicativo ) permitirá que o aplicativo opere em todos os dispositivos.

Para este exemplo, selecione "Gerar um aplicativo para todos os iPhones" e vá para a próxima etapa.
O assistente propõe digitar o nome do projeto, sua localização e sua descrição.
No nosso caso, este projeto será denominado "My_iOS_Project". WINDEV Mobile se propõe a criar este projeto no diretório "\ My Mobile projects \ My_iOS_Project". Você pode manter este local ou modificá-lo através [...] do botão.
Vá para a próxima etapa (botão "Avançar").
Na seção esquerda do assistente, clique em "Diretrizes". Esta etapa é usada para definir o estilo do código. Não modifique as opções sugeridas. Vá para a próxima etapa.
Esta etapa é usada para definir o livro de estilos do aplicativo. Vamos escolher "Ninja".
As outras etapas do assistente não são importantes para nosso primeiro projeto, então clique em "Concluir". O projeto é criado automaticamente.
A janela de criação de elemento é exibida. Esta janela é usada para criar todos os elementos que podem ser associados a um projeto.

Minha primeira janela

visão global

A primeira janela que criaremos permite ao usuário exibir uma mensagem de boas-vindas através do botão "Exibir".

Você pode achar que isso é muito básico, mas recomendamos que você crie esta janela. Você pode se surpreender com o quão intuitivo e fácil é usar o editor do WINDEV Mobile. Além disso, esta janela permitirá que você descubra conceitos que são fundamentais para o resto deste tutorial e veja todo o processo de desenvolvimento de um aplicativo iOS com WINDEV Mobile.

Criando a janela

Para criar a janela:

Na janela de criação de um novo elemento, clique em "Janela" e depois em "Janela".


	Observação	Conforme um novo projeto é criado, a janela para criação de um novo elemento é exibida automaticamente. Para exibir a janela de criação de um novo elemento, basta clicar entre os botões de acesso rápido do WINDEV Mobile:

O assistente de criação de janela é iniciado.

Na lista de janelas propostas, selecione "Em branco". O modelo de skin usado é exibido na parte inferior direita do assistente. "Ninja", o modelo de skin que foi selecionado ao criar o projeto, é selecionado por padrão. Você pode escolher outro modelo de skin proposto na lista.


	Observação	Os modelos de skin permitem que você crie rapidamente interfaces excelentes. Um modelo de capa define o estilo da janela, bem como o estilo de todos os controles que serão usados nesta janela. Assim, não há risco de obter uma interface feia.

Validar. A janela é criada automaticamente no editor. A janela para salvar um elemento é exibida. Esta janela para salvar mostra:
- o título do elemento. Para uma janela, este título será exibido na Barra de ação da janela.
- o nome do elemento que corresponde ao nome da janela. Este nome será usado na programação.
- a localização do elemento. Esta localização corresponde ao diretório no qual o arquivo físico correspondente ao elemento é salvo. A janela é um arquivo "WDW", salvo no diretório do projeto.

Especifique o título do elemento: "Bem-vindo". O nome do elemento é proposto automaticamente: "WIN_Welcome".


	Observação	Vejamos o nome da janela proposto pelo WINDEV Mobile: este nome começa com as letras "WIN_". Este prefixo é adicionado automaticamente porque o projeto usa um estilo de código. O estilo de código é usado para definir um prefixo para cada tipo de objeto, permitindo que você identifique rapidamente o elemento: uma janela começa com "WIN_", um botão começa com "BTN_", etc. Se você não quiser usar este estilo de código, você pode simplesmente desativá-lo: no painel "Projeto", no grupo "Outras ações", expanda "Estilo de código" e desmarque "Usar estilo de código".

Salve a janela clicando em "OK".

Exibindo uma mensagem

Agora você vai criar um controle de botão usado para exibir uma mensagem.

Para criar o controle de botão:
1. No painel "Criação", no grupo "Controles usuais", clique em . O controle aparece no modo de criação sob o ponteiro do mouse.
2. Mova o mouse em direção à posição onde o controle será criado na janela (no topo da janela, por exemplo). Para soltar o controle na janela, basta clicar novamente.
3. Clique com o botão direito no controle que acabou de ser criado. O menu pop-up de controle é exibido. Selecione "Descrição" neste menu pop-up. A janela de descrição do controle de botão é exibida.

Modifique as características de controle inserindo as seguintes informações:
1. Este controle é denominado: "BTN_Display".
2. A legenda do controle é: "Display".


	Observação	Para modificar o nome e a legenda do controle Button, usamos a janela de descrição do controle (também chamada de "janela de 7 guias"). O nome do controle e a legenda também podem ser modificados na janela que está sendo editada: Clique no controle para selecioná-lo. Pressione a tecla Enter ou Espaço: a legenda se torna editável. Digite a nova legenda e valide.

Valide a janela de descrição do controle (botão "OK"). A nova legenda de controle aparece no editor de janela.

Vamos mostrar uma mensagem em uma caixa de diálogo (uma pequena janela proposta pelo sistema). Para fazer isso, usaremos nossa primeira função WLanguage: Info .


	Observação	A linguagem de programação fornecida com WINDEV Mobile é denominada WLanguage. É uma linguagem de 5ª geração (5GL) que inclui comandos altamente sofisticados.

Selecione o controle, se necessário.
Observações:
- Quando o controle é selecionado, várias alças aparecem ao redor do controle.
- Para selecionar um controle, basta clicar nele.
Abra o menu pop-up do controle (clique com o botão direito no controle).

Selecione "Código". Esta opção abre o editor de código do WINDEV Mobile, no qual todas as instruções WLanguage podem ser digitadas.


	Observação	O editor de código propõe eventos diferentes para cada tipo de controle. Estes são os eventos relacionados ao controle. Portanto, dois eventos são exibidos para o controle "Botão": Inicializando, execute ao exibir a janela. Clique, execute quando o usuário clicar no controle. Observação: eventos adicionais podem ser adicionados, se necessário.

Escreva o seguinte código no evento "Click" do controle "BTN_Display":
Informações ( "Olá" )

Nota sobre a entrada assistida : Assim que os primeiros dois caracteres são digitados, o WINDEV Mobile propõe todas as palavras do vocabulário WLanguage que contenham esses caracteres. O desenvolvimento assistido é um recurso muito poderoso. Chega de erros ao inserir o nome de um elemento: os erros de sintaxe são reduzidos. Basta selecionar a palavra desejada e pressionar Enter para validar. Você pode se concentrar no algoritmo.


	Observação	Ao digitar este código WLanguage no editor de código, você provavelmente notou que os diferentes elementos usam cores diferentes. Isso é chamado de realce de sintaxe. O editor de código permite que você identifique facilmente os diferentes elementos manipulados pelo código: as funções WLanguage são coloridas em azul, as cadeias de caracteres (entre aspas) são coloridas em roxo, os nomes dos controles são coloridos em ciano. Estas cores podem ser modificadas elemento a elemento nas opções do editor de código (no painel "Home", no grupo "Ambiente", expanda "Opções" e selecione "Opções do editor de código").

Info exibe a mensagem passada como parâmetro.

Salve as modificações clicando no botão de acesso rápido (à esquerda da faixa de opções) ou pressionando Ctrl + S.

Feche o editor de código (cruze no canto superior direito do editor de código). A janela reaparece.

Primeiro teste

Para um aplicativo iOS, WINDEV Mobile oferece vários tipos de testes:

Teste de projeto ou janela no computador de desenvolvimento usando o modo de simulação . Este teste simula um dispositivo iOS no computador de desenvolvimento. Este teste é útil quando o desenvolvedor não possui um Mac ou um dispositivo iOS para compilar o aplicativo. No entanto, este teste não permite que você use os componentes de hardware do dispositivo (GPS, SMS, câmera, etc.).
Teste do projeto diretamente no dispositivo . Este teste é útil quando o desenvolvedor não possui um Mac para compilar o aplicativo. Todos os componentes do dispositivo são acessíveis.

Vamos agora executar o teste de janela no modo de simulação.
1. Clique entre os botões de acesso rápido (ou pressione F9).
2. Valide (se necessário) a mensagem informativa sobre o modo simulador.
3. A janela criada é iniciada em execução, em um shell correspondente ao dispositivo selecionado (iPad ou iPhone).
4. Clique no botão "Exibir".
5. Valide a janela do sistema que é exibida.
6. Clique em "x" no menu acima da caixa do simulador para fechar a janela.
7. O editor WINDEV Mobile aparece novamente.

Você tem um iPhone? Agora, vamos testar o projeto diretamente no dispositivo.

Em primeiro lugar, certifique-se de que todas as seguintes condições sejam atendidas:
- o iPhone / iPad e a estação de trabalho de desenvolvimento devem estar na mesma rede (Wifi, por exemplo).
- O WMDev deve ser baixado para o iPhone / iPad ( https://itunes.apple.com/us/app/WMDev/id1437792304 ).
- as seguintes portas de rede devem estar abertas:
  - 64000 (64000 a 64005 se vários WINDEV Mobiles estiverem sendo executados simultaneamente).
  - 27280
  Se um firewall for usado, ele deve ser configurado para permitir o uso dessas portas.

Entre os botões de acesso rápido, selecione " Debug on new iPhone / iPad". A janela para conectar a um dispositivo iOS é exibida. Esta janela contém um código QR específico.
1. Inicie o WMDev no dispositivo móvel (iPhone ou iPad).
  - Clique em “+” e depois no botão que exibe um código de barras.
  - Digitalize o código de barras exibido em WINDEV Mobile na janela de conexão de um dispositivo iOS.
2. WINDEV Mobile propõe a seleção da primeira janela de projeto. Em nosso exemplo, selecione a janela "WIN_Welcome" e valide (botão "OK").
3. O aplicativo móvel é iniciado no dispositivo iOS.

Primeira implantação no dispositivo

Princípio

Para executar o aplicativo em modo autônomo no dispositivo, você deve:

Gere o aplicativo iOS (ou projeto Xcode) no WINDEV Mobile.
Transfira o projeto Xcode gerado para o Mac para compilá-lo.
Compile o projeto no Xcode para gerar o programa.
Em seguida, o programa pode ser instalado no dispositivo conectado ou iniciado no emulador Xcode. Ele será executado no modo autônomo.

Vamos dar uma olhada nessas diferentes etapas.

Implementação

Para gerar o aplicativo iOS:

No painel "Projeto", no grupo "Geração", clique em "Gerar" (você também pode clicar entre os botões de acesso rápido).
O assistente para gerar um aplicativo para iPhone / iPad é iniciado.

A primeira etapa do assistente permite que você:

definir o nome do aplicativo, a empresa e os direitos autorais.

insira o identificador do pacote.


	Observação	Este identificador é o identificador exclusivo de seu aplicativo para a Apple. Ele é definido e registrado na conta de desenvolvedor da Apple. Esse identificador permitirá que você registre seu aplicativo para que possa ser testado e implantado. Por padrão, o WINDEV Mobile propõe automaticamente um identificador que respeita o padrão de desenvolvimento da Apple. Este identificador pode ser modificado.

digite o endereço de e-mail que será usado por padrão para enviar os relatórios de erros gerados pelo aplicativo.

Vá para a próxima etapa. Você tem a capacidade de especificar o caminho de ícones de aplicativos diferentes. Vários ícones podem ser fornecidos:
- ícones para iPad e iPad Retina (apenas se o aplicativo propuser janelas para iPad),
- ícones para todos os modelos de iPhone (por exemplo, iPhone 4S e iPhone 6 Plus têm resoluções diferentes).
Vá para a próxima etapa.
Especifique as características da tela inicial.
Vá para a próxima etapa. Especifique o número da versão do aplicativo gerado.
Vá para a próxima etapa. Esta etapa é usada para incluir arquivos específicos (arquivos de dados, imagens, ...). Esta possibilidade não será usada em nosso exemplo. Mantenha as opções padrão.
Vá para a próxima etapa. Esta etapa é usada para especificar:
- se o aplicativo pode ser redimensionado ou não (Split View). A opção permite que o usuário final exiba duas janelas de dois aplicativos diferentes lado a lado em alguns dispositivos.
- se os arquivos podem ser compartilhados com o iTunes. Se esta opção estiver marcada, você poderá recuperar os arquivos do aplicativo no Mac durante a sincronização. Por exemplo, se os arquivos de dados foram fornecidos com o aplicativo, o aplicativo iTunes permitirá que você recupere esses arquivos.
- a versão mínima do iOS necessária para executar o aplicativo.
Vá para a próxima etapa. Esta etapa é usada para definir as opções de assinatura.
Consulte Assinatura de aplicativos iOS para obter mais detalhes.
Valide o assistente ("Concluir"). A geração é realizada na pasta EXE do diretório do projeto. O diretório que contém o código-fonte que será usado no Mac é denominado "Project_name.xcode.gen" ("My_iOS_Project.xcode.gen" em nosso exemplo). Este é o diretório que deve ser copiado para o Mac. Clique no botão "Abrir o diretório de geração".

As outras operações devem ser realizadas no Mac. Você deve:

Transfira o projeto WINDEV Mobile para o Mac.
Compile o projeto no Xcode.

Transferindo o projeto WINDEV Mobile para o Mac

Para transferir o projeto WINDEV Mobile para o MAC:
1. Copie toda a pasta gerada no diretório EXE para uma mídia externa (chave USB, disco rígido externo, diretório compartilhado com MAC na rede). Este diretório é denominado <Nome do projeto> .xcode.gen.
2. Cole esta pasta no MAC que irá compilar o aplicativo.
3. Abra a pasta no MAC e abra o arquivo chamado "Project_name.xcodeproj".
4. O projeto é aberto no Xcode.

Compilando o projeto no Xcode

WINDEV Mobile gera automaticamente um projeto Xcode para suas compilações iOS. Para simplificar a implementação de aplicativos, WINDEV Mobile gera um “Esquema” para Xcode.

Para compilar o projeto no Xcode:
1. Na lista suspensa encontrada no canto superior esquerdo, selecione as opções de compilação. Selecione o esquema (correspondente ao seu aplicativo) e o alvo de compilação (dispositivo conectado atualmente ou um simulador).
2. Para iniciar a compilação, selecione “Produto .. Limpar” e depois “Produto .. Construir”.
3. Um relatório de status de compilação aparece na parte superior ("Êxito" ou o número de avisos e erros). Você pode clicar nesses símbolos para ver a lista de erros / avisos.
4. Assim que o programa for compilado sem erros, pode-se iniciar a simulação (“Produto .. Executar”).
  - Se o destino da compilação for o simulador, o aplicativo será iniciado na janela do simulador.
  - Se o destino da compilação for o dispositivo conectado, o aplicativo será iniciado no dispositivo.

Em seguida, você pode executar o teste de seu aplicativo no iPhone ou iPad.

Páginas

quarta-feira, 18 de novembro de 2020

DICAS 3184 -WINDEV MOBILE TUTORIAL 8 - 01-12-2020-08_00Hrs- Lição 3.1. Meu primeiro projeto iOS

https://youtu.be/8a8DC8srS9k

Esse Video Ao Vivo vai estrear as 08:00 do dia 01/12/2020-

Nenhum comentário:

Postar um comentário

Teste

Marcadores


	Observação	Dica: Outro método para criar um projeto: Clique entre os botões de acesso rápido do menu WINDEV Mobile. A janela de criação do elemento aparecerá: clique em "Projeto".