Application de Scanner de code-barres

En tant que utilisateur
Je souhaite scanner un code barre
Afin d'avoir le contenu du code barre

--

• expo init
• Ajouter yarn add eslint-config-react-native-wcandillon https://github.com/wcandillon/eslint-config-react-native-wcandillon
• Ajouter KittenUI https://akveo.github.io/react-native-ui-kitten/docs/guides/getting-started#manual-installation

--

• Ajouter expo-barcode-scanner https://docs.expo.io/versions/latest/sdk/bar-code-scanner/
  • permissions
  • scanner un code
  • Affiche le résultat

I find this exercise confusing because...

Problem with

curl https://swapi.dev/api/starships/ > data.ts

Well done but
d642219

is not enough

We should follow this
https://www.apollographql.com/docs/react/integrations/react-native/

and the endpoint is available at #47

import { LoginScreen as App } from './src/screens/LoginScreen';
export default App;

Les instructions ne sont claires pour la suite de l'exercice avec le storybook ! :D

Setup project

• expo new with TypeScript
• add eslint-config-react-native-wcandillon
• add react-native-paper
• #52
• #53

During the bootcamp someone said:

WTF is AppLayout

It's confusing, refactor to this API

type Props = {
  title: string;
  scrollable: boolean;
  style?: StyleProp<ViewStyle>;
  children?: React.ReactNode;
  withFooter?: boolean;
};

Usage:

<ScreenContainer scrollable={false}>
   ...
</ScreenContainer>

Example ScreenContainer.tsx

• update challenges
• update code

index.js:1 Warning: Received true for a non-boolean attribute autoComplete.

add all IO libraries to quickly design a beautiful application

Drop this and test

    // [
    //   "module-resolver",
    //   {
    //     root: ["./app"],
    //     extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
    //   },
    // ],

Application musicale

En tant que propriétaire de vinyle
Je souhaite ajouter un vinylle à mes favoris
Afin d'avoir accès à ma collection virtuelle

--

• expo init typescript with Tabs
• Ajouter yarn add eslint-config-react-native-wcandillon https://github.com/wcandillon/eslint-config-react-native-wcandillon
• Ajouter KittenUI https://akveo.github.io/react-native-ui-kitten/docs/guides/getting-started#manual-installation

--

• Créer une liste data.ts

interface VinylsProps {
  title: string
  artist: string
  image_url: string
  id: number
  date: string
}

export const allVinyls: VinylsProps[] = [
  {
    title: "From Mars to Sirius",
    artist: "Gojira",
    image_url: "https://m.media-amazon.com/images/I/91+7DKyZFmL._SS500_PIPJStripe-Robin-Large-V2,TopLeft,0,0_.jpg",
    id: 3245346,
    date: "Wed Feb 24 2021 09:56:19 GMT+0100 (Central European Standard Time)",
  },
  {
    title: "Dark side of the Moon",
    artist: 'Pink Floyd',
    image_url: "https://m.media-amazon.com/images/I/61Vs6BCeDHL._SS500_PIPJStripe-Robin-Large-V2,TopLeft,0,0_.jpg",
    id: 3245346,
    date: "Wed Feb 24 2021 09:56:19 GMT+0100 (Central European Standard Time)",
  },
  {
    title: "Les Sardines",
    artist: 'Patrick Sebastien',
    image_url:"https://m.media-amazon.com/images/I/81iGNNceqnL._SS500_.jpg",
    id: 3245346,
    date: "Wed Feb 24 2021 09:56:19 GMT+0100 (Central European Standard Time)",
  }
]

• HomeScreen la liste de tous les allvinyls.json
• CollectionScreen ma collection

Update entry point for TermsScreen.tsx

I find this exercise confusing because...

https://blog.expo.dev/expo-sdk-44-4c4b8306584a

• go on the right folder cd hackathon/spacecraft
• run expo upgrade
• run expo start and check if it's working
  • on iOS real device
  • on Android real device

change https://swapi.dev to https://swapi.py4e.com

• update challenges
• update codebase

• split the ScrollView x Flatlist with a 04.md file
• delete <WhatEverScreen />

On https://davidl.fr/workshop
Links of 1. Fetch data from remote server and 2. Add an offline message are inverted.

• read https://github.com/callstack/react-native-paper/releases
• yarn add react-native-paper
• Check if nothing is broken on ./hackathon/spacecraft

As a user
I can sign in
So that I have a custom experience

• Add SignUpScreen - SignInScreen
• Update Routes
• Test on iOS
• Test on Android

Example https://patak.dev/vite/ecosystem.html

Logos list

• VScode
• ESlint
• Prettier
• Storybook
• Jest
• @testing-library/react-native
• TypeScript
• React Native
• Babel
• react-query

Work to do

• include the logo in the challenges
• Add all the logos in one place on Figma next.davidl.fr > React Native Bootcamp

Create a new file ./src/screens/TermsScreen.tsx paste the content from this TermsScreen

the path for data is wrong
please fix it

https://reactnavigation.org/docs/upgrading-from-5.x

• challenges
• slides
• ./hackathon/spacecraft

I find this exercise confusing because...

We need to check the setup instructions

How can I use Offline?

As a junior dev
I can debug react native
So that ship code that work

• Add a debugging during the lecture
• add instructions + DEMO for https://github.com/jhen0409/react-native-debugger
• shortcut + "debug remote JS"

Application mobile d'alerte avec historique.

Fonctionnalités

• Onboarding
• PermissionsScreen
• SignIn - PasswordScreen
  • Products
    • ProductDetails - State - History - Settings
  • Ajouter un product
    • Scan QR Code
  • Historique
  • Profil
    • Contact Team

Outils

• Librairie UI https://akveo.github.io/react-native-ui-kitten/
• Datas History https://docs.expo.io/versions/latest/sdk/sqlite/
• [?] Data en local https://reactjs.org/docs/hooks-reference.html#usecontext

TODO

Librairie Auth
https://auth0.com
https://sandbox.amplifyapp.com
https://firebase.google.com

Librairie + server PushNotifications

1. Coté client
   https://docs.expo.io/push-notifications/overview/

2. Coté serveur
   https://docs.expo.io/push-notifications/sending-notifications/
   Firebase
   Amplify

I find this exercise confusing because...
fix ./src/navigation/AppRoute.ts

add an extra s

• add an example with https://reactnative.dev/docs/appstate

Laurent

Scanner de Code Barre

Code
Scanner
Permission

Martin

SpotifyLight

data playlist en .json

• https://akveo.github.io/react-native-ui-kitten/

• Add a slide to mention https://github.com/callstack/react-native-testing-library
• Add a slide to mention https://github.com/wix/Detox
• installl @callstack/react-native-testing-library on spacecraft
• add a test on utils/hello.test.ts

it("works", () => {
  expect(1).toBe(1);
});

• on package.json

    "test": "jest",
    "test:unit:watch": "jest --watch",

• test with yarn test:unit
• add your first test on src/components/StarshipCard.test.tsx
• Test if title, cost ... are presents
• test with yarn test:unit:watch

import React from "react";

import { render } from "testing-library";
import { StarshipCard } from "~/components/StarshipCard";

const shipFixture = {
...
}

describe("StarshipCard", () => {
  it("renders correctly", () => {
    const { getByText, debug } = render(
      <StarshipCard ship={shipFixture} />
    );
    debug() <----- just to test
    getByText("Star Destroyer");
    getByText("150000000 credits");
  });
});

Updating Jest setup

Testing code using React Navigation takes some setup since we need to mock some native dependencies used in the navigators.

• https://reactnavigation.org/docs/testing/
• Wrap your test component with <NavigationContainer><Card /></NavigationContainer>

Erreur ligne 10 sur la balise , que j'ai remplacé par Headline du coup.

Il y a un bug, nous pouvons compléter plusieurs fois le même exercice est donc faire augmenter le pourcentage sans compléter les autres.

Comme vous pouvez le voir avec les screens, il me reste au moins 6 exercices et pourtant on me dit que j'en ai réalisé 15 sur 19.

Create a new project

expo init

Typescript template avec 3 tabs

Add UI library

https://akveo.github.io/react-native-ui-kitten/docs/guides/getting-started#new-apps

 yarn add @ui-kitten/components @eva-design/eva react-native-svg

Add a ProductScreen

add cards of

const AllProducts = [
  {
    title: "Maison"
    id: "1"
  },
    title: "Garage"
    id: "2"
  }
]

Code quality

Add https://github.com/wcandillon/eslint-config-react-native-wcandillon

The main README needs some love

inspiration
https://github.com/microsoft/ML-For-Beginners

We need to migrate expo publish to eas

• Create a release-new.md following the new way to release

Resources:

• https://github.com/flexbox/appjs-one
• https://expo.notion.site/expo/App-js-Workshop-eeb05e0d53c447959a010f1ac49adb70

stuck in TODO

Even if The form is filled

Fetch the data with a query

https://hasura.io/learn/graphql/react-native/introduction/

• query data with a FlatList from hasura

endpoint

https://react-native-heroes.hasura.app/v1/graphql

query

query MyQuery {
  react_native_heroes {
    github_username
    twitter_username
  }
}

As a user
I can share on twitter
So that I can send kudos to developers

• install react-native-share
• message

I just upvoted @twitterName on React Native Heroes because

As a developer
I can fetch data
So that I can work on #47

Inspect and copy names into Hasura
https://twitter.com/flexbox_/following
https://github.com/flexbox?tab=following

https://github.com/drmas
https://github.com/jkadamczyk
https://github.com/thymikee
https://github.com/bd-arc
https://github.com/tannerlinsley
https://github.com/dannyhw

In React Navigation section : 2. Styling navigators and 3. Passing datas though Screens label are inverted

As a developer
I can use the last version of react-query
So that I don't waste time looking for documentation

Edit: v4 released! https://tanstack.com/query/v4/docs/guides/migrating-to-react-query-4

• challenges https://github.com/flexbox/react-native-bootcamp/blob/main/challenges/data/02.md
• slides
• ./hackathon/spacecraft

Double-check what could be improved with isFocused hook https://medium.com/@nawfalhaddi/challenges-of-using-react-query-v3-with-react-native-cae2ac16aed0

Add images to render <Card.Cover source={{uri: "https://picsum.photos/400/200"}} />

As a developer
I can use the last version of react-native-storybook
So that I don't waste time looking for documentation

v6 is on track and we should wait for the full release

https://github.com/dannyhw/expo-storybook-starter

references:

• https://dev.to/dannyhw/multiple-entry-points-for-react-native-storybook-4dkp

c6cc24b this is not enough

We should have a simple stack with

• HeroesFeedScreen
• HeroDetailsScreen

Add a new plugin

add this plugin

and explain why are we using it (add a link to https://docs.expo.dev/versions/latest/config/app/)

• update slides
• update challenges

I find this exercise confusing because...

Dans le code donné pour le header, il manque l'import de styleSheet pour le css et il manque aussi une "," au dessus de la classe header dans le cas.

Mutation for +1

As a user
I can add a +1 on someone
So that I can participate

https://hasura.io/learn/graphql/react-native/intro-to-graphql/4-watching-data-subscriptions/

https://dev.to/dailydevtips1/prisma-creating-a-upvotes-one-to-many-relation-4ndi

• migrate to Genius API
  https://docs.genius.com/#/getting-started-h1