Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Minicurso Intel XDK

5.796 Aufrufe

Veröffentlicht am

O Minicurso Intel XDK é uma série de vídeo-aulas sobre a ferramenta de desenvolvimento multiplataforma Intel XDK, onde são apresentados os principais tópicos para o desenvolvimento mobile nesta IDE, utilizando HTML5 e Apache Cordova.

De maneira objetiva e abrangente, as aulas mostram os conceitos básicos da ferramenta, suas bibliotecas, como acessar os recursos de hardware do dispositivo (GPS, Câmera, etc.), até a publicação do aplicativo nas lojas mobile.

Veja a série 'Minicurso Intel XDK' em http://diegocavalca.com/minicurso-intel-xdk/

Veröffentlicht in: Mobil
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • (Unlimited)....ACCESS WEBSITE Over for All Ebooks ................ accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn }
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Minicurso Intel XDK

  1. 1. Minicurso Intel XDK® POR DIEGO CAVALCA
  2. 2. AGENDA 1. Apresentação do curso 2. Introdução ao HTML5 3. Bibliotecas Cordova, jQueryMobile e Bootstrap 4. Intel Developer Zone 5. Conhecendo a IDE 6. Construindo nossa UI 7. Notificações e informações do dispositivo móvel 8. Agenda de Contatos e arquivos 9. GPS e Conexões à internet 10. Câmera 11. Banco de dados local (offline) 12. Testes, compilação e publicação do aplicativo
  3. 3. Diego Cavalca Analista de Sistemas • Professor Centro Paula Souza (ETEC) Minicurso Intel XDK® Sobre o curso • Expresso • Abrangente • Direto Motivação • Espalhar o conhecimento da tecnologia • Falta de materiais em português sobre o tema • Difusão de nova tecnologia de desenvolvimento
  4. 4. Referências • https://software.intel.com/html5 • https://software.intel.com/en-us/node/492826 • http://cordova.apache.org/ • http://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf
  5. 5. www.diegocavalca.com ARTIGOS E TUTORIAIS SOBRE DESENVOLVIMENTO DE SOFTWARE.
  6. 6. Minicurso Intel XDK® POR DIEGO CAVALCA Introdução ao HTML5 Entenda os conceitos básicos do HTML5 e veja a sua real importância no desenvolvimento de aplicativos híbridos.
  7. 7. HTML – Evolução histórica  1991 – HTML  1994 – HTML2  1996 – CSS1 + Javascript  1997 – HTML4  1998 – CSS2  2000 – XHTML  2002 – Tableless  2005 – AJAX 2009
  8. 8. HTML5 – Aplicação
  9. 9. HTML5 – Quem utiliza
  10. 10. HTML5 - Recursos SEMÂNTICA API (Application Programming Interface) • Padrões de estrutura do documento • Variações do elemento INPUT • Novos elementos: • Audio • Video • Canvas • Acesso ao dispositivo • Geolocalização • Armazenamento local • Conectividade
  11. 11. HTML5 – Padrões de estrutura  A estruturação de páginas em HTML 4.0 é basicamente constituída pelo elemento <div>, com classes e IDs diferentes;  Novas tags facilitam a semântica no documento HTML;  Há uma maior visibilidade aos mecanismos de busca;  Fim da “sopa de DIVs”;  Fim das grandes quantidades de IDs e classes.
  12. 12. HTML5 – Padrões de estrutura ANTES AGORA AGORA
  13. 13. HTML5 – Inputs  Fim dos plugins e “gambiarras”  Padronização definitiva em qualquer plataforma  Experiência do usuário otimizada (de acordo com a região!)  Demonstrações: http://cdn.sixrevisions.com/demos/0345-new_html5_form_input_types/new-html5- form-input-types.html
  14. 14. HTML5 – Mídias (áudio/vídeo)  Com o HTML4 era impossível anexar áudio ou vídeo na página, e para suprir essa necessidade surgiram as tecnologias proprietárias (Flash, Silverlight);  No HTML5 foram, incluídas as tags <audio> e <video>, permitindo anexar mídias sem a necessidade de nenhum plugin.  YouTube adotou o HTML5 como tecnologia padrão para o processamento de seus vídeos. Mais informações em: http://www.youtube.com/html5
  15. 15. HTML5 – Audio
  16. 16. HTML5 – Video
  17. 17. HTML5 – Canvas  O elemento <canvas> consiste na utilização de elementos JavaScript para a criação de gráficos no navegador, sem a necessidade de nenhum plugin instalado;  Motivo principal pra ser considerado para os RIA proprietários (Flash, Silverlight e JavaFX);
  18. 18. HTML5 – Canvas Demonstrações da capacidade do elemento <canvas> ◦ http ://html5demos.com/canvas ◦ http://html5demos.com/canvas-grad ◦ http://9elements.com/io/projects/html5/canvas/ ◦ http://davidwalsh.name/canvas-demos ◦ http://sketch.io/sketchpad/
  19. 19. HTML5 – API’s ◦ Contenteditable (conteúdo editável) ◦ http://html5demos.com/contenteditable ◦ Geolocation (localização geográfica) ◦ http://html5demos.com/geo ◦ Network status (online/offline) ◦ http://html5demos.com/offline ◦ Armazenamento de dados ◦ http://html5demos.com/storage
  20. 20. HTML5 - Benefícios  Desenvolvedores:  Semântica facilitada;  Padronização global de código (menos“gambiarras”);  Otimiza o posicionamento do site nos motores de buscas;  Inserir mídia (áudio/vídeo) sem usar componentes externos (como plugins);  Aproveitamento da sintaxe Javascript para acessar suas API’s (canvas, geo, etc.);  Usuários:  Navegação mais rápida e simples (arquivos menores);  Otimização da experiência do usuário (UX) multiplataforma (inputs);  HTML5 está disponível em várias plataformas diferentes e funciona com a mesma eficiência em PC’s, smartphones e tablets.
  21. 21. HTML5 - Referências  http://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf  http://www.w3schools.com/html/html5_intro.asp
  22. 22. diegocavalca.ti@gmail.com
  23. 23. Minicurso Intel XDK® POR DIEGO CAVALCA Bibliotecas Cordova, jQueryMobile e Bootstrap Conheça algumas das bibliotecas mais utilizadas, entenda o papel de cada uma e como são usadas no desenvolvimento mobile.
  24. 24. <style> </style> LAYOUT (User Interface) Intel XDK (IDE) Arquitetura da IDE Intel XDK HARDWARE <script> </script>
  25. 25. Bootstrap • “Bootstrap é o framework – baseado em HTML, CSS e JS - mais popular para o desenvolvimento de interfaces para projetos web e mobile.” • Fácil utilização (baixar arquivos e referenciar); • Torna o desenvolvimento front-end (UI) mais rápido e fácil; • Feito para pessoas de todos os níveis, dispositivos de todas as formas e os projetos de todos os tamanhos; • Componentes visuais pré-definidos (button, input, dialog, menu, etc); • Distribuído sob licença Open-source; • Site: http://getbootstrap.com
  26. 26. jQuery Mobile • Sistema de interface de usuário baseada em HTML5; • Oriundo das bibliotecas jQuery e jQuery UI; • Projetado para fazer sites e aplicativos que são acessíveis em todos os dispositivos smartphone, tablet e desktop responsivos; • Oferece navegação Ajax com transições de página, captura de evento “toque” (touch), e vários widgets pré-definidos (inputs, selects, datepicker, etc.); • Seu código (leve) é constantemente atualizado, e tem um design facilmente customizável; • Site: http://jquerymobile.com
  27. 27. Apache Cordova • Biblioteca para desenvolvimento de aplicações híbridas (HTML, CSS e JS); • Fornece acesso ao hardware do dispositivo (GPS, Camera, Acelerômetro, etc.); • Conjunto de API’s baseado em Javascript; • Um código, várias plataformas (Android, iOS, WP, etc.) com o mínimo de alterações; • Mantido pela Apache sob distribuição Open-source; • Site: http://cordova.apache.org
  28. 28. Minicurso Intel XDK® POR DIEGO CAVALCA Intel Developer Zone® Nesta aula você irá conhecer o espaço do desenvolvedor Intel, aprender a encontrar materiais de apoio e dar os primeiros passos para se trabalhar com Intel XDK.
  29. 29. Resumo Um programa global que conecta os desenvolvedores com a Intel em tudo que se relaciona com a área de software - do desenvolvimento à distribuição:  Recursos para o desenvolvedor  Recursos para a empresa  Comunidade envolvida
  30. 30. Como acessar? http://software.intel.com/pt-br
  31. 31. Benefícios  Manter-se atualizado sobre novos recursos das IDE’s;  Informar-se sobre eventos oficiais;  Conhecer novas tecnologias Intel;  Suporte técnico através de fórum oficial (comunidade ativa!);  Integrar diversas ferramentas (e projetos) através de uma conta.
  32. 32. Minicurso Intel XDK® POR DIEGO CAVALCA Conhecendo a IDE A aventura começa agora! Você irá conhecer a ferramenta Intel XDK em seus detalhes, explicando de uma maneira ampla como funciona cada recurso da IDE para a criação de aplicativos mobile híbrido.
  33. 33. Recursos
  34. 34. Como baixar? Intel Developer Zone http://software.intel.com/pt-br/html5
  35. 35. Resumo  Conhecemos a arquitetura e recursos da IDE;  Como se cria um novo projeto;  Vimos que o Intel XDK possui alguns templates e projetos prontos (demonstrações);  DICA: Fique atento a versão da ferramenta Intel XDK, pois ela atualiza constantemente!
  36. 36. Minicurso Intel XDK® POR DIEGO CAVALCA Construindo nossa UI Agora sim! Vamos aprender a construir layouts de maneira fácil no intel XDK, dando vida para o nosso aplicativo com uma interface matadora para qualquer plataforma utilizando as opções de UI da ferramenta.
  37. 37. Referências  Lista de componentes UI: http://app-framework-software.intel.com/af22/components.php  Ferramenta Style Builder: http://app-framework-software.intel.com/af22/style.php
  38. 38. Minicurso Intel XDK® POR DIEGO CAVALCA Notificações e Informações do dispositivo Nesta aula você irá aprender a interagir com o usuário, através de mensagens, alertas, vibração e sons. Também vamos ver como acessar as informações de hardware e software (como IMEI, sistema operacional e outros) do dispositivo móvel em que o aplicativo está instalado.
  39. 39. Resumo  NOTIFICAÇÕES: Recursos audio-visuais para interação com o usuário;  Popup;  Caixa de diálogo informativa;  Beep;  Vibração;  INFORMAÇÕES: Dados do dispositivo no qual o aplicativo está instalado;  Modelo;  Plataforma (S.O.);  Versão do S.O.;  UUID (IMEI);
  40. 40. Referências  Documentação Apache Cordova:  INFORMAÇÕES: http://plugins.cordova.io/#/package/org.apache.cordova.device  DIALOGS: http://plugins.cordova.io/#/package/org.apache.cordova.dialogs  VIBRATION: http://plugins.cordova.io/#/package/org.apache.cordova.vibration
  41. 41. Minicurso Intel XDK® POR DIEGO CAVALCA Agenda de Contatos e Arquivos Aprenda a acessar informações da agenda de contatos e o sistema de arquivos do smartphone com seu aplicativo.
  42. 42. Resumo  CONTATOS: Acesso e manipulação completa da agenda:  Inserir;  Excluir;  Listar;  Detalhes;  ARQUIVOS: Gerenciamento dos arquivos salvos no dispositivo (memória interna) ou em seus adjacentes (memória ‘externa’ – SD’s, etc.);
  43. 43. Referências  Documentação Apache Cordova:  CONTACTS: http://plugins.cordova.io/#/package/org.apache.cordova.contacts  FILESYSTEM: http://plugins.cordova.io/#/package/org.apache.cordova.file
  44. 44. Minicurso Intel XDK® POR DIEGO CAVALCA GPS e Conexões à internet Nesta aula você irá aprender a utilizar os recursos do GPS e também a checar o estado da conexão à internet do aparelho, seja rede Edge, 3G ou Wi-fi.
  45. 45. Resumo  GEOLOCALIZAÇÃO (GPS): Captura da localização real do dispositivo:  Posição Atual;  Monitoramento contínuo da posição geográfica;  CONECTIVIDADE (REDE/INTERNET): Acesso e verificação da rede de internet do aparelho;
  46. 46. Referências  Apache Cordova:  GEOLOCATION: http://plugins.cordova.io/#/package/org.apache.cordova.geolocation  CONNECTION (Network Information): http://plugins.cordova.io/#/package/org.apache.cordova.network-information  Google Maps (v3): https://developers.google.com/maps/documentation/javascript/?hl=pt-br
  47. 47. Minicurso Intel XDK® POR DIEGO CAVALCA Câmera Fotos e vídeos são o tema dessa aula, na qual iremos abordar como se utiliza todos os recursos de acesso a câmera do dispositivo móvel.
  48. 48. Resumo  Através dos plugins do Apache Cordova, utilizando os recursos de hardware do dispositivos, podemos capturar arquivos de mídia, como:  Imagem (foto);  Vídeo;  Áudio.
  49. 49. Referências  Apache Cordova:  CAMERA: http://plugins.cordova.io/#/package/org.apache.cordova.camera  CAPTURE: http://plugins.cordova.io/#/package/org.apache.cordova.media-capture
  50. 50. Minicurso Intel XDK® POR DIEGO CAVALCA Banco de dados local (Offline) Nesta aula vamos aprender a criar um banco de dados local, gravando, atualizando, acessando e excluindo dados quando necessário em nossa aplicação.
  51. 51.  WebStorage: simplesmente fornece um mapeamento de valores-chave, como localStorage["name"] = username;. Infelizmente, as implementações atuais oferecem suporte apenas a mapeamentos pelo método string-to-string, então é necessário que você serialize e desserialize outras estruturas de dados. Você pode fazer isso usando JSON.stringify() e JSON.parse().  WebSQL: oferece a você o poder - e a realização - de um banco de dados relacional SQL estruturado.  IndexedDB: é algo entre o WebStorage e WebSQL. Como o WebStorage, é um mapeamento por valores-chave simples, mas suporta índices como os de bancos de dados relacionais. Assim, pesquisas por objetos correspondentes a um determinado campo são rápidas, pois não é necessário percorrer manualmente cada objeto armazenado. Armazenamento offline (HTML5)
  52. 52. Referências  Armazenamento offline em HTML5: http://www.html5rocks.com/pt/features/storage  Mergulhando em HTML5 – Armazenamento: http://diveintohtml5.info/storage.html  WebSQL no HTML5: http://www.tutorialspoint.com/html5/html5_web_sql.htm  Conhecendo o WebSQL: http://elemarjr.net/2010/10/19/html-5-parte-6-armazendando- dados-com-web-sql-databases/
  53. 53. Minicurso Intel XDK® POR DIEGO CAVALCA Teste, compilação e publicação do aplicativo (Android, iOS e Windows Phone) Chegamos na reta final! É hora de testar, compilar e publicar o aplicativo nas lojas. Aprenda a utilizar todos os recursos de teste e 'build' da ferramenta Intel XDK, além de conhecer os passos necessários para distribuir seu aplicativo para o público.
  54. 54. Arquitetura da IDE Intel XDK Desenvolvimento Teste Compilação (Publicação)
  55. 55. Desenvolvimento  Bibliotecas de Interface (App Framework, Ionic Framework, jQuery Mobile, etc.)  Integração nativa com Apache Cordova e suas bibliotecas de acesso ao hardware do dispostivo  Editor de texto (baseado no Brakets)  App Designer
  56. 56. Teste  Emulação “embarcada” do aplicativo na própria IDE  Console de depuração javascript  App Preview
  57. 57. Teste – Emulação embarcada  Visualiza o aplicativo, de maneira ágil, em um emulador, dentro da própria IDE  Não necessita de configurações adicionais e complexas  Simula o tamanho e o visual de vários modelos de tablets e smartphones  Criação de cenários de hardware (falta de GPS, conexão à internet, etc.)
  58. 58. Teste – Console Javascript  Valida ações e comandos escritos linguagem javascript  Verifica erros em tempo de execução  Permite depuração completa, de acordo com nossas necessidades
  59. 59. Teste – App Preview  Aplicativo para dispositivo móvel (Android, iPhone e Windows Phone) da Intel  Permite emular o aplicativo no próprio dispositivo  Ver o aplicativo “rodando” no aparelho sem a necessidade de instalação ou publicação nas lojas
  60. 60. App Preview – arquitetura Computador com Intel XDK® Cloud Intel (Conta Intel Developer Zone) Dispositivo Android com App Preview Dispositivo iOS com App Preview Dispositivo Windows com App Preview
  61. 61. App Preview – Instalação do aplicativo  Acesse a loja de aplicativos de seu aparelho (Android, iOS ou Windows) e busque pelo aplicativo “App Preview”  Baixe o aplicativo e instale-o em seu dispositivo.
  62. 62. App Preview Conhecendo e utilizando
  63. 63. Compilação (publicação)  Configuração de instalação do aplicativo (ícones, imagens e etc.)  Geração prática do pacote de instalação do app para publicação nas lojas de aplicativos
  64. 64. Resumo  Ferramentas de testes  Configuração das informações do aplicativo  Geração do pacote de instalação, de acordo com a plataforma que iremos distribuir
  65. 65. Dúvidas ou problemas técnicos Utilize o fórum oficial Intel XDK® https://software.intel.com/pt-br/forums/intel-software-network-brasil
  66. 66. Referências • http://software.intel.com/html5 • http://app-framework-software.intel.com/documentation.php • https://software.intel.com/pt-br/forums/intel-software-network-brasil • http://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf • http://jquerymobile.com/ • http://cordova.apache.org/ • http://www.sqlite.org/
  67. 67. Mais dicas e informações sobre Intel XDK www.diegocavalca.com

×