;;https://orgmode.org/worg/org-tutorials/org-publish-html-tutorial.html
(require 'ox-publish)
(setq org-publish-project-alist
'(("org-notes"
:base-directory "/home/wagner/[email protected]/envs/env-dev/sources/aulas_de_cordova"
:base-extension "org"
:publishing-directory "/home/wagner/[email protected]/envs/env-dev/sources/aulas_de_cordova/public_html/"
:recursive t
:publishing-function org-html-publish-to-html
:headline-levels 4 ; Just the default for this project.
:auto-preamble t
)
("org-static"
:base-directory "/home/wagner/[email protected]/envs/env-dev/sources/aulas_de_cordova"
:base-extension "css\\|js\\|png\\|jpg\\|gif\\|pdf\\|mp3\\|ogg\\|swf"
:publishing-directory "/home/wagner/[email protected]/envs/env-dev/sources/aulas_de_cordova/public_html/public_html/"
:recursive t
:publishing-function org-publish-attachment
)
))
("org" :components ("org-notes" "org-static"))C-c C-e # (org-export-dispatch)
Este repositório tem por finalidade prover subsidios às aulas de mobile utilizando o Apache Cordova.
Bom, vc pode seguir o tutorial desse README.org ou pode clonar o projeto e estudá-los. Pra fazer o clone: git clone https://github.com/wagnermarques/aulas_de_cordova.git
Este repositório tem vários projetos, que vão levando você das tarefas mais simples às mais complexas. Bom esse é o objetivo. Na verdade ainda não tem tantos projetos assim, mas é por aí que vamos caminhas em nossas aulas.
Dentro da pasta “projetos” tem os projetos de exemplo para estudo e para as aulas. A medida que os projetos de exemplo vao sendo criados eu vou colocando uma apresentação de cada um aqui.
Na pasta projetos vc vai encontrar os seguintes projetos que vamos estudar.
- jquerymob_menu Esse e um projeto que vamos criar do zero pra vc ter uma introducao sobre como se cria um projeto com cordova e utiliza jquery pra fazer um menu basico
- cordovafirebase_emailauth
- cordovacomsqlite1 Acesse o material sobre essa aula neste link: cordova_sqlite3
- cordova_proj4_contatos
- cordova_proj3_geo
- cordova_proj2_camera
O primeiro projeto é o jquerymob_menu que é criado desde o zero no mais à frente neste README.
O projeto jquerymob_menu apresenta os seguintes tópicos
- Instalação do JqueryMobile
- Criação de um Header e Footer comm jquery mobile
- Utilização de Paginas internas http://demos.jquerymobile.com/1.4.0/pages/ http://demos.jquerymobile.com/1.2.1/docs/pages/multipage-template.html
https://cordova.apache.org/docs/en/latest/guide/cli/
Apesar deste projeto jquerymob_menu já vir na clonagem do repositório, vamos mostrar como criar esse projeto do zero. Se eu fosse vc eu seguiria esse tutorial direitinho pra aprender como se faz…
Vá até o diretório onde vc quer criar o projeto e use o comando cordova create
cd /home/wagner/[email protected]/envs/env-dev/sources/aulas_de_cordova/projetos
rm -rf jquerymob_menu
cordova create jquerymob_menu br.edu.eteczl "JqueryMob Menu"O arquivo config.xml tem o conteúdo abaixo. Por enquanto a gente não vai precisar mecher nele porque conforme a gente vai utilizando os plugins do cordova o cordova modifica esse arquivo pra gente.
hooks é um diretório, e server pra customizar, automatizar o cordova. Por enquanto não vamos trabalhar com esse recurso.
package.json é um arquivo importante. Na verdade ele é utilizado pelo node e pelo npm e serve pra inventariar os plugins do seu projeto e para instalá-los automaticamente com o comando npm install (tem que estar no diretório do projeto)
esse é o conteúdo do nosso package.json
platforms é um diretório. É aqui que vai ficar as plataformas com que seu projeto rodará. Inclusive pra emular o seu projeto vc também precis ainstalar as plataformas.
Assim que um projeto é criado o diretório fica vazio. Para instalar plataformas siga esses exemplos abaixo onde as plataformas android e browser são instaladas, depois cofira como ficou esse diretório.
Não se esqueça que vc tem que estar no diretório do projeto pra dar esses comandos.
cd /home/wagner/[email protected]/envs/env-dev/sources/aulas_de_cordova/projetos/jquerymob_menu/
cordova platform add android
Agora, depois de adicionar as plataformas vamos consutar o conteúdo do nosso diretório platforms
depois, por curiosidade pode dar uma “passeada” por entre esses subdiretórios..
O diretório res é onde vc vai colocar images e demais recursos que o seu projeto vai precisar. Por exemplo em https://cordova.apache.org/docs/en/3.3.0/config_ref/images.html mostra como mudar o ícone da palicação.
Agora sim, o diretório www. Esse é o diretório onde ficarão suas interfaces gráficas que são compostas por tecnologias front end html, javascript e css.
Vamos dar uma olhada no conteúdo do nosso diretório www
Segue abaixo o conteúdo do nosso index.html pra gente estudar juntos…
Segue também o conteúdo do nosso index.js pra gente estudar juntos… lembrando que nosso index.js fica dentro d pasta js
Tem que comprendeder bem essa função de callback…
onDeviceReady: function() {
this.receivedEvent('deviceready');
},Só depois que ela roda é que seus plugin podem interagir com o dispositivo. Então já fica o aviso. Seus plugins só funcionam depois que o dispositivo está pronto pra uso.
Agora, sobre os plugins. São os plugins que interagem com o sistema operacional e você interage com o plugin através de javascript. Um plugin bem basicão seria cordova-plugin-dialogs pra usar diálogos nativos da plataforma. Vamos instalá-lo e depois ver o conteúdo da pasta plugin do nosso projeto.
O diretório plugins segue o mesmo entendimento. Adicionados os plugins eles são armazenados aqui.
Vamos instalar também o splasscreen
Caso não funcione o build do seu projeto, mais à frente no texto haverá mais informações sobre o seu ambiente de desenvolvimento. Nos laboratórios está tudo configurado, caso dê algum problema avance para a próxima sessão do texto e/ou solicita suporte do professor.
Outra coisa, tem alguns comandos que serão dados, vc tem que prestar atenção na saída dos comandos também heinn… tem que entender tudo…
Fazer o build significa criar o arquivo .apk que é um instalador do seu projeto mobile. Esse instalador vc pode depois passar pro seu celular e instalá-lo. Quando rodamos no emulador é exatamene a mesma coisa que é feito, ou seja, gerado o apk e depois instalá-lo no aparelho virtual.
Bom então vc precisa primeiro buidar o seu projeto, vamos fazer isso?
cd /home/wagner/[email protected]/envs/env-dev/sources/aulas_de_cordova/projetos/jquerymob_menu/
cordova build android
Dá uma olhadinha na saída do comando e veja o build foi um suscesso e que foi gerado o arquivo app-debug.apk
Agora a gente pode rodar o projeto. Bom mas pera aí, vamos ter que ver se temos um dispositivo virtual disponível pra rodar o nosos projeto.
Nas máquinas do nosso lab já tem esses dispositivos virutais configurados mas se não tivesse vc teria que criálos primeiro. Vamos aprender como se faz isso.
Puts, mas o que é um avd? Dá uma lida aqui.. https://developer.android.com/studio/run/managing-avds Pode perguntar pro professor tb é claro…
É nessa hora que a gente começa a conversar sobre o ambiente android.
Onde o android sdk está instalado na sua máquina? Na sala de aula não precisa se preocupar com o android sdk mas qdo vc configurar na sua casa aí vc pode precisar desse comando abaixo que configura o path da sua máquina pra utilizar os comandos do android sdk. Lembrando que a maneira mais fácil de instalar o android sdk é com o android studio mesmo. Depois de instalado o android studio vc configura essas variáveis de ambient pra configurar o seu path Vc vai ajustar esses caminhos para o seu diretório correto da sua máquina.
Pode ser que não tenha rodado corretamente seu comando cordova build Se isso aconteceu, não vai funcionar também o comando cordova run androi ou cordova run browser. No nosso laboratório já está tudo configurado, mas é importante conhecer um pouco sobre o ambiente de desenvolvimento que vc está usando.
Pra resolver vc tem que ver alguns passos:
- vc instalou o nodejs? https://nodejs.dev/how-to-install-nodejs
- vc instalaou o cordova? sudo npm install -g cordova
- Vc configurou as variáveis de ambiente corretamente?
Nesta sessão vc vai ver que além de configurar-mos as variáveis de ambiente a gente roda vários comandos pra checkar se as ferramentas estão funcionando.
Pra cada variável de ambiente, obviamente vc tem que ter feito a download e instalação das respectivas ferramentas #+NAME conf android sdk path
#starts code
export GRADLE_HOME=/home/wagner/[email protected]/fzlbpms/fzlStudio/integrated/build/gradle-5.1.1
export ANDROID_SDK_ROOT=/home/wagner/PROGSATIVOS/androidSdk && \
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools:$ANDROID_SDK_ROOT/emulator:$ANDROID_SDK_ROOT/tools:$GRADLE_HOME/bin
echo $PATH
adb version
sdkmanager version
gradle -v
cd $ANDROID_SDK_ROOT/tools/ && ./emulator
Pela saída acima dá pra ver que agora tá funcionando os comandos do ambiente de desenvolvimento do android que é o adb, sdkmanager, o gradle e o emulator.
É bom sempre fazer o update do sdkmanager que é a ferramenta que instala e atualiza os pactoes do android. A maioria dos desenvolvedores utiliza o visual studio pra pra fazer isso, mas por simplicidade vc pode simplesmente dar esse comando… Pra conhecer mais sobre o sdkmanager dê uma consultada em https://developer.android.com/studio/command-line/sdkmanager
#yes | sudo sdkmanager --licenses
echo y | sdkmanager --updateNo momento o sdkmanager está atualizado. Pra rodar seus aplicativos vc precisa de paddotes do android instalados Pra listar os pacotes que vc já tem instalado faça o seguinte
sdkmanager --list
Quando vc cria um emulador ele vai usar um dos pacotes instalados acima que vc escolher.
Nos equipamentos do labooratório os pacotes que vamos utilizar já estão instalados, mas se vc tiver instalando o ambiente no seu equipamento a sugestão é você instalar o seguinte pacote
sdkmanager "platform-tools" "platforms;android-26"Nesta máquina em que estou já em instalado. Essa versão será compatível com o cordova.