jdnichollsc

Mentores

Docs

• https://docs.codeyourfuture.io
• Resumen perfil CYF
• Class materials
• Docs Mentores 2020
• Proceso de aplicación para estudiantes

Calendario

jdnichollsc

TODO

• Inicio, qué es Proyecto 26?
• Dibujando en WebGL/Canvas (IonPhaser)
• Animaciones en React Native (Newbies)
• SQLite en mobile (Ionic, React Native, etc)
• Code sharing (Ionic, NativeScript) for Web, PWA, Mobile
• Requests HTTP en Unity (RestClient)
• REST APIs para juegos
• Requests http, observables, cancelación, etc

jdnichollsc

import { join } from 'path'
import { get } from 'lodash'
import { Storage } from '@google-cloud/storage'
import { BUCKET_NAME } from '../constants'
import { base64MimeType } from '../utils'

const gcloudPathKey = join(__dirname, '../gcloud-key.json')

const storage = new Storage({
  projectId: 'my-project-id',

jdnichollsc

import { Component, h } from '@stencil/core';
import { createAnimatableComponent } from '@proyecto26/animatable-component'

const HelloWorldButton = (props) => {
  const { iconName, ...rest } = props
  return (
    <ion-fab-button onClick={() => alert('Hello World')} {...rest}>
      <ion-icon name={iconName || 'home'} />
    </ion-fab-button>
  )

jdnichollsc

Easing Functions
"linear"	"ease"	"ease-in"	"ease-out"	"ease-in-out"
"ease-in-cubic"	"ease-out-cubic"	"ease-in-out-cubic"
"ease-in-circ"	"ease-out-circ"	"ease-in-out-circ"
"ease-in-expo"	"ease-out-expo"	"ease-in-out-expo"
"ease-in-quad"	"ease-out-quad"	"ease-in-out-quad"
"ease-in-quart"	"ease-out-quart"	"ease-in-out-quart"
"ease-in-quint"	"ease-out-quint"	"ease-in-out-quint"
"ease-in-sine"	"ease-out-sine"	"ease-in-out-sine"

jdnichollsc

Animations
"bounce"	"flash"	"jello"	"pulse"	"rotate"
"shake"	"swing"	"rubberBand"	"tada"	"wobble"
"heartBeat"
"bounceIn"	"bounceInUp"	"bounceInDown"	"bounceInRight"	"bounceInLeft"
"bounceOut"	"bounceOutUp"	"bounceOutDown"	"bounceOutRight"	"bounceOutLeft"
"fadeIn"	"fadeInUp"	"fadeInUpBig"	"fadeInDown"	"fadeInDownBig"
"fadeInRight"	"fadeInRightBig"	"fadeInLeft"	"fadeInLeftBig"
"fadeOut"	"fadeOutUp"	"fadeOutUpBig"	"fadeOutDown"	"fadeOutDownBig"

jdnichollsc

<!-- Add Web Animations Polyfill :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations.min.js"></script>

<script type="module" src="https://unpkg.com/@proyecto26/animatable-component@1.0.0/dist/animatable-component/animatable-component.esm.js"></script>
<script nomodule="" src="https://unpkg.com/@proyecto26/animatable-component@1.0.0/dist/animatable-component/animatable-component.js"></script>

<animatable-component autoplay iterations="3" animation="heartBeat" easing="ease-in" duration="1000">
  <h1>Proof that Tony Stark has a heart ✵</h1>
</animatable-component>

jdnichollsc

import { Media, MediaObject } from '@ionic-native/media';
import { File as NativeFile, FileEntry } from '@ionic-native/file';

import { delay, getBlobFromFileEntry } from './utils'

// Detect platform device and select extension (Cordova platform, etc)
// Android
const AUDIO_EXTENSION = '.mp3'
// iOS
const AUDIO_EXTENSION = '.m4a'

jdnichollsc

import Hammer from 'hammerjs';

private manager: HammerManager;

componentDidLoad() {
  this.manager = new Hammer(this.button);
  this.manager.add(new Hammer.Pan({
    direction: Hammer.DIRECTION_LEFT,
    threshold: 0
  }));

jdnichollsc

<animatable-component
  autoplay
  easing="ease-in-out"
  duration="800"
  delay="300"
  animation="zoomIn"
  iterations="Infinity"
  direction="alternate"
>
  <h1>Hello World</h1>