React Native Udemy courses: 5 Reasons why they are worth the money!

React Native Udemy courses - 5 reasons why they're worth the money

React Native Udemy courses: Are they worth the money?


The first question I asked myself while starting to learn React Native: how can I get more knowledge? I started with free YouTube Tutorials, so I could have a solid start. After some weeks I wanted to have a more intense look and read the German book “React Native: Native Apps parallel für Android und iOS entwickeln“.

React Native Udemy:

Now I got to the point where I wanted to learn more and had a look into the world of thousands and thousands of online courses on Udemy. Are React Native Udemy courses worth the money? I searched for an online course in English and found “The Complete React Native + Hooks Course [2020 Edition]” by Stephen Grider with about 145.363 participants, 37.120 reviews and a rating of 4,6.

Now I want to tell you why I think the course is worth the money:

#1 Cheap price

First of all one of the main reasons students like myself buy different courses are the costs of courses. This course costs just 11,99€ when it’s on sale (but this happens every two days on Udemy) and regularly 49,99€. The course is without big cuts, but with a high video quality and a very good audio quality and overall in a very good quality for just 12€.

But keep in mind that about 16h from this course are for the people who will use an old version of React Native, because the company uses an old version, etc.!

#2 Very wide range of informations

On 38h on-demand video you learn everything you need to get to your next level of React Native developing. You start by setting up your IDE and get an introduction to Expo. Then you get everything explained in detail from your first text element import to building and using an own Express API.

#3 Great App examples

In this React Native Course you build together 4 Apps and 2 Server Apps: Basic App for testing, Blog App, Food App, Run tracking app and the Server Apps for the Blog and Tracking App. In every App you go through different states of React Native app development like props in the basic app and states in the food app. Along the course we continue using a lot of these and getting deeper into how they work.

#4 Downloadable materials

While the course goes on, every time a big change is done you have the opportunity to download the source code of this specific episode, so you can have a look what you’ve done wrong while not getting spoilered.

#5 Official Udemy certificate

Last but not least you get a very nice Udemy certificate which proofs your participation in this course and you can include it in your resume or on your social media like LinkedIn.

React Native Udemy courses: Are they worth the money? - Joel Heil Escobar

Why should you not choose this course?

#1 Pace of the course

If you watch the course you should have in mind that you really need breakes. I was not able to keep concentrate longer than one hour and it cost me quite a time to watch and build the apps. Because of the range of knowledge you get from Stephen, you jump fast from basic React Native to complex state objects and apps, but if you like it then go for it!

#2 Just a few challenges and tests

I was a bit disappointed that you only had challenges and tests in the first few episode and chapters.When you get deeper it stops. I found them very helpful to see how I understood the different things.

Wrap up

Summing up I have to say that I found the course very helpful and I recommend it to everyone who is starting with React Native to build own apps. It has a better overall view and is better structured than any YouTube playlist I could found and you don’t waste your time searching for different elements which you would have all together inside a course.

After this course you should be able to build your first own React Native application and should have a good understanding and also be able to do your own research and know a bit better how to implement new features.
You can have a look here at my current coding projects 🙂

Fortschritt einer React Native Festival App

Was genau?

In diesem kleinen Beitrag teile ich meinen Fortschritt beim lernen mit dem React Native Framework und Expo während dem Bau einer App für ein Festival. Es ist ein Nebenprojekt, welches nicht immer vorangehen kann, da ich auf Inhalte vieler verschiedener Quellen angewiesen bin und nicht immer aktiv weiter arbeiten kann 🙂

18.3.2021:
Dem HLS Player habe ich zudem noch einige Eigenschaften gegeben, womit ich ihn drehen kann und dieser dann in den Fullscreen geht

const LivestreamScreen = () => {
  const videoRef = useRef(null);
  useEffect(() => {
    ScreenOrientation.unlockAsync();
    ScreenOrientation.addOrientationChangeListener(({ orientationInfo }) => {
      if (
        orientationInfo.orientation === 3 ||
        orientationInfo.orientation === 4
      ) {
        videoRef.current.presentFullscreenPlayer();
      } else {
        videoRef.current.dismissFullscreenPlayer();
      }
    });

    return () => {
      ScreenOrientation.lockAsync(ScreenOrientation.Orientation.LANDSCAPE_LEFT);
    };
  }, []);
  return (
    <View style={{ flex: 1 }}>
      <Video
        source={{
          uri:
            "https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8",
        }}
        rate={1.0}
        volume={1.0}
        isMuted={false}
        resizeMode={Video.RESIZE_MODE_CONTAIN}
        shouldPlay
        isLooping={false}
        style={{ height: "100%", width: "100%" }}
        useNativeControls
        // onLoad={() => this.setState({ loading: false })}
        onError={console.log}
        ref={videoRef}
      />
    </View>
  );
};

9.10.2020:
Mit dem folgenden Code kann man, wenn man oben schon
import { Video } from "expo-av";
import { Dimensions } from "react-native";

importiert. Dann hat bei mir folgender Code geholfen, um einen HLS Player einzubinden, welchen ich für den Stream nutzen kann.

const LivestreamScreen = () => {
  const videoRef = useRef(null);
  useEffect(() => {
    ScreenOrientation.unlockAsync();
    ScreenOrientation.addOrientationChangeListener(({ orientationInfo }) => {
      if (
        orientationInfo.orientation === 3 ||
        orientationInfo.orientation === 4
      ) {
        videoRef.current.presentFullscreenPlayer();
      } else {
        videoRef.current.dismissFullscreenPlayer();
      }
    });

    return () => {
      ScreenOrientation.lockAsync(ScreenOrientation.Orientation.LANDSCAPE_LEFT);
    };
  }, []);
  return (
    <View style={{ flex: 1 }}>
      <Video
        source={{
          uri:
            "https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8", //ein Beispiel hsl Stream
        }}
        rate={1.0}
        volume={1.0}
        isMuted={false}
        resizeMode={Video.RESIZE_MODE_CONTAIN}
        shouldPlay
        isLooping={false}
        style={{ height: "100%", width: "100%" }}
        useNativeControls
        // onLoad={() => this.setState({ loading: false })}
        onError={console.log}
        ref={videoRef}
      />
    </View>
  );
};

13.09.2020:
Nach einer längeren Pause mit weiteren Projekte habe ich ein Workaround gefunden für ein altes Problem. Dadurch, dass ich einen Stack-Navigator innerhalb eines Bottom Tab Navigators hatte, wurden wir 2 Header angezeigt.
Ich hatte vergessen in die Optionen zum Stack Navigator anstatt nur beim Bottom Tab Navigator, also konnte dieses Problem sehr einfach folgendermaßen gelöst werden

<HomeStack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerShown: false,
          header: null,
        }}
      />

25.05.2020:
Bei der MapView habe ich nun Custom Icons bei den Markern und auch Polygon eingefügt. Zu Polygon gibt es hier ein gutes Tutorial und zu den Custom Marker hier. Bei den Custom Markern habe ich einfach die Icons in eine png file konvertiert und in meinen Asset Ordner gepackt:

<Marker
        coordinate={{
          latitude: LÄNGENGRAD,
          longitude: BREITENGRAD,
        }}
        description={"This is a marker in React Natve"}
      >
        <Image
          source={require("./assets/icons/food.png")}
          style={{ height: 35, width: 35 }}
        />
      </Marker>

Hier noch mein Code für den Polygon:

<Polygon
        fillColor="#52AE32, rgba(82,174,50,0.2)"
        coordinates={locations}
        strokeColor="rgba(82,174,50,0.4)"
        strokeWidth="3"
      />

24.05.2020:
Das Problem mit meinem Spotify Playlist Player habe ich gelöst, indem ich einfach eine WebView genommen habe. Dazu musste man erstmal npm install react-native-webview
und npm install react-native link laufen lassen, sowie oben im Code
import { WebView } from "react-native-webview";
einfügen, um es zu importieren.


Mein Code:

<View style={{ flex: 1, height: "100%", width: "100%" }}>
      <WebView
        source={{
          html:
            '<iframe src="https://open.spotify.com/embed/playlist/YOUR_PLAYLIST_LINK" 
                width="100%" height="100%" frameborder="0" allowtransparency="true" 
                allow="encrypted-media">
              </iframe>',
        }}
        style={{ marginTop: 20 }}
      />
    </View>

Spotify gibt einem sogar schon den fertigen iframe, indem man einfach in der Desktop Anwendung auf die Playlist rechts klickt und “Code zum einbetten kopieren” wählt. Wenn man das gemacht hat, ist der iframe Code in der Zwischenablage und man kann es einfach in den Code kopieren.


23.05.2020:
Ich habe den HomeScreen nun fast fertig. Den Gäste und Folgen Screen habe ich schon fertig, jedoch funktioniert der Spotify Player leider noch nicht ganz.

Gäste Screen mit Icon:

<ImageBackground
        style={styles.FolgeUnsImages}
        source={require("./assets/FolgeUns.png")}
      >
        <AntDesign
          style={{ flex: 1, marginLeft: "23%", marginTop: "42%" }}
          name={"instagram"}
          size={41}
          color={"white"}
          onPress={() => {
            Linking.openURL("https://www.instagram.com/");
          }}
        />
      </ImageBackground>
    </View>

Viel Zeit habe ich vor allem damit verbracht, eine MapView zu machen. Hier gibt es ein sehr gutes Tutorial dazu.

MapView:

const ParkplanScreen = ({ navigation }) => {
  return (
    <MapView
      style={{ flex: 1, height: "100%" }}
      region={{
        latitude: LÄNGENGRAD,
        longitude: BREITENGRAD,
        latitudeDelta: 0.0035, //eine Art Zoom Faktor
        longitudeDelta: 0.0035,
      }}
      showsUserLocation={true}
      mapType="satellite">
    </MapView>
  );
};

Nächste Funktionen in der MapView, welche bis jetzt noch nicht ganz funktionieren und ich demnächst einbauen will sind vor allem:

1. Polygon

Quelle: https://www.youtube.com/watch?v=AzjWv1X-uyg

Die Lilafarbene Fläche kann man auch sehr gut benutzen, um es im ParkPlanScreen zu benutzen, da man in der Google Maps Anzeige die genaue Fläche des Festivals anzeigen.

2. Karussell für Marker

Quelle: https://www.youtube.com/watch?v=AzjWv1X-uyg

Eine Karusell Funktion wäre eine coole Ergänzung, da man so schnell durch die ganzen Marker, wie z.B. Essen, Bühne, Liegen, usw. scrollen kann.

Zu guter Letzt ist mir ein großer Bug aufgefallen, welchen ich jedoch nur auf meinem Huawei Mate 20 Pro habe und nicht auf dem PC in Web und dieser war in meinem Spotify Player verborgen:

Quelle: Expo Android App

Leider habe ich noch keine Lösung für dieses Problem gefunden oder ich steige auf eine Webview um, wo einfach Spotify im Web gezeigt wird.


22.05.2020:
Eine Funktion, welche ich heute eingebaut habe war die eines Spotify Playlist Players, um die passende Playlist für das Festival sich anzuhören und auch in seinem eigenen Spotify zu öffnen. Du kannst dir hier bei npms.com den “React-Spotify-Player” anschauen. Der Code, welchen man braucht ist sehr simpel. Man installiert das Widget mit npm install react-spotify-player und importiert es anschließend mit
import SpotifyPlayer from 'react-spotify-player';
in die richtige Datei.
So sah mein Code am Ende aus:

const SpotifyScreenSize = {
  width: "100%",
  height: "100%",
};

const SpotifyPlaylistScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <SpotifyPlayer
        uri="HIER KOMMT DEINE SPOTIFY PLALIST URI REIN"
        size={SpotifyScreenSize}
        view={"list"}
        theme={"white"}
      />
    </View>
  );
};

Um übersichtlich die Bands zu zeigen, welche bei dem Festival auftreten habe ich es in Cards anzeigen lassen.
npm install --save react-native-cards
und dann habe ich nur noch das nötigste genommen, da ich keine Buttons und Titel brauchte

      <ScrollView>
        <Card>
          <CardImage
            source={{
              uri: "BILD URI HIER EINFÜGEN",
            }}
          />
          <CardContent style={{ justifyContent: "center" }}>
            <Text>HIER TEXT EINFÜGEN</Text>
          </CardContent>
          <CardAction separator={true} inColumn={false}></CardAction>
        </Card>
      </ScrollView>

21.05.2020:
Heute hatte ich bei dem Eingeben von expo start in der Kommandozeile folgende Fehlermeldung:
TypeError: Cannot read property 'Provider' of undefined
welche ich jedoch lösen konnte, nachdem ich mich durch verschiedene GitHub Foren geklickt habe und anschließend gesehen habe, dass man es lösen kann durch Eingabe von
npm install @react-navigation/native
anschließend konnte ich meinen Code im Webbrowser ausgeben, da es anscheinend einfach nur eine Aktualisierung brauchte


20.5.2020:
Nachdem ich in letzter Zeit sehr viel Arbeit hier zuhause hatte habe ich mal wieder angefangen weiter an diesem Projekt zu arbeiten. Ich habe den alten Navigator über Bord geworfen und mit React Navigation 5 einen neuen gemacht bzw. mit Hilfe eines Tutorials. Das Tutorial findest Du hier. Ich habe nun erstmal alles in eine App.js Datei reingemacht, welche jetzt leider 340 Zeilen Code hat. In nächster Zeit muss ich nun diese File in verschiedene aufteilen und weitere Funktionen hinzufügen. Ich habe angefangen mit den Code aus Githhub, welches in dem Video benutzt wurde zu kopieren. Ich musste einige Feinheiten ändern, da z.B. NavigationNativeContainer zu NavigationContainer umbennant werden musste.
Der Plan war einen StackNavigator in meinen schon bestehenden BottomTabNavigator einzufügen bzw. zu “nesten”:

Home
–> Screen 1
–> Screen 2
Programm
Parkplan
Fotos
Tickets


Anschließend habe ich angefangen, meinen HomeScreen rüber zu kopieren und im HomeStackNavigator anzugleichen und einzustellen:

const HomeStackNavigator = ({ navigation, route }) => {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen
        name="Gaeste2020Screen"
        component={Gaeste2020Screen}
        options={{ title: "Gäste" }}
      />
      <HomeStack.Screen
        name="FolgeUnsScreen"
        component={FolgeUnsScreen}
        options={{ title: "Folge Uns :)" }}
      />
      <HomeStack.Screen
        name="SpotifyPlaylistScreen"
        component={SpotifyPlaylistScreen}
        options={{ title: "Spotify Playlist" }}
      />
    </HomeStack.Navigator>
  );
};

Anschließend habe ich angefangen, die einzelnen Screens rüber zu kopieren

const ProgrammScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>ProgrammScreen </Text>
    </View>
  );
};

Im HomeScreen habe ich anschließend noch die Bilder abwechselnd mit einem Platzhalter eingefügt

Bild:

<TouchableOpacity
          onPress={() => navigation.navigate("Gaeste2020Screen")}
        >
          <Image
            style={styles.HomeScreenImages}
            source={require("./assets/2.png")}
          />
        </TouchableOpacity>

Platzhalter:

<View //Platzhalter
          style={{
            borderBottomColor: "#FFF",
            borderBottomWidth: 5,
          }}
        />

Die letzte Aufgabe war nun noch die Screens alle richtig anzupassen und schließlich habe ich meinen alten BottomTabNavigator eingefügt. Ich habe nur noch keine Lösung gefunden, wie man die Textfarbe richtig ändert.


13.04.2020:
Heute hatte ich das Problem, dass durch einen Fehler ziemlich lange Probleme hatte:
TypeError: Super expression must either be null or a function
Durch eine Änderung in
export default class HomeScreen extends Component {
zu
export default class HomeScreen extends React.Component {

Das habe ich geändert, da ich es bei Stack Overflow und Medium gelesen hatte.
Da ich nun auch die Bilder klickbar machen will, muss ich sie nun Touchable machen. Die Frage ist nun, welches der Touchables ich benutzen soll bei meinem Projekt.

Auszug aus einem Stack Overflow Beitrag:

Quelle: https://stackoverflow.com/questions/39123357/when-to-use-touchablenativefeedback-touchablehighlight-or-touchableopacity

Ich werde jetzt erstmal TouchableHighlight arbeiten. Mal schauen ob es sich doch noch ändern wird


12.04.2020:
Ich habe fürs erste jetzt erstmal Shared Elements über Bord geworfen und mache es jetzt mit einfachen Bildern, auf welche man klicken kann. Zwischen den Bildern habe ich Platzhalter:

<View
     style={{
         borderBottomColor: "#FFF",
         borderBottomWidth: 5,
     }}
/>

Diese erfüllen gut Ihren zweck und die Bilder habe ich einfach als style.images:

images: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    height: 200,
    width: 340,
    borderRadius: 60 / 2,
  },

Für das navigieren zwischen den Screens hat React Navigation einen guten Beitrag.


11.4.2020:
Durch viele weitere Projekte kam ich in letzter Zeit wenig dazu mich an die App zu setzen. Ich habe einige Videos zu Shared Elements angeschaut und mir auch nochmal einige Artikel dazu durchgelesen. Leider war ein sehr gutes Tutorial in TypeScript, weswegen ich weiter nach JavaScript Tutorials gesucht habe.
Ich werde mich in den nächsten Tagen mal weiter durch React Native libarys forsten und schauen ob ich etwas finde, was ich gut verwenden kann, damit der HomeScreen möglichst cool aussieht. Wahrscheinlich wird das aber nicht die größte Herrausforderung sein, da der Parkplan doch noch sehr aufwendig werden kann.


20.03.2020:
Heute habe ich nochmal meinen HomeScreen und Shared Elements überarbeitet bzw. es ist aktuell noch in arbeit. Als grobe Hilfe habe ich mir dieses Tutorial mal angeschaut, welches gut erklärt ist und mir weiter geholfen hat. Nun muss ich noch die Sachen für mich und für die App passend konfigurieren.


19.3.2020:
Ich habe heute mein Projekt in Gitlab hochgeladen, welches zuerst nicht gut funktioniert hat, da “–force” im Befehl fehlte. Anschließend habe ich das Layout des Programm Screens von einer Tabelle in einfache Abschnitte, welche mit Hilfe von

<View
            style={{
              borderBottomColor: "#e2e5e9",
              borderBottomWidth: 3,
              width: 370
            }}
          />

einfachen Strichen gut getrennt werden. Damit kann ich wahrscheinlich die nächste Funktion besser umsetzen. Die Idee war immer den aktuellen Programmpunkt zu highlighten und zu zentrieren, welcher gerade auf dem Festival im Gange ist.


18.03.2020:
Da ich immer noch keine gute Lösung für mein Problem der gestrigen Tage gefunden habe, habe ich mich dazu entschieden, nochmal zu meiner Version 12 zu gehen, wo noch alles in einer einzigen App.js Datei war. Ich habe den Ordner kopiert und zu V13 umbennant. Da ich glaube, dass der Fehler darin lag, dass ich App.js und AppNavigator.js hatte und es nicht richtig verbunden habe, habe ich meine AppNavigator.js zu App.js umbennant. Anschließend habe ich meine Screens in verschiedene Dateien gemacht und die StyleSheets und die Importe für jeden Screen fertig gemacht. Ich habe einfach in jeden Screen alle Importe kopiert. Die Importe die benutzt werden, werden gehighlighted, weswegen es sehr einfach war, die Importe, welche ich nicht benötige zu löschen. Bei den StyleSheet hatte ich alles so bennant, dass man es gut zuordnen kann (z.B. containerProgrammScreen), weswegen dass Trennen auch sehr einfach war.
Nachdem ich noch die Versionen der verschieden Packages, welche falsch installiert waren neu installiert habe. Funktionierte es auf meinem Huawei Mate 10 Pro, welches ein Android Device ist, mit Hilfe der Expo App sehr gut und ohne Fehler, jedoch nicht in der Expo Web App.


17.03.2020:
Den “fail to compile” Fehler habe ich leider immer noch nicht lösen können und werde mal weiter im Internet recherchieren, ob es eine gute Möglichkeit gibt, es zu lösen.


16.03.2020:
Heute habe ich den Abschnitt mit dem Programm fertig gemacht und optimiert. Jetzt muss ich das Layout nur noch etwas schöner machen (1:2 Größe der Spalte) und bin damit nun auch fertig. Den HomeScreen mit den Cards habe ich nun fertig gemacht und mit Hilfe eines Tutorials auch animiert. Hier finden Sie dieses Tutorial. Es ist sehr hilfreich und ich konnte damit ein sehr schönes Ergebnis erzielen. Ich habe nur die ScrollView rausgenommen, da man nicht Scrollen soll. Morgen füge ich noch die richtigen Texte bzw. Unterfunktionen und Fotos ein, wovon ich noch welche in Adobe Photoshop bearbeiten muss. Zu letzt habe ich wieder ein mal versucht die Screens usw. in verschiedene Dateien zu bringen, jedoch ist das an einem “Fail to compile” Fehler gescheitert (Module not found: Can't resolve 'react-navigation'), welchen ich versuche bis morgen zu beheben, damit ich anschließend weiter arbeiten kann


15.03.2020:
Nun widme ich mich der nächsten Funktion bzw. dem nächsten Screen: dem HomeScreen. Er soll wenn er fertig ist 4 Abschnitte enthalten, welche bei klicken größer und zu einem Bild mit Text werden. Die Teile sind von oben nach unten einmal der Header mit dem Bild des Festivals und Count Down, darunter ein Abschnitt mit den Künstlern, welche 2020 auftreten, anschließend noch eine Einbettung der offiziellen Spotify Playlist des Festivals und darunter eine kleine Seite, welche zu den Social Media Profilen verlinkt.

Die verschiedenen Abschnitte werde ich in “Cards” einteilen, welche angeklickt werden können und anschließend größer erscheinen. Hier gibt es ein gutes Tutorial dazu. Ich bin damit noch nicht ganz fertig geworden und morgen werde ich die Cards fertig machen mit Bildern und anschließend noch die Funktionen einfügen.


14.03.2020:
Heut habe ich mal eine neue Seite fertig gestellt: Das Programm. Dort kann man direkt sehen, welche Programmpunkte auf dem Plan stehen. Die List ist scrollbar, weswegen sie um so praktischer ist. Für die Zukunft ist geplant, dass diese Funktion den jeweiligen Programmpunkt, welcher gerade zeitlich dran ist farbig hervorhebt. Die Tabelle habe ich ganz einfach mit Hilfe von der React Native Table Component, welche man mit Hilfe von npm install react-native-table-component installieren kann. Anschließend habe ich die Tabelle so angepasst, dass sie gut aussieht und einen möglichst großen nutzen hat.

Hier ist zudem eine nützliche Auflistung aller von Haus auf verfügbarer Schriftarten in React-Native.


25.02.2020:
Da ich in den letzten Tagen viel rumprobiert habe, um den Bug zu fixen und es nicht funktioniert habe, bin ich zurück zu der Version gewechselt, welche nur die App.js hat, um schon mal die Screens langsam zu machen, da ich sonst zu viel Zeit verliere. Es wird wahrscheinlich schnell unübersichtlich, jedoch habe ich gerade keine bessere Idee wie es funktionieren würde.
TypeError: StyleSheet.create is not a function ist ein Fehler, welchen ich einfach damit behoben habe import {  StyleSheet } from "react-native"; in die App.js einzufügen, was ich davor vergessen hatte.


22.02.2020:
Ich habe trotz langem rumprobieren den Bug immer noch nicht gefixt
TypeError: Super expression must either be null or a function, not undefined


20.02.2020:
Heute habe ich angefangen die Screens usw. in verschiedene Files zu packen. Ich habe jetzt App.js, AppNavigator.js und werde auch noch die Screens die noch in AppNavigator sind in verschiedene Files und einen eigenen Screen Ordner machen. Ich hatte Probleme, da ich einen Bug in App.js hatte:
TypeError: Super expression must either be null or a function, not undefined
mit diesem Beitrag habe ich es gelöst. Anschließend habe ich
npm i --save-dev enzyme@latest laufen lassen, wonach ich im Ordner ./node_modules\@types im Ordner “node” in “.node.DELETE” umbennenen musste. Danach habe ich npm i --save-dev enzyme@latest nochmal laufen lassen und es hat funktioniert. Hier noch mal ein Expo Snack von einer Preview. !Es ist nicht die aktuelle Version, jedoch sieht sie genau so aus und man kann die App ausprobieren!

App.js:

import * as React from "react";
import { Text, View, Component } from "react-native";

import AppNavigator from "./App Navigator";

export default class App extends Component {
  render() {
    const { navigate } = this.props.navigation;
    return <View style={styles.container}></View>;
  }
}

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

AppNavigator.js:

import * as React from "react";
import { Text, View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";

import { MaterialCommunityIcons } from "react-native-vector-icons";
import { Ionicons } from "react-native-vector-icons";
import { Entypo } from "react-native-vector-icons";
import { MaterialIcons } from "react-native-vector-icons";
import { SimpleLineIcons } from "react-native-vector-icons";
import { AntDesign } from "react-native-vector-icons";

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Home!</Text>
    </View>
  );
}

function ProgrammScreen() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Programm!</Text>
    </View>
  );
}

function ParkplanScreen() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Parkplan!</Text>
    </View>
  );
}

function FotosScreen() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Foto!</Text>
    </View>
  );
}

function TicketsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Tickets!</Text>
    </View>
  );
}

const Tab = createMaterialBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      activeColor="#52AE31"
      inactiveColor="#636363"
      barStyle={{ backgroundColor: "#ffffff" }}
      labelStyle={{ fontSize: 12 }}
      style={{ backgroundColor: "#ffffff" }}
    >
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarLabel: "Home",
          tabBarIcon: ({ color, focused }) => (
            <MaterialCommunityIcons
              name={focused ? "home" : "home-outline"}
              size={24}
              color={color}
            />
          )
        }}
      />
      <Tab.Screen
        name="Programm"
        component={ProgrammScreen}
        options={{
          tabBarLabel: "Programm",
          tabBarIcon: ({ color, focused }) => (
            <Ionicons
              name={focused ? "ios-list-box" : "ios-list"}
              size={24}
              color={color}
            />
          )
        }}
      />
      <Tab.Screen
        name="Parkplan"
        component={ParkplanScreen}
        options={{
          tabBarLabel: "Parkplan",
          tabBarIcon: ({ color, focused }) => (
            <SimpleLineIcons
              name={focused ? "directions" : "directions"}
              size={24}
              color={color}
            />
          )
        }}
      />
      <Tab.Screen
        name="Fotos"
        component={FotosScreen}
        options={{
          tabBarIcon: ({ color, focused }) => (
            <AntDesign
              name={focused ? "camera" : "camerao"}
              size={24}
              color={color}
            />
          )
        }}
      />
      <Tab.Screen
        name="Tickets"
        component={TicketsScreen}
        options={{
          tabBarLabel: "Tickets",
          tabBarIcon: ({ color, focused }) => (
            <MaterialCommunityIcons
              name={focused ? "ticket-confirmation" : "ticket-outline"}
              size={24}
              color={color}
            />
          )
        }}
      />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

19.02.2020:
Ich habe mich nach ca. 2h versuchten Bugfix noch mal dazu entschieden, zu meiner alten Version zurückzukehren, um dort alles fertig zu konfigurieren. Es abzuspeichern als …V1-5 und es nochmal kopieren und es dann nochmal versuchen, den AppNavigator und Screens in verschiedene Files zu packen.
Ich habe auch meine Icons im MaterialBottomTabNavigator überarbeitet. Mit Hilfe von einigen Posts (hier zugehöriger Code) habe ich jetzt eingeführt, dass wenn der jeweilige Screen nicht ausgewählt ist, das Icon nur in einer Outline angezeigt wird:

<Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarLabel: "Home",
          tabBarIcon: ({ color, focused }) => (
            <MaterialCommunityIcons
              name={focused ? "home" : "home-outline"}
              size={24}
              color={color}
            />
          )
        }}
      />

Anschließend habe ich noch die zugehörigen Icons ausgewählt und in meinen Code eingefügt und die Screens fertig gemacht.


18.02.2020:
Heute habe ich die Screens weiter auf verschiedene Dateien gelegt, um eine bessere Struktur zu haben. Die Extension “Code Spell Checker” ist bei mir jedoch eher zum Problem geworden, da ich meine Screens Deutsch benannt habe mit z.B. ProgrammScreen, usw. Dadurch ist viel in meinem Code unterstrichen und ich habe aktuell ca. 25 Sachen in meiner “Problems” Sektion. Leider habe ich bis jetzt noch keine Lösung für das Problem, da es noch verbuggt ist


15.02.2020:
Heute habe ich mal ein neues Ordnungssystem für meinen Projekt Ordner gemacht. Ich habe einen generellen Ordner erstellt und in diesen habe ich mein Projekt gemacht. Jedes Mal, wenn ich in dem Projekt eine neue Funktion Funktion erstelle, kopiere ich den alten Ordner (z.B. FestivalAppV1-2) und ändere den Namen des kopierten Ordners in FestivalAppV1-3. Somit habe ich immer ein Backup des Projektes und kann immer darauf zurückgreifen.
Zudem habe ich angefangen, den Code der aktuell nur in App.js ist in verschiedene Files aufzuteilen, damit App.js besser sortiert ist


14.02.2020:
Heute habe ich unter anderem für Visual Studio Code verschiedene Extensions installiert:
1. Prettier
-in “Extensions” suchen und installieren
"editor.formatOnSave": true bei settings.json hinzufügen, damit es sich immer neu formatiert, wenn es gespeichert wird

2. Material Theme
-verändert Farben von Visual Studio
-mein Favorit: “Material Theme Darker”
-Icons Pack für Visual Studio Code: “Material Icon Theme “

3. Color Highlight:
-zeigt bei Hex-Farbcodes direkt die Farbe an, welche es ist
(z.B. bei #FF0000 wird “#FF0000” rot makiert und hinterlegt)
-Settings (Strg + , ) –> Extensions –> Color Highlight bei MarkerType am besten “dot-before”, da dann die Farbe vor dem Hex-Farbcode angezeigt wird

4. Bracket Pair Colorizer 2
-markiert Klammern farbig
-verbindet zusammengehörige Klammern mit einer farbigen Linie
-Settings (Strg + , ) –> Extensions –> Bracket Pair Colorizer 2 –> Colors “Edit in settings.json”, wo man die Farbeinstellungen ändern kann

5. ES7/Redux/GraphQL/React-Native snippets
-man kann verkürzte Befehle benutzen, um lange Befehle, wie importieren von etwas, auszuführen
(Bsp.: “imrc” +Tab wird zu import from React, { Component } from 'react)

7. Auto Rename Tag
-verändert die jeweils andere Klammer bzw. das andere Tag direkt mit wenn man eines davon ändert
(Bsp.: <View> <View> <– dort muss man nur eins bearbeiten, da es automatisch gleich ist)
8. Code Spell Checker
-bei Fehlern in der Rechtschreibung einer Funktion bzw. eines Wortes wird jeweiliges Wort in der Sektion “Problems” in Visual Studio Code angezeigt
-beachtet auch CamelCase Rechtschreibung

9. TODO Highlight
-Befehle, wie “//TODO: …” und “//FIXME: …” haben im Hintergrund eine helle Farbe damit man es sieht
-mit Strg+Shift+P Befehlsleiste öffnen und “TODO Highlight…” auswählen und anschließend auf “ALL” gehen, um alle offenen Todo’s und Fixme’s zu sehen

Diese ganzen Extensions werde ich versuchen, in nächster Zeit häufiger in meinen täglichen Gebrauch mit Visual Studio Code einzubinden, da sie einem schon echt das leben und die Arbeit mit dem Programm erleichtern können.


13.02.2020:
Heute habe ich es endlich geschafft, dass es von Expo angezeigt wird:
-Ich habe erst expo mit expo init [Projektname] Projekt erstellt
-expo mit npm install -g expo-cli aktualisiert
-React-Navigation mit npm install @react-navigation/native und expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view installiert
-Material Bottoms Tabs mit npm install @react-navigation/material-bottom-tabs react-native-paper installiert
Demo-Code hineinkopiert
Anscheinend habe ich einen Fehler in meinen alten Code gebaut, da dieser Demo-Code nun funktioniert. In den nächsten Tagen werde ich diesen noch mit meinen Icons und Tabs ergänzen. Anschließend werde ich die verschiedenen Tabs konfigurieren


12.2.2020:
Module not found: Can't resolve '@react-navigation/material-bottom-tabs'
Das ist die Fehlermeldung welche ich habe, versuche auf verschiedenen Wegen es zu importieren funktionierren nicht und es gibt nur “npm ERR!”, also einen Fehler.
Habe Ordner neu aufgesetzt, Expo aktualisiert und auch react-navigation und react-navigation-material-bottom-tab-navigator installiert.
Außerdem kann ich Fehlermeldung nicht beheben da sich die betroffenen Dateien nicht in meinem Ordner befinden 🙂


10.2.2020:
Aktuell habe ich Probleme React Navigation zu implementieren, da bei mir noch verschiedenste Fehlermeldungen aufkommen und auch bei dem Emulator gibt es diverse Fehlermeldungen, von Dateien in denen ich nichts verändert habe. Heute lösche ich den Ordner nochmal und versuche es mit Hilfe eines anderen Tutorials, mein BottomTabsNavigator zu erstellen. Ich habe den Fehler behoben, in dem ich NodeJS deinstalliert habe und anschließend nochmal installiert habe. Dann habe ich React Navigation noch in der Kommandozeile installiert:
npm install react-navigation

Icons importieren (ohne npm install…):
import { MaterialIcons } from '@expo/vector-icons';
(MaterialIcons kann durch jedes andere Expo Icon Package ersetzt werden und hier gibt es eine Übersicht von allen Icons)

Bsp: <MaterialIcons name='delete' size={18} color='#333' />

Alles funktioniert, bis auf die Implementation von
npm install @react-navigation/material-bottom-tabs react-native-paper
denn es gibt einen Fehler beim Compilen im Emulator


9.02.2020:
Grundkonzept:
App für Festival mit MaterialBottomTabNavigator:
Startseite | Programm | Lageplan | Fotogalerie | Tickets

How to use Raspberry Pi with Discord to check if friends are online

Thumbnail How to use Raspberry Pi with Discord.py to see if someone is online

Last christmas I got an Raspberry Pi 4 with the Freenove RFID Starter Kit as an extension kit and watched some YouTube videos about some interesting Raspberry Pi projects.

There are a lot of interesting videos, but I had my own idea:
What if I could see if someone of my friends is online on our Discord channel?

The main idea was building a Discord bot which shows to Raspberry Pi number of online Members and passes it then to an LED light or a display.

In the following I will guide you through the process of installing the right packages on your Raspberry Pi and setting up the discord bot. My main source was this article from gngrninja.com.

Disclaimer:

I don’t take any responsability for damage on your Raspbarry Pi or any hardware. I just want to know you what worked for me 🙂

Add the Bot to your Disord server

1. Go to Discord Developer Console

How to use Raspberry Pi with Discord.py to see if someone is online

2. Click on “New Application”

How to use Raspberry Pi with Discord.py to see if someone is online

3. Type in a name and click “Create”

How to use Raspberry Pi with Discord.py to see if someone is online

4. Click “Bot” on the left side and then “Add Bot”

How to use Raspberry Pi with Discord.py to see if someone is online

5. Write your Bot Token down, because you’ll need it later

How to use Raspberry Pi with Discord.py to see if someone is online

7. Go to “OAuth2” in the navigation, select “bot” in scopes and “Administrator” at bot
permissions. Then you should open the link.

How to use Raspberry Pi with Discord.py to see if someone is online

8. Add the bot to your server and confirm it

Your bot should be now in your server but offline

Now we have to update your Pi

1. You need to update package lists

sudo apt-get update

2. Then you should upgrade it to

sudo apt-get upgrade

3. Now we should clean things up a bit

sudo apt-get dist-upgrade

4. Reboot your Raspberry Pi

Check which version of Raspbian your Pi is running on

cat /etc/os-release

Raspian Buster (Version 10.x) ships with Python 3.7.x and should work great with discord.py. You can click here if you want to upgrade your OS to Buster.

If your Raspberry Pi is not running on Buster or Stretch you have to install Python manually, but if not you can skip this part.

1. Install libssl-dev (to ensure we can use pip when we install the newest version of Python)

sudo apt-get install libssl-dev
How to use Raspberry Pi with Discord.py to see if someone is online

2. Install libffi-dev (to ensure audio works with the Discord bot)

sudo apt-get install libffi-dev

3. Install libsqlite3-dev (this will be handy, as it installs libraries needed to install sqlite3 support)

sudo apt-get install libsqlite3-dev

4. Grab the latest version of Python 3.x from https://www.python.org/downloads/

wget https://www.python.org/ftp/python/3.6.1/Python-3.6.1.tgz

5. Extract the files, and enter the directory

tar xzvf Python-3.6.0.tgz

6. Then run cd Python-3.6.0/ to navigate to the folder

cd Python-3.6.0/

7. Run configure to check for dependencies, and get ready to build the Python installation
(This will take 2-5 minutes)

./configure

8. Run make to start compiling the software
(This will take 15-30 minutes)

make

9. Install Python 3.6.x
(This will take 10-15 minutes)

sudo make install

10. Reboot your Pi!

Install Discord.py

You may need to install the following, if you have installed Buster a short time ago

sudo apt install python3-pip
sudo apt install python3-cffi
sudo pip3 install discord.py[voice] 

Install latest version of the Discord library for Python (Discord.Py)

sudo python3 -m pip install -U discord.py[voice]

Create the bot

1. Create a directory

mkdir ~/isOnline_bot

2. Move to that directory

cd ~/isOnline_bot

3. Create an empty file

touch bot.py

4. Edit the file

nano bot.py

5. Copy and paste the following code inside the terminal. Don’t forget to change YOUR_TOKEN to the token you copied earlier)

import discord
from discord.ext import commands
import RPi.GPIO as GPIO
import time


TOKEN = 'YOUR_TOKEN'

description = '''isOnline Bot'''
bot = commands.Bot(command_prefix='?', description=description)


@bot.event
async def on_ready():
    print('Logged in as')
    print(bot.user.name)
    print(bot.user.id)
    print('------')
    



    
@bot.command()
async def membercount(ctx):
    """Counts the members"""
    
    while True:
   
        member_count = len(ctx.guild.members) # includes bots
        true_member_count = len ([m for m in ctx.guild.members if not m.bot]) #doesn't include bots
        print(true_member_count)
        await ctx.send(true_member_count)
        
        GPIO.setmode(GPIO.BCM)
        GPIO.setup(18, GPIO.OUT)
    
   
        if true_member_count >= 1:
            GPIO.output(18, True)
            print("LED ON")
    
    
        if true_member_count < 1:
            GPIO.output(18, False)
            print("LED OFF")
        

    


bot.run(TOKEN)

Build the circuit for the LED light

Run the script and test the bot

1. Run it by typing in

python3 bot.py

2. Go to your Discord Channel and type in “?membercount” and if someone is in a channel it
will glow up 🙂
Side note: Make shure you use a text channel which is empty or not used, because the
bot will spam it

3. Have some fun with this bot and be updated everytime someone is online!

Which components could you use as well?

I connected the LCD Display and the 1 digit 7 segment display correct to the Raspberry Pi, but I wasn’t able to output the variable from the bot.
I tried to use the 1 digit 7 segment display for the output of the number and the LCD display for showing the latest message someone send to a specific channel.

Maybe I’ll implement it later on 🙂

Thank you very much for reading this post and I hope you have fun with your new bot!