Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Palestra UFPR - Intro Ionic framework + WordPress

1,073 views

Published on

Introdução ao prático Stack de desenvolvimento mobile que usa o Ionic Framework para criar Apps Híbridas alimentadas por uma API REST, gerenciada WordPress.

Apresentação na UFPR dia 11/08/2015 para a Semana Academica do Pessoal do curso de tecnologia de análise de sistemas, do CATEI.

Published in: Education
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that 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 that 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 That 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 That 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 that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Palestra UFPR - Intro Ionic framework + WordPress

  1. 1. Ionic Framework + WordPress por Rômulo Zoch romuloctba@gmail.com Desenvolvendo APPs com
  2. 2. Os FrameWorks*
  3. 3. Oque é: Framework para desevolvimento de APPs híbridas multi-dispositivos com HTML5. É possível com o mesmo código, desenvolver e distribuir aplicativos para Android, iOS e Windows Phone. Tecnologias: Ionic Framework www.ionicframework.com
  4. 4. Ionic Framework www.ionicframework.com - Motor de Javascript do Google: v8 - instalador de pacotes Npm - roda o ionic-cli (ionic serve, ionic run, ionic build...) - Task com GulpJS: imagemin, minify, concat, jslint...
  5. 5. Ionic Framework www.ionicframework.com - Motor de Javascript do Google: v8 - instalador de pacotes Npm - roda o ionic-cli (ionic serve, ionic run, ionic build...) - Task com GulpJS: imagemin, minify, concat, jslint... - Framework de apps híbridos - Plugins fornecem funcionalidade nativa Mobile - HTML5: HTML, CSS, Javascript
  6. 6. Ionic Framework www.ionicframework.com - Motor de Javascript do Google: v8 - instalador de pacotes Npm - roda o ionic-cli (ionic serve, ionic run, ionic build...) - Task com GulpJS: imagemin, minify, concat, jslint... - Framework de apps híbridos - Plugins fornecem funcionalidade nativa Mobile - HTML5: HTML, CSS, Javascript - Framework Javascript para aplicações Dinâmicas MV** - NÃO é um substituto do jQuery - Excelente para trabalhar com dados (em JSON) - Sintaxe Simples e baixa curva de aprendizado
  7. 7. Oque é: Concebido como uma plataforma de blogs, é muito usado também em sites, portais e e-commerces. Desde a criaçãos dos Custom Post Types, Custom Fields e Custom Taxonomies, está gradualmente consolidando-se como um framework para desenvolvimento aplicações web complexas e completas. Tecnologias: WordPress br.WordPress.org “WordPress roda até em geladeira”
  8. 8. Vantagens: - Extremamente Customizável e Versátil - Amigável para o cliente/Usuário final - Grande parte dos profissionais de comunicação já usaram WordPress - Compatibilidade com grande parte dos servidores (gratuitos e pagos) - Comunidade extensa, ativa e amiga - Documentação atualizada e completa WordPress br.WordPress.org
  9. 9. Mais Vantagens: - Diversos plugins gratuitos - imenso mercado de soluções premium - Fácil de configurar - Rápido para prototipar plataformas e soluções. WordPress br.WordPress.org
  10. 10. Desenvolvimento Saudável com WordPress - Não seja preguiçoso - Leia a documentação - Estude os ‘Hooks’ - Siga os padrões da comunidade WordPress br.WordPress.org https://codex.wordpress.org/
  11. 11. ...não é para descansar! badum, ts...... Um pouco sobre REST
  12. 12. Oque é uma API REST? - Representational State Transfer - Transmite dados em formato JSON - FrontEnd e Backend TOTALMENTE INDEPENDENTES - Não depende de linguagem ou SO - Funciona à partir do protocolo HTTP - Não usa Estados (stateless), portanto as requisições são independentes entre sí
  13. 13. Oque é uma API REST?
  14. 14. Oque é uma API REST? VERBO + ENDPOINT + PARAMS Uma API REST permite requisições para rotas/endpoints, e retorna os dados em formato JSON. Exemplo: Verbo: GET; Params: { username = romulo }; Endpoint: /user Request: GET http://myapi.com/api/user?username=romulo resposta JSON: { status: 200, data: { username: “romulo”, _id: 23 } } {JSON}
  15. 15. (Preparando o Backend) Usando o WordPress como API REST
  16. 16. Usando o WordPress como API REST Instalando o WordPress: (Pré requisitos: Servidor com PHP5+ e mySQL ou MariaDB) - Baixe em br.wordpress.org - Descompacte na pasta desejada de seu servidor - acesse seuserver.com.br/pasta - preencha os dados do site e credenciais do banco de dados - Acesse seuserver.com.br/pasta/wp-admin e faça seu login!
  17. 17. IMPORTANTE> O Plugin WP REST API (WP-API) transforma uma instalação de WordPress em uma API REST
  18. 18. Usando o WordPress como API REST Instalando o plugin WP-API: - Plugins -> Adicionar Novo - Busque por “WP REST API (WP-API)” - INstalar - Ativar Salvar a estrutura de links permanentes - configurações -> links permanentes -> “nome do post” Teste a API em: seusite.com.br/pasta/wp-json
  19. 19. Usando o WordPress como API REST OMG! O que faço com isso? 1.Mantenha a calma 2 .Use o PostMan
  20. 20. Usando o WordPress como API REST - Facilita o Desenvolvimento - Interage com APIs de modo prático - Request com todos os verbos - Suporte à http header - 4 opções de Autenticação - Histórico de request - É grátis!
  21. 21. (Preparando o Backend) Criando o conteúdo para aplicativos com WordPress
  22. 22. Criando o conteúdo para aplicativos com WordPress Plugins úteis
  23. 23. Criando o conteúdo para aplicativos com WordPress 1. Crie um Custom Post Type 2. Adicione alguns campos personalizados
  24. 24. Criando o conteúdo para aplicativos com WordPress Com o Postman, fazemos um GET para o endpoint /posts com o parâmetro type=palestras ……./wp-json/posts?type=palestras
  25. 25. Criando o conteúdo para aplicativos com WordPress Como exibir Custom Fields na resposta da API? Baixe o plugin e extraia para a pasta wp-content/plugins: https://github.com/romuloctba/all-custom-fields-2-wp-api (agora os custom fields são exibidos. perceba o prefixo wpcf-)
  26. 26. Criando o conteúdo para aplicativos com WordPress CORS: Cross-Origin Resource Sharing https://github.com/thenbrent/WP-API-CORS .htacess Ou como um Plugin: Mais sobre dicas para lidar com CORS: http://enable-cors.org
  27. 27. Este é nosso FrontEnd. Com ele, consumiremos o JSON que a API fornece. Criando o APP com o Ionic Framework
  28. 28. - Pré-requisito: NodeJS http://nodejs.org - Instalando Globalmente Ionic e Cordova: Ionic Framework www.ionicframework.com $ ionic help $ ionic start NomeDoApp [template] $ ionic serve [opcoes] $ ionic platform [plataforma] $ ionic run [plataforma] $ ionic emulate [plataforma] $ ionic build [plataforma] $ ionic resources $ ionic setup sass
  29. 29. Criando o APP com o Ionic Framework ionic start “Nome do App” [template]
  30. 30. Criando o APP com o Ionic Framework
  31. 31. Criando o APP com o Ionic Framework Estrutura de um projeto Ionic
  32. 32. Criando o APP com o Ionic Framework
  33. 33. Criando o APP com o Ionic Framework Criaremos um controller que terá o parâmetro $scope do AngularJS:
  34. 34. Criando o APP com o Ionic Framework Agora, Usamos o $http do angularJS para puxar o JSON da API, inserindo-na no $scope:
  35. 35. Criando o APP com o Ionic Framework Usamos o ng-repeat do Angular JS para iterar no array de objetos JSON Dica: Use o para ver os dados disponíveis
  36. 36. Criando o APP com o Ionic Framework O Ionic oferece diversos elementos CSS e Diretivas AngularJS para uso na UI: http://ionicframework.com/docs/
  37. 37. Criando o APP com o Ionic Framework Apenas com o CSS (otimizado) do Ionic é possível construir ricas e práticas interfaces
  38. 38. Criando o APP com o Ionic Framework Os filtros do AngularJS também são úteis
  39. 39. Criando o APP com o Ionic Framework Usar Plugins Phonegap/Cordova para acessar funções nativas Atenção: Os plugins só funcionam nos dispositivos.
  40. 40. Criando o APP com o Ionic Framework Encontre plugins para seu projeto no NPm ou em plugins.cordova.io
  41. 41. Criando o APP com o Ionic Framework Os plugins têm instrução de instalação e uso. Os mais usados são: - AdMob - Geolocation/GPS - Vibration - Camera - BarcodeScaner
  42. 42. Criando o APP com o Ionic Framework - Adicionando uma plataforma: O build de Apps iOS só pode ser feito em sistemas OSX Certifique-se de ter o SDK devidamente instalado: https://developer.android.com/sdk - Fazendo o Build:
  43. 43. Criando o APP com o Ionic Framework - Publicando seu APP http://ionicframework.com/docs/guide/publishing.html http://apprendendo.com.br/android/como-publicar-meu-app-na-play-store
  44. 44. Dicas Úteis
  45. 45. Dicas úteis - O WooCommerce já tem uma API REST nativa - Os templates padrão do Ionic são: blank, tabs e sidemenu, mas é possível usar qualquer repo do github ou pen do codepen como template - O ionic oferece diversos serviços (prox slide) úteis para seu app - O Plugin WP-API está à caminho de ser lançado como parte integrante do WordPress - Você pode facilmente implementar Realtime com Firebase
  46. 46. Dicas úteis Ionic Playground: (teste sem preocupar-se com ambiente) http://play.ionic.io
  47. 47. Dicas úteis Ionic Creator: (Wireframes e estrutura de views em minutos) http://creator.ionic.io
  48. 48. Dicas úteis Seja o Mestre do Ionic aprendendo Angularjs de graça! http://campus.codeschool. com/courses/shaping-up-with-angular-js/ https://www.youtube.com/watch? v=RiB0TXOhd3U&list=PLWytY2Ghb8blLM9v1n MoAnDPK7KQp0-DC https://egghead.io/
  49. 49. Dicas úteis Tempo Real com Firebase https://www.firebase. com/docs/web/libraries/ionic/guide.html#section- integrating-firebase Firebase também oferece Social Login de forma fácil para seu APP
  50. 50. Dicas úteis SAIBA QUANDO USAR
  51. 51. Mais Sobre WordPress em Curitiba
  52. 52. facebook.com/CuritibaWordPressMeetup meetup.com/wpcuritiba
  53. 53. Materiais desta apresentação https://github.com/romuloctba/talk-ionic-wordpress-catei-2015 Muito Obrigado :) Qualquer dúvida, abra issues no Github!

×