Vamos a realizar un juego muy sencillo en TypeScript, posteriormente lo vamos a desplegar en Microsoft Azure con Servicio de Azure Static Web Apps.

Overview

Taller TypeScript

Descripción

Vamos a realizar un juego muy sencillo en TypeScript, posteriormente lo vamos a desplegar en Microsoft Azure con Servicio de Azure Static Web Apps.

Demostración


Da click en la imagen para ver el vídeo

Demostración

Proyecto de ejemplo para el taller: Juego

Instrucciones


Instalación Git

Instalar Git en tu computadora, para ello puede seguir las instrucciones de la página oficial de Git: Instalar Git

Clonar el repositorio

  • Hacer fork del repositorio en tu cuenta de GitHub.
  • Clonar el repositorio en tu computadora.
    • Copiar la URL del Repositorio.
  • Abrir la terminal de tu computadora.
  • Pegar la URL del repositorio en la terminal.
    $ git clone https://url_del_repositorio
  • Entrar a la carpeta del repositorio.
    $ cd taller-typescript

Instalacion NodeJS

Instalar NodeJS en tu computadora, para ello puede seguir las instrucciones de la página oficial de NodeJS: Instalar NodeJS.

Comandos para replicar el proyecto:

  • Instalamos las dependencias:

     $ npm i -g typescript
  • Iniciamos el proyecto en TypeScript:

     $ tsc --init
  • Creamos el archivo main.ts y lo compilamos:

     $ tsc --w main.ts

Una vez abierto la pagina, coloca tu nombre y da click en el boton. Despues presiona una flecha para iniciar el juego. :)

Azure Static Web Apps

Una vez que tengamos el proyecto funcionando, subiremos la aplicación a Azure Static Web Apps.

  • Instalar la extension de Azure Static Web Apps en Visual Studio Code.
  • Haremos commit de los cambios
  • En la parte izquierda, en la sección de Azure, aparecerá un icono de Azure static Web Apps.
  • Dar click en el icono y seleccionar la opcion de Create New Static Web App.
  • Seguir las instrucciones del vídeo.

Recursos


You might also like...

🚀 A web extension starter built with React, Typescript, and Tailwind CSS. Build once, and run on multiple browsers: Google Chrome, Mozilla Firefox, Microsoft Edge, Brave, and Opera..

🚀 A web extension starter built with React, Typescript, and Tailwind CSS. Build once, and run on multiple browsers: Google Chrome, Mozilla Firefox, Microsoft Edge, Brave, and Opera..

Web Extension Starter A web extension starter, built with React, Typescript, and Tailwind CSS. Build once, and run on multiple browsers: Google Chrome

Dec 28, 2022

Gofiber with NextJS Static HTML is a small Go program to showcase for bundling a static HTML export of a Next.js app

Gofiber and NextJS Static HTML Gofiber with NextJS Static HTML is a small Go program to showcase for bundling a static HTML export of a Next.js app. R

Jan 22, 2022

Jumpstart Your Static Web Apps Learning Journey with #30Days Of Content and Activities

30DaysOfSWA - A Learning Journey Welcome to #30DaysOfSWA - a project to give beginners and experienced developers a tour of Azure Static Web Apps from

Nov 23, 2022

promiseTimeout es como un setTimeout cualquiera, con la diferencia de que retorna una promesa

promiseTimeout es como un setTimeout cualquiera, con la diferencia de que retorna una promesa. Lo que permite un mejor manejo de la asincronía.

Nov 4, 2022

Questi sono i miei plugin del cazzo, scritti col culo, ma con tanto amore. 50 euro.

ReaperianiJS Questi sono i miei plugin del cazzo, scritti col culo, ma con tanto amore. 50 euro. Spiegone: Il fuorilavoce è un plugin di eq M/S (mid s

Feb 11, 2022

Codigo del Webinar de Organizador de Tareas con autenticación

Webinar Organizador de Tareas con autenticación Bienvenido al repositorio 📂️ del Webinar donde podrás encontrar el codigo expuesto 🤓️ Para comenzar

Jun 24, 2022

Una mejor mirada a tu perfil de GitHub. ¡Con gráficos!

GithubProfile Este proyecto esta realizado para que tu puedas apreciar de manera simple y sencilla los datos de tu perfil de github. Este proyecto con

Oct 31, 2022

Workshop contruyendo una API Rest con Node.js + Koa.js

Workshop contruyendo una API Rest con Node.js + Koa.js

Workshop contruyendo una API Rest con Node.js + Koa.js Tabla de Contenido Acerca de Introducción Explicación del caso de uso Ciclo de vida de las soli

Apr 8, 2022

Breve explicacion de Mongoose, asi como un codigo con las operaciones CRUD

Breve explicacion de Mongoose, asi como un codigo con las operaciones CRUD

Introduccion a Mongoose ¿Qué es MongoDB? MongoDB es una base de datos NoSQL (Not Only SQL) y por ende no relacional que es utilizado para proyectos we

Mar 17, 2022
Owner
Manuel Ortiz
Ninja Developer @innovaccion-virtual | Microsoft Learn Student Ambassador | λ Club Community Leader
Manuel Ortiz
Chat app using Azure Web PubSub, Static Web Apps and other Azure services

Chatr - Azure Web PubSub Sample App This is a demonstration & sample application designed to be a simple multi-user web based chat system. It provides

Ben Coleman 55 Dec 31, 2022
Konbini Otaku, Web E-Commerce del proyecto Estación Otaku, desarrollada con Next.js y desplegada con Vercel

Konbini Otaku ?? ?? ⛩️ ?? - Reto Final (parte 2) Este proyecto constó de proponer "Konbini Otaku", la cual es una tienda virtual en la que podrás adqu

null 2 Apr 28, 2022
Live demo using Angular, github.dev, codespaces, copilot, azure static web apps, and devcontainers

One More Change! @ NgConf 2022 This is a quick project template for demoing github.dev, Codespaces, Copilot, Azure Static Web Apps, and Visual Studio

John Papa 14 Dec 15, 2022
Live demo using Angular, github.dev, codespaces, copilot, azure static web apps, and devcontainers

Cloud Computing with Codespaces First seen in the presentation One More Change! @ NgConf 2022 This is a quick project template for demoing github.dev,

John Papa 9 Sep 13, 2022
Calculate the Mexican RFC as specified by the SAT (Servicio de Administración Tributaria) for Personas Físicas

About The Project This project calculates a "Persona Física"'s RFC based on SAT's specifications including homonymy and verification digit. Built With

null 4 Nov 6, 2022
Our project for The Microsoft Azure Trial Hackathon on Dev.to

Moodflix your mood, our suggestions. ?? About Overview of our project We have started this project with the purpose of participating to the Microsoft

Emanuele Bartolesi 37 Dec 22, 2022
A cache for @azure/msal-node that uses Azure KeyVault as a store

@intility/msal-keyvault-cache A cache for @azure/msal-node that uses Azure KeyVault as a store. Usage Install with npm install @intility/msal-keyvault

Intility 10 Mar 17, 2022
Plataforma del Registro de Autoexclusión del Juego

WebApp boilerplate with React JS and Flask API Styles You can update the styles/index.scss or create new .scss files inside styles/ and import them in

Daniel Bañobre Dopico 7 Feb 4, 2022
Juego del Ahorcado - Alura Challenges ONE

Juego del Ahorcado Segundo challenge de Oracle Next Education y Alura El desafío consiste en construir una página web que contenga el juego del ahorca

null 7 Dec 14, 2022
La extensión web que muestra el precio de los juegos de la web de Xbox, PlayStation, Nintendo y Epic Games Store con los impuestos de Argentina incluidos. Conocé cuanto vas a pagar por tus juegos 💚💙❤️

Conocido anteriormente como Xboxito Impuestito - Conocé el precio real de los juegos Impuestito calcula y muestra el precio de los juegos de la web de

Luke ✨ 23 Dec 4, 2022