Freecodecamp: Substitua o projeto Camper Leaderboard por um projeto funcionalmente semelhante com base no fórum

Criado em 5 jun. 2018  ·  45Comentários  ·  Fonte: freeCodeCamp/freeCodeCamp

Descreva o seu problema e - se possível - como reproduzi-lo

As APIs da

Adicione um link para a página com o problema

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

Conte-nos sobre seu navegador e sistema operacional

  • Nome do navegador: Chrome
  • Versão do navegador: 67
  • Sistema operacional: Windows 7

Se possível, adicione uma captura de tela aqui

help wanted learn projects-frontend

Comentários muito úteis

@ Em-Ant, obrigado pela resposta rápida! Seu ponto de extremidade da API Glitch está funcionando perfeitamente, então irei apenas atualizar a descrição do projeto com as histórias de usuário acima e seus links.

Todos 45 comentários

@tchaffee @tbushman @ Em-Ant podemos verificar e ter uma alternativa para isso no Glitch?

@raisedadead Não sei quem desenvolveu essas APIs e se existe uma alternativa. Antes do meu tempo. Talvez isso seja algo que você gostaria de hospedar em domínios FCC daqui para frente, para que esteja sempre disponível e não sob o controle de terceiros. Entre em contato se houver mais alguma coisa em que eu possa ajudar.

Temos o código-fonte desse aplicativo? Eu me lembro que ele funciona periodicamente raspando gitter, ou as páginas de perfil da FCC. Não sei se isso seria possível em uma falha. Por que o freecodecamp não expõe um endpoint da API com a classificação dos brownies?

Temos o código-fonte desse aplicativo?

https://github.com/roelver/fcctop100

Se alguém puder me dar uma análise básica, se o código for bom o suficiente e precisar de alguns ajustes, vou colocar isso em nossa organização e poderíamos colocá-lo no Glitch?

Por que o freecodecamp não expõe um endpoint da API com a classificação dos brownies?

Isso só irá enfatizar os atuais mais de 800 concorrentes que obtemos nos horários de pico.

Eu adoraria substituir o desafio. @QuincyLarson , você tem algo em mente?

@raisedadead O projeto da tabela de classificação não é mais um projeto obrigatório - nós o movemos para a Preparação para Entrevistas. Ainda assim, seria bom se alguém pudesse descobrir como consertar isso. Não acho que a pressão dos aplicativos de placares seria tão grande - tínhamos milhares desses placares no passado e eles não pareciam ter um impacto muito grande.

Devemos esperar até que nossa nova API aberta esteja ativa antes de tentar consertar isso.

Dei uma olhada no código e sei como funciona. Ele costumava raspar uma sala para obter os nomes de usuário do campista e, em seguida, obter as informações sobre cada campista acessando sua página de perfil do freecodecamp. No momento não funciona porque aquela sala gitter fechou, e a chave gitter api do autor (codificada na fonte ...) está expirada / bloqueada.

Se houvesse uma maneira de acessar periodicamente (uma vez por dia ou semana?) Algumas informações sobre o ranking diretamente do freecodecamp, seria muito mais fácil construir um substituto para ele no glitch.

Olá @QuincyLarson , acho que ainda está na lista de

image

@raisedadead Bom argumento - esqueci que isso estava naquela lista. Definitivamente, precisamos fazer esse projeto funcionar novamente.

@ Em-Ant Obrigado por descrever o problema. Aqui está o que proponho que façamos - mudamos este projeto para focar no fórum.

Sem uma chave de API, algo que as pessoas poderiam fazer é mostrar tópicos ativos recentemente usando a API do nosso fórum:

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

Precisaríamos construir uma demonstração inteiramente nova para isso e criar novas histórias de usuário, mas seria funcionalmente semelhante ao antigo projeto de placar.

Alguém estaria interessado em resolver isso?

@QuincyLarson Comecei a trabalhar em uma possível demonstração de substituição da qual poderia escrever algumas histórias de usuário, embora pareça que o cabeçalho CORS pode não estar habilitado para buscar esse feed de API.

@ jgibson02 Você fez algum progresso em sua possível demonstração de substituição?

Ainda sou a favor de mudar o assunto deste projeto para algo com uma API aberta, como forum.freecodecamp.org. Mas se você fez progresso nisso, estou interessado em ver :)

Eu estava tendo problemas para recuperar dados da API https://forum.freecodecamp.org/latest.json ao fazer uma solicitação do CodePen. Parece que o CORS precisa ser habilitado nessa API para que os campistas possam usá-lo lá. Por enquanto, continuarei trabalhando em uma demonstração baixando uma cópia do JSON.

@Bouncey @raisedadead quais seriam as considerações de segurança para habilitar CORS na API de nosso fórum?

Parece que esta é uma correção relativamente simples no Discourse se decidirmos que queremos ir em frente: https://meta.discourse.org/t/correct-cors-enabling-steps/55697

E contanto que você seja capaz de definir o escopo para solicitações GET e seja seletivo quanto aos endpoints expostos.

Aqui está uma demonstração que criei usando uma cópia baixada offline do JSON. Você acha que isso se encaixa no que você gostaria de ver em uma história de usuário geral?
Nesse caso, posso começar a escrever algumas histórias de usuário e instruções detalhadas.

Aqui estão algumas instruções e histórias de usuário possíveis:

Take Home Projects - Crie uma página inicial do fórum do FreeCodeCamp

  • Objetivo: Construir um aplicativo CodePen.io funcionalmente semelhante a este: https://codepen.io/jgibson02/full/BVvbRX/.
  • Preencha as histórias de usuário abaixo. Use as bibliotecas ou APIs de que você precisa. Dê a ele seu próprio estilo pessoal.
  • História do usuário: Eu posso ver uma lista das postagens mais recentes nos fóruns do freeCodeCamp.
  • História do usuário: para cada tópico, posso ver o título e uma lista de links para usuários que postaram recentemente nele.
  • História do usuário: posso ver o número de respostas e visualizações que cada tópico teve e um carimbo de data / hora de quando o tópico estava ativo pela última vez.
  • Dica: para obter as 30 postagens mais recentes do fórum: https://forum.freecodecamp.org/latest.json.
  • Lembre-se de usar Ler-Pesquisar-Perguntar se tiver dúvidas.
  • Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen.
  • Você pode obter feedback sobre seu projeto compartilhando-o com seus amigos no Facebook.

@ jgibson02 Incrível! Obrigado por ajudar a criar essas excelentes histórias de usuário. Vou trabalhar com @Bouncey na questão CORS.

@QuincyLarson houve algum desenvolvimento no problema do CORS?

Oi,
Já criei um LeaderBoard que agora está quebrado devido ao problema da API.
Gostei das histórias de usuários originais:
História do usuário: Eu posso ver uma tabela dos campistas do freeCodeCamp que ganharam mais pontos de brownie nos últimos 30 dias.
História do usuário: posso ver quantos pontos brownie eles ganharam nos últimos 30 dias e quantos ganharam no total.
História do usuário: Eu posso alternar entre classificar a lista por quantos pontos de brownie eles ganharam nos últimos 30 dias e por quantos pontos de brownie eles ganharam no total.

Não há mais pontos de brownie, mas há curtidas. E não é mais dividido em mensal. Parece que a maioria dos dias são 288.

Em vez de criar um link para a postagem mais recente, podemos nos concentrar no nome do Camper e em quantos likes essa pessoa recebeu (em vez de pontos de brownie) em um período de 30 dias e o tempo todo?

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

Alguém está trabalhando para consertar esta API para a Tabela de classificação da Camper?

Se não houver uma solução melhor, podemos contornar o problema do cors ao construir um proxy na falha (sou bastante especialista nisso ...), posso definir o escopo da solicitação para apenas me permitido e métodos e enpoints, se necessário. Deve ser muito fácil de construir. Deixe-me saber se você quiser que eu faça isso.

@ Em-Ant Sim - parece uma boa solução.

Mantenha-nos informados e diga-nos se podemos fazer algo para ajudar.

endpoint da api: https://buttercup-island.glitch.me/latest
projeto de teste (bifurcado de @ jgibson02 ): https://codepen.io/Em-Ant/pen/modqWP

Se você quiser, podemos expô-lo em um domínio personalizado de sua propriedade (por exemplo, um subdomínio freecodecamp).

Avise-me se estiver tudo bem e se precisar de mais alguma coisa. Se essa for uma boa solução, darei permissão de edição ao camperbot, para transferir a propriedade para o freecodecamp.

Como @ Em-Ant criou este novo endpoint de api para os dados forum , acho que é hora de alterar as histórias de usuário, conforme sugerido aqui por @ jgibson02 ?

Há um erro no projeto de teste na linha 67: Uncaught ReferenceError: estilizado não definido
em /Em-Ant/pen/pen.js:67

Eu concordo com @nuhman sobre o uso das histórias de usuários sugeridas.

Corrigido o ReferenceError (na minha caneta original), mas o que você acha que devemos mudar nas histórias de usuário?

Oi obrigado.
Parece que não estamos classificando, vem pelo tópico mais recente ....
Funciona muito bem para a página do fórum.

Acabei de trabalhar tanto no Quadro de Líderes e é uma pena não poder exibi-lo. Mesmo sem os Brownies, eu adoraria ver quem postou mais recentemente - e quem postou mais vezes - com links para essas postagens - e talvez o perfil do usuário.

Gosto de ver quantas vezes o tópico foi visto.

Eu tenho um erro com Cross-Origin Read Blocking (CORB) quando tento buscar dados também quando uso o link https://www.freecodecamp.org/forum/latest.json . _ {mode: 'no-cors'} _ não é eficaz.
Existe alguma solução alternativa para buscar os dados para o Leaderboard (não para codificá-los)?

Eu não tive nenhum problema com isso. Qual navegador você está usando?

Eu não tive nenhum problema com isso. Qual navegador você está usando?

Google Chrome
Versão 73.0.3683.86 (versão oficial) (64 bits)

Isso é novo para mim. Mas eu achei esta sugestão como uma solução possível ...

https://stackoverflow.com/questions/54701399/how-to-fix-cross-origin-read-blocking-corb-blocked-cross-origin-response-with

Obrigado. Mas se eu apenas desabilitar a política de segurança em meu navegador, isso não resolverá o problema para outros navegadores / usuários. Vi as soluções com configuração de cabeçalhos, mas não consigo implementar no Codepen (onde está meu Leaderboard), pois existe apenas o lado do cliente.

Eu sinto Muito. Não vi o suficiente para entender. Eu entendi que CodePen resolveu possíveis problemas de CORS, mas CORB é novo para mim.

Você consegue acessar o ponto de extremidade da API real? Ou está vindo apenas do LeaderBoard?

Por link direto, vejo os dados json. O problema surge quando tento buscar json em freecodecamp.org em codepen.

Verifiquei minhas outras canetas em codepen, que busca os dados de outros sites (existem rawgit.com, glitch.com, wikipedia.org, ipinfo.io e github.com) e eles funcionam corretamente. Então, o problema é exatamente com o freecodecamp-json. Possivelmente depende das configurações do codepen, mas não encontro um terreno comum com o suporte deles ainda.

Ai. @ jgibson02 Você já viu isso acontecer antes?
Em caso afirmativo, você conhece a solução?

@ColorizeMySky Você tentou o ponto final de @ Em-Ant antes?
https://buttercup-island.glitch.me/latest

Talvez isso funcione?

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

Talvez isso funcione?

Sim, muito obrigado. Ele busca o json com dados do fórum da falha.

Eu atualizei meu CodePen para usar a API do @ Em-Ant em https://buttercup-island.glitch.me/latest para evitar o problema do CORS.
@QuincyLarson, você concorda em usar o glitch.me como forma de redirecionar para o domínio do freecodecamp? Nesse caso, talvez isso estivesse pronto para ser reintegrado ao currículo.

Ei @ scissorsneedfoodtoo, você pode pegar isso? Tudo o que precisamos é criar um projeto de falha como o mencionado acima como uma solução alternativa e atualizar a semente do desafio para usá-la nas instruções.

@raisedadead , claro, vou resolver isso

Você não precisa fazer outro projeto de falha se não quiser. que
um já compartilhou a propriedade entre mim e o camperbot, então você pode editar
isto.

Il gio 4 de abril de 2019, 12h13 Kristofer Koishigawa [email protected] ha
scritto:

@raisedadead https://github.com/raisedadead , claro, vou resolver isso imediatamente

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/17450#issuecomment-479836966 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/AMWwVve4x2DPL4_ApR55oakeZHbBGlGGks5vddAxgaJpZM4UbaVj
.

@ Em-Ant, obrigado pela resposta rápida! Seu ponto de extremidade da API Glitch está funcionando perfeitamente, então irei apenas atualizar a descrição do projeto com as histórias de usuário acima e seus links.

@ Em-Ant, em sua API de falha não vejo como obter o link para o tópico apropriado. É possível?

@ColorizeMySky my glitch api https://www.freecodecamp.org/forum/latest.json para que você obtenha exatamente a mesma resposta. Ele apenas adiciona os cabeçalhos CORS necessários à resposta original.

Dei uma olhada rápida na estrutura de resposta e vi 2 seções: uma é "usuários", a outra é "tópicos". Você pode obter a url da postagem adicionando a url base do fórum e a propriedade "slug" de uma entrada de tópico.

Obrigado a todos pela ajuda. Consegui terminar este projeto com uma nova API, e uma nova API é boa para substituir a tarefa antiga. Eu posso buscar. classificar, adicionar informações e imagens adicionais, vincular etc. https://codepen.io/Colorize_my_sky/full/aMxRRq

Parabéns @ColorizeMySky ! Isso parece ótimo e é muito responsivo.

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

ar5had picture ar5had  ·  3Comentários

raisedadead picture raisedadead  ·  3Comentários

Tzahile picture Tzahile  ·  3Comentários

EthanDavis picture EthanDavis  ·  3Comentários

trashtalka3000 picture trashtalka3000  ·  3Comentários