ukryj menu
SPEC
aktualizacja: 2022-01-14 12:17:24
1. Opis tej części aplikacji - baza 3 pkt
- możliwość uploadu jednego pliku na serwer - ekran dużego zdjęcia - 0.5 pkt
- możliwość uploadu wielu zaznaczonych zdjęć na serwer - ekran galerii - 1 pkt
- możliwość uploadu pliku na serwer, pobranego ImagePickerem - ekran kamery - 0.5 pkt
- możliwość konfiguracji adresu i portu do uploadu - Dialog - 1 pkt
- w każdym wypadku zapis na serwerze node
2. upload
dane zdjęcia wysyłamy postem, z użyciem fetcha:
const data = new FormData();
// data.append('data1', 'test1');
data.append('photo', {
uri: "uri zdjęcia",
type: 'image/jpeg',
name: 'test'
});kopiuj
// data.append('data1', 'test1');
data.append('photo', {
uri: "uri zdjęcia",
type: 'image/jpeg',
name: 'test'
});kopiuj
przykłady zostały przećwiczone w lekcji:
LEKCJA 04 - EXPRESS (p) - files - fetch
Uwaga: podczas testowania aplikacji w sieci lokalnej, podajemy w fetchu adres serwera do którego wykonywany jest post:
fetch("http://192.168.x.xx:3000/upload", {
method: 'POST',
body: data
})kopiuj
method: 'POST',
body: data
})kopiuj
3. zapis na serwerze
przesłane postem dane zapisujemy z użyciem biblioteki formidable
przykłady zostały przećwiczone w poprzednich projektach
4. ImagePicker
w ekranie kamery wykorzystujemy mechanizm pozwalający na pobranie dowolnego zdjęcia z systemowej galerii
w zależności od urządzenia, otrzymujemy różne wbudowane funkcjonalności, w moim wypadku widoczne na skrinach crop-owanie
Uwaga: błąd występujący podczas pracy z biblioteką jest spowodowany problemem z kamerą w nowym expo,
a nie z samym ImagePickerem
Proszę przenieść przycisk wywołujący ImagePickera do kebab menu lub do ekranu BigPhoto
install
..\expo install expo-image-picker
kopiuj
kopiuj
import * as ImagePicker from 'expo-image-picker';kopiuj
uruchomienie pickera w ekranie kamery
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
if (!result.cancelled) {
// formdata
// fetch
}kopiuj
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
if (!result.cancelled) {
// formdata
// fetch
}kopiuj
5. konfiguracja aplikacji
a) Przyjmując, że na razie nie wiadomo w jaki sposób będzie przeprowadzona ocena,
warto wprowadzić do aplikacji mechanizm podawania adresu serwera
tak aby dało się go łatwo zmienić już po skompilowaniu aplikacji,
czyli np zapis do ustawień aplikacji (SecureStore)
proponuję wyskakujący dialog, łatwo customizowalny komponent, z możliwością dodania inputa wewnątrz
https://www.npmjs.com/package/react-native-dialogkopiuj
podajemy ip i port aplikacji webowej
b) proszę o utworzenie dwu oddzielnych folderów: na aplikację mobilną i webową
Część webową będziemy rozbudowywać w przyszłości
6. WebBrowser
Przekierowanie do domyślnej przeglądarki mobilnej
https://docs.expo.dev/versions/latest/sdk/webbrowser/kopiuj