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 148 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

Participe do bate papo ao vivo sobre o TFS

Share this on WhatsAppE ai pessoal beleza? Bom espero que sim, hoje dando uma passada nos grupos de tecnologia no WhatsApp, percebi que algumas pessoas estavam com dúvida de como

Visual Studio 2 Comments

Como testar seu código sem rodar a aplicação no visual studio

Share this on WhatsAppConheça 2 formas de debugar sua aplicação Hoje resolvi fazer um vídeo que irá mostrar 2 formas de testar seu código, sendo que uma delas sem rodar

Mobile 4 Comments

Qual o melhor aplicativo híbrido ou nativo?

Share this on WhatsAppApps híbridos X nativo Pessoal, venho tentar resolver neste post uma dúvida muito comum para quem quer se aventurar na área de desenvolvimento mobile. Muitas pessoas se

8 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