Czas na ostatni raport na temat tworzenia aplikacji DiscoverPlaces w ramach konkursu Daj się poznać 2017, a w nim dodanie loadera, poprawienie API, tak by zablokować możliwość spamowania oraz ogólne poprawki.

Loader

Z racji iż ładowanie wiadomości, dodawanie komentarza oraz dodawanie wiadomości może potrwać chwilę czasu, dobrze byłoby poinformować użytkownika, że aplikacja coś w tym czasie robi, dlatego postanowiłem dodać loader. W tym celu wykorzystana została paczka react-native-progress. Powstał komponent zaprezentowany poniżej:

import React, { Component } from 'react';
import { View } from 'react-native';
import CircleProgress from 'react-native-progress/Circle';
import { COLORS, STYLES } from './../../config/style';

export default class Loader extends Component
{
  constructor (props) {
    super(props);

    this.state = {
      isLoading: false,
      isCommentCreating: false
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      isLoading: nextProps.navigationParams.hasOwnProperty('isLoading') ? nextProps.navigationParams.isLoading : false,
      isCommentCreating: nextProps.navigationParams.hasOwnProperty('isCommentCreating') ? nextProps.navigationParams.isCommentCreating : false,
    });
  }

  render () {
    return (
      <View style={STYLES.loader}>
        {(this.state.isLoading || this.state.isCommentCreating) &&
          <CircleProgress
            size={20}
            indeterminate={true}
            color={COLORS.blue}
          />
        }
      </View>
    );
  }
}

Jest on załączany obok loga w nagłówku aplikacji.

navigationOptions: ({navigation}) => ({
  headerTitle: HEADER,
  headerRight: (<Loader navigationParams={navigation.state.params}/>)
})

Tutaj można dodać, że przy włączonej opcji „debug js remotely” animacja loadera może troszkę się przycinać, dlatego iż pracuje ona pod większym obciążeniem.

Mniejsze poprawki aplikacji mobilnej

Mała refaktoryzacja

Delikatnie poprawiony został kod, głównie w metodach odpowiedzialnych za walidację formularzy, gdyż one były dosyć paskudne.

Wycentrowanie loga

Po dodaniu loadera, logo troszkę uciekało na lewo, także zostało to poprawione.

Dodanie ikony aplikacji

Zmieniona została domyślna ikona aplikacji.

Dodanie release config

O przygotowaniu aplikacji w React Native do wydania przeczytać można tutaj. W skrócie to tworzymy klucz, który będzie służył do podpisywania aplikacji, a następnie zmieniamy config builda, tak aby z tego klucza korzystał.

Poprawienie buga z zamykaniem modala

Poprawiony został bug, w którym przycisk modala nie pojawiał się co uniemożliwiało zamknięcie powiększonego zdjęcia lub wideo. Button co prawda miał dodany zIndex, ale to niestety nie dawało zamierzonego rezultatu. Pomogła natomiast zmiana kolejności elementów tak by przycisk wyświetlał się ostatni.

Dodanie informacji z prośbą o włączenie GPS

Tutaj niestety problem jest taki, że gdy włączymy precyzyjną lokalizację czyli korzystanie z gps i wifi to potrafi czasem cały czas szukać sygnału co skutkuje komunikatem „Request timed out”.

Zmiany w API

Dodanie blokady na 5 sekund dla danego IP

Teraz przy dodaniu wiadomości lub komentarza, zapisywany jest adres IP i blokowana jest możliwość ponownego dodania na pięć sekund. Poniżej przedstawiona została metoda sprawdzająca czy użytkownik z danym IP może dodać komentarz lub wiadomość.

public function isPossibleToAdd(ResourceInterface $resource, string $ip)
{
    return $this->em->createQueryBuilder()
        ->select('COUNT(r)')
        ->from(get_class($resource), 'r')
        ->where('r.ip = :ip')
        ->andWhere('timestampdiff(SECOND, r.date, :today) < :timeConstraint')
        ->setParameters([
            'ip' => $ip,
            'today' => new \DateTime(),
            'timeConstraint' => $this->timeConstraintInSec
        ])
        ->getQuery()
        ->getSingleScalarResult() == 0;
}

 Dodanie endpointu zwracającego 1000 ostatnich lokalizacji wiadomości

Endpoint ten wykorzystany będzie do stworzenia mapy ostatnich wiadomości. Tutaj pojawił się problem z adnotacjami dla FOSRestBundle. Otóż dodanie

@View(serializerGroups={"coordinates"})

nie powodowało żadnej reakcji, a cały czas używana była domyślna grupa serializacji. Rozwiązane to zostało poprzez ustawienie grupy w kodzie:

$view->setContext((new Context())->setGroups(['coordinates']));

Problemy z travisem

Do projektu API na githubie skonfigurowane mam CI z użyciem Travisa co opisywałem tutaj. Problem pojawił się taki, że nagle przy robieniu pusha na serwer git wyrzucał, że są tam już jakieś zmiany i najpierw należałoby zrobić pull. Z racji, że nie ma prawa być żadnych zmian na serwerze, a kod ma być 1:1 z tym co w repozytorium na githubie do configu travisa dodałem po prostu push -f.

Kolejnym problemem na jaki się natknąłem przy wprowadzaniu powyższych zmian to, że lokalnie przechodziły mi wszystkie testy, natomiast na travisie nie. Problem polegał na tym, że dodałem sprawdzenie adresu IP przy dodawaniu wiadomości oraz komentarza i o ile lokalnie wszystko było ok, bo wykonywały się tylko testy, to travis chwilę przed odpaleniem testów ładował fixtures, w których dodawane są trzy wiadomości z adresem IP 127.0.0.1, co powodowało nie przejście testu, gdyż czas był zbyt krótki. Rozwiązałem to po prostu zmieniając wstawiany w fixtures adres IP na 0.0.0.0.

Co dalej?

Ten raport jest ostatnim, dwudziestym wpisem konkursowym, lecz pojawi się jeszcze dodatkowo na dniach podsumowanie odnośnie konkursu ze stroną aplikacji oraz linkiem do pobrania.

DiscoverPlacesdsploaderphpreact-nativereleasesymfony