Sławek Rudawski

Hyde open source and mobile first theme for Jekyll. Made by @mdo.

© 2017. Sławek Rudawski All rights reserved.

Coraz bliżej backendu

Zeskanowanie kodu ISBN to dopiero pierwszy krok. Naszym celem jest uzyskanie informacji o książce jak najmniejszym kosztem - gdzie walutą jest czas spędzony nad katalogowaniem naszych wolumenów. Posiadając kod ISBN możemy odpytać jeden z serwisów udostępniających dane o książkach. Badając dostępne API doszedłem do wniosku, że najlepszym sposobem będzie odpytywać kilka serwisów i dostarczać na telefon wszystkie znalezione paczki informacji - to użytkownik wybierze najbardziej kompletną/prawidłową. Dziś przygotujemy teren pod otrzymane z serwera dane na temat książki o zeskanowanym kodzie ISBN.

Miejsce na nowe dane

Potrzebna będzie prosta formatka, która wyświetli się po otrzymaniu danych z serwera i umożliwi prezentację tych danych. Na chwilę obecną zupełnie wystarczające będą Tytuł, Autor i kod ISBN

Stan globalny a stan lokalny

Podczas tworzenia komponentu wprowadzimy w pola dane uzyskane z propsów. Zostały tam przepisane z globalnego stanu aplikacji. Od teraz będziemy nimi operować lokalnie - będą częścią stanu komponentu NewBookForm.

constructor(props) {
super(props);
this.state = {
title: props.newBook.title,
author: props.newBook.author,
isbn: props.newBook.isbn
}
BackAndroid.addEventListener('hardwareBackPress', () => {
this.props.navigator.replace({ index: 2, title: 'Skan ISBN', page: ScanIsbn });
return true;
} );
}
view raw constructor.jsx hosted with ❤ by GitHub

Kilka spostrzeżeń

Przy okazji ustawimy akcję przycisku Back na wywołanie ekranu skanowania kodu ISBN. Zwróć uwagę, że zamiast dotychczasowych push/pop wywołuję metodę replace. Replace zamienia aktualną ścieżkę Navigatora na podaną jako parametr. Co w ten sposób uzyskuję? Między innymi to, że aparat mam uruchomiony tylko w momencie skanowania (nie zostaje działać w tle). Ponadto przechodząc z ekranu skanowania do ekranu formularza komponent Camera nadal działał i możliwe było skanowanie kolejnych kodów… Nie będziemy implementować takiego ficzera :)

<View>
<Toolbar
leftElement="arrow-back"
centerElement={ this.props.route.title }
onLeftElementPress={ () => { this.props.navigator.replace({ index: 2, title: 'Skan ISBN', page: ScanIsbn }) } }
/>
<Text>Tytuł:</Text>
<TextInput onChangeText={ (text) => this.setState({ title: text })} value={ this.state.title } />
<Text>Autor:</Text>
<TextInput onChangeText={ (text) => this.setState({ author: text })} value={ this.state.author } />
<Text>ISBN:</Text>
<TextInput onChangeText={ (text) => this.setState({ isbn: text })} value={ this.state.isbn } />
</View>
view raw newBookForm.jsx hosted with ❤ by GitHub

Metoda onChangeText komponentu TextInput “podmienia” tekst trzymany w stanie aplikacji na ten właśnie wprowadzony przez użytkownika. Po wprowadzeniu wszystkich danych wyślemy dane do huba - wykonując tap na ActionButton, do którego podepniemy odpowiednią akcję.