Scribd
Upload
37 views7 pages

Creación de Proyectos

Uploaded by

aliexgom24
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
37 views7 pages

Creación de Proyectos

Uploaded by

aliexgom24
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

PASOS

1. Instalar Node JS
2. Activar la ejecución de scripts
Abrimos power Shell como administrador
Verificamos la ejecución de scripts con
Get- ExecutionPolicy
Si aparece Restricted, debemos cambiarlos a unrestricted con el comando
Set-ExecutionPolicy Unrestricted

3. Instalar vsCode
4. Abrir una carpeta en VSCODE, abrir una terminar y actualizar npm
npm install -g npm-windows-upgrade
5. Instalamos la interfaz de línea de comandos de Angular
npm install -g @angular/cli
6. Creamos el proyecto con
ng new app (app es el nombre del proyecto usar al gusto)
Which stylesheet format would you like to use? CSS
Do you want to enable Server-Side Rendering (SSR) and Static Site Generation
(SSG/Prerendering)? No
7. Ingresamos a la carpeta
cd app
8. Iniciamos nuestro servidor y en un navegador ponemos http://localhost:4200/
ng serve
9. Abrimos el archivo app.component.html
<router-outlet />
10. Creamos la ventana de login
ng g c auth/login

11. Direccionamos la aplicación por defecto al componente login, para ello abrimos el
archivo app.routes.ts
export const routes: Routes = [
{path:'login', component:LoginComponent},
{path:'', redirectTo:'login', pathMatch:'full'}
];

12. Agregamos angular material


ng add @angular/material
Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink
Set up global Angular Material typography styles? (y/N) y
Include the Angular animations module? (Use arrow keys)
> Include and enable animations
Include, but disable animations
Do not include
13. Reiniciamos el servidor :
Cancelamos con CTRL + C en la ventana donde corre el servidor
Hacemos
ng serve

14. Diseñamos nuestro de login en login.component.html


<body class="general">
<div class="content">
<div class="login-container">
<img src="../../../assets/logo.png" alt="Logo" class="logo"/>
<mat-label class="sub-title">XX</mat-label>
<mat-label class="sub-title">XX </mat-label>
<mat-label class="sub-title">XX</mat-label>

<mat-card class="form-container">
<mat-card-header>
<mat-card-title>Iniciar Sesión</mat-card-title>
</mat-card-header>
<mat-card-content class="cont">
<form>
<mat-form-field appearance="fill" class="caja">
<mat-label>Correo</mat-label>
<input matInput formControlName="email" required>
</mat-form-field>
<mat-form-field appearance="fill" class="caja">
<mat-label>Contraseña</mat-label>
<input matInput type="password" formControlName="password" required>
</mat-form-field>
<button mat-raised-button color="primary" type="submit"
class="boton">Iniciar sesión</button>
</form>
<p>¿No tiene una cuenta? <a>Regístrese</a></p>
</mat-card-content>
</mat-card>
</div>

<footer class="footer">
<p>&copy; 2024 Todos los derechos reservados.</p>
<p>Talavera - Andahuaylas - Perú.</p>
</footer>
</div>
</body>

15. Importamos los módulos necesarios en login.component.ts:

16. Creamos los estilos


.general {
background-color: rgb(23, 102, 249);
height: 100%;
margin: 0;
padding: 0;
}

.content {
display: flex;
flex-direction: column;
min-height: 100vh; /* Ensures the content stretches to at least full viewport height
*/
}

.login-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 50px; /* Adjust margin as needed */
flex: 1; /* Takes remaining vertical space */
}

.logo {
display: block;
margin: 0 auto;
max-width: 200px;
max-height: 200px;
}

mat-card {
width: 90%; /* Responsive width */
max-width: 400px; /* Maximum width */
margin-top: 20px; /* Adjust spacing */
}

.sub-title {
font-weight: bold;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
text-align: center;
margin: 1px 0;
}

.footer {
text-align: center;
padding: 10px;
background-color: rgb(23, 102, 249);
color: #ffffff;
}

@media (max-width: 600px) {


.logo {
max-height: 100px; /* Reducir el tamaño de la imagen en dispositivos móviles */
}
}

.caja{
width: 100%;
font-size: 14px;
height: 70px;

.caja mat-label{
font-size: 14px;
}

.boton{
width: 100%;
margin-bottom: 20px;
}
17. Instamos la línea de comandos de firebase
npm install firebase
18. Instalamos las herramientas de Firebase
npm install firebase-tools
19. Agregamos firebase a nuestro proyecto
Si deseas cambiar de cuenta de Gmail para tu proyecto firebase debes
Cerrar sesión: firebase logout

ng add @angular/fire
The package @angular/fire@17.1.0 will be installed and executed.
Would you like to proceed? Yes

Seleccionamos las opciones con espacio y para finalizar presionamos enter:


? What features would you like to setup? (Press <space> to select, <a> to toggle all, <i>
to invert selection, and <enter> to
proceed)
( ) VertexAI (preview)
(*) Authentication
( ) Google Analytics
( ) App Check
(*) Firestore
( ) Realtime Database
( ) Cloud Functions (callable)

Allow Firebase to collect CLI and Emulator Suite usage and error reporting
information? (Y/n) n

A continuación, se abrirá un navegador en la que pondremos el correo de Gmail y las


credenciales de acceso para permitir a la firebase concertase a nuestra cuenta.
? Please select a project:
PIAwebsite
SICE
> SIGPE
sisbibliotecasolaris
SisUNDC
[CREATE NEW PROJECT]
Agpe

Con ello se ha modificado el archivo de configuración del proyecto app.config.ts:

export const appConfig: ApplicationConfig = {


providers: [provideRouter(routes), provideAnimationsAsync(), provideFirebaseApp(()
=> initializeApp({"projectId":"sigpe-
dcbaa","appId":"1:437715819874:web:62a8cd3e271f4af977203b","storageBucket":"
sigpe-
dcbaa.appspot.com","apiKey":"AIzaSyDI4LSd8BQh3ytHPlqG6adXkU2Ekqrk1MQ","au
thDomain":"sigpe-
dcbaa.firebaseapp.com","messagingSenderId":"437715819874","measurementId":"
G-10C113G273"})), provideAuth(() => getAuth()), provideFirestore(() =>
getFirestore())]
};

20. CONFIGURAR EL HOSTING DE FIREBASE

firebase init
? Are you ready to proceed? (Y/n) y
Seleccionamos hosting
? Which Firebase features do you want to set up for this directory? Press Space to
select features, then Enter to confirm your
choices. (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
( ) Realtime Database: Configure a security rules file for Realtime Database and
(optionally) provision default instance
( ) Firestore: Configure security rules and indexes files for Firestore
( ) Functions: Configure a Cloud Functions directory and its files
>(*) Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub
Action deploys
( ) Hosting: Set up GitHub Action deploys
( ) Storage: Configure a security rules file for Cloud Storage
( ) Emulators: Set up local emulators for Firebase products

? Please select an option:


> Use an existing project
Create a new project
Add Firebase to an existing Google Cloud Platform project
Don't set up a default project
? Select a default Firebase project for this directory:
bibliotecapiatalavera (bibliotecapiatalavera)
piawebsite-135a9 (PIAwebsite)
sice-7353a (SICE)
> sigpe-dcbaa (SIGPE)
sisbibliotecasolaris (sisbibliotecasolaris)
sisundc-758d4 (SisUNDC)
agpe-3f465 (agpe)

? Detected an existing Angular codebase in the current directory, should we use this?
(Y/n) n

? Do you want to use a web framework? (experimental) (y/N) n

? What do you want to use as your public directory? dist/app/browser

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y

? Set up automatic builds and deploys with GitHub? (y/N) n

? File dist/app/browser/index.html already exists. Overwrite? (y/N) n

Con ello se configura el archivo firebase.json, debemos modificar en que site se va subir
y guardamos el archivo:

{
"hosting": {
"site": "sigpe-solaris",
"public": "dist/app/browser",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}

Compilamos la aplicación con


Ng build

Si les aparece advertencia de:


▲ [WARNING] bundle initial exceeded maximum budget. Budget 500.00 kB
was not met by 167.54 kB with a total of 667.54 kB.
Abrir el archivo angular.json y configuramos
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "2mb"
},

Volver a compilar con: ng build

Subir la aplicación con:


firebase deploy

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy