- Was ist www.sipgate.io?
- In diesem Tutorial
- Voraussetzungen
- Step 1: das Projekt aufsetzen
- Step 2: UI erstellen
- Step 3: erster Testlauf
- Step 4: Business-Logik aufbauen
- Step 5: die App einrichten
- Fazit
Was ist www.sipgate.io?
SMS oder Faxe versenden und empfangen, den Anrufverlauf abrufen, Anrufe initiieren und manipulieren – das alles kann www.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 www.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 www.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 [tokenId, setTokenId] = useState("");
const [token, setToken] = useState("");
const renderLogin = () => {
return (
<View>
<TextInput
placeholder="TokenId"
value={tokenId}
onChangeText={setTokenId}
/>
<TextInput
placeholder="Token"
value={token}
onChangeText={setToken}
secureTextEntry
/>
<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 www.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-picker/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
npm run android
iOS
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.
Zur Authentifizierung wird ein Personal Access Token mit dem faxlines:read und sessions:fax:write Scope benötigt.
Mehr über die Personal Access Tokens können Sie gerne in unserer Dokumentation erfahren.
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({
tokenId,
token,
});
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>
// tokenId and token 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
cd android/
./gradlew assembleRelease
iOS
Fazit
In diesem Tutorial haben wir eine simple Fax-App mithilfe der www.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 www.sipgate.io, in der wir zusätzliche Funktionen wie eine Fax-History, native Kontaktauswahl und das App-Layout implementiert haben:
Wenn Sie mehr über die Möglichkeiten unserer www.sipgate.io-Library erfahren möchten, schauen Sie sich die anderen Tutorials in unserem Blog an.
Keine Kommentare