Desarrollo web full-stack con Symfony 3 y Angular 2

Aprende a desarrollar un servicio REST (API REST) con Symfony3 y una aplicación web SPA con Angular2 (nuevo AngularJS)
4.3 (339 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
1,983 students enrolled
$30
$120
75% off
Take This Course
  • Lectures 125
  • Length 18 hours
  • Skill Level All Levels
  • Languages Spanish
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 7/2016 Spanish

Course Description

Bienvenido al curso Desarrollo web full-stack con Symfony 3 y Angular 2, vas a aprender paso a paso como desarrollar servicios y APIs REST con Symfony y como crear aplicaciones web front-end complejas con la nueva versión de AngularJS.

Symfony3 es el framework más potente, más utilizado y más demandado para hacer desarrollo back-end con PHP.

Angular 2 se está convirtiendo en el framework para JavaScript estándar para desarrollar aplicaciones web modernas y escalables en el lado del cliente basadas en la filosofía SPA. 

Si quieres ser desarrollador full-stack, o incluso si ya te dedicas al desarrollo web, es casi obligatorio aprender estos dos poderosos frameworks y como trabajan conjuntamente.

En curso está divido en dos partes:

En la primera parte nos dedicaremos al backend (servidor) y desarrollaremos un servicio o API REST con Symfony3.

¿Que es un API REST?

Un API REST es un servicio que puede usarse desde cualquier dispositivo que entienda el protocolo HTTP, además interactúa directamente con la base de datos. Por ejemplo, las aplicaciones de smartphones interactúan con el servidor a través de un API RESTful.

En la segunda parte nos centraremos en el frontend (cliente) y desarrollaremos una aplicación web de tipo SPA con Angular 2.

¿Que es una web SPA?

Una web SPA es una aplicación de una sola página en la que la carga de datos es asíncrona y la página no se recarga en casi ningún momento, pese a cambiar de ruta o url para navegar entre las secciones de la aplicación, es una nueva tendencia en el desarrollo web.

Al finalizar el curso serás capaz de desarrollar tus propias aplicaciones web con Symfony 3 y Angular 2.

Durante las más de 17 horas del curso verás como desarrollar una plataforma web tipo YouTube paso a paso. 

En esta aplicación podremos identificarnos mediante un formulario de login, registrarnos en la plataforma, modificar los datos de nuestro usuario, subir una imagen de perfil, crear, editar y subir vídeos a la web con barras de progreso, tendremos listados paginados de los videos de la plataforma, un buscador de vídeos, canales de usuarios, sistema de comentarios y mucho más.

Abordaremos el desarrollo backend de esta aplicación partiendo desde cero, empezando por el diseño y creación de la base de datos, el servicio REST, servicios, controladores, autenticación basada en tokens con JWT (JSON Web Tokens), interacción con la base de datos con Doctrine, CRUD de usuarios, vídeos y comentarios en Symfony3.

Continuaremos programando la parte del cliente con Angular 2, desde la creación de los componentes necesarios, uso de rutas y servicios, consumo de servicios REST (mediante un API Rest programada en con Symfony) con el componente HTTP de Angular 2, trabajo con el LocalStorage, hasta la creación y validación de formularios, entre otras cosas.

Trataremos todos los temas paso a paso y poco a poco hasta construir una aplicación web completa de vídeos tipo YouTube, pese a esto, para aprovechar al 100% el curso te recomendaría tener conocimientos en HTML, CSS  y JavaScript y además tener unas nociones básicas en Symfony3 para hacer la parte del backend y tener unos conocimientos básicos de Angular 2 para hacer la parte del frontend.

A parte de esto, en los cursos de Víctor Robles conseguirás soporte, apoyo y ayuda muy rápida para que puedas conseguir todos tus objetivos.

Si quieres aprender desarrollo full-stack moderno sin dolor, practicando poco a poco con los dos mejores frameworks actuales, subir de nivel en el desarrollo web con PHP y JavaScript y aumentar tus oportunidades laborales ¡Este es tu curso!

Échale un vistazo al programa del curso para ver todos temas que aprenderás.

Únete al curso y sube de nivel: ¡¡ Aprende Desarrollo web full-stack con Symfony3 y Angular 2 !!

What are the requirements?

  • Es recomendable saber HTML, CSS, JS y PHP
  • Es recomendable tener algunos conocimientos de Symfony3 para hacer la parte de Symfony
  • Es recomendable tener algunos conocimientos de Angular 2 para hacer la parte de Angular

What am I going to get from this course?

  • Desarrollar servicios y APIs REST con Symfony
  • Crear webapps SPA dinámicas con Angular 2
  • Hacer desarrollos full-stack completos
  • Mejorar la capacidad de adaptación a otros frameworks
  • Aumentar las posibilidades laborales como desarrollador

Who is the target audience?

  • Desarrolladores web
  • Estudiantes de ingenieria y ciclos formativos
  • Estudiantes de informática
  • Programadores que quieren adquirir nuevos conocimientos
  • Cualquiera con conocimientos en Symfony3 o Angular 2

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introducción y bíenvenida
17:48

Introducción al curso Desarrollo web full-stack con Symfony 3 y Angular 2. Paso a paso.

12:49

En este vídeo te enseño que vamos a desarrollar en el curso. Te muestro la plataforma de vídeos SPA que hemos creado con Angular 2 utilizando un API REST hecha en Symfony3.

00:15

Descargar material y recursos descargables

Section 2: Preparar el entorno de desarrollo
04:36

Instalar el servidor de aplicaciones web en local. En este caso instalaremos Wamp Server.

00:14

Instalar el servidor de aplicaciones web en Linux y Apple Mac.

01:04

Instalaremos composer para gestionar las dependencias en proyectos PHP.

05:55

Instalaremos Cygwin para simular la consola de Linux y Mac en Windows y también instalaremos algunas herramientas importantes como GIT.

06:16

Vamos a instalar el entorno de desarrollo integrado Netbeans para desarrollar.

00:06

Descargar e instalar Sublime Text y NodeJS.

05:28

Veremos como configurar PHP y nuestro servidor web Apache para minimizar los problemas durante el desarrollo del API REST con Symfony y la aplicación SPA con Angular 2

02:44

Crearemos un directorio para el proyecto en nuestro servidor de aplicaciones web y aprenderemos a crear alias en CygWin para crear comandos y atajos de consola.

Section 3: Instalación de Symfony
07:48

En esta clase veremos como instalar Symfony3 desde cero.

Section 4: La base de datos
09:20

Aprenderemos a diseñar una base de datos y hacer un esquema de tablas y relaciones con DIA.

13:42

Crearemos la base de datos en SQL y la volcaremos en MySQL para usarla posteriormente.

Section 5: Bundles, entidades y modelos
03:09

Como aprovechar al 100% el desarrollo del API Rest con Symfony.

05:22

Veremos como generera el BackendBundle para guardar las entidades y repositorios de la aplicación web (API Rest).

09:50

Generaremos nuestras entidades de Doctrine a partir de las tablas de la base de datos.

05:26

Hacemos unas pruebas de la entidad Usuario y utilizaremos el método findAll para sacar todos los registros de la tabla usuarios de la BBDD.

Section 6: Empezando a desarrollar el servicio REST (API REST con Symfony)
03:59

Instalaremos Firebase JWT y KnpPaginatorBundle utilizando Composer.

08:03

En esta clase haremos la configuración más básicas de las rutas en ficheros yaml (yml)

08:15

Crearemos un método de ayuda para que las respuestas de las acciones sean en JSON.

06:11

Veremos como crear servicios en Symfony3.

03:08

Vista previa del cliente RestFul POSTMAN que nos servirá para hacer peticiones http de todo tipo.

Section 7: Login con tokens (JWT)
11:41

Crearemos la ruta y la acción para el login y además veremos como validar datos, en este caso un email.

11:33

Crearemos un servicio para la autenticación y crearemos un método para hacer el login con JWT.

14:04

Continuamos creando un servicio para la autenticación y creando un método para hacer el login JWT.

18:13

En esta clase desarrollaremos un método para comprobar si el token JWT de autenticación que nos llega en cada petición HTTP por AJAX es correcto o no.

Section 8: Controlador de usuarios
19:35

Veremos como crear un método para el API REST que nos permita añadir y registrar nuevos usuarios en la base de datos.

03:47

Probamos el método de registro de usuarios del API REST hecha con Symfony.

04:21

Cifraremos la contraseña cuando un usuario se registra en la aplicación.

12:27

En esta clase veremos como hacer la acción de edición de usuarios.

15:19

Veremos como hacer un método para subir ficheros con Symfony3 y como asignarsela a un usuario.

Section 9: Controlador de vídeos
03:34

Crearemos el controlador para la entidad vídeo ahí tendremos todas las acciones que podremos hacer con los vídeos.

19:15

Crearemos una acción para el API que cree nuevos vídeos en la base de datos.

10:38

Creamos un método para editar los usuarios que tenemos creados en nuestra aplicación web.

18:51

Crearemos una acción que nos permitirá subir archivos de vídeo y imagen.

05:20

Configuraremos el bundle Knp Paginator Bundle para poder hacer paginaciones optimas en Symfony.

13:23

Crearemos un método que nos devuelva el listado de todos los vídeos paginado.

05:40

En esta clase vamos a crear un método para el API que nos saque los últimos 5 vídeos.

05:31

Este método devolverá todos los datos necesarios para hacer una página de detalle del vídeo.

07:14

Vamos a crear una ruta para el api que nos permita buscar vídeos en la base de datos.

Mejoras en el buscador
00:51
08:47

Crearemos un método para el API que nos devuelva la información necesaria para crear en el cliente una especie de canal de YouTube.

Section 10: Controlador de comentarios
03:16

Creamos un controlador para hacer el sistema de comentarios a nivel de API.

12:56

En esta clase crearemos un método para que un usuario registrado pueda poder poner comentarios en un vídeo.

09:54

En este vídeo crearemos un método para nuestro servicio que nos permita eliminar comentarios

09:12

En esta clase vamos a crear un método para el servicio REST que nos permita listar los comentarios de un vídeo.

Section 11: Empezar a desarrollar un portal de vídeos SPA con Angular 2
07:29

Configuraremos las cabeceras de las peticiones HTTP en Symfony3 para evitar problemas mientras desarrollamos con AngularJS.

11:15

Veremos como instalar Angular 2 desde cero y como hacer un hola mundo.

00:08

Descarga un zip con una instalación limpia de Angular 2 que lo incluye todo, simplemente, descomprimir y lanzar el comando npm start dentro para empezar a desarrollar.

01:27

Crearemos un proyecto en Sublime Text para programar nuestra aplicación web en este editor a partir de ahora.

03:00

Recomendaciones para aprovechar al 100% el desarrollo de la aplicación web SPA con Angular 2.

03:50

En esta clase crearemos los componentes básicos para empezar a trabajar con la aplicación de Angular 2, en este caso crearemos el LoginComponent y RegisterComponent.

10:44

En esta clase haremos la configuración necesaria para hacer funcionar el sistema de rutas de AngularJS 2

04:45

En esta clase vincularemos Bootstrap 3 con un tema nuevo y crearemos un archivo para los estilos CSS de nuestra aplicación web con Angular2.

03:20

En esta clase haremos modificaciones en las plantillas de los componentes y las separaremos en archivos html independientes para hacer un desarrollo mucho mas limpio.

12:36

En esta clase vamos a crear un menú de navegación y una cabecera con Bootstrap 3 y además utilizaremos la directiva routerLink para hacer enlaces que interactúen con el router y saltemos de página en página.

Section 12: Login en el front-end
05:47

Crearemos la página y el formulario de login para nuestra aplicación web de Angular 2

09:44

Veremos como recoger la información que el usuario introduce en el formulario de identificación lo haremos utilizando el Two Way Data Binding de Angular 2.

17:58

En esta clase crearemos un servicio en Angular 2 con una serie de métodos que nos servirán para hacer peticiones HTTP al método de login del servicio REST hecho en Symfony 3, de esta forma el servidor nos devolverá los datos del usuario y el token (jwt) del mismo, toda esta información la guardaremos en el LocalStorage para saber si el usuario está identificado, actuará a modo de "sesión". Esta es la parte 1.

13:12

En esta clase crearemos un servicio en Angular 2 con una serie de métodos que nos servirán para hacer peticiones HTTP al método de login del servicio REST hecho en Symfony 3, de esta forma el servidor nos devolverá los datos del usuario y el token (jwt) del mismo, toda esta información la guardaremos en el LocalStorage para saber si el usuario está identificado, actuará a modo de "sesión". Esta es la parte 1.

04:36

En esta clase veremos como sacar los datos del usuario logueado y crearemos dos métodos en el servicio para acceder a esos elementos del localStorage.

13:40

En esta clase mostraremos los datos del usuario como el nombre y apellidos sacados del localStorage y crearemos también un menú desplegable para los usuarios que estén identificados.

10:02

En esta clase continuamos programando el menú del usuario identificado y restringiremos los datos que se muestran en función de si el usuario está identificado en nuestra aplicación web SPA o no.

13:13

Veremos como hacer el logout de la sesión de usuario y como hacer redirecciones.

03:48

Veremos como hacer una redirección con el navigate del router de Angular desde la página de login hacia el index cuando el usuario ya está identificado en la plataforma.

Section 13: Registro de usuarios
18:21

Crearemos y validaremos el formulario de registro de usuarios para nuestra aplicación SPA con AngularJS

10:38

Haremos funcionar finalmente el formulario de login y crearemos un servicio que haga una petición ajax para guardar el usuario registrado en la base de datos.

Section 14: Página de configuración de mi cuenta
14:42

En esta clase veremos como actualizar los datos del usuario mediante un formulario.

00:20

Avisos e información para el siguiente vídeo, que trata de actualizar la contraseña del usuario.

17:52

Seguimos haciendo la sección de ajustes de los datos del usuario registrado en nuestra web de vídeos.

19:48

En esta clase empezaremos a crear un formulario de subida de archivos para la imagen del usuario en nuestra aplicación SPA de Angular 2.

11:35

En esta clase continuamos la subida de archivos para la imagen del usuario en nuestra aplicación SPA de Angular 2.

02:55

Haremos modificaciones en la barra de progreso del UploadService en Angular 2.

09:51

En esta clase mostraremos la foto del usuario que está identificado en la barra superior (cabecera) y también le daremos estilos con CSS3, etc.

Section 15: Añadir nuevos vídeos en la plataforma
03:56

Crearemos un clase que actué como modelo de datos para los vídeos. En este caso crearemos la clase será Video y será la entidad con la que trabajaremos en este capitulo. 

14:03

Crearemos el componente, la plantilla y la ruta para la página de creación de de vídeos.

12:22

Crearemos el formulario para los datos básicos a la hora de crear un vídeos, estos datos se los pasaremos por AJAX al API REST y se guardarán en la base de datos.

01:57

Modificaremos la propiedad title de clase Video.

03:37

Haremos un cambio en el servicio REST programado con Symfony 2.8 3. Este cambio lo haremos en el UserController con lo que no tiene nada que ver con la entidad de vídeos de la aplicación.

16:49

En este vídeo crearemos un servicio para los vídeos y crearemos un método que nos permita guardar los datos básicos del video interactuando con el api rest (Symfony3) haciendo una petición ajax con el componente HTTP de Angular 2

08:03

En esta clase vamos a crear un sistema para subir una imagen asignada a un vídeo.

06:46

En esta clase haremos la funcionalidad para subir un fichero de vídeo y terminar el asistente de creación de vídeos en el portal SPA de Angular 2 que estamos programando.

Section 16: Página de detalle del vídeo
06:08

Empezaremos a crear el detalle del vídeo. Crearemos el componente, la ruta y la plantilla.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Víctor Robles, Desarrollador web

Soy desarrollador web en una empresa y llevo inmerso en el mundo de la programación y la informática desde los 15 años.

Me encanta programar y todo lo relacionado con Internet y las nuevas tecnologías, crear cosas y enseñar a los demás.

Soy casi completamente autodidacta, por eso voy a ofrecerte muchos de mis conocimientos para que tú puedas aprender más fácilmente y más rápido de lo que yo lo hice y hago cada día.

Puedes saber más de mí en mi blog y en mis perfiles en las diferentes redes sociales ;) .

Ready to start learning?
Take This Course