#XamarinDevDays Curitiba – 24/09/2016

Hoje foi dia de mais aprendizado com os  @MonkeyNightsDev

Nem lembro mais qual foi a sequência de palestrantes, mas sei que se complementaram com maestria, passando o funcionamento básico do Xamarin. Os palestrantes @WilliamSRodz , @willdotnet , @AlexandreChohfi , passaram pelos detalhes básicos do desenvolvimento, explicando de modo geral o uso do Xamarin, com exemplos.

Iniciaram com a arquitetura base, e sempre complementando com algum detalhe, e ao menos eu fiquei paralisado com a qualidade das informações, os palestrantes entram em um modo de compartilhamento de detalhes, que nem filmando da pra explicar, parabéns pessoal … Vocês juntos, fazem AO VIVOOO, e o mais legal, de modo compartilhado; tornando o conteúdo de muita qualidade, sem comentar que ajudam sempre quem precisa.

Segue um link importante: https://github.com/xamarin/dev-days-labs

Entraram em detalhes entre uso do Visual Studio (No Windows e emulando no MAC), e Xamarin Studio (No MAC); cada um com suas vantagens e desvantagens… Talvez eu lembre de alguma, mas cada um tem o seu cenário a configurar.

No meu caso, perguntei como seria Emular o Windows no MAC, para poder utilizar o Visual Studio como IDE. Pelo que informou o@AlexandreChohfi, o Resharper , funciona melhor com o Visual Studio, ou pior … Não funciona no Xamarin Studio (MAC) … (Ei pessoal, me ajudem ai se escrever besteira😀 ). Para emular o Windows com parallels for mac, você precisa de pelo menos 16M memória para funcionar bem. No meu caso de 8M da pra usar, mas uma experiência melhor seria o uso de “Cadeira Giratória“, onde você teria 2 máquinas, uma Windows e outra MAC … Se precisar programar algo pra Windows, vai ter que usar um Windows, exemplo usar UWP (Universal Apps), porém, não vimos desenvolvedores dispostos a usar, além de mim @#$@#$!#@$.

Ai tivemos dicas interessantes em como usar o Emulador Android no Windows.
Acho que é esse: https://www.visualstudio.com/pt-br/vs/msft-android-emulator/
Com ele, inicia o emulador de forma rápida usando recursos de Hiper V,
e pra quem não tem o Hiper V na máquina, sugeriram o genymotion.
No caso MAC, parece bem mais fácil emular com o IOS, com o “Simulator”, mais rápido, e no caso de Emular Android, o genymotion pode ser mais rápido que usar o Android Studio, via AVD Manager.
Uma dica para consumir menos memória, seria subir o Emulador Android, antes do Visual Studio, não testei, mas se libera alguma memória vou tentar😀

Foi mostrado o nuget Xamarin.Forms; que já implementa uma estrutura inicial MVVM, para manter os Bindings entre telas e código. Com detalhes dos novos componentes, aliás, o próximo MokeyNights será sobre essas novidades Xamarin gerais.
https://www.facebook.com/events/313667229025278/
acompanhem em: https://www.facebook.com/MonkeyNightsDevs/

Novidades:
Carrocel View
Effects I
XAML Previewer.
URL Navigation: quando o usuário navegar em http://foobar/ , abre seu aplicativo.
*Data Pages: – Analisa como retorno json do azure… (preview ainda)
Themes:
Native Embedding. (100% Android)

Alguns outros links interessantes para aprender a utilizar o Xamarin.Forms
https://github.com/xamarinhq/app-evolve

jamesmontemagno / Hanselman.forms
Palestra: “…aí mesmo procura a talk do :)…”

Dica escondida do Visual Studio, para quem quiser ver o preview do XAML:
Vá em : View Windows – Other Windows – Xamarin Forms Preview ( Visual Studio)

OOOPA, tudo isso e nem testamos … Hora do Demo😀
a hora que tudo para @!#$, ainda bem, antes na frente de quem sabe do que em casa sozinho😀.

#DICA POWER:
Um erro comum que já fiz mais de uma vez, quando você instala o Xamarin e abre ele pela primeira vez, a primeira coisa que queremos é compilar qualquer coisa e ver o que acontece, só que nessa primeira vez, o Xamarin, precisa baixar uns 120M de arquivos que parece um Build Eterno, no meu caso, ali levou uns 20Minutos … E o que o desenvolvedor iniciante faz ? “Opa bugou, fecha tudo e abre novamente…”
Nãooooo, isso acaba corrompendo um arquivo importante, e da um erro desses…

Dica:
remover e baixar denovo…
Bug, que precisa baixar o pacote … (197 MB)
/Users/oguima/estudo/Xamarin/XamarinDevDays-2409/devdays/sqlite/XamFormsSqlite/XamFormsSqlite/XamFormsSqlite.Droid: Error XA5209: Unzipping failed. Please download https://dl-ssl.google.com/android/repository/android_m2repository_r29.zip and extract it to the /Users/oguima/.local/share/Xamarin/Xamarin.Android.Support.Animated.Vector.Drawable/23.3.0.0/content directory. (XA5209) (XamFormsSqlite.Droid)
Ok, tentei baixar e colocar na pasta que o erro apontou, mas teve um jeito mais interessante mostrado pelo @willdotnet, onde você baixa o arquivo:
https://dl-ssl.google.com/android/repository/android_m2repository_r29.zip
E coloca o ZIP em uma outra pasta do Xamarim, como esse nome:
“2A3A8A6D6826EF6CC653030E7D695C41” , essa pasta aparece na lista de erros, esqueci de anotar😀. O Lance é que esse zip fica corrompido e não baixa mais… BUG … mas vc baixa o ZIP e renomeia. Existem outras formas mas pra mim essa funcionou bem.

Outra coisa que fiz, foi referenciar o SDK do Android, que ja tinha na máquina, isso gerou erros, que provavelmente atualizei a última versão Android , ainda não suportada na stable do Xamarin. O que fiz foi referenciar ao SDK que o Xamarin Studio baixou… Creio que de pra corrigir isso, o@AlexandreChohfi ,já comentou deste problema uma vez em um MonkeyNights.

Então fechamos a manhã com a palestra do William: @WilliamSRodz, sobre Azure.

Apps com Azure:
Um ponto interessante foi comentar que é difícil encontrar pessoas sem celular hoje, e que de uma forma ou outra as pessoas amam Apps. Veio com uma estatística do IOS
IOS: 36 apps … 1/4 são realmente usados…
Facebook, Whatsapp Instagram😛
Opinião pessoal:
As pessoas amam é ter um celular, pra tirar fotos, pra atender/fazer ligações, pra mandar mensagens… Com isso parece que interagir com Bots, em sistemas de mensagem como WhatsApp , messenger e Slack, são propícios a uma nova forma de usar apps. Mas não deu tempo de papear sobre isso ainda… 
Falou sobre Backend, com Azure:
*Easy Tables
*App Service
Sync:
IMobileServiceSyncTable<Store> table;
MobileServiceSQLiteStore
E novamente AO VIVOOOO, fez um Mobile API com testes no PostMan.

A tarde, hora da mão na massa:
Fazer App:

Da pra fazer da sua casa. Altamente recomendado.

Muito obrigado pessoal😀
O almoço estava ótimo, estenderia pra tarde toda.
Faltou o@angelobelchior , #nemchama😀
Boa sorte em sua nova empreitada. Na torcida aqui😉

Transform-Origin e SVG

Desafios do dia dia: (Contexto Web, e seus diversos Browsers)

  • Fazer uma reta aparecer suavemente da sua origem para seu destino.
  • Fazer algo rodar a partir de sua origem
  • Alterar a origem das transformações
  • Manter proporção

Entre outros desafios…
A forma mais simples, usando CSS Animations com Divs, funcionam bem na maioria dos browsers, para animações que não precisem mudar proporção (Fixas), senão acabam envolvendo várias imagens com media queries.
Aí aparecem algumas vantagens de se usar SVG, para posicionar e para desenhar elementos que mantenham proporção sem distorção, ainda não explorei esta forma com dispositivos móveis na parte nativa, mas na parte web, funciona.

Alguns bons exemplos de problemas resolvidos com SVG.

Um pouco de SNAP.svg:

Exemplo comparativo: Snap , Velocity, GSAP

 

Agora sim … Um excelente Vídeo explicando problemas e com solução GSAP.

Problemas:

problemasTransform-origin.png

Simplificando, na forma simples com CSS Animations e SVG,
funciona bem no Chrome e no Safari; já no IE e no Firefox encontramos alguns problemas.

Outras soluções:

 

A intenção era apenas fazer subir e descer o termômetro ao clicar nele.
O outro teste foi de compatibilidade entre os browsers com o stroke-dasharray ,
stroke-dashoffset , funciona na maioria menos no IE11…

Aqui quase funcionou: No IE11 o comportamento foi diferente…

http://jsfiddle.net/z8w4vuau/50/

****Infelizmente , nesse exato momento 04/05/2016, a Web Animation API (WAAPI), ainda não funciona para todos browsers, porém no modo simples com o polyfill, funciona …
Mas ainda não funciona com SVG.

Então vamos por partes;
para solucionar boa parte dos problemas, use o GSAP …
Para solucionar o problema de fazer uma reta da sua origem a um destino;
vou usar o CSS padrão, e não usar o SVG…
Uma parte interessante de se usar HTML é que podemos misturar bastante
os recursos, chegando em bons resultados.

Segue um exemplo básico: Com CSS e Divs.

 

Uma outra solução foi carregar partes de um SVG em divs, e animar com CSS padrão.
Porém é algo um pouco trabalhoso.
Segue uma imagem de algo assim…
gameSVG.jpg

Vi uma vez a Rachel Nabors, misturando SVG com PNG, onde o traço era feito com SVG , e a pintura com PNG super comprimido. Excelente Exemplo dos poderes SVG e Divs normais e
WAAPI😀 (https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/web-animations-next.min.js)

 

 

 

 

 

 

 

#GGJ16 – Ritual Run

Em uma certa quinta feira, véspera da Game Jam, decido ir sozinho conhecer de perto a Jam na PUC PR, ao menos correr pra me inscrever antes do fim do período de inscrição, que era até sexta ao 12:00.
Tranquilo, o processo todo é via WEB, só seguir as instruções, e ir achando os sites onde você precisa se registrar. Eu fui atrás do site oficial da Game Jam, (http://globalgamejam.org/) , de lá você procura a Cidade que quiser participar, http://www.ggjcwb.com/2016/02/estat2016/ . Emitia um ticket para validar no local, e só imprimir e seguir as recomendações, alias excelentes.

Dicas do que precisa levar, tinha até checklist, e utilitários pra baixar pra ajudar no desenvolvimento do jogo, atuei nessa parte mais como observador e admirador da organização do evento. Aproveitei para ver um depoimento de um participante da Unity, em o quanto a gente aprende, colaborando.
Pois é hora de me mexer, pois as 16:30 de sexta feira, começava o credenciamento, e aos primeiros tinha brindes, como calouro eu não queria perder nada, consegui um Kit Chiclete da Unity, que depois descobri que era uma massinha de modelar, ainda bem que não deu tempo pra mascar ela😀 …
Pedi pra sair antes no serviço, ai ai la vai horas pra compensar depois, mas a causa é nobre,
sai correndo e cheguei no horário com pouca fila.
Foto da Fila…
20160129_162757
Acreditem, tinha fila😀. 3 filas separadas em ordem alfabética, peguei a minha e segui :D…
Eram separadas para quem era Amigo da Jam, ops essa era a quarta fila, e não gostei do nome no início, significa que a pessoa contribuiu com o Evento e adquiriu uma camisa, por 15R$. Eu comecei como Inimigo da Jam, e calouro.

O pessoal já estava preparado com o Kit Jammer, Mochilas e máquinas, sacos de dormir, lanchinhos, etc … Uau, todos organizados, e eu nem arrumei minhas coisas ainda…
Jóia, mais estímulo pra correr 16:50 já … UPS, esqueci que tinha que ajudar em casa com a compra de produtos para uma entrega de encomenda de doces da esposa , OK tranquilo, foco, acredita que da pra chegar antes de terminarem o primeiro jogo…
Bom, como já estava credênciado, e com brinde, o lance era chegar até as 18:00 onde tudo iria começar, pra tentar encontrar alguma equipe. Então é bem recomendado chegar cedo e se organizar antes para não passar apertos e chegar esgotado. Tive todo apoio da esposa e filho, fundamental para acreditar e encarar o desafio, e procurei estar calmo…
E deu tudo muito certo, fiz as compras, arrumei minha mochila básica, chinelo , escova de dentes, roupas extras, um blusa pro frio, a a máquina e seus periféricos, detalhe: tinha o desktop para levar … só carregar e ir.
Um pouco de transito na BR, mas tudo bem, creio que as 18:30 eu estava lá, e o pessoal estava tendo palestra sobre a Intel e o Real Sense. O auditório estava cheio, mas encontrei meu lugarzinho, já comecei as integrações com o pessoal, perguntando tudo que podia.
20160129_185526
Depois fomos tirar foto do pessoal e fazer o vídeo de início da Global Game Jam Curitiba.
Após, tinha que procurar o Cara do Chapéu Verde, onde iria reunir o pessoal sem equipe como eu, e tinha poucos, creio que uns 9, não contei… Mas o povo se organiza muito rápido.
Quem é programador ?! Artista ?! Gosta de puzzle ?! E algumas equipes vieram coletar novos integrantes, foi ai que a equipe Capturados me encontrou, a experiência fica muito melhor em equipe e começou a correria … Depois escrevo mais se alguém quiser😀
Pessoal desenvolvendo:
Segue os links para o jogo: Fontes e Instalador.
Da pra jogar a versão WebGL, em PCS (Ainda não funciona em celulares)
menu_18

 

Compilando para Windows 10. (Erros Unity 5.2.1f1 – UWP 10) (Solucionado Correção 5.2.1p3)

Correção: Com o path 5.2.1p3 este problema não ocorreu.
Pacote gerado sem problemas e sem necessidade de nenhuma correção.

http://unity3d.com/pt/unity/qa/patch-releases
———————————————————————————————-
Compilando com a Unity 5.2.1f1 …
Não está gerando app para Windows Store – Universal 10.
Mas gera para UWP 8.1 …

O aplicativo teste foi gerado para WebGL e foi gerado um APP para testes:
http://guimagames.azurewebsites.net   (Lights out)
build

Erros:
Assets\Scripts\levelHandler.cs(8,2): error CS0433: The type ‘XmlDocument’ exists in both ‘System.Xml.XmlDocument, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a’ and ‘WinRTLegacy, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null’

Assets\Scripts\levelHandler.cs(9,2): error CS0433: The type ‘XmlNodeList’ exists in both ‘System.Xml.XmlDocument, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a’ and ‘WinRTLegacy, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null’

Error building Player because scripts had compiler errors

erros

Cheguei a dar uma pesquisada nos foruns e até “vi” comentários que esta versão ainda não gera para windows 10, que apenas a versão PRO geraria.

Vou dar uma olhada melhor nestes materiais, e consultar o pessoal😀
Se puderem ajudar agradeço…

Parte da solução a ajustar:
http://docs.unity3d.com/Manual/windowsstore-missingtypes.html

Mais do mesmo problema:
http://forum.unity3d.com/threads/unity-5-2-universal-10-build-bug.353931/

http://wakeupandcode.com/publish-a-windows-10-game-with-unity-5/

https://www.microsoftvirtualacademy.com/en-US/training-courses/building-windows-10-games-with-unity-5-12572?l=EJJiCpxPB_8401937557

Novo jogo: Lights out – #Unity3d #WebGl #apk

Boa noite pessoal.
Jogo “Lights out” publicado para testes, no portal Guima Games.

lightsoutDemo

Como funciona ?
*São 10 fases, onde o jogador deve “apagar” todas caixas, para passar de fase.
Detalhe, ao clicar em uma caixa, ela apaga as filhas ao redor em cruz, e ela mesma.

Versão Web e APK (Android) disponíveis:
http://guimagames.azurewebsites.net

Este jogo foi desenvolvido seguindo o tutorial do site #DigitalTutors #MobilePuzzleGame.
http://www.digitaltutors.com/

Este projeto serve como base para testes diversos das tecnologias envolvidas,
para os próximos games.
– WebGL
– Design
– Publicação no Market;
– Achievements
– Azure
– Ad services

* Problemas Atuais: Não gerou UWP 10, apenas para UWP 8.1
(Detalhes da versão unity 5.2.1f1.)

Sugestões, são sempre bem vindas.