React Native - Konum takip uygulamasının tek cihazdan çoklu cihaz uygulamasına çevrilmesi

Merhabalar,

Udemy de bir react native + arduino kursunu takip ediyorum. İsmi şu şekilde: "Arduino & Node.JS ile GSM Tabanlı Konum Takip Proje Tasarımı"

Bu kursta tek bir cihazı takip etmek üzere nasıl bir sistem yapılabilir bunu gösteriyorlar. Bende bu projeyi geliştirmek ve daha iyi anlamak üzere bu projeyi çoklu cihaz takip uygulamasına dönüştürmek istiyorum.

Kursta paylaşılan app.js dosyası şu şekilde:

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MapView, { Marker } from 'react-native-maps';

import mqtt from 'mqtt/dist/mqtt';

export default class App extends Component {
    state = {
        lat: -34.397,
        lng: 150.644,
        altitude: 0,
        speed: 0,
        course: 0,
    };

    updateMap(message) {
        var [lat, lng, altitude, speed, course] = message.toString().split(',');

        // message değişkeni ile gelen sallamasyon veri şu şekilde: 40.000000,30.000000,150,50,90,100001

        this.setState({
            lat: parseFloat(lat),
            lng: parseFloat(lng),
            altitude,
            speed,
            course,
        });
    }

    componentDidMount() {
        var client = mqtt.connect('ws://157.230.113.66:3000');

        client.subscribe('LOCATION');

        client.on('connect', function() {
            console.log('connected!');
        });

        client.on('message', (topic, message) => {
            console.log(topic, ' : ', message.toString());
            switch (topic) {
                case 'LOCATION':
                    this.updateMap(message);
                    break;
            }
        });
    }

    render() {
        const { lat, lng, altitude, speed, course } = this.state;

        return (
            <View style={styles.container}>
                <MapView
                    style={{ flex: 1 }}
                    initialRegion={{
                        latitude: lat,
                        longitude: lng,
                        latitudeDelta: 0.006,
                        longitudeDelta: 0.0002,
                    }}
                    region={{
                        latitude: lat,
                        longitude: lng,
                        latitudeDelta: 0.006,
                        longitudeDelta: 0.0002,
                    }}
                >
                    <Marker
                        coordinate={{
                            latitude: lat,
                            longitude: lng,
                        }}
                        image={require('./assets/arrow.png')}
                        style={{
                            transform: [
                                {
                                    rotate: course + 'deg',
                                },
                            ],
                        }}
                    />
                </MapView>

                <View style={styles.info}>
                    <Text style={styles.value}>
                        {speed}
                        <Text style={styles.text}> km/h</Text>
                    </Text>
                    <Text style={[styles.value, styles.msl]}>
                        {altitude}
                        <Text style={styles.text}> msl</Text>
                    </Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    info: {
        backgroundColor: '#e1e1e1',
        position: 'absolute',
        padding: 25,
        opacity: 0.5,
        left: 0,
        bottom: 100,
    },
    value: {
        fontSize: 30,
    },
    msl: {
        fontSize: 18,
    },
    text: {
        fontSize: 14,
    },
});

Bu kod sorunsuz bir şekilde çalışıyor. Ben de bu kodu birden fazla araç için düzenlemek istedim. Takip etmeye çalıştığım link şudur: https://medium.com/@clarkjohnson_853...p-5f068c7be14d

Buradan yola çıkarak ben de bir şekilde kodu yazmaya çalıştım ama ne JS den ne de react native den hiç anlamıyorum. Kendi kendime bir şeyler yapmaya çalıştım fakat bu noktadan sonraya ilerleyemedim:

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MapView, { Marker } from 'react-native-maps';

import mqtt from 'mqtt/dist/mqtt';

export default class App extends Component {

    state = { devices: [] }

    updateMap(message) {
        var [lat, lng, altitude, speed, course, deviceId] = message.toString().split(',');

        // Problemin burada olduğunu düşünüyorum.
        // burada yapılacak bi işlem ile gelen verinin deviceId sini kontrol ederek ya yeni cihaz eklemek yada varolan cihazın konum bilgilerini güncellemek gerekiyor.
        // Ve en sonunda bunu state içindeki devices arrayine göndermek gerekiyor sanırım.

        this.setState ({ devices: result });
    }

    componentDidMount() {
        var client = mqtt.connect('ws://157.230.113.66:3000');
        client.subscribe('LOCATION');
        client.on('connect', function() {
            console.log('connected!');
        });

        client.on('message', (topic, message) => {
            console.log(topic, ' : ', message.toString());
            switch (topic) {
                case 'LOCATION':
                    this.updateMap(message);
                    // message değişkeni ile gelen sallamasyon veri şu şekilde: 40.000000,30.000000,150,50,90,100001
                    break;
            }
        });
    }

    mapMarkers = () => {
        return this.state.devices.map((device) => <Marker
            key={device.deviceId}
            coordinate={{ latitude: device.lat, longitude: device.lng }}
            image={require('./assets/arrow.png')}

            style={{
                transform: [
                    {
                        rotate: device.course + 'deg',
                    },
                ],
            }}
        >
        </Marker >)
    }
    

    render() {
        return (
            <View style={styles.container}>
                <MapView
                    style={{ flex:1 }}
                    initialRegion={{
                    latitude: 37.1,
                    longitude: -95.7,
                    latitudeDelta: 10,
                    longitudeDelta: 45
                    }} >
                    {this.mapMarkers()}
                </MapView>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});

Yardımcı olabilirseniz şimdiden teşekkür ederim.

Hocam ne yapmaya çalışıyorsunuz sorun nedir anlamadım.

Bu proje bir otomobil takip sistemi. Arduino GPS ve GSM modülleri sayesinde bir servera konum bilgisi yolluyor ve react-native ile o verileri işleyip android app de o cihazın yani arabanın konumunu gösteriyor. İlk verdiğim kod yalnızca bir otomobili göstermek üzere yazılmış. Ben serverdan yani arduinodan kaç adet farklı otomobil verisi gelirse gelsin hepsini haritada gösterebilmek istiyorum.
Yeterince açık anlatabildim mi?
@ilketeknoloji;

Her arabanın anlık konum bilgisini koordinatlarıyla beraber map üzerine market olarak eklemen gerekiyor. Birden fazla marker nasıl eklenir diye araştırabilirsiniz.