Hallo! Ich bin Linda Liu, eine aufstrebende Juniorin am MIT. Ich habe die letzten drei Monate hier bei edX als Softwareentwicklungspraktikant im Mobile-Team verbracht, in dem ich die Gelegenheit hatte, in einem Bereich von der Serverseite bis zur iOS- und Android-Entwicklung zu arbeiten. Ich möchte über zwei Projekte sprechen – das erste, die Neugestaltung des edX-Zugriffskontroll-Frameworks, und das zweite, die Erforschung des React-Frameworks und seines Potenzials für edX.
Zugriffssteuerungs-Framework
Dieses Projekt begann eigentlich als Bugfix zu Kursstartdaten für die mobile App. Wenn ein Kursautor kein Startdatum für seinen Kurs angibt, wird standardmäßig der 1. Januar 2030 verwendet. Auf der Webplattform wird eine Überprüfung durchgeführt, damit ein Benutzer anstelle des offensichtlich falschen Datums „außerplanmäßig“ sieht. Die mobile App führt jedoch keine entsprechende Überprüfung durch, sodass die Studenten sahen, dass die Kurse im Jahr 2030 begannen.
Die erste potenzielle Lösung, die mir in den Sinn kam, war die Durchführung einer serverseitigen Überprüfung im Kursanmeldungsendpunkt der mobilen API, um festzustellen, ob das Startdatum das Standarddatum war, und die API, eine zu senden Keine PräsentationWert in diesem Fall. Dieser Fix war nett, weil er keine clientseitigen Änderungen erfordern würde. Ich entdeckte jedoch, dass die Apps einen Zeitstempel von der mobilen API erwarteten und abstürzten, als diese Erwartung gebrochen wurde. Eine rein serverseitige Änderung würde also nicht funktionieren.
Das Gespräch über die möglichen Korrekturen entwickelte sich zu einer Diskussion darüber, wie Startdatumsprüfungen auf der Plattform durchgeführt werden. Die Plattform hat eine große Funktion aufgerufen hat_zugriff für diesen Zweck. Es nimmt einen Benutzer, eine Aktion und ein Objekt auf und prüft, ob der Benutzer die richtigen Berechtigungen hat, um die Aktion für das Objekt auszuführen. Diese Funktion kann beispielsweise verwendet werden, um zu prüfen, ob ein Student berechtigt ist, sich in einen Kurs einzuschreiben. Damals gab diese Funktion einfach einen booleschen Wert zurück – richtig wenn der Zugriff gewährt wird, falsch wenn der Zugriff verweigert wird. Angesichts der Tatsache, dass es viele Gründe gibt, warum der Zugriff verweigert werden kann, und verschiedene Gründe möglicherweise unterschiedliche Verhaltensweisen auslösen möchten, schien es so hat_zugriff könnte von einem Rückgabetyp profitieren, der mehr Details enthält. Die mobile API könnte dann die Ergebnisse der senden hat_zugriff check an den Client, der dann die Informationen verwenden könnte, um eine entsprechende Nachricht anzuzeigen.
Der nächste Schritt war das Entwerfen des neuen Rückgabetyps. Das neue Objekt wird aufgerufen Zugriffsantwort. Es ist ein Python-Objekt, das ein boolesches Äquivalent zum Wert des Originals enthält hat_zugriff zurückgegeben hätte, ein String-Fehlercode sowie Benutzer- und Entwicklermeldungen. Unterklassen davon stellen die Fehler dar, mit denen wir uns derzeit befassen wollen, nämlich StartdatumFehler (wenn der Kurs für den Benutzer noch nicht begonnen hat), Sichtbarkeitsfehler (wenn der Benutzer nicht über die erforderlichen Zugriffsrechte verfügt) und MeilensteinFehler (wenn der Benutzer einen unerfüllten Meilenstein hat). Ich habe die Änderungen in vier separaten Pull-Requests implementiert: jeweils einen an „has_access“, die mobile API, der Android-Clientund der iOS-Client. Obwohl dies über den ursprünglichen Umfang der Fehlerbehebung hinausgeht, ermöglicht diese Änderung, dass Startdatumsprüfungen von der Clientseite auf die Serverseite verschoben werden. Als Nebeneffekt erleichtert diese Änderung die Implementierung zukünftiger Funktionen (z. B. Meilensteine) in der mobilen App erheblich. Durch diese Arbeit konnte ich viele Teile der edX-Codebasis berühren, was wirklich cool war!
React Native für iOS und React.js
Mein nächstes Projekt war eher explorativer Natur, mit weniger konkreten Zielen. Bei edX müssen viele Features dreimal entwickelt werden – einmal für das Web, einmal für iOS und einmal für Android. Es gab eine Vielzahl von plattformübergreifenden Tools für die mobile Entwicklung mit dem Motto „Einmal schreiben, überall verwenden“, um dieses Problem zu bekämpfen, aber sie versuchten, die Entwicklung zu sehr zu standardisieren – Apps konnten keine nativen Plattformkomponenten verwenden, also kamen sie heraus Gefühl wie verherrlichte mobile Webseiten. Facebook hat eine Lösung für dieses Problem entwickelt: ein Framework namens React Native die es Entwicklern ermöglicht, native Apps mit React (einem UI-Framework für das Web) zu erstellen.
Die treibende Idee hinter React Native ist „einmal lernen, überall schreiben“. Das bedeutet, dass Plattformen unterschiedliche Strukturen und Stile haben, sodass Entwickler für jede unterschiedliche Anwendungen schreiben sollten, aber mit React Native können diese Anwendungen mit denselben zugrunde liegenden Technologien geschrieben werden. Es verspricht das Beste aus beiden Welten – eine Entwicklung, die plattformübergreifend effizient und ähnlich ist, aber dennoch das gute native Gefühl vermittelt. Kürzlich hat Facebook die Version des Frameworks für iOS als Open Source bereitgestellt. Die Hoffnung ist, dass React Native (sobald es auch Open Source für Android ist) und React.js es Entwicklern ermöglichen, Code wiederzuverwenden und so den Entwicklungsaufwand für alle drei Plattformen zu reduzieren.
XBlocks sind ein guter Kandidat für dieses Projekt, da es sich um kleine modulare Teile handelt und die mobilen Apps derzeit keine nativen Implementierungen davon haben. Konkret habe ich verwendet der Drag-and-Drop-XBlock, weil die verwendeten Interaktionen (insbesondere die Ziehbewegung) von dem reibungslosen Rendering profitieren würden, das React verspricht. Ich begann mit einer einfachen Drag-and-Drop-Bewertung als eine eigenständige iOS-Anwendung, um ein Gefühl für die Entwicklung mit React Native zu bekommen. React hielt, was es versprach – das Rendering war wirklich flüssig und Komponenten und Informationen wurden auf eine wirklich sinnvolle Weise organisiert.
Dieses erste Experiment führte zu zwei Folgefragen: Wie einfach könnte der Code in eine React.js-Drag-and-Drop-Bewertung für den Browser portiert werden? Zweitens, wie einfach könnte die Drag-and-Drop-Bewertung in das XBlock-Framework integriert werden, sodass die Bewertung auf die richtige Weise mit dem Server kommunizieren könnte?
Ich habe die letzten Wochen damit verbracht, an der Beantwortung dieser beiden Fragen zu arbeiten. Ich habe eine Webversion meiner iOS-App erstellt, und obwohl es keine direkte iOS-zu-Web-Übersetzung (React Native-to-React.js) des Codes gab, werden Informationen auf die gleiche Weise weitergegeben und gespeichert, und Dadurch konnten viele Funktionen wiederverwendet werden. Zum Beispiel erforderten alle Funktionen, die das Ziehen handhaben, nur ein paar kleine Anpassungen. Das ist vielversprechend, weil es bedeutet, dass wir XBlocks entwickeln können, die auf verschiedene Plattformen zugeschnitten sind, aber dennoch in der Lage sind, die Struktur hinter dem Code wiederzuverwenden.
Ich habe auch daran gearbeitet, die Bewertung in die XBlock-Workbench zu integrieren, da dies ein wichtiger Teil der Zusammenarbeit mit der Plattform wäre. Dazu gehörte das Modifizieren des Drag-and-Drop-XBlocks selbst sowie das Implementieren der korrekten AJAX-Aufrufe von der React-Komponente, sodass der Server weiß, wenn ein Schüler ein Problem öffnet oder versucht. React hat es einfach gemacht, die erforderlichen Aufrufe zu tätigen, und jetzt haben wir eine React Native- und React.js-Version dieses XBlock! Ich hoffe, dass edX React-Komponenten in Zukunft zu einem festen Bestandteil der Plattform machen wird.
Screenshots des React Native Drag and Drop XBlock
Links: Die anfängliche Sicht eines Benutzers auf das Problem. Rechts: Feedback über iOS-Benachrichtigungen geben.
Zusammenfassung
Ich fand es toll, dass ich diesen Sommer in Bezug auf die von mir verwendeten Technologien und die Leute, mit denen ich zusammengearbeitet habe, an einer Vielzahl von Projekten arbeiten konnte. Ich habe viel Konkretes gelernt und mir auch Soft Skills angeeignet, wie zum Beispiel, wie man in einem Software-Engineering-Team effektiv kommuniziert. Dies war eine unglaubliche Gelegenheit, und danke an alle, die es so gemacht haben! Besonders danken möchte ich meinen Mentoren Chris Lee, Akiva Leffert und Nimisha Asthagiri, dem Rest des mobilen Teams und den anderen Praktikanten.
