React Native - Code source de l'application Assalate

import React, { Component } from 'react';
import {AppRegistry, StyleSheet, ActivityIndicator, WebView, StatusBar, Text, View, AsyncStorage} from 'react-native';

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

    this.state = {
      data: {},
      isLoading: true,
      refreshing: false,
    }

  }
  /**
   * componentDidMount()
   * cette fonction est executée une fois au démmarage de l'appli
   */
  componentDidMount() {

    /* recuperer les données depuis AsyncStorage  */
    AsyncStorage.multiGet(['AS_date', 'AS_fajr', 'AS_dohr', 'AS_asr', 'AS_maghreb', 'AS_ichaa', 'AS_vendredi', 'AS_url'])
      .then((value) => {
        this.setState({
          data: {
            Date: value[0][1],
            Fajr: value[1][1],
            Dohr: value[2][1],
            Asr: value[3][1],
            Maghreb: value[4][1],
            Ichaa: value[5][1],
            Vendredi: value[6][1],
            Url: value[7][1]
          },
          isLoading: false,
        });
      });
      this.callApi();
  }
  /**
  * callApi()
  * recuperer les données depuis api.latrach.net
  */
  callApi() {
    this.setState({
      isLoading: true,
    });

    fetch('http://api.latrach.net/salate/v1', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        dateNowYear: '',
        dateNowMonth: '',
        dateNowDay: '',
      })
    })
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          data: {
            Date: responseJson.Date,
            Fajr: responseJson.Fajr,
            Dohr: responseJson.Dohr,
            Asr: responseJson.Asr,
            Maghreb: responseJson.Maghreb,
            Ichaa: responseJson.Ichaa,
            Vendredi: responseJson.Vendredi,
            Url: responseJson.Url
          },
          isLoading: false,
        });
        /*Strore data Locally for offline */
        AsyncStorage.multiSet([
          ['AS_date', responseJson.Date],
          ['AS_fajr', responseJson.Fajr],
          ['AS_dohr', responseJson.Dohr],
          ['AS_asr', responseJson.Asr],
          ['AS_maghreb', responseJson.Maghreb],
          ['AS_ichaa', responseJson.Ichaa],
          ['AS_vendredi', responseJson.Vendredi],
          ['AS_url', responseJson.Url]
        ]);
      }).catch(() => {
        this.setState({
          isLoading: false,
        });
      })
  }

  render() {
    if (this.state.isLoading) {
      return (
        <View style={{ flex: 1 }}>
          <ActivityIndicator />
        </View>
      );
    }
    return (
      <View style={{ flex: 1 }}>
        <StatusBar
          backgroundColor="green"
          barStyle="light-content"
        />
        <View style={styles.barre}>
          <Text style={styles.textDate}>{this.state.data.Date}</Text>
          <Text onPress={this.callApi.bind(this)} style={styles.textRefresh}>Actualiser</Text>
        </View>
        <View style={styles.odd}>
          <Text style={[styles.textLeft, styles.textOdd]}>Fajr</Text>
          <Text style={[styles.textCenter, styles.textOdd]}>{this.state.data.Fajr}</Text>
          <Text style={[styles.textRight, styles.textOdd]}>الفجر</Text>
        </View>
        <View style={styles.even}>
          <Text style={styles.textLeft}>Dohr</Text>
          <Text style={styles.textCenter}>{this.state.data.Dohr}</Text>
          <Text style={styles.textRight}>الظهر</Text>
        </View>
        <View style={styles.odd}>
          <Text style={[styles.textLeft, styles.textOdd]}>Asr</Text>
          <Text style={[styles.textCenter, styles.textOdd]}>{this.state.data.Asr}</Text>
          <Text style={[styles.textRight, styles.textOdd]}>العصر</Text>
        </View>
        <View style={styles.even}>
          <Text style={styles.textLeft}>Maghreb</Text>
          <Text style={styles.textCenter}>{this.state.data.Maghreb}</Text>
          <Text style={styles.textRight}>المغرب</Text>
        </View>
        <View style={styles.odd}>
          <Text style={[styles.textLeft, styles.textOdd]}>Ichaa</Text>
          <Text style={[styles.textCenter, styles.textOdd]}>{this.state.data.Ichaa}</Text>
          <Text style={[styles.textRight, styles.textOdd]}>العشاء</Text>
        </View>
        <View style={styles.even}>
          <Text style={styles.textLeft}>Vendredi</Text>
          <Text style={styles.textCenter}>{this.state.data.Vendredi}*</Text>
          <Text style={styles.textRight}>الجمعة</Text>
        </View>
        <WebView
          source={{ uri: this.state.data.Url + '?v=1.9&os=android&app=com.reactnativeassalat' }}
          style={styles.news}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  barre: { flexDirection: 'row',backgroundColor: '#000' },
  textDate: { flex: 2, color: '#fff', textAlign: 'center' , marginTop: 20},
  textRefresh: { flex: 1, backgroundColor: '#841584', color: '#fff', textAlign: 'center', marginTop: 20 },
  odd: { flexDirection: 'row', backgroundColor: '#29a9bf' },
  textOdd: { color: '#fff' },
  even: { flexDirection: 'row', backgroundColor: '#fff' },
  news: { flexDirection: 'row', backgroundColor: '#f0fbe4' },
  textLeft: { flex: 1, textAlign: 'left', paddingLeft: 10 },
  textRight: { flex: 1, textAlign: 'right', paddingRight: 10 },
  textCenter: { flex: 1, textAlign: 'center' },
});

AppRegistry.registerComponent('Assalate', () => Assalate);

L'application est développé en React-native, elle appelle (consomme)  un  webservice développé sous Drupal 8 (ressource) est parse la réponse json .

Code Php de la ressource Rest Drupal8:

 

<?php
namespace Drupal\latrach_rest_api\Plugin\rest\resource;

use

Drupal\rest\Plugin\ResourceBase;
use
Symfony\Component\HttpFoundation\JsonResponse;
use
Drupal\latrach_salat\DateHijri;

/**
 * Represents entities as resources.
 *
 * @see \Drupal\rest\Plugin\Deriver\EntityDeriver
 *
 * @RestResource(
 *   id = "latrach_rest_api",
 *   label = @Translation("REST API pour les horaires des prieres UAMO"),
 *   uri_paths = {
 *     "canonical" = "/salate/{operation}",
 *     "https://www.drupal.org/link-relations/create" = "/salate/{operation}"
 *   }
 * )
 */
class LatrachApiResource extends ResourceBase {

  public function

post($operation = null) {
   
$request = \Drupal::request();
   
$params = json_decode($request->getContent());
   
$db = \Drupal::database();
   
$hijri = new DateHijri();
   
$today_y = date("Y");
   
$config = \Drupal::config('latrach_salat.settings');
   
$config_vendredi = $config->get('salat_vendredi');
    if (empty(
$params->dateNowDay)) {
     
$today_y = date("Y");
     
$today_m = date("n");
     
$today_d = date("j");
    }
    else {
     
$today_y = $params->dateNowYear;
     
$today_m = $params->dateNowMonth;
     
$today_d = $params->dateNowDay;
    }
   
$resultats = $db->query(" .....................")->fetchAll();
    if (empty(
$resultats[0]->horaire_vendredi)) {
     
$resultats[0]->horaire_vendredi = $resultats[0]->horaire_dohr;
    }

   

$dateHijri = $hijri->miladiToHijri($today_d, $today_m, $today_y);

    if (

$operation == 'v1') {
     
$date_hijri = $dateHijri["day"] . ' ' . $dateHijri["dmy_h"];
     
$date_miladi = '   ' . date("d") . "-" . str_pad($dateHijri["m_m"], 2, '0', STR_PAD_LEFT) . "-" . date("Y") . '   ';
     
$data = [
       
'Date' => $date_hijri . $date_miladi,
       
'Fajr' => $resultats[0]->horaire_fajr,
       
'Dohr' => $resultats[0]->horaire_dohr,
       
'Asr' => $resultats[0]->horaire_asr,
       
'Maghreb' => $resultats[0]->horaire_maghreb,
       
'Ichaa' => $resultats[0]->horaire_ichaa,
       
'Vendredi' => $resultats[0]->horaire_vendredi,
       
'Url' => "http://www.api.latrach.net/horaires-salat",
      ];
    }
    else {
     
$data = [];
    }
    return new
JsonResponse($data);
  }

}

?>

Tags: 

Catégories: 

Share/Save