SlideShare a Scribd company logo
1 of 23
Download to read offline
willyscampos@gmail.com@willyscampos
Desenvolvimento de Aplicativos Mobile
Usando HTML, CSS e Javascript
Willys Campos
#especialista em desenvolvimento para internet
UFPA
#empreendedor
Amazônia Digital
#professor de tecnologia
Estácio FAP
O mundo mudou...
#internetbaby
willyscampos@gmail.com@willyscampos
Github – Repositório de Código
Node – Programas Backend
Editor de Código Visual Studio Community 2013
Emulador – Extensão Apache Cordova para o Visual
Studio 2013
https://build.phonegap.com/
Visão Geral Open Source
#HandsOn
• Visual Studio Community 2013
– https://goo.gl/JhxZaq
• Extensão Apache Cordova para VS2013
– https://goo.gl/YCZO03
• Conta no Github
– https://github.com/
• Conta no PhoneGap
– https://build.phonegap.com
• Windows GitHub
– https://windows.github.com
O que vamos precisar
• Conhecimento de HTML, CSS, Javascript
• AngularJS
• NodeJS
• Banco de Dados
Habilidades
Visual Studio Community #começando
Visual Studio Community
#projeto
Visual Studio Community
#configuração
Inclusão da Versão do PhoneGap no Arquivo de
Configuração config.xml
Pressionar F7 com o arquivo config.xml selecionado
e incluir a linha abaixo:
<preference name="phonegap-version" value="3.5.0" />
Colo#index.html
Código Fonte do Projeto disponível em
http://migre.me/q2m8Y
Pressione F5 para Execução do projeto
GitHub
Entrar com sua conta no Windows GitHub
GitHub
Criar novo Repositório
GitHub
Acessar Repositório
GitHub
Copiar pastas para o repositório
GitHub
Vendo o código no repositório
GitHub
Quase lá...
GitHub
Código na nuvem já
Build PhoneGap
Construindo o APK para Android
Build PhoneGap
Construindo o APK para Android
Build PhoneGap
Construindo o APK para Android
Build PhoneGap
Distribuindo
http://migre.me/q2nIJ
Build PhoneGap
#over
willyscampos@gmail.com@willyscampos
#fim

More Related Content

What's hot

AWS 클라우드 기반 게임 아키텍처 사례 - AWS Summit Seoul 2017
AWS 클라우드 기반 게임 아키텍처 사례 - AWS Summit Seoul 2017AWS 클라우드 기반 게임 아키텍처 사례 - AWS Summit Seoul 2017
AWS 클라우드 기반 게임 아키텍처 사례 - AWS Summit Seoul 2017
Amazon Web Services Korea
 
윤석주, 인하우스 웹 프레임워크 Jul8 제작기, NDC2018
윤석주, 인하우스 웹 프레임워크 Jul8 제작기, NDC2018윤석주, 인하우스 웹 프레임워크 Jul8 제작기, NDC2018
윤석주, 인하우스 웹 프레임워크 Jul8 제작기, NDC2018
devCAT Studio, NEXON
 
KGC 2016 오픈소스 네트워크 엔진 Super socket 사용하기
KGC 2016 오픈소스 네트워크 엔진 Super socket 사용하기KGC 2016 오픈소스 네트워크 엔진 Super socket 사용하기
KGC 2016 오픈소스 네트워크 엔진 Super socket 사용하기
흥배 최
 
게임서비스를 위한 ElastiCache 활용 전략 :: 구승모 솔루션즈 아키텍트 :: Gaming on AWS 2016
게임서비스를 위한 ElastiCache 활용 전략 :: 구승모 솔루션즈 아키텍트 :: Gaming on AWS 2016게임서비스를 위한 ElastiCache 활용 전략 :: 구승모 솔루션즈 아키텍트 :: Gaming on AWS 2016
게임서비스를 위한 ElastiCache 활용 전략 :: 구승모 솔루션즈 아키텍트 :: Gaming on AWS 2016
Amazon Web Services Korea
 

What's hot (20)

AWS 클라우드 기반 게임 아키텍처 사례 - AWS Summit Seoul 2017
AWS 클라우드 기반 게임 아키텍처 사례 - AWS Summit Seoul 2017AWS 클라우드 기반 게임 아키텍처 사례 - AWS Summit Seoul 2017
AWS 클라우드 기반 게임 아키텍처 사례 - AWS Summit Seoul 2017
 
goployer, 코드 기반의 배포 도구 - 송주영 (beNX) :: AWS Community Day 2020
goployer, 코드 기반의 배포 도구 - 송주영 (beNX) :: AWS Community Day 2020goployer, 코드 기반의 배포 도구 - 송주영 (beNX) :: AWS Community Day 2020
goployer, 코드 기반의 배포 도구 - 송주영 (beNX) :: AWS Community Day 2020
 
Mongo db slides
Mongo db slidesMongo db slides
Mongo db slides
 
API Microservices with Node.js and Docker
API Microservices with Node.js and DockerAPI Microservices with Node.js and Docker
API Microservices with Node.js and Docker
 
Ndc14 분산 서버 구축의 ABC
Ndc14 분산 서버 구축의 ABCNdc14 분산 서버 구축의 ABC
Ndc14 분산 서버 구축의 ABC
 
IIS 7.0 Architecture And Integration With Asp.Net
IIS 7.0 Architecture And Integration With Asp.NetIIS 7.0 Architecture And Integration With Asp.Net
IIS 7.0 Architecture And Integration With Asp.Net
 
AWS와 함께하는 무중단 배포 파이프라인 개선기 - 황성찬 (AUSG) :: AWS Community Day Online 2021
AWS와 함께하는 무중단 배포 파이프라인 개선기 - 황성찬 (AUSG) :: AWS Community Day Online 2021AWS와 함께하는 무중단 배포 파이프라인 개선기 - 황성찬 (AUSG) :: AWS Community Day Online 2021
AWS와 함께하는 무중단 배포 파이프라인 개선기 - 황성찬 (AUSG) :: AWS Community Day Online 2021
 
윤석주, 인하우스 웹 프레임워크 Jul8 제작기, NDC2018
윤석주, 인하우스 웹 프레임워크 Jul8 제작기, NDC2018윤석주, 인하우스 웹 프레임워크 Jul8 제작기, NDC2018
윤석주, 인하우스 웹 프레임워크 Jul8 제작기, NDC2018
 
AWS로 게임의 공통 기능 개발하기! - 채민관, 김민석, 한준식 :: AWS Game Master 온라인 세미나 #2
AWS로 게임의 공통 기능 개발하기! - 채민관, 김민석, 한준식 :: AWS Game Master 온라인 세미나 #2AWS로 게임의 공통 기능 개발하기! - 채민관, 김민석, 한준식 :: AWS Game Master 온라인 세미나 #2
AWS로 게임의 공통 기능 개발하기! - 채민관, 김민석, 한준식 :: AWS Game Master 온라인 세미나 #2
 
AEM MSM: Basics & More
AEM MSM: Basics & MoreAEM MSM: Basics & More
AEM MSM: Basics & More
 
Dot Net Core
Dot Net CoreDot Net Core
Dot Net Core
 
New features of Minimal APIs in .NET 7 -Muralidharan Deenathayalan.pptx
New features of Minimal APIs in .NET 7 -Muralidharan Deenathayalan.pptxNew features of Minimal APIs in .NET 7 -Muralidharan Deenathayalan.pptx
New features of Minimal APIs in .NET 7 -Muralidharan Deenathayalan.pptx
 
프론트엔드 개발자를 위한 서버리스 - 윤석찬 (AWS 테크에반젤리스트)
프론트엔드 개발자를 위한 서버리스 - 윤석찬 (AWS 테크에반젤리스트)프론트엔드 개발자를 위한 서버리스 - 윤석찬 (AWS 테크에반젤리스트)
프론트엔드 개발자를 위한 서버리스 - 윤석찬 (AWS 테크에반젤리스트)
 
Automated Virtualized Testing (AVT) with Docker, Kubernetes, WireMock and Gat...
Automated Virtualized Testing (AVT) with Docker, Kubernetes, WireMock and Gat...Automated Virtualized Testing (AVT) with Docker, Kubernetes, WireMock and Gat...
Automated Virtualized Testing (AVT) with Docker, Kubernetes, WireMock and Gat...
 
KGC 2016 오픈소스 네트워크 엔진 Super socket 사용하기
KGC 2016 오픈소스 네트워크 엔진 Super socket 사용하기KGC 2016 오픈소스 네트워크 엔진 Super socket 사용하기
KGC 2016 오픈소스 네트워크 엔진 Super socket 사용하기
 
게임서비스를 위한 ElastiCache 활용 전략 :: 구승모 솔루션즈 아키텍트 :: Gaming on AWS 2016
게임서비스를 위한 ElastiCache 활용 전략 :: 구승모 솔루션즈 아키텍트 :: Gaming on AWS 2016게임서비스를 위한 ElastiCache 활용 전략 :: 구승모 솔루션즈 아키텍트 :: Gaming on AWS 2016
게임서비스를 위한 ElastiCache 활용 전략 :: 구승모 솔루션즈 아키텍트 :: Gaming on AWS 2016
 
JSON, JSON Schema, and OpenAPI
JSON, JSON Schema, and OpenAPIJSON, JSON Schema, and OpenAPI
JSON, JSON Schema, and OpenAPI
 
KGC 2016: HTTPS 로 모바일 게임 서버 구축한다는 것 - Korea Games Conference
KGC 2016: HTTPS 로 모바일 게임 서버 구축한다는 것 - Korea Games ConferenceKGC 2016: HTTPS 로 모바일 게임 서버 구축한다는 것 - Korea Games Conference
KGC 2016: HTTPS 로 모바일 게임 서버 구축한다는 것 - Korea Games Conference
 
Deploying and managing IBM MQ in the Cloud
Deploying and managing IBM MQ in the CloudDeploying and managing IBM MQ in the Cloud
Deploying and managing IBM MQ in the Cloud
 
사설 서버를 막는 방법들 (프리섭, 더이상은 Naver)
사설 서버를 막는 방법들 (프리섭, 더이상은 Naver)사설 서버를 막는 방법들 (프리섭, 더이상은 Naver)
사설 서버를 막는 방법들 (프리섭, 더이상은 Naver)
 

Viewers also liked

Introdução ao Desenvolvimento de APP’s para Windows 8(C#,XAML)
Introdução ao Desenvolvimento de APP’s para Windows 8(C#,XAML)Introdução ao Desenvolvimento de APP’s para Windows 8(C#,XAML)
Introdução ao Desenvolvimento de APP’s para Windows 8(C#,XAML)
Anderson Sa
 
Construindo aplicações web java com netbeans
Construindo aplicações web java com netbeansConstruindo aplicações web java com netbeans
Construindo aplicações web java com netbeans
Sliedesharessbarbosa
 
Iniciando o Desenvolvimento para o Google Android
Iniciando o Desenvolvimento para o Google AndroidIniciando o Desenvolvimento para o Google Android
Iniciando o Desenvolvimento para o Google Android
Salvador Torres
 
Desenvolvimento de Apps e Games para Android - Parte 1
Desenvolvimento de Apps e Games para Android - Parte 1Desenvolvimento de Apps e Games para Android - Parte 1
Desenvolvimento de Apps e Games para Android - Parte 1
Erisvaldo Junior
 
Introdução a Linguagem C
Introdução a Linguagem CIntrodução a Linguagem C
Introdução a Linguagem C
apolllorj
 

Viewers also liked (20)

Seminário SD - Ambiente de Desenvolvimento para Android
Seminário SD - Ambiente de Desenvolvimento para AndroidSeminário SD - Ambiente de Desenvolvimento para Android
Seminário SD - Ambiente de Desenvolvimento para Android
 
Introdução ao Desenvolvimento de APP’s para Windows 8(C#,XAML)
Introdução ao Desenvolvimento de APP’s para Windows 8(C#,XAML)Introdução ao Desenvolvimento de APP’s para Windows 8(C#,XAML)
Introdução ao Desenvolvimento de APP’s para Windows 8(C#,XAML)
 
Linguagem c
Linguagem cLinguagem c
Linguagem c
 
Google android pdf
Google android pdfGoogle android pdf
Google android pdf
 
Construindo aplicações web java com netbeans
Construindo aplicações web java com netbeansConstruindo aplicações web java com netbeans
Construindo aplicações web java com netbeans
 
Iniciando o Desenvolvimento para o Google Android
Iniciando o Desenvolvimento para o Google AndroidIniciando o Desenvolvimento para o Google Android
Iniciando o Desenvolvimento para o Google Android
 
Introdução ao Desenvolvimento Android
Introdução ao Desenvolvimento AndroidIntrodução ao Desenvolvimento Android
Introdução ao Desenvolvimento Android
 
Android Aula 5
Android Aula 5Android Aula 5
Android Aula 5
 
Android Aula 4
Android Aula 4Android Aula 4
Android Aula 4
 
Iniciando no mundo mobile - Programando para android
Iniciando no mundo mobile - Programando para androidIniciando no mundo mobile - Programando para android
Iniciando no mundo mobile - Programando para android
 
Android Aula 3
Android Aula 3Android Aula 3
Android Aula 3
 
Android Aula 2
Android Aula 2Android Aula 2
Android Aula 2
 
Desenvolvimento de Apps e Games para Android - Parte 1
Desenvolvimento de Apps e Games para Android - Parte 1Desenvolvimento de Apps e Games para Android - Parte 1
Desenvolvimento de Apps e Games para Android - Parte 1
 
Curso de Android Aula 4
Curso de Android Aula 4Curso de Android Aula 4
Curso de Android Aula 4
 
Programação c# - banco de dados
Programação   c# - banco de dadosProgramação   c# - banco de dados
Programação c# - banco de dados
 
Programação Android - Básico
Programação Android - BásicoProgramação Android - Básico
Programação Android - Básico
 
Android - Conceito e Arquitetura
Android - Conceito e ArquiteturaAndroid - Conceito e Arquitetura
Android - Conceito e Arquitetura
 
Introdução ao Android Studio
Introdução ao Android StudioIntrodução ao Android Studio
Introdução ao Android Studio
 
Conheça a Plataforma Xamarin
Conheça a Plataforma XamarinConheça a Plataforma Xamarin
Conheça a Plataforma Xamarin
 
Introdução a Linguagem C
Introdução a Linguagem CIntrodução a Linguagem C
Introdução a Linguagem C
 

Similar to Tutorial para Desenvolvimento Mobile usando HTML CSS e Javascript

Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open WebNovo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Leonardo Balter
 
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicCurso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Felipe Blini
 
PhoneGap - Criando aplicações Android e iOS com HTML5
PhoneGap - Criando aplicações Android e iOS com HTML5PhoneGap - Criando aplicações Android e iOS com HTML5
PhoneGap - Criando aplicações Android e iOS com HTML5
Rodrigo Cascarrolho
 

Similar to Tutorial para Desenvolvimento Mobile usando HTML CSS e Javascript (20)

Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)
Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)
Palestra sobre desenvolvimento de aplicativos híbridos (SEMAC 2016)
 
TDC2016POA | Trilha Web - Realtime applications com Socket.io
TDC2016POA | Trilha Web - Realtime applications com Socket.ioTDC2016POA | Trilha Web - Realtime applications com Socket.io
TDC2016POA | Trilha Web - Realtime applications com Socket.io
 
Desmistificando o desenvolvimento de mobile híbrido
Desmistificando o desenvolvimento de mobile híbridoDesmistificando o desenvolvimento de mobile híbrido
Desmistificando o desenvolvimento de mobile híbrido
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec Cafelândia
 
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
 
Write once, run "everywhere"
Write once, run "everywhere"Write once, run "everywhere"
Write once, run "everywhere"
 
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open WebNovo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
 
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicCurso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
 
Msp coding night_ppt
Msp coding night_pptMsp coding night_ppt
Msp coding night_ppt
 
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerry
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerryDesenvolvimento HTML5 para Smartphones e Tablets BlackBerry
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerry
 
Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013
Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013
Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013
 
Carambola 2012
Carambola 2012Carambola 2012
Carambola 2012
 
Webinar: Desenvolvimento de Interface Gráfica para Embarcados
Webinar: Desenvolvimento de Interface Gráfica para EmbarcadosWebinar: Desenvolvimento de Interface Gráfica para Embarcados
Webinar: Desenvolvimento de Interface Gráfica para Embarcados
 
Webapp, já posso investir nisso ? Latinoware 2011
Webapp, já posso investir nisso ? Latinoware 2011Webapp, já posso investir nisso ? Latinoware 2011
Webapp, já posso investir nisso ? Latinoware 2011
 
PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5
 
Mobile Apps Cross-Platform
Mobile Apps Cross-PlatformMobile Apps Cross-Platform
Mobile Apps Cross-Platform
 
TDC2018SP | Trilha Modern Web - Blazor - C# rodando no navegador padrao, sem ...
TDC2018SP | Trilha Modern Web - Blazor - C# rodando no navegador padrao, sem ...TDC2018SP | Trilha Modern Web - Blazor - C# rodando no navegador padrao, sem ...
TDC2018SP | Trilha Modern Web - Blazor - C# rodando no navegador padrao, sem ...
 
Aplicativos Móveis: PWA, Instants Apps. Vamos entender?
Aplicativos Móveis: PWA, Instants Apps. Vamos entender?Aplicativos Móveis: PWA, Instants Apps. Vamos entender?
Aplicativos Móveis: PWA, Instants Apps. Vamos entender?
 
PhoneGap - Criando aplicações Android e iOS com HTML5
PhoneGap - Criando aplicações Android e iOS com HTML5PhoneGap - Criando aplicações Android e iOS com HTML5
PhoneGap - Criando aplicações Android e iOS com HTML5
 
Hands-on Cordova / Phonegap - GDG JF
Hands-on Cordova / Phonegap - GDG JFHands-on Cordova / Phonegap - GDG JF
Hands-on Cordova / Phonegap - GDG JF
 

Tutorial para Desenvolvimento Mobile usando HTML CSS e Javascript