Xamarin – Como consumir uma api local que roda no IIS Express no emulador

Xamarin – Como consumir uma api local que roda no IIS Express no emulador

Aprenda a consumir uma api local direto do emulador

Hoje venho trazer uma dica bem interessante para vocês, irei explicar como podemos rodar 2 projetos ao mesmo tempo, um que rodará nosso emulador e outro que rodará nossa api local diretamente no IIS Express usando de quebra o modo debug.

Tenho um projeto na seguinte estrutura abaixo:


Como podemos ver eu tenho uma pasta ClientSide onde fica todo o código dos meus apps e tenho uma pasta ServerSide que fica meu código que roda no servidor que no caso é uma Web Api.

Na pasta ClienteSide temos um projeto chamado NewPlayer do tipo Portable, é nele que eu crio minhas Views, ViewModels e etc.
Também é neste projeto que eu consumo minha API.

Para debugar meu aplicativo e minha WebApi ao mesmo tempo eu configuro meu Visual Studio para iniciar 2 projetos de uma vez, basta clicar com o botão direito na solução e ir em propriedades, você verá uma tela parecida com essa abaixo:


Como podemos ver eu inicio meu projeto Android e minha Api ao mesmo tempo. Mas um problema muito comum que nós temos é ao tentar acessar API pelo aplicativo não conseguimos.

Como podemos ver acima a WebApi está rodando normalmente em meu computador.

Mesmo que você chame no seu App assim http://localhost:58529/api/test/v1/online, ele não vai enxergar simplesmente por ele ser uma máquina virtual, ou seja, é como se fosse um outro computador.

Ai você pensa, vou passar meu IP, também não irá funcionar.

A primeira solução é fazer um deploy de sua WebApi para o IIS e depois chamar o diretório virtual que você criou.

A segunda solução que é a que vim propor a vocês, é configurar nossa máquina, para que o aplicativo consiga consumir sua API que foi levantada direto do seu Visual Studio através do IIS Express, assim você poderá debugar tanto o aplicativo como a API enquanto o Visual Studio tiver rodando.

Para isso é bem simples.

Vamos utilizar o gerenciador de pacotes NPM para instalar o iisexpress-proxy. Para isso iremos precisar de ter o Node.js instalado na máquina.

Para baixar e instalar o Node.JS acesse https://nodejs.org/en/

Após instalar o Node.Js é bem simples, basta instalar o pacote do iisexpress-proxy em nossa máquina.

Para isso abra o prompt do Node.Js em sua máquina e digite.

Após instalar vamos dar o comando que vai substituir a porta do seu IIS Express para uma porta que o Emulador entenda.

Como podemos ver eu to substituindo a porta de minha API 58529 para 3000

Agora basta em nosso aplicativo mudar a url de nossa api, ficando assim http://192.168.0.102:3000/api/test/v1/online

Substitua o localhost pelo IP de sua máquina e a porta 3000 que você acabou de criar.

No código de nosso serviço ficaria algo mais ou menos assim:

Bom espero que tenham gostado da dica!

Até a próxima!

 

Previous Xamarin Forms - Data Binding entre controles
Next Divulgue sua vaga de emprego no I love code

About author

Paulo Rogério
Paulo Rogério 152 posts

Sou apaixonado por tecnologia e adoro criar aplicações desktop, web e mobile. Adoro aprender e compartilhar conhecimento, meu hobby é ajudar as pessoas.

You might also like

Como compactar o retorno de um API de um só lugar!

Share this on WhatsAppFala galera, hoje venho compartilhar uma dica bem interessante que é como compactar todo o retorno de nossa API para que o trafego de rede seja menor

Mobile 0 Comments

Trabalhando com leaflef no Ionic 2/3

Share this on WhatsAppSalve coders, venho em mais um artigo mostrar como usar um mapa no ionic, caraca véi mais um tutorial de google maps, não jovens vamos utilizar outro

Lista de dicas e cursos gratuitos em português

Share this on WhatsAppResumão de todos os cursos que passaram pelo site Hoje resolvi trazer um resumo de todos os cursos, treinamentos, vídeo aulas que foram divulgados aqui no site

9 Comments

    • Paulo Rogério
      maio 22, 08:16 Reply
      A ideia é ajudar a comunidade. Se sentir falta de um artigo só entrar em contato que se eu tiver conhecimento eu faço!
  1. vagner correa
    maio 24, 13:54 Reply
    não funcionou Depois de executar a troca de porta tenho a mensagem abaixo IIS Express Proxy 1.3.0 Usage examples: iisexpress-proxy 51123 to 3000 iisexpress-proxy [http(s)://]192.168.0.100:51123 to 3000 iisexpress-proxy [http://]domain.com:80 to 3000 iisexpress-proxy [https://]ssl-domain.com:443 to 3000 e tentei acessar minha webapi com o endereço meuip:3000/api/usuarios mas não rolou
  2. levy
    agosto 20, 10:00 Reply
    cara eu perdi um dia inteiro para consumir um localhost e por fim acabei tendo que criar um site no IIS. essa sua solução deu certo aqui e fiz em 5 minutos! ajudou muito!

Leave a Reply