Développement d'applications mobiles

1- Environnement de développement

2- Introduction à React Native

Écosystème mobile

  • Natif Android, Java/Kotlin
  • Natif iOS, Swift/Objective-C
  • Multiplateforme?
    • React Native
    • Xamarin
    • Ionic/Capacitor
    • ...

Quoi choisir?

  • Public visé
  • Fonctionnalités requises
  • Taille et aptitudes de l'équipe de développement

React Native

  • Mature et flexible
  • Permets de réutiliser les compétences en Web
  • Richesse de l'écosystème JavaScript, React, Node et Expo
  • Documentation et exemples abondant
  • Communauté active
  • Passerelle native
  • Avec Expo!

📚 React Native Docs

📚 Expo

Composants de l'écosystème React Native
+---------------------------+
| Expo |
| ▼ |
| React Native CLI |
| |
| +---------------------+ |
| | React / JS / TS | |
| | ▼ ▲ | |
| | React Native | |
| | Node | |
| | | |
| | +---------------+ | |
| | | | | |
| | | Android / iOS | | |
| | | | | |
| | +---------------+ | |
| +---------------------+ |
+---------------------------+

📚 Expo Docs

📚 Expo CLI

Configuration de l'environnement de développement

⬇️ Télécharger la machine virtuelle

rb
Vagrantfile
ENV["name"] ||= "ReactNative"


PARENT_PATH = "../_utils/Vagrantfile"
load File.join(File.dirname(__FILE__), PARENT_PATH)

Vagrant.configure("2") do |config|

config.vm.provider "virtualbox" do |vb|
vb.memory = "4096"
vb.cpus = 2
end

config.vm.provision "shell", inline: <<-SHELL
sudo apt install -y nodejs npm git

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

# As standard user
sudo su etd -c '
mkdir -p ~/.npm-global/lib
npm config set prefix '~/.npm-global'
'

echo "export PATH=~/.npm-global/bin:
\\$PATH" | sudo tee -a /etc/profile.d/variables.sh
echo "export REACT_NATIVE_PACKAGER_HOSTNAME=
\\$(ip -f inet addr show eth1 | awk '/inet/ {print \\$2}' | grep -Po '\\d+\\.\\d+\\.\\d+.\\d+')" | sudo tee -a /etc/profile.d/variables.sh

SHELL

end

Optionnel, pour tester nativement sur un appareil Android

Go!

Valider la configuration

bash
Environnement Node, NPM
node -v
npm -v
bash
React Native / Expo
npx create-expo-app test

cd test

npx expo start # --tunnel si appareil mobile pas sur le meme reseau, au Cegep etre sur TechInfo-Etudiant
# Répondre Y pour l'installation de ngrok

# Scanner le code QR avec Expo Go

Git

bash
git config --global user.name "John Doe"
git config --global user.email "1234567@cshawi.ca"

Bitbucket

https://bitbucket.org/account/signup/
www.atlassian.com/software/views/bitbucket-academic-license.jsp
Authentification SSH

RTFM