React Native App, wagamama

Salut, nu am mai postat nimic in ultimul timp legat de ce am mai invatat sau la ce mai lucrez si m-am descis sa postez astazi o aplicatie la care lucrez.

Short story:
In ultima luna am m-am dedicat mai mult sa-mi imbunatatesc skill-urile pe React, am invatat si TypeScript inca nu m-am apucat sa-l integrez peste tot pentru ca mai am de invatat sa-l folosesc la un nivel cat mai profi, m-am apucat si de Testing in React si de aproximativ 2 saptamani m-am apucat sa invat React Native.

Am aplicat si la doua joburi la care nu am fost ales pentru ca nu am experienta. Interviurile au fost foarte ok, la una dintre companii am avut 3 iar la alta web assesment care arata cam asa https://colchester.netlify.app/ si un interviu tehnic.

Despre aplicatie:
Vreau sa fac o aplicatie pentru compania de restaurante unde am lucrat unde sa afisez deocamdata meniul.
Folosesc React Native CLI, nu prea am fost incantat de Expo, plus ca vreau sa am mai multa flexibilitate in aplicatie.

Pentru light and dark mode folosesc useColorScheme hook, pentru text am facut o componenta separata pentru a nu creea acelasi style pentru fiecare screen si colorScheme in parte.

import React from 'react';
import {Text, StyleSheet, useColorScheme} from 'react-native';
import {textColor} from '../utilis/appColors';

export default function TextScheme({
  fontSize,
  fontWeight,
  children,
  style,
  textAlign,
  ...rest
}) {
  const colorScheme = useColorScheme();
  return (
    <Text
      style={[styles(fontSize, fontWeight, colorScheme, textAlign).text, style]}
      {...rest}>
      {children}
    </Text>
  );
}

const styles = (
  fontSize = 14,
  fontWeight = 'normal',
  colorScheme = 'light',
  textAlign = 'auto',
) =>
  StyleSheet.create({
    text: {
      fontSize,
      color: textColor[colorScheme],
      fontWeight,
      textAlign: textAlign,
    },
  });

Este a doua zi si pana acum arata asa:

4 Likes

Recomandare, utilizează FlatList sau VirtualList pentru a afișa lista de meniuri.

Nu știu dacă ai folosit hipmenu, aveau o aplicație superbă pe mobile, poate o poți copia. Mie cel puțin mi-a plăcut foarte mult cum au facut animația de slide de la un restaurant la altul.

Firebase e decent pentru un backend de inceput, daca vrei ceva mai avansat https://www.koyeb.com e in beta si ofera hosting destul de generos gratuit cu docker, după vine heroku care are bază de date gratuită.

1 Like

Folosesc FlatList pe doua coloane la ecranul Curry. Inca nu stiu foarte multe librari si nu am adaugat inca foarte multe.

Nu vreau sa folosesc foarte multe librarii greoaie care sa incarce aplicatie (cel putin nu acum, pentru ca vreau sa ma obisnuiesc cu famework-ul in sine si as vrea sa fie de inceput cat mai plain ca sa pot sa descopar ce pot face cu si fara librarii si cat timp necesita implementarea unui feature fara a folosi o librarie de exemplu).

Daca ai sfaturi le accept pe toate pentru ca vreau sa invat, gen care sunt librariile esentiale / must have atunci cand incep o aplicatie pentru react native.
Eu am pana acum ca must have, react-navigation, react-native-safe-area-context, react-native-screens.

Probabil o sa am nevoie ca must have de o librarie pentru animatii, aici am gasit doua dar nu le-am folosit inca: react-native-animated (care are 11Mb, ceea ce mi se pare cam mult) si react-animatable (53Kb, care este destul de populara)

… si probabil o sa mai am nevoie de ceva si pentru imagini, slider/carousel.

Pentru api folosesc firebase realtime database dar mai am de lucrat la api, pana acum am doar o categorie cu 4 produse. Imaginile pentru api le am intr-un repo pe github iar imaginea pentru prima pagina o am in assets la aplicatie.

Cam asta am pana acum:

“dependencies”: {
@react-navigation/native”: “^6.0.2”,
@react-navigation/native-stack”: “^6.1.0”,
@reduxjs/toolkit”: “^1.6.1”,
“axios”: “^0.21.4”,
“react”: “17.0.2”,
“react-native”: “0.65.1”,
“react-native-animatable”: “^1.3.3”,
“react-native-get-random-values”: “^1.7.0”,
“react-native-safe-area-context”: “^3.3.2”,
“react-native-screens”: “^3.6.0”,
“react-redux”: “^7.2.5”,
“uuid”: “^3.4.0”
},

EDIT

Am adaugat si putina animatie:

1 Like

Day 3 UPDATE

Astazi am adaugat meniul pentru Ramen si am lucrat putin la pagina unde se gasesc detalile despre item-ul care este selectat.
Folosesc un singur screen pentru a afisa categoriile, am creat un slice in redux ca atunci cand se apasa de exemplu pe “curry” sau “ramen” link-ul api-ului se va updata cu categoria respectiva.

Postez update-uri si pe linkedin Claudiu Cojocaru on LinkedIn: #wagamama #ios #react

si pe reddit: https://www.reddit.com/r/reactnative/comments/pl7sxj/practice_by_doing_a_app/

and youtube: React Native Restaurant App - DAY #3 - YouTube

Day 4
…mai mult redux

Am adaugat optiunea de a adauga un item la favorite si de al scote si am creat un screen unde vor fii afisate itemele favorite.

1 Like

Day 5

Astazi am adaugat optiunea de a adauga si scoate iteme in cos/basket/bag cum vreti sa-i spuneti.

-Pe ecranul comenzii putem sa gasim pretul total al comenzii
-Se poate comanda item-ul in cantitati mai mari, se poate scoate (dar deocamdata doar apasand pe butonul de minus in functie de cat este cantitatea, scriind acum mi-am dat seama ca trebuie sa adaug si un buton de remove care indiferent de cantitate v-a scoate item-ul de acolo).

Partea de UI/UX nu este gata dat cam atat am putut face astazi.

Day 6

Astazi am lucrat mai mult la partea de UI/UX, cam asa arata pana acum.

2 Likes

Astazi am lucrat la partea de UX, mai exact daca vrem sa scoatem un item din cart tinem apasat pe item si avem optiunea de a scoate item-ul complet sau sa-l pastram daca ne-am razgandit.

Pentru asta am creat inca o actiune in redux, pentru a returna un nou array folosind filter si a substrage din totalul cart-ului valoarea toata la acelui item.

Pentru a crea acel overlay nu am vrut sa instalez nici o librarie pentru ca nu am gasit ceva pe placul meu. In schimb folosind onLongPress, useState, index-ul item-ului din lista si il adaug conditional peste pentru ca am vrut sa fie si putin transparent ca sa se poata vedea item-ul din spate in caz ca s-a tinut apasat din gresala pe item-ul respectiv si nu doreste sa fie scos.

Am mai lucrat putin si la animatie, atunci cand item-ul este scos din comanda sau din pagina de favorite.
La animatii mai este mai mult de munca dar nu este my main focus.

Mai trebuie sa configurez ecranul principal si sa adaug un icon cu cart care sa fie vizibil pe mai multe ecrane.

Day 8

Visibil nu pare ca am facut mult astazi dar lucrurile mici iti ocupa cel mai mult timp.
Astazi m-am gandit cum sa fac prima pagina sa arate putin mai bine, am mai umblat putin si pe la animatii, new placeholder pentru empty cart si favorite screen.

Am incercat sa implementez si alte idei pentru prima pagina sa fac meniul mai interactiv dar le tin pe hold deocamdata.
Pana acum arata asa:

1 Like

Day 9

Astazi am adaugat mai multe categorii din meniu si optinea de a filtra mancarea vegana pentru fiecare categorie.

1 Like

Bun revin cu un update. Deocamdata cu aceasta aplicatie am ajuns intr-un punct destul de multumitor zic eu. Nu prea stiu ce idei sa mai implementez in aceasta aplicatie deoarece scopul a fost a avea meniul.

De maine am sa incep un nou proiect pentru anunturi/job-uri.

3 Likes