Tareas para la capacitaci贸n inicial: implementamos elementos individuales de las interfaces YouTube, Instagram, Spotify, GitHub

imagen



Verano. Aqu铆 hay una lista de ideas divertidas e interesantes para entrenar tus habilidades de codificaci贸n.



La siguiente lista es un desaf铆o para su habilidad, una inspiraci贸n, no una gu铆a paso a paso para desarrollar los proyectos enumerados.



Clon de chat de YouTube (solo chat)



Eleg铆 este desaf铆o porque YouTube es tan omnipresente y cualquier empleador decente requerir谩 que implemente una funcionalidad similar, aunque a una escala mucho menor.



imagen



Esto es lo que aprender谩 al crear un clon de chat de YouTube.



  • Usando la API websockets . En pocas palabras, los websockets son una tecnolog铆a avanzada que permite una sesi贸n de comunicaci贸n interactiva bidireccional entre el navegador de un usuario y un servidor.
  • Autorizaci贸n de usuario. Debe dar apodos a los usuarios de chat e implementar un registro simple.
  • Procesamiento de formularios. De hecho, absolutamente todos los chats no son m谩s que formas complejas.




Clon de Instagram (Galer铆a de im谩genes + secci贸n de comentarios)



Instagram es realmente bueno para captar nuestra atenci贸n con muchas fotos. Nadie va a Instagram para leer textos largos. Intentemos emular la parte que funciona realmente bien en Instagram: galer铆a de im谩genes y dar a los usuarios la capacidad de comunicarse a trav茅s de comentarios.



imagen



Esto es lo que aprender谩 al implementar una galer铆a de im谩genes similar a Instagram.



  • Procesamiento y carga de im谩genes sin p茅rdidas a servicios en la nube como AWS, Azure, Google Cloud Platform y otros. Apuesto a que Instagram tiene m谩s de 1 mill贸n de cargas de im谩genes por d铆a. Ninguna foto se puede distorsionar o perder, es una gran tarea.
  • Trabajando con im谩genes, renderiz谩ndolas eficientemente en el navegador sin sacrificar calidad y velocidad.
  • Autorizaci贸n de usuario. Permite a los usuarios registrarse y comentar im谩genes.




Generador de nombres para empresas



Shopify tiene un mont贸n de herramientas gratuitas disponibles para emprendedores y una de ellas es un generador de marcas. El generador de nombres comerciales hace exactamente lo que espera que haga: genera nombres comerciales y verifica la disponibilidad del dominio apropiado.



imagen



Esto es lo que aprender谩 al construir un generador de nombres comerciales:



  • Verificando los nombres de dominio disponibles (DNS) usando consultas API y presentando los resultados al usuario.
  • Procesamiento y validaci贸n de formularios. En caso de que a煤n no lo hayas notado, las formas son una gran parte de nuestra vida diaria. Aseg煤rese de que est茅n rellenados correctamente.
  • Relleno y visualizaci贸n de tablas con datos. Si tiene experiencia relevante, intente que las tablas sean receptivas y amigables para dispositivos m贸viles.




Pantalla de visualizaci贸n del 谩lbum de Spotify



El dise帽o y la experiencia del usuario hicieron de Spotify un soplo de aire fresco. La raz贸n por la que Spotify es tan popular es la simplicidad e intuici贸n de la interfaz. Adem谩s, Spotify es r谩pido y elegante.



imagen



Esto es lo que aprender谩 al crear una pantalla de exploraci贸n de 谩lbumes desde Spotify:



  • Recuperando canciones y 谩lbumes (y datos sobre ellos) a trav茅s de la API de Spotify.
  • Trabajando con Web Audio API . Necesitas una forma de reproducir y pausar canciones.
  • C贸mo dar me gusta y canciones favoritas y crear listas de reproducci贸n.




Generador de c贸digo QR



Use los c贸digos QR para atraer el inter茅s del cliente, impulsar el tr谩fico y aumentar las ventas a trav茅s de impresi贸n, correo electr贸nico o web.



imagen



La aplicaci贸n de demostraci贸n toma un correo electr贸nico y una URL y los incrusta en un c贸digo QR.



Esto es lo que aprender谩 al crear un generador de c贸digo QR.



  • Los conceptos b谩sicos del desarrollo front-end se tratan de trabajar con HTML, CSS y JavaScript.
  • Manejo de formularios y aportes del usuario. El usuario especifica los datos de entrada y usted los coloca en el c贸digo QR.
  • Finalmente, aprender谩 a trabajar con c贸digos QR y dibujarlos en Canvas en JavaScript. Para hacer esto, debe usar una biblioteca ya existente (esto se puede hacer desde cero).




Perfiles de clonaci贸n en GitHub



En su p谩gina de perfil en GitHub, puede contarle a la gente sobre su trabajo mostrando los repositorios que le interesan, as铆 como tambi茅n c贸mo contribuy贸 y c贸mo se comunic贸.



imagen



Esto es lo que aprende al implementar perfiles como en GitHub:



C贸mo usar GraphQL para obtener datos (la 煤ltima API de GitHub usa GraphQL ). Si no est谩 interesado en aprender GraphQL, la versi贸n 3 de la API utiliza la API REST m谩s tradicional .



Recrea la plantilla de perfil. Intente usar marcos como React.js, Vue.js, Svelte.js, Angular, etc. No hay un marco incorrecto. Todos logran el mismo objetivo.



imagen


Descubra los detalles de c贸mo obtener una profesi贸n de alto perfil desde cero o subir de nivel en habilidades y salario tomando los cursos en l铆nea pagos de SkillFactory:












All Articles