Freecodecamp: Ersetzen Sie das Camper Leaderboard-Projekt durch ein funktionsähnliches Projekt basierend auf dem Forum

Erstellt am 5. Juni 2018  ·  45Kommentare  ·  Quelle: freeCodeCamp/freeCodeCamp

Beschreiben Sie Ihr Problem und - wenn möglich - wie Sie es reproduzieren können

Camper-Leaderboard- APIs sind wie folgt defekt:

Fügen Sie der Seite mit dem Problem einen Link hinzu

https://fcctop100.herokuapp.com/api/fccusers/top/recent
https://fcctop100.herokuapp.com/api/fccusers/top/alltime

Erzählen Sie uns von Ihrem Browser und Betriebssystem

  • Browsername: Chrome
  • Browserversion: 67
  • Betriebssystem: Windows 7

Wenn möglich, fügen Sie hier einen Screenshot hinzu

help wanted learn projects-frontend

Hilfreichster Kommentar

@ Em-Ant, danke für die schnelle Antwort! Ihr Glitch-API-Endpunkt funktioniert einwandfrei, daher aktualisiere ich einfach die Projektbeschreibung mit den obigen User Stories und Ihren Links.

Alle 45 Kommentare

@tchaffee @tbushman @ Em-Ant können wir auf Glitch prüfen und eine Alternative dazu haben?

@raisedadead Ich weiß nicht, wer diese APIs entwickelt hat und ob es eine Alternative gibt. Vor meiner Zeit. Vielleicht möchten Sie dies in Zukunft auf FCC-Domains hosten, damit es immer verfügbar ist und nicht unter der Kontrolle eines Dritten steht? Lassen Sie mich wissen, ob ich Ihnen hier noch weiterhelfen kann.

Haben wir den Quellcode dieser App? Ich erinnere mich, dass es funktioniert, wenn man regelmäßig Gitter oder die fcc-Profilseiten abkratzt. Ich weiß nicht, ob es bei Störungen möglich wäre. Warum legt freecodecamp keinen API-Endpunkt mit dem Brownies-Ranking offen?

Haben wir den Quellcode dieser App?

https://github.com/roelver/fcctop100

Wenn mir jemand eine grundlegende Analyse geben kann, wenn der Code gut genug ist und ein wenig gebastelt werden muss, werde ich dies in unsere Organisation aufnehmen und wir könnten es auf Glitch setzen?

Warum legt freecodecamp keinen API-Endpunkt mit dem Brownies-Ranking offen?

Es werden nur die aktuellen 800+ Übereinstimmungen hervorgehoben, die wir zu Spitzenzeiten erhalten.

Ich würde gerne die Herausforderung ersetzen. @ QuincyLarson hast du etwas im Sinn?

@raisedadead Das Leaderboard-Projekt ist kein erforderliches Projekt mehr - wir haben es in die Interviewvorbereitung verschoben. Trotzdem wäre es schön, wenn jemand herausfinden könnte, wie dies behoben werden kann. Ich denke nicht, dass die Belastung durch die Bestenlisten-Apps so groß wäre - wir hatten in der Vergangenheit Tausende dieser Bestenlisten und sie schienen keine allzu großen Auswirkungen zu haben.

Wir sollten jedoch warten, bis unsere neue offene API aktiv ist, bevor wir versuchen, dies zu beheben.

Ich habe mir den Code angesehen und weiß, wie er funktioniert. Früher wurde ein Gitterraum abgekratzt, um die Benutzernamen des Wohnmobils abzurufen, und dann wurden die Informationen zu jedem Camper abgerufen, der auf seine Freecodecamp-Profilseite zugreift. Im Moment funktioniert es nicht, weil dieser Gitterraum geschlossen ist und der Gitter-API-Schlüssel des Autors (in der Quelle fest codiert ...) abgelaufen / blockiert ist.

Wenn es eine Möglichkeit gäbe, regelmäßig (einmal pro Tag oder Woche?) Direkt vom Freecodecamp aus auf einige Informationen über das Ranking zuzugreifen, wäre es viel einfacher, einen Ersatz dafür in einer Panne zu erstellen.

Hallo @QuincyLarson, ich denke, es ist immer noch auf der Liste der Legacy-Zertifikate:

image

@raisedadead Guter Punkt - ich habe vergessen, dass dies auf dieser Liste war. Wir müssen dieses Projekt definitiv wieder zum Laufen bringen.

@ Em-Ant Vielen Dank für die Beschreibung des Problems. Ich schlage vor, dass wir Folgendes tun: Wir wechseln dieses Projekt, um uns stattdessen auf das Forum zu konzentrieren.

Ohne einen API-Schlüssel könnten die Leute kürzlich aktive Threads mithilfe der API unseres Forums anzeigen:

https://forum.freecodecamp.org/latest.json

Wir müssten dafür eine völlig neue Demo erstellen und neue User Stories entwickeln, die jedoch funktional dem alten Leaderboard-Projekt ähnelt.

Wäre jemand daran interessiert, dies anzugehen?

@QuincyLarson Ich habe begonnen, an einer möglichen Ersatzdemo zu arbeiten, von der ich dann einige User Stories schreiben könnte, obwohl es den Anschein hat, dass der CORS-Header möglicherweise nicht aktiviert ist, um diesen API-Feed abrufen zu können.

@ jgibson02 Haben Sie Fortschritte bei Ihrer möglichen Ersatzdemo gemacht?

Ich bin immer noch dafür, das Thema dieses Projekts in etwas mit einer offenen API wie forum.freecodecamp.org zu ändern. Aber wenn Sie Fortschritte gemacht haben, würde mich das interessieren :)

Ich hatte Probleme beim Abrufen von Daten von der https://forum.freecodecamp.org/latest.json API, als ich eine Anfrage von CodePen stellte. Es scheint, als müsste CORS für diese API aktiviert werden, damit Camper sie dort verwenden können. Im Moment werde ich weiter an einer Demo arbeiten, indem ich eine Kopie des JSON herunterlade.

@Bouncey @raisedadead Was wären die Sicherheitsaspekte für die Aktivierung von CORS in der API unseres Forums?

Es sieht so aus, als wäre dies eine relativ einfache Lösung für Discourse, wenn wir uns entschließen, damit fortzufahren :

Und solange Sie in der Lage sind, GET-Anforderungen zu erfassen und selektive Endpunkte auszuwählen.

Hier ist eine Demo, die ich mit einer offline heruntergeladenen Kopie des JSON erstellt habe. Denken Sie, dass dies so weit passt, wie Sie es für eine allgemeine User Story sehen möchten?
Wenn ja, kann ich anfangen, einige aufgeschlüsselte User Stories und Anweisungen aufzuschreiben.

Hier sind einige mögliche Anweisungen und User Stories:

Projekte zum Mitnehmen - Erstellen Sie eine FreeCodeCamp-Forum-Homepage

  • Ziel: Erstellen Sie eine CodePen.io-App, die funktional der folgenden ähnelt: https://codepen.io/jgibson02/full/BVvbRX/.
  • Erfüllen Sie die folgenden User Stories. Verwenden Sie die gewünschten Bibliotheken oder APIs. Geben Sie ihm Ihren persönlichen Stil.
  • User Story: Ich kann eine Liste der neuesten Beiträge in den freeCodeCamp-Foren sehen.
  • User Story: Für jedes Thema kann ich den Titel und eine Liste von Links zu Benutzern sehen, die kürzlich darin gepostet haben.
  • User Story: Ich kann die Anzahl der Antworten und Ansichten jedes Themas sowie einen Zeitstempel anzeigen, wann das Thema zuletzt aktiv war.
  • Tipp: Um die 30 neuesten Forenbeiträge zu erhalten: https://forum.freecodecamp.org/latest.json.
  • Denken Sie daran, Read-Search-Ask zu verwenden, wenn Sie nicht weiterkommen.
  • Wenn Sie fertig sind, klicken Sie auf die Schaltfläche "Ich habe diese Herausforderung abgeschlossen" und fügen Sie einen Link zu Ihrem CodePen hinzu.
  • Sie können Feedback zu Ihrem Projekt erhalten, indem Sie es mit Ihren Freunden auf Facebook teilen.

@ jgibson02 Super ! Vielen Dank, dass Sie uns bei der Erstellung dieser hervorragenden User Stories geholfen haben. Ich werde mit @Bouncey an der CORS-Frage arbeiten.

@QuincyLarson Hat sich das CORS-Problem weiterentwickelt?

Hallo,
Ich habe bereits ein LeaderBoard erstellt, das jetzt aufgrund des API-Problems defekt ist.
Ich mochte die ursprünglichen User Stories:
User Story: Ich kann eine Tabelle der freeCodeCamp-Camper sehen, die in den letzten 30 Tagen die meisten Brownie-Punkte gesammelt haben.
User Story: Ich kann sehen, wie viele Brownie-Punkte sie in den letzten 30 Tagen verdient haben und wie viele sie insgesamt verdient haben.
User Story: Ich kann zwischen dem Sortieren der Liste nach der Anzahl der Brownie-Punkte, die sie in den letzten 30 Tagen verdient haben, und der Anzahl der Brownie-Punkte, die sie insgesamt verdient haben, wechseln.

Es gibt keine Brownie-Punkte mehr, aber es gibt Likes. Und es ist nicht mehr wirklich in monatliche unterteilt. Es sieht so aus, als wären die meisten Tage 288.

Können wir uns, anstatt auf den neuesten Beitrag zu verlinken, auf den Namen des Wohnmobils konzentrieren und wie viele Likes diese Person (anstelle von Brownie-Punkten) über einen Zeitraum von 30 Tagen und zu jeder Zeit erhalten hat?

https://www.freecodecamp.org/forum/directory_items.json?period=all&order=likes_received.json

Arbeitet jemand daran, diese API für das Camper-Leaderboard zu reparieren?

Wenn es keine bessere Lösung gibt, können wir das Cors-Problem umgehen, indem wir einen Proxy für Pannen erstellen (ich bin ziemlich erfahren in diesem Bereich ...). Es sollte ziemlich einfach zu bauen sein. Lassen Sie mich wissen, ob ich das tun soll.

@ Em-Ant Ja - das klingt nach einer schönen Abhilfe.

Bitte halten Sie uns auf dem Laufenden und lassen Sie uns wissen, ob wir etwas tun können, um Ihnen zu helfen.

API-Endpunkt: https://buttercup-island.glitch.me/latest
Testprojekt ( gespalten von https://codepen.io/Em-Ant/pen/modqWP

Wenn Sie möchten, können wir es in einer benutzerdefinierten Domain verfügbar machen, die Sie besitzen (z. B. in einer Freecodecamp-Subdomain).

Lassen Sie mich wissen, ob es in Ordnung ist und ob Sie noch etwas brauchen. Wenn das eine gute Lösung ist, erteile ich camperbot die Bearbeitungserlaubnis, um das Eigentum an freecodecamp zu übertragen.

Da @ Em-Ant diesen neuen API-Endpunkt für die forum -Daten erstellt hat, ist es wohl an der Zeit, die User Stories zu ändern, wie hier von @ jgibson02 vorgeschlagen .

Im Testprojekt in Zeile 67 ist ein Fehler aufgetreten: Nicht erfasster Referenzfehler: Stil ist nicht definiert
unter /Em-Ant/pen/pen.js:67

Ich stimme @nuhman hinsichtlich der Verwendung der vorgeschlagenen User Stories zu.

Der ReferenceError (auf meinem Originalstift) wurde behoben. Was sollten wir Ihrer Meinung nach in den User Stories ändern?

Hallo Danke.
Es sieht so aus, als würden wir nicht sortieren, es kommt nach dem neuesten Thema ...
Es funktioniert sehr gut für die Forenseite.

Ich habe gerade so hart im Leader Board gearbeitet und es ist eine Schande, es nicht vorführen zu können. Auch ohne die Brownies würde ich gerne sehen, wer zuletzt gepostet hat - und wer am häufigsten gepostet hat - mit Links zu diesen Posts - und vielleicht dem Benutzerprofil.

Ich mag es zu sehen, wie oft das Thema angesehen wurde.

Ich habe einen Fehler mit Cross-Origin Read Blocking (CORB), wenn ich versuche, Daten abzurufen, auch wenn ich den Link https://www.freecodecamp.org/forum/latest.json verwende . _ {mode: 'no-cors'} _ wirkt nicht effektiv.
Gibt es eine alternative Lösung, um die Daten für das Leaderboard abzurufen (nicht um sie fest zu codieren)?

Ich hatte kein Problem damit. Welchen Browser verwenden Sie?

Ich hatte kein Problem damit. Welchen Browser verwenden Sie?

Google Chrome
Version 73.0.3683.86 (Official Build) (64-Bit)

Vielen Dank. Wenn ich jedoch nur die Sicherheitsrichtlinie in meinem Browser deaktiviere, wird das Problem für andere Browser / Benutzer nicht gelöst. Ich habe die Lösungen mit dem Einrichten von Headern gesehen, kann sie jedoch nicht in Codepen (wo sich mein Leaderboard befindet) implementieren, da es nur die Clientseite gibt.

Es tut mir Leid. Ich habe es nicht genug gesehen, um es zu verstehen. Ich habe verstanden, dass CodePen mögliche CORS-Probleme gelöst hat, aber CORB ist neu für mich.

Können Sie überhaupt zum eigentlichen API-Endpunkt gehen? Oder kommt es nur vom LeaderBoard?

Durch direkten Link sehe ich die json-Daten. Das Problem steigt, wenn ich versuche, json von freecodecamp.org unter codepen abzurufen.

Ich habe meine anderen Stifte bei codepen überprüft, die die Daten von anderen Websites abrufen (es gibt rawgit.com, glitch.com, wikipedia.org, ipinfo.io und github.com), und sie funktionieren ordnungsgemäß. Das Problem liegt also genau bei freecodecamp-json. Es hängt möglicherweise von den Codepen-Einstellungen ab, aber ich finde noch keine Gemeinsamkeiten mit ihrer Unterstützung.

Autsch. @ jgibson02 Hast du das schon mal gesehen?
Wenn ja, kennen Sie die Problemumgehung?

@ColorizeMySky Haben Sie den Endpunkt von @ Em-Ant schon früher ausprobiert?
https://buttercup-island.glitch.me/latest

Vielleicht funktioniert das?

https://buttercup-island.glitch.me/latest

Vielleicht funktioniert das?

Ja, vielen Dank. Es holt den json mit Forum-Daten von Glitch.

Ich habe meinen CodePen aktualisiert, um die API von @ Em-Ant unter https://buttercup-island.glitch.me/latest zu verwenden, um das CORS-Problem zu vermeiden.
@QuincyLarson Kannst du glitch.me verwenden, um zur Domain von freecodecamp umzuleiten? Wenn ja, wäre dies möglicherweise bereit, wieder in den Lehrplan integriert zu werden.

Hey @scissorsneedfoodtoo kannst du das aufnehmen? Alles, was wir brauchen, ist, ein Glitch-Projekt wie das oben erwähnte als Workaround zu erstellen und den Challenge-Seed zu aktualisieren, um es in Anweisungen zu verwenden.

@raisedadead , loslegen

Sie müssen kein weiteres Glitch-Projekt erstellen, wenn Sie dies nicht möchten. Das
Einer hat bereits das Eigentum zwischen mir und Camperbot geteilt, so dass Sie bearbeiten können
es.

Il gio 4 apr 2019, 12:13 Kristofer Koishigawa [email protected] ha
scritto:

@raisedadead https://github.com/raisedadead , klar , ich werde gleich

- -
Sie erhalten dies, weil Sie erwähnt wurden.
Antworte direkt auf diese E-Mail und sieh sie dir auf GitHub an
https://github.com/freeCodeCamp/freeCodeCamp/issues/17450#issuecomment-479836966 ,
oder schalten Sie den Thread stumm
https://github.com/notifications/unsubscribe-auth/AMWwVve4x2DPL4_ApR55oakeZHbBGlGGks5vddAxgaJpZM4UbaVj
.

@ Em-Ant, danke für die schnelle Antwort! Ihr Glitch-API-Endpunkt funktioniert einwandfrei, daher aktualisiere ich einfach die Projektbeschreibung mit den obigen User Stories und Ihren Links.

@ Em-Ant, in Ihrer Glitch-API sehen Sie nicht, wie Sie den Link zum entsprechenden Thema erhalten. Ist es möglich?

@ColorizeMySky my leitet die Anfrage an https://www.freecodecamp.org/forum/latest.json weiter, damit Sie genau die gleiche Antwort erhalten. Es werden nur die erforderlichen CORS-Header zur ursprünglichen Antwort hinzugefügt.

Ich habe mir die Antwortstruktur kurz angesehen und sehe zwei Abschnitte: Einer ist "Benutzer", der andere ist "Themen". Sie können die URL des Beitrags abrufen, indem Sie die Basis-URL des Forums und die Eigenschaft "slug" eines Themeneintrags hinzufügen.

Vielen Dank an alle für die Hilfe. Ich habe es geschafft, dieses Projekt mit einer neuen API abzuschließen, und eine neue API ist hilfreich, um die alte Aufgabe zu ersetzen. Ich kann holen. sortieren, zusätzliche Informationen und Bilder hinzufügen, verlinken usw. https://codepen.io/Colorize_my_sky/full/aMxRRq

Herzlichen Glückwunsch @ColorizeMySky ! Das sieht gut aus und ist sehr reaktionsschnell.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen