Prototipado de Aplicaciones web con Firebase #CampusGivers
2 recomendaciones•664 vistas
El documento proporciona una guía para desarrollar aplicaciones web progresivas (PWA) utilizando herramientas como React.js y Polymer. Se incluyen referencias a servicios de Firebase para el backend, así como a APIs de machine learning para mejorar la funcionalidad. Además, se comparten enlaces a recursos de aprendizaje y ejercicios prácticos para implementar estas tecnologías.
![@carlosazaustre carlosazaustre.es #CampusGivers
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="[[rootPattern]]:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer id="drawer" slot="drawer">
<app-toolbar>Menu</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="view1">View One</a>
<a name="view2" href="view2">View Two</a>
<a name="view3" href="view3">View Three</a>
</iron-selector>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header slot="header" condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
<div main-title>My App</div>
</app-toolbar>
</app-header>
</app-header-layout>
</app-drawer-layout>
</template>](https://image.slidesharecdn.com/campusgivers-prototipadodeappsii-170525182500/85/Prototipado-de-Aplicaciones-web-con-Firebase-CampusGivers-21-320.jpg)
![@carlosazaustre carlosazaustre.es #CampusGivers
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="[[rootPattern]]:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer id="drawer" slot="drawer">
<app-toolbar>Menu</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="view1">View One</a>
<a name="view2" href="view2">View Two</a>
<a name="view3" href="view3">View Three</a>
</iron-selector>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header slot="header" condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
<div main-title>My App</div>
</app-toolbar>
</app-header>
</app-header-layout>
</app-drawer-layout>
</template>](https://image.slidesharecdn.com/campusgivers-prototipadodeappsii-170525182500/85/Prototipado-de-Aplicaciones-web-con-Firebase-CampusGivers-22-320.jpg)
Prototipado de Aplicaciones web con Firebase #CampusGivers
- 2. @carlosazaustre carlosazaustre.es #CampusGivers Carlos Azaustre CTO y Cofundador en Chefly Desarrollador Web Formador / Blogger / Youtuber Papá
- 3. @carlosazaustre carlosazaustre.es #CampusGivers Quiero desarrollar una aplicación
- 9. @carlosazaustre carlosazaustre.es #CampusGivers ¿Qué herramientas/alternativas tengo?
- 12. @carlosazaustre carlosazaustre.es #CampusGivers ● HTTPS - letsencrypt.org ● Responsive Design - Mobile Friendly Test ● Offline - Service Workers ● Add to Home Screen (Installable) - Web App Manifest ● Push Notifications - Service Workers
- 13. @carlosazaustre carlosazaustre.es #CampusGivers ¿Cómo empiezo una PWA desde cero?
- 14. @carlosazaustre carlosazaustre.es #CampusGivers 1. React.js
- 21. @carlosazaustre carlosazaustre.es #CampusGivers <app-location route="{{route}}"></app-location> <app-route route="{{route}}" pattern="[[rootPattern]]:page" data="{{routeData}}" tail="{{subroute}}"></app-route> <app-drawer-layout fullbleed> <!-- Drawer content --> <app-drawer id="drawer" slot="drawer"> <app-toolbar>Menu</app-toolbar> <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation"> <a name="view1" href="view1">View One</a> <a name="view2" href="view2">View Two</a> <a name="view3" href="view3">View Three</a> </iron-selector> </app-drawer> <!-- Main content --> <app-header-layout has-scrolling-region> <app-header slot="header" condenses reveals effects="waterfall"> <app-toolbar> <paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button> <div main-title>My App</div> </app-toolbar> </app-header> </app-header-layout> </app-drawer-layout> </template>
- 22. @carlosazaustre carlosazaustre.es #CampusGivers <app-location route="{{route}}"></app-location> <app-route route="{{route}}" pattern="[[rootPattern]]:page" data="{{routeData}}" tail="{{subroute}}"></app-route> <app-drawer-layout fullbleed> <!-- Drawer content --> <app-drawer id="drawer" slot="drawer"> <app-toolbar>Menu</app-toolbar> <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation"> <a name="view1" href="view1">View One</a> <a name="view2" href="view2">View Two</a> <a name="view3" href="view3">View Three</a> </iron-selector> </app-drawer> <!-- Main content --> <app-header-layout has-scrolling-region> <app-header slot="header" condenses reveals effects="waterfall"> <app-toolbar> <paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button> <div main-title>My App</div> </app-toolbar> </app-header> </app-header-layout> </app-drawer-layout> </template>
- 23. @carlosazaustre carlosazaustre.es #CampusGivers Vale el Frontend lo tenemos cubierto, pero… ¿Y el Backend?
- 25. @carlosazaustre carlosazaustre.es #CampusGivers Firebase Hosting Firebase Database Cloud Storage for Firebase Cloud Functions for Firebase Firebase Auth
- 26. @carlosazaustre carlosazaustre.es #CampusGivers Firebase Hosting Firebase Database Cloud Storage for Firebase Cloud Functions for Firebase Firebase Auth Machine Learning APIs Cloud Vision API Cloud Speech API Cloud Jobs API Cloud Translation API Cloud Natural Language API Cloud Video Intelligence API ...
- 27. @carlosazaustre carlosazaustre.es #CampusGivers ¿Cómo es Firebase?
- 31. @carlosazaustre carlosazaustre.es #CampusGivers ¿Qué se puede hacer con las Cloud Functions?
- 35. @carlosazaustre carlosazaustre.es #CampusGivers Codelabs by Google Aprende practicando codelabs.developers.google.com
- 38. @carlosazaustre carlosazaustre.es #CampusGivers Curso Gratis Aprende React.js y Firebase desarrollando una aplicación web como Instagram carlosazaustre.es/guia-react