Coraz bliżej backendu

13 Apr 2017

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ę.