Fax-App mit sipgate.io erstellen

Julia
27.07.2022 0 8:13 min

Was ist sipgate.io?

SMS oder Faxe versenden und empfangen, den Anrufverlauf abrufen, Anrufe initiieren und manipulieren – das alles kann sipgate.io! Mit unseren APIs können Sie unsere Telekommunikationsfunktionen flexibel in Ihre Projekte integrieren. Unsere Library und Tutorials unterstützen Sie dabei, Ihre Telefonie möglichst bequem zu gestalten.

In diesem Tutorial

Vielleicht denken Sie, dass das Versenden von Faxen heutzutage sehr altmodisch ist. Dennoch könnte es für Sie oder Ihr Unternehmen von Vorteil sein. In diesem Tutorial zeigen wir Ihnen, wie Sie eine App für den Faxversand erstellen, die sowohl auf Android als auch auf iOS läuft.

Das vollständige Projekt finden Sie in unserem GitHub-Repository und das fertige Ergebnis können Sie sich gerne auf unserer Website anschauen.

Voraussetzungen

Wir benutzen in diesem Tutorial React Native, um die App Cross-Platform zu entwickeln. Dies ermöglicht uns auch, die sipgate.io Node.js-Library zu verwenden.

Step 1: das Projekt aufsetzen

  • Um Ihre Entwicklungsumgebung einzurichten, gehen Sie in der React Native-Dokumentation auf React Native CLI Quickstart und geben Sie Ihr Betriebssystem und bevorzugtes mobiles Zielbetriebssystem an.
  • Verwenden Sie react-native init projectName, um ein Quickstart-Projekt zu erstellen.
    Sie sollten nun über alle benötigten Werkzeuge verfügen. Um zu überprüfen, ob alles funktioniert, können Sie für Android den Befehl adb ausführen. Für iOS können Sie pod ausprobieren.
  • Außerdem installieren wir die sipgate.io-Library mit dem Befehl npm install sipgateio.

Step 2: UI erstellen

Um ein Fax zu versenden, müssen Sie sich als Erstes in Ihr sipgate-Konto einloggen. Deshalb werden wir im Folgenden ein einfaches Anmeldeformular erstellen:

// App.js
const App = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const renderLogin = () => {
    return (
      <View>
        <TextInput
          placeholder="E-Mail"
          value={username}
          onChangeText={setUsername}
          autoCompleteType="username"
        />
        <TextInput
          placeholder="Password"
          value={password}
          onChangeText={setPassword}
          secureTextEntry
          autoCompleteType="password"
        />
        <Button title="Login" />
      </View>
    );
  };

  return <SafeAreaView>{renderLogin()}</SafeAreaView>;
};

Wir möchten den Inhalt der App anzeigen, sobald wir eingeloggt sind. Also werden wir unseren Login-Status mit einer weiteren Statusvariablen verfolgen. Anstatt den Login-Status direkt zu speichern, speichern wir den sipgate.io-Client, da wir ihn später sowieso benötigen.

const [client, setClient] = useState(null);

Wenn die Variable client den Wert null aufweist, zeigen wir das Anmeldeformular. In einem anderen Fall wird unser Hauptinhalt angezeigt.

const App = () => {
  // renderLogin...

  const renderMain = () => {
    // ...
  };

  return (
    <SafeAreaView>
      {!client && renderLogin()}
      {client && renderMain()}
    </SafeAreaView>
  );
};

Die Funktion renderMain besteht aus Eingaben für alle Informationen, die zum Senden eines Faxes benötigt werden. Dazu gehören die Nummern der Empfänger:innen, eine zu versendende Datei und die Fax-Verbindung.
Wir werden einen Picker für die Faxleitung verwenden, also installieren wir eine dazu passende Abhängigkeit mit npm:

npm install @react-native-community/picker

Bevor wir unsere renderMain-Funktion implementieren können, müssen wir zunächst einige Zustandsvariablen für die drei Inputs recipient , selectedFaxline und selectedFile hinzufügen.

const [faxlines, setFaxlines] = useState([]);
const [recipient, setRecipient] = useState("");
const [selectedFaxline, setSelectedFaxline] = useState(null);
const [selectedFile, setSelectedFile] = useState(null);

Beachten Sie, dass wir zudem ein Array von Faxleitungen haben, die wir später abrufen werden. Im Moment genügt es zu wissen, dass sie einen Alias wie „Jane Doe’s Fax Connection“ und die zum Senden eines Faxes erforderliche ID enthalten.

Unsere renderMain-Konstante sollte dann die Inputs für unsere Zustandsvariablen anzeigen. Wir ignorieren im Moment die Funktionen selectFile und sendFax. Darum die kümmern wir uns später.

// We will implement these later
const selectFile = () => {};
const sendFax = () => {};

const renderMain = () => {
  return (
    <View>
      <Picker
        selectedValue={selectedFaxline}
        onValueChange={setSelectedFaxline}
      >
        {faxlines.map((line) => (
          <Picker.Item key={line.id} label={line.alias} value={line.id} />
        ))}
      </Picker>
      <TextInput
        placeholder="Recipient"
        value={recipient}
        onChangeText={setRecipient}
      />
      <Button
        title={selectedFile?.name || "Choose File..."}
        onPress={selectFile}
      />
      <Button
        title="Send"
        onPress={sendFax}
        disabled={!selectedFaxline || !recipient || !selectedFile}
      />
    </View>
  );
};

Der Button “Senden” ist deaktiviert, wenn einer der erforderlichen Inputs (Faxleitung, Empfänger:in, Datei) nicht angegeben ist. Dadurch verhindern wir den Versand eines Faxes mit fehlenden Daten.

Step 3: erster Testlauf

Jetzt ist ein guter Zeitpunkt, um unsere Anwendung auszuführen. Zuerst müssen Sie den React Development Server wie folgt starten:

npm run start
Android
Mit dem folgenden Befehl starten wir den Emulator:
npm run android
iOS
Wenn Sie die nativen Abhängigkeiten für iOS noch nicht installiert haben, können Sie dies jetzt tun, indem Sie pod install im Ordnerios/ausführen. Anschließend können Sie die App mit
npm ausführen, nachdem Sie wieder in das Stammverzeichnis der App gewechselt haben.
cd ios
pod install
cd ..

npm run ios

Step 4: Business-Logik aufbauen

Nachdem wir nun die grundlegende UI erstellt haben, fangen wir an, die Logik zu implementieren. Wir beginnen mit der Login-Funktion. Mit der Funktion getAuthenticatedWebuserId prüfen wir, ob die angegebenen Anmeldedaten gültig sind, da das einfache Erstellen eines Clients diese nicht verifiziert.

const login = async () => {
  const client = sipgateIO({
    username,
    password,
  });
  await client.getAuthenticatedWebuserId();

  setClient(client);
};

Wir wollen auch die verfügbaren Faxzeilen laden, damit wir sie in dem zuvor implementierten Picker anzeigen können.

import { createFaxModule } from "sipgateio";

const login = async () => {
  // ...

  const faxModule = createFaxModule(client);
  const lines = await faxModule.getFaxlines();

  if (lines.length === 0) {
    Alert.alert("No fax lines found.");
  } else {
    setFaxlines(lines);
    setSelectedFaxline(lines[0]);
  }
};

Nachdem wir unsere Login-Funktion geschrieben haben, können wir sie nun ausführen, indem wir die onPress-Eigenschaft zu unserer Login-Schaltfläche hinzufügen. Die Fehler behandeln wir, indem wir eine Popup-Meldung anzeigen.

const renderLogin = () => {
  return (
    <View>
      // email and password inputs
      <Button
        title="Login"
        onPress={() => login().catch((e) => Alert.alert("Error", e.message))}
      />
    </View>
  );
};

Unsere Anmeldeseite sollte jetzt fertig sein und wir können zur Hauptseite übergehen. Erinnern Sie sich daran, wie wir den selectFile-Dialog ausgelagert haben? Den implementieren wir jetzt mit der react-native-document-picker Abhängigkeit.

npm install react-native-document-picker

Wir können nun einen Auswahldialog hinzufügen, indem wir einfach dem Codebeispiel folgen und setSelectedFile für das Ergebnis aufrufen.

import DocumentPicker from "react-native-document-picker";

const selectFile = async () => {
  try {
    const file = await DocumentPicker.pick({
      type: [DocumentPicker.types.pdf],
    });
    setSelectedFile(file);
  } catch (err) {
    if (!DocumentPicker.isCancel(err)) {
      Alert.alert("Error", err.message);
    }
  }
};

Das war eine Menge Code, nicht wahr? Wir sind fast fertig! Das letzte Stück ist die sendFax-Funktion. In unserem Fall verwenden wir react-native-fs, um die zuvor ausgewählte Datei auszulesen.

npm install react-native-fs

Leider erlaubt uns die readFile-Funktion nur das Lesen von base64-kodierten Dateien, während die sipgateio-Abhängigkeit ein Bufferobjekt erfordert. Wir umgehen diese Einschränkung, indem wir zuerst den Inhalt der Datei lesen und ihn dann dekodieren.

import * as RNFS from "react-native-fs";

const sendFax = async () => {
  const file = await RNFS.readFile(selectedFile.uri, "base64");
  const buffer = Buffer.from(file, "base64");

  // ...
};

Nach dem Abruf erstellen wir aus unseren Eingaben ein Faxobjekt und versenden es mit dem sipgateio faxModul. Wie zuvor werden Fehler durch Popup-Meldungen abgefangen.

import * as RNFS from "react-native-fs";

const sendFax = async () => {
  // ...

  const fax = {
    to: recipient,
    fileContent: buffer,
    filename: selectFile.name,
    faxlineId: selectedFaxline.id,
  };

  try {
    const faxModule = createFaxModule(client);
    await faxModule.send(fax);
  } catch (err) {
    Alert.alert("Error", err.message);
  }
};

Damit sind wir fertig! Probieren Sie es aus und ändern Sie den Code je nach Ihren Bedürfnissen.

Step 5: die App einrichten

Wenn Sie die Einrichtungsanleitung für React Native befolgt haben, sollten Sie in der Lage sein, Ihre App entweder mit einer IDE Ihrer Wahl für Android oder mit Xcode für iOS zu erstellen. Wir führen Sie in die notwendigen Schritte ein, um Ihre Fax-App erfolgreich auf Ihr Gerät zu bringen.

Android
Um eine.apk-Datei für Android zu erstellen, ändern Sie Ihr Arbeitsverzeichnis zu android/ und erstellen Sie die App mit gradle.
cd android/
./gradlew assembleRelease
Die endgültige app-release.apk landet in app/build/outputs/apk/release. Sie können die .apk nun auf Ihr Gerät kopieren und installieren (hierfür müssen Sie unbekannte Quellen zulassen).
iOS
Release-Builds für iOS sind ein wenig komplizierter als für Android, da Sie ein Apple-Konto für Xcode erstellen müssen. Eine ausführliche Anleitung zur Erstellung von Apps mit Xcode finden Sie im React-Native Leitfaden.

Fazit

In diesem Tutorial haben wir eine simple Fax-App mithilfe der sipgate.io Node.js-Library erstellt. Das vollständige Projekt finden Sie in unserem GitHub-Repository.

Wir haben allerdings nur die Grundlagen betrachtet. Werfen Sie doch einen Blick auf weitere Fax-Beispielanwendungen  mit sipgate.io, in der wir zusätzliche Funktionen wie eine Fax-History, native Kontaktauswahl und das App-Layout implementiert haben:

fax example app
Wenn Sie mehr über die Möglichkeiten unserer sipgate.io-Library erfahren möchten, schauen Sie sich die anderen Tutorials in unserem Blog an.

Keine Kommentare


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert