Crea una plantilla de Curriculum Vitae con Vue.js
Crear un Currículum es algo que hay que hacer alguna vez en la vida. Existen muchas webs donde puedes descargar una plantilla y conformar tu Currículum.
En este artículo se explicará como realizar una pequeña aplicación para hacer plantillas de CV.
Requisitos previos
Antes de empezar, debemos tener algunas cosas en cuenta:
El lenguaje que vamos a utilizar es JavaScript, el Framework Vue, y el IDE que utilizaremos será Visual Studio Code. También deberemos tener instalado Node.js.
Primero tenemos que preparar nuestro entorno de trabajo. Para ello, instalaremos Vue en nuestro equipo. Abrimos la terminal y escribimos:
npm install -g @vue/cliA continuación, nos creamos alguna carpeta donde vayamos a guardar nuestra aplicación. Desde la terminal, entramos dentro de esa carpeta con cd RUTA. Una vez estemos situados ahí, ejecutaremos el siguiente comando para crear nuestro proyecto:
vue create NombreDelProyectoSobre la carpeta que nos ha generado este comando ejecutamos code . y veremos la estructura de nuestro proyecto en VSC.
Para poder ver la progresión de nuestra aplicación, ejecutaremos yarn serve (Si no tenemos instalado el gestor de paquetes yarn, podemos utilizar npm serve también). Esto nos permitirá visualizar la aplicación desde el navegador y ver lo que vamos creando. Por último, escribimos en el navegador localhost:8080 (este puerto puede variar).
Ya estamos listos para empezar a crear nuestra aplicación.
Desarrollo del proyecto
Lo primero que haremos es añadir las bibliotecas de bootstrap a nuestro proyecto para estilos con mayor facilidad. Nos dirigimos a la carpeta public y en el archivo index.html añadimos lo siguiente:
<!-- HEAD -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous" />
</head>
<!-- BODY-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- JavaScript Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
Dejaremos que el componente app solo imprima nuestro formulario para recoger los datos del usuario.
App.Vue
<template>
<div id="app">
<div class="row justify-content-center">
<div class="col-8 text-center">
<Formulario/>
</div>
</div>
</div>
</template>
<script>
import Formulario from './components/Formulario.vue';
export default {
name: 'App',
components: {
Formulario
}
}
</script>Vamos a crear nuestro componente Formulario.vue, donde estará el núcleo de nuestra app.
Aquí recogeremos los datos del usuario para procesarlos y crear la plantilla.
Formulario(Template)
<form class="form form-control border-1" v-on:submit.prevent="recogerDatos()">
<div style="width: 100%">
<label>Nombre:</label>
<input ref="nombre" type="text"/>{{""}} <!--Campo requerido, Validacion de escritura-->
<label>Apellidos:</label>
<input ref="apellidos" type="text"/>
</div>
<br/><br/>
<div style="width: 100%">
<h2 style="">Datos de residencia</h2>
<label>Domicilio</label>
<input value="ej: Calle Mirlo, 12" type="text" ref="domicilio"/>
<label>Codigo Postal</label>
<input type="number" ref="cp"/>
<label>Localidad</label>
<input type="text" ref="localidad"/>
</div>
<br/><br/>
<div style="width: 100%">
<h2>Contacto</h2>
<label>Telefono</label>
<input type="number" ref="telefono"/>
<label>Correo eléctronico</label>
<input value="ej: user@gmail.com" type="text" ref="email"/>
</div>
<br/><br/>
<div style="width: 100%">
<h2>Experiencia Laboral</h2>
<label>Desde</label>
<input value="ej: 2001" type="text" ref="desdeDate"/>
<label>Hasta</label>
<input value="ej: 2004" type="text" ref="hastaDate"/><br/>
<label>Profesión</label>
<input size="50" type="text" ref="cargo"/><br/>
<label>Empresa</label>
<input type="text" ref="empresa" size="35"/><br/>
<label>Descripcion del trabajo</label><br/>
<textarea cols="40" rows="5" type="text" ref="descripcionTrabajo"/>
</div>
<br/><br/>
<div style="width: 100%">
<h2>Formacion</h2>
<label>Desde</label>
<input value="ej: 2000" type="text" ref="desdeEduca"/>
<label>Hasta</label>
<input value="ej: 2002" type="text" ref="hastaEduca"/><br/>
<label>Título</label>
<input size="50" type="text" ref="titulo"/><br/>
</div>
<br/><br/>
<div>
<h2>Perfil profesional</h2><br/>
<input size="40" value="ej: Desarrollador Web" ref="perfilProfesional"/>
</div>
<br/><br/>
<div style="width: 100%; height:100%">
<h2>Conocimientos</h2>
<textarea cols="40" rows="5" ref="conocimientos"/>
</div>
<br/><br/>
<button class="btn btn-success">
Recoger Datos
</button>
</form>Formulario (Aplicación)
El form tiene un v-on:submit.prevent="recogerDatos()" . Esta propiedad lo que significa es que cuando un botón del formulario haga click, no hará submit(prevent), si no que ejecutará en la función «recogerDatos».
Recoger Datos lo que hará es recopilar los valores de los inputs y almacenarlos en variables.
Con estas variables conformaremos el objeto «user».
Este objeto será enviado a otro componente por medio del método Parent-Child
¿Qué ocurrirá aquí? El «parent» que en este caso es Formulario, le enviará por props al «child» que es Plantilla el objeto user, con el que este último podrá ser manipulado por el componente hijo.
Para poder controlar que se va a mostrar y que no, haremos lo siguiente:
Nos crearemos una variable bolean que cambiará de valor a nuestro antojo.
En Formulario tendremos dos <div>, uno para mostrar el Formulario y otro para mostrar la plantilla.
Mediante las directivas de vue, preguntaremos si el valor de «comprobar» es true o false.
De esta manera cambiaremos esta variable según lo que queramos mostrar.
Por ejemplo, la función del formulario, «RecogerDatos()», cambiará el valor de comprobar para mostrar la plantilla.
Hay múltiples plantillas en la web que puedes utilizar. Lo único que tendrás que hacer es copiar el código fuente y cambiar los campos por las propiedades del usuario.
Te dejo el enlace de la página de la que he cogido la plantilla:
https://www.goskills.com/Development/Resources/Free-html-resume-templates
<template> del componente Plantilla
div id="doc2" class="yui-t7">
<button class="btn btn-light" @click="volver()">Volver atrás</button>
<div ref="pdfcontent" id="inner">
<div id="hd">
<div class="yui-gc">
<div class="yui-u first">
<h1>{{user.nombre}}</h1>
<h1>{{user.apellidos}}</h1><br/>
<h2>{{user.perfilProfesional}}</h2>
</div>
<div class="yui-u">
<div class="contact-info">
<h3>{{user.nombre}} — <a :href="'mailto:' + user.email">{{user.email}}</a></h3>
<h3>Telefono de contacto: {{user.telefono}}</h3>
</div><!--// .contact-info -->
</div>
</div><!--// .yui-gc -->
</div><!--// hd -->
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gf">
<div class="yui-u first">
<h2>Habilidades</h2>
</div>
<div class="yui-u">
{{user.conocimientos}}
</div>
</div><!--// .yui-gf -->
<div class="yui-gf">
<div class="yui-u first">
<h2>Experiencia Laboral</h2>
</div><!--// .yui-u -->
<div class="yui-u">
<div class="job">
<h2>{{user.empresa}}</h2>
<h3>{{user.cargo}}</h3>
<h4>{{user.desdeExp}} - {{user.hastaExp}}</h4>
<p> {{user.descripcionTrabajo}}</p>
</div>
</div><!--// .yui-u -->
</div><!--// .yui-gf -->
<div class="yui-gf last">
<div class="yui-u first">
<h2>Formacion</h2>
</div>
<div class="yui-u">
<h2>{{user.titulo}}</h2>
<h4>{{user.desdeEduca}} - {{user.hastaEduca}}</h4>
</div>
</div><!--// .yui-gf -->
</div><!--// .yui-b -->
</div><!--// yui-main -->
</div><!--// bd -->
<div id="ft">
<p> <a :href="'mailto:' + user.email">{{user.email}}</a>{{user.telefono}}</p>
</div><!--// footer -->
</div>
</div>Plantilla (Aplicación)
Como podemos observar, hay un botón de volver. Este botón nos llevará otra vez al componente Formulario de inicio.
Para conseguir esta funcionalidad haremos lo siguiente:
Primero creamos una método en Formulario para cambiar nuestra variable booleana. Como hemos explicado antes, el valor de comprobar será cambiado y mediante las directivas de vue determinaremos si mostramos un componente u otro.
Hay que tener en cuenta que el botón(html) está en el «Hijo». Habrá que avisar al «Padre» de cuando quiero utilizar este método. Para esto es necesario realizar dos pasos.
Así enviamos al hijo el método que hará que cuando pulse el botón, se ejecute la función.
El siguiente paso es crear una función en el «hijo» que es el que avisará de cuando se pulsa ese botón.
De esta manera tendremos una especie de «navegación» entre ambos componentes, ya que mediante botones podemos cambiar del uno al otro.
Conclusión
Crear una aplicación cualquiera es más complejo de lo que puede parecer. En este caso, estamos hablando de una aplicación sencilla pero que puede ser la base de una aplicación más completa.
Algunas de las mejoras que podemos implementar son:
Botón de descarga del CV en formato PDF para poder utilizarlo en tu día a día.
Te dejo por aquí un enlace a una librería de vue que puedes utilizar para realizar ese método: https://www.npmjs.com/package/jspdf
También puedes utilizar esta otra: https://www.npmjs.com/package/vue-html2pdf
Otra de las posibles mejoras sería añadir un <input> para subir una imagen de perfil. ¿Cómo subir imagen de perfil al una app vue? https://www.digitalocean.com/community/tutorials/how-to-handle-file-uploads-in-vue-2
Estas son solo algunas de las ideas que podrías añadir a tu proyecto, pero ¡hay muchas más!
Espero que este artículo te haya sido de ayuda y que pruebes a hacer tus propias plantillas.
Mi proyecto estará subido a Github(Enlace más abajo).
Autor/a: Diego Sánchez Cañamero
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año académico: 2021-2022
Código: Enlace a GitHub