# DS151

# Aula 01 - Introdução

# vídeo aulas:
[normal](https://youtu.be/x6YTMSqzoJk)
[sem pausas](https://youtu.be/4TEIq-0lOk0)

## Plano de ensino e avaliação

Consultar moodle da disciplina (https://www.tads.ufpr.br).

## O que aprenderemos?

Como desenvolver aplicativos para Android (e iOS) utilizando o framework React Native.

## Como aprenderemos?

~~Por meio de aulas teóricas e práticas.~~

Para metodologia durante a pandemia de COVID-19, consulte o moodle da disciplina e o plano de ensino.

## Essa disciplina é difícil?

Não. Porém o bom aproveitamento depende de muita prática. O aprendizado do
desenvolvimento de aplicativos para dispositivos móveis utilizando
React Native envolve, entre outras coisas,
o estudo da linguagem Javascript moderna, bibliotecas e frameworks **atualizadas com muita frequência**.

Portanto, é necessário praticar para que os exemplos sejam apreendidos e
aprendidos de forma adequada. Não se assuste com a quantidade de códigos novos
no início da disciplina. A ideia é que eles se tornem, pouco a pouco, mais
"palatáveis".

## Desenvolvimento para Dispositivos Móveis

Boa parte do desenvolvimento de aplicações para dispositivos móveis se direciona,
hoje, a dois sistemas operacionais: **Android** (*Google*) e **iOS** da empresa (*Apple*).

### Android

- Desenvolvido por um consorcio de desenvolvedores conhecido como Open Handset Alliance, sendo o principal colaborador o Google;
- Sistema Operacional para dispositivos móveis mais utilizado em todo o mundo:
- Mais de 2bi de dispositivos ativos;
- Além do sistema operacional, inclui:
- Middleware (comunicação entre aplicativos);
- Aplicações-chave;
- Kernel do Linux como base;
- Open-source ( http://source.android.com ):
- Licença Apache;
- Cada fabricante pode criar seu Android "personalizado";
- Entretanto, para ter Apps do Google, o sistema deve ser homologado;
- Primeira versão lançada em 2008;
- **API Level** é um número sequencial que identifica a versão do Android
(também possui o nome de um doce);
- Estamos indo para a API Level 30, versão 11:
- Para saber mais: https://en.wikipedia.org/wiki/Android_version_history
- É importante conhecer as versões do Android para sabermos quais as APIs,
classes e recursos estão disponíveis para nossos aplicativos em certos
aparelhos;

### iOS

- Criado e desenvolvido pela Apple Inc.
- Segundo Sistema Operacional para dispositivos móveis mais utilizado no mundo:
- 13,7% do mercado;
- Além do sistema operacional, inclui:
- Middleware (comunicação entre aplicativos);
- Aplicações-chave;
- Código fechado com algumas partes Open-source:
- Licença Apache;
- Primeira versão lançada em 2007;
- Revolucionou o conceito de smartphones e suas interfaces;

### Desenvolvimento Nativo

Entende-se por desenvolvimento nativo aquele que produz um software capaz de ser executando seguindo as especificações do Sistema Operacional e Hardware alvo.

Em geral, isso impõem que o software seja desenvolvido a partir de ferramentas e linguagens de programação específicos.

A vantagem do desenvolvimento nativo é que o software final comunica-se diretamente com o sistema operacional, tendo acesso a bibliotecas oficiais e aos módulos do hardware. Tudo isso sem perdas adicionais de desempenho. No caso de smartphones, o aplicativo nativo tem acesso facilitado, por exemplo, aos dispositivos do hardware, como câmera, GPS, e outros, além de manter a experiência do usuário uniforme entre diferentes aplicativos.

### Desenvolvimento Não Nativo

Por outro lado, o desenvolvimento "não nativo" produz um software que não é capaz de rodar diretamente no sistema alvo. Ou seja, precisa ser, de alguma forma, emulado ou auxiliado por um outro software, este nativo, dentro do sistema.

Talvez uma das formas mais conhecidas de desenvolvimento de aplicativos não nativos seja através do Framework [Ionic](https://ionicframework.com/). Com ele, pode-se desenvolver aplicações web que são executadas dentro de um *WebView* nativo e simulam a experiência nativa de outros aplicativos. Ou seja, o aplicativo, na verdade, é uma página web apresentada por um navegador. Entretanto, este fato fica oculto para o usuário. Além disso, o framework auxilia os desenvolvedores com diversos módulos para facilitar o acesso aos dispositivos de hardware disponíveis.

### Desenvolvimento Cross-plataform

Desenvolvimento *Cross-plataform* é, por sua vez, o desenvolvimento de uma única aplicação que seja capaz de ser executada em diferentes plataformas. No caso dessa disciplina, o desenvolvimento *cross-plataform* permite a execução de um mesmo aplicativo tanto em dispositivos Android quanto iOS.

Diferentes frameworks permitem a criação de aplicativos *cross-plataform*. O próprio Ionic, descrito acima, é capaz de produzir, a partir de um mesmo código-fonte, aplicações para Android e iOS (afinal, é uma página web (sendo muito simplista aqui)).

Nessa disciplina utilizaremos o framework chamado [**React Native**](https://reactnative.dev/) que auxilia na produção de aplicações cross-plataform e nativas (sim! mas com suas ressalvas).

### Estudaremos algo cross-plataform, mas nem tanto ...

Embora a tecnologia a ser utilizada por nós permite o desenvolvimento para dispositivos Android e iOS, essa disciplina terá um enfoque mais direto no desenvolvimento para Android.

Isso se deve a limitações de hardware impostas ao desenvolvimento para dispositivos iOS, mesmo utilizando React Native.

Em outras palavras, não possuo um computador Apple. Até tenho um velhinho, mas ele roda Archlinux btw. :)

Se você possui um computador da Apple, fique à vontade para utilizá-lo. Inclusive, compartilhe com a turma seus resultados. Eu apenas não conseguirei demonstrar o desenvolvimento para essa plataforma durante as aulas.

## Ambiente de desenvolvimento

Será interessante, portanto, que todos possuam o Android Studio instalado em suas máquina.
Mais informações [aqui](https://gitlab.com/ds151-alexkutzke/material/blob/master/aula_01_introducao.md#android-studio).

Estritamente, o desenvolvimento de aplicações com React Native (mais especificamente com o expo)
não exige a instalação do Android Studio. Entretanto, para testes mais expressivos e uma experiência mais completa, sua instalação é interessante.

Abaixo estão algumas informações sobre tecnologias e softwares que utilizaremos durante as aulas.

### Javascript
Linguagem de programação que utilizaremos por toda a disciplina.

Embora poucos saibam, a linguagem Javascript possui muitas versões e é atualizada quase anualmente. Por isso, utilizaremos vários recursos novos da linguagem. Para saber mais sobre as versões existentes e suas especificidades, consulte a Seção de leituras indicadas.

### NodeJS

É um runtime de Javascript. Ou seja, um ambiente capaz de executar código Javascript, diferente dos navegadores de internet. Possibilita, assim, o uso dessa linguagem para a criação de aplicações completas de propósito geral, e não apenas scripts dentro de navegadores e páginas web.

### NPM (ou yarn)

"Node package manager" é uma aplicação de controle e instalação de pacotes e bibliotecas Javascript. Utilizaremos durante a disciplina para a instalação de dependências durante o desenvolvimento de aplicativos.

O "Yarn" é uma alternativa ao "NPM" que pode ser utilizada durante a disciplina. Entretanto, todos os exemplos demonstrados nesse material terá o "NPM" como gerenciador de pacotes oficial. Além disso, não é aconselhável o uso dos dois softwares ao mesmo tempo. Conflitos podem ocorrer.

### Expo-cli

É uma das aplicações contidas no framework "Expo Tools". Este framework auxilia (muito!) na criação de aplicações com React Native. Considere um Rails para React Native. :)

Falaremos mais sobre o "Expo Tools" nas próximas aulas.

### Editor de texto

O próprio site do React Native indica o uso do ~Vim~ VScode como editor de texto de preferência. Porém, fique à vontade para escolher o seu.

### Teste de uma primeira aplicação

Para a instalação do ambiente necessário e uma demonstração de uma primeira aplicação, para teste desse ambiente, consulte o seguinte link:

https://reactnative.dev/docs/environment-setup

Consulte também a primeira vídeo aula da disciplina.

## Referências e leituras indicadas

- [Sobre o Javascript e suas versões](https://scotch.io/courses/10-need-to-know-javascript-concepts/js-versions-ecmascript-and-javascript)
- [Uma re-introdução ao Javascript](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
- [NodeJS](https://nodejs.org/en/)
- [NPM](https://www.npmjs.com/)
- [Yarn](https://yarnpkg.com/)
- [Expo-cli](https://docs.expo.io/workflow/expo-cli/)
- [Versões Android](https://en.wikipedia.org/wiki/Android_version_history)
- [Comparação entre S.O.s mobile](https://en.wikipedia.org/wiki/Comparison_of_mobile_operating_systems)
- [Sobre o Android](https://en.wikipedia.org/wiki/Android_(operating_system))
- [Sobre o iOS](https://en.wikipedia.org/wiki/IOS)
- [React](https://reactjs.org/)
- [React Native](https://reactnative.dev/)
- [VS](https://www.vim.org/)[Code](https://code.visualstudio.com/)

# Aula 02 - React

[normal](https://youtu.be/OeKs4dkm5tU)
[sem pausas](https://youtu.be/dsTdaiwmjv8)

Consulte a video aula gravada e os materiais de leitura abaixo:

- [Sobre o React](https://reactjs.org/docs/getting-started.html):
- [Conceitos Principais](https://reactjs.org/docs/hello-world.html) indico a leitura dos itens 1 ao 7;
- [Adicionando React a um Projeto](https://reactjs.org/docs/add-react-to-a-website.html);
- [JSX](https://reactjs.org/docs/introducing-jsx.html)
- [Babel](https://babeljs.io/);
- [Utilizando o Create React App](https://reactjs.org/docs/create-a-new-react-app.html);
- [Create React App Oficial](https://create-react-app.dev/)
- [Sobre hooks](https://reactjs.org/docs/hooks-intro.html):
- [Usando o `setState`](https://reactjs.org/docs/hooks-state.html);
- [Pensando em React](https://reactjs.org/docs/thinking-in-react.html);

## Tutoriais interessantes
- [Intro to React](https://reactjs.org/tutorial/tutorial.html);
- [React Tutorial: An Overview and Walkthrough](https://www.taniarascia.com/getting-started-with-react/) por Tania Rascia;
- [Build a CRUD App in React with Hooks](https://www.taniarascia.com/crud-app-in-react-with-hooks/) por Tania Rascia;

## Código fonte da video aula

https://gitlab.com/ds151-alexkutzke/code-02-react

Exercício da semana:

Siga o enunciado presente no repositório abaixo:

Enunciado: https://gitlab.com/ds151-alexkutzke/ds151-react-vote-assignment#atividade-react

# Aula 03 - Conceitos iniciais de RN

[normal](https://youtu.be/fkmjruEz4a8)
[sem pausas](https://youtu.be/QOw66-pgAjY)

Consulte a video aula gravada e os materiais de leitura abaixo:

- [Introdução ao RN](https://reactnative.dev/docs/getting-started);
- [Core Components e Componentes Nativos](https://reactnative.dev/docs/intro-react-native-components);
- [Uso da `FlatList`](https://reactnative.dev/docs/using-a-listview);
- Componentes (referência):
- [`Text`](https://reactnative.dev/docs/text);
- [`View`](https://reactnative.dev/docs/view);
- [`FlatList`](https://reactnative.dev/docs/flatlist);
- [`Button`](https://reactnative.dev/docs/button);
- [`TouchableOpacity`](https://reactnative.dev/docs/touchableopacity);
- [`Image`](https://reactnative.dev/docs/image);

## Código fonte da video aula

Consulte o README.md do repositório abaixo para instruções de instalação.

https://gitlab.com/ds151-alexkutzke/code-03-conceitos-iniciais

## Como funciona o RN?

- [React Native em 2019, nova arquitetura e comparações com Flutter](https://blog.rocketseat.com.br/react-native-em-2019/);
- Para uma leitura mais aprofundada:
- [React Native — A Bridge To Project Fabric — Part 1](https://medium.com/swlh/react-native-a-bridge-to-project-fabric-part-1-5af6a53c0d83);
- [React Native — A Bridge To Project Fabric — Part 2](https://medium.com/@chenfeldmn/react-native-a-bridge-to-project-fabric-part-2-1f082415b881);
- [React Native — A Bridge To Project Fabric — Part 3](https://medium.com/@chenfeldmn/react-native-a-bridge-to-project-fabric-part-3-ae495794c6b0);
- [React Native's New Architecture - Parashuram N - React Conf 2018](https://www.youtube.com/watch?v=UcqRXTriUVI).

# Aula 04 - State Hook

[normal](https://youtu.be/5fe8s__W20Y)
[sem pausas](https://youtu.be/KgOmg0QdHmA)

Consulte a video aula gravada e os materiais de leitura abaixo:

- [Introdução aos Hooks](https://reactjs.org/docs/hooks-intro.html);
- [State Hook](https://reactjs.org/docs/hooks-state.html);
- [Componente TextInput](https://reactnative.dev/docs/textinput);

## Código fonte da video aula

Consulte o README.md do repositório abaixo para instruções de instalação.

https://gitlab.com/ds151-alexkutzke/code-04-state-hook

Exercício da semana

Siga o enunciado presente no repositório abaixo:

Enunciado: https://gitlab.com/ds151-alexkutzke/ds151-task-list-assignment#atividade-todolist

[soluçao tarefa 1](https://gitlab.com/ds151-alexkutzke/vote-app-example)

# Aula 05 - Layout

[normal](https://youtu.be/Lr-oGuFfFME)
[sem pausas](https://youtu.be/hXB27jSL7Ig)

Consulte a video aula gravada e os materiais de leitura abaixo:

- [Propriedade `style`](https://reactnative.dev/docs/style);
- [Altura e Largura](https://reactnative.dev/docs/height-and-width);
- [Layout com Flexbox](https://reactnative.dev/docs/flexbox);
- [Guia para Flexbox](https://origamid.com/projetos/flexbox-guia-completo/);
- [Mais sobre Flexbox](https://developer.mozilla.org/pt-BR/docs/Learn/CSS/CSS_layout/Flexbox);
- [Yoga Layout Playground](https://yogalayout.com/playground/);
- [Yoga Layout Docs about Flexbox](https://yogalayout.com/docs);
- [Stackoverflow sobre flexGrow, flexShrink e flexBasis](https://stackoverflow.com/a/43147710);

## Código fonte da video aula

Consulte o README.md do repositório abaixo para instruções de instalação.

https://gitlab.com/ds151-alexkutzke/code-05-layout

# Aula 06 - Navigation e Axios
[normal](https://youtu.be/hY1ganm4lZ8)
[sem pausas](https://youtu.be/Ev2IDL09CrY)

Consulte a video aula gravada e os materiais de leitura abaixo:

- [Biblioteca React Navigation](https://reactnavigation.org/);
- [Instalação](https://reactnavigation.org/docs/getting-started);
- [Configuração inicial](https://reactnavigation.org/docs/hello-react-navigation);
- [Navegação simples](https://reactnavigation.org/docs/navigating);
- [Passagem de parâmetros para telas](https://reactnavigation.org/docs/params);
- [Biblioteca Axios](https://github.com/axios/axios):
- [Instalação](https://github.com/axios/axios#installing);
- [Criação de instância](https://github.com/axios/axios#creating-an-instance);
- [Effect Hook](https://reactjs.org/docs/hooks-effect.html);
- [Expo vector icons](https://docs.expo.io/guides/icons/):
- [Lista de ícones](https://icons.expo.fyi/);
- [The Movie Database API](https://developers.themoviedb.org/3/);

## Código fonte da video aula

Consulte o README.md do repositório abaixo para instruções de instalação.

https://gitlab.com/ds151-alexkutzke/code-06-navigation-axios-effect

Exercício da semana

Siga o enunciado presente no repositório abaixo:

Enunciado: https://gitlab.com/ds151-alexkutzke/ds151-tmdb-assignment

[soluçao todolist](https://gitlab.com/ds151-alexkutzke/task-list-app-example)

# Aula 07 - Reducer Hook e Context
[normal](https://youtu.be/iJLBRHKT8Ag)
[sem pausas](https://youtu.be/ywecupTthhM)

Consulte a video aula gravada e os materiais de leitura abaixo:

- [`useReducer`](https://reactjs.org/docs/hooks-reference.html#usereducer);
- [Context](https://reactjs.org/docs/context.html):
- [`useContext`](https://reactjs.org/docs/hooks-reference.html#usecontext);

## Código fonte da video aula

Consulte o README.md do repositório abaixo para instruções de instalação.

https://gitlab.com/ds151-alexkutzke/code-07-reducer-context

# Aula 08 - Context Genérico e Redux

[normal](https://youtu.be/m5aRqhdDFVE)
[sem pausas](https://youtu.be/91jfgR_ZpSk)

Consulte a video aula gravada e os materiais de leitura abaixo:

- [Redux](https://react-redux.js.org/):
- [Redux com hooks](https://react-redux.js.org/next/api/hooks#using-hooks-in-a-react-redux-app);
- [Exemplo](https://blog.crowdbotics.com/use-redux-hooks-in-react-native-app/).
- [Outro Exemplo](https://thoughtbot.com/blog/using-redux-with-react-hooks).

## Código fonte da video aula

Consulte o README.md do repositório abaixo para instruções de instalação.

https://gitlab.com/ds151-alexkutzke/code-08-context-redux

Exercício da semana

Siga o enunciado presente no repositório abaixo:

Enunciado: https://gitlab.com/ds151-alexkutzke/ds151-notes-assignment#atividade-notas

# Aula 09 - Mais sobre React Navigation
[normal](https://youtu.be/K5ztf1lvu3w)
[sem pausas](https://youtu.be/Wh4M97eQgGQ)

Consulte a video aula gravada e os materiais de leitura abaixo:

- [React Navigation](https://reactnavigation.org):
- [Navegação Hierárquica](https://reactnavigation.org/docs/nesting-navigators);
- [Navegação por Tabs](https://reactnavigation.org/docs/tab-based-navigation/);
- [Navegação por Drawer](https://reactnavigation.org/docs/drawer-based-navigation);
- [`useNavigation`](https://reactnavigation.org/docs/use-navigation);
- [Ciclo de Vida](https://reactnavigation.org/docs/navigation-lifecycle);
- [Eventos de Navegação](https://reactnavigation.org/docs/navigation-events);
- [Safe Areas](https://reactnavigation.org/docs/handling-safe-area/);
- [React Native Elements](https://reactnativeelements.com/):
- [Customização](https://reactnativeelements.com/docs/customization);

## Código fonte da video aula

Consulte o README.md do repositório abaixo para instruções de instalação.

https://gitlab.com/ds151-alexkutzke/code-09-serious-navigation

# Aula 10 - Autenticação
[normal](https://youtu.be/xNK-EvZL5UE)
[sem pausas](https://youtu.be/1aa1P5VkgbM)

Material da Semana:
[Links para leitura sobre Autenticação](https://gitlab.com/ds151-alexkutzke/material-react-native/blob/main/aula_10_auth.md#aula-10-autentica%C3%A7%C3%A3o)
[Exercício da semana](https://gitlab.com/ds151-alexkutzke/ds151-gitlab-assignment#atividade-gitlab)

Siga o enunciado presente no repositório abaixo:

Enunciado: https://gitlab.com/ds151-alexkutzke/ds151-gitlab-assignment#atividade-gitlab

## Código fonte da video aula

Consulte o README.md do repositório abaixo para instruções de instalação.

https://gitlab.com/ds151-alexkutzke/code-10-auth

# Aula 11 - Mapas e Notificações
[normal](https://youtu.be/XDw-FzHP-eg)
[sem pausas](https://youtu.be/LU4NAOiVEX4)

Consulte a video aula gravada e os [materiais de leitura](https://gitlab.com/ds151-alexkutzke/material-react-native/blob/main/aula_11_maps_e_notifications.md#aula-11-mapas-e-notifica%C3%A7%C3%B5es)

## Código fonte da video aula

Consulte o README.md do repositório abaixo para instruções de instalação.

https://gitlab.com/ds151-alexkutzke/code-11-maps-notifications

# Aula 12 -Publicação de Aplicativos
[normal](https://youtu.be/krB8DyWwxrY)
[sem pausas](https://youtu.be/iMGpUCJ1OWY)

[material de Leitura](https://gitlab.com/ds151-alexkutzke/material-react-native/blob/main/aula_12_bare_workflow_e_publishing.md#aula-12-bare-workflow-e-publica%C3%A7%C3%A3o)

DS151 - Desenvolvimento para Dispositivos Móveis

Prof. Alexander Robert Kutzke

# Material da disciplina DS151 - Desenvolvimento para Dispositivos Móveis
# React Native

## Tarefas

* [React Vote](https://gitlab.com/ds151-alexkutzke/ds151-react-vote-assignment):
* [Task List](https://gitlab.com/ds151-alexkutzke/ds151-task-list-assignment):
* [TMDB](https://gitlab.com/ds151-alexkutzke/ds151-tmdb-assignment):
* [Notes](https://gitlab.com/ds151-alexkutzke/ds151-notes-assignment):
* [Gitlab](https://gitlab.com/ds151-alexkutzke/ds151-gitlab-assignment):
* [Maps](https://gitlab.com/ds151-alexkutzke/ds151-maps-assignment):

## :sparkles: Galeria de Trabalhos Interessantes

* ds151-react-vote-assignment:
* [André Vitor Kuduavski](https://gitlab.com/ds151-alexkutzke/gallery/ds151-react-vote-assignment-andre-vitor-uduavski);
* [Carlos Felipe Godinho Silva](https://gitlab.com/ds151-alexkutzke/gallery/ds151-react-vote-assignment-carlos-felipe-godinho-silva);
* [Cassiano Kruchelski](https://gitlab.com/ds151-alexkutzke/gallery/ds151-react-vote-assignment-cassiano-kruchelski);
* [Julio do Lago Muller](https://gitlab.com/ds151-alexkutzke/gallery/ds151-react-vote-assignment-julio-do-lago-muller) - https://github.com/juliolmuller/;
* ds151-task-list-assignment:
* [Cassiano Kruchelski](https://gitlab.com/ds151-alexkutzke/gallery/ds151-task-list-assignment-cassiano-kruchelski);
* ds151-tmdb-assignment:
* [Cassiano Kruchelski](https://gitlab.com/ds151-alexkutzke/gallery/ds151-tmdb-assignment-cassiano-kruchelski);
* [Julio do Lago Muller](https://gitlab.com/ds151-alexkutzke/gallery/ds151-tmdb-assignment-julio-do-lago-muller) - https://github.com/juliolmuller/;
* ds151-notes-assignment:
* [Cassiano Kruchelski](https://gitlab.com/ds151-alexkutzke/gallery/ds151-notes-assignment-cassiano-kruchelski);
* [Julio do Lago Muller](https://gitlab.com/ds151-alexkutzke/gallery/ds151-notes-assignment-julio-do-lago-muller) - https://github.com/juliolmuller/;
* ds151-gitlab-assignment:
* [Cassiano Kruchelski](https://gitlab.com/ds151-alexkutzke/gallery/ds151-gitlab-assignment-cassiano-kruchelski);
* [Julio do Lago Muller](https://gitlab.com/ds151-alexkutzke/gallery/ds151-gitlab-assignment-julio-do-lago-muller) - https://github.com/juliolmuller/;
* [Wanderson Giacomin](https://gitlab.com/ds151-alexkutzke/gallery/ds151-gitlab-assignment-wanderson-giacomin);

[repo](https://gitlab.com/ds151-alexkutzke/material-react-native/-/blob/main/trabalho_2020_especial_2.md)

https://gitlab.com/ds151-alexkutzke/material-react-native/-/tree/main/