Comentarios que el maestro indicó vendrían en el examen Apuntes míos introducción al curso



Descargar 148,22 Kb.
Fecha de conversión05.08.2017
Tamaño148,22 Kb.
NOTACIONES:
Copiado tal cual de la presentación

Comentarios que el maestro indicó vendrían en el examen

Apuntes míos



INTRODUCCIÓN AL CURSO
PhoneGap
SQLite.- Única BD empleada para móviles a menos que el programador cree su propia BD
Registrarnos en Appcelerator

Actualizarlo

Descargar e instalar Xcode
Curso Titanium…
# Descargar diapositivas de exposición

https://github.com/appcelerator-training

tcd_training

Dowload zip

Abrir archivo Index.html para ver las diapositivas del curso
Las licencias de Appcelerator son:

Enterprice y development, la 2da es de por vida
La Enterprice, se llama Titanium estudio

* Appcelerator, Estructura de Titanium.


Con Appcelerator tenemos lo siguiente en el paquete de desarrollo:
DASHBOARD



  • Test

    • En línea una herramienta para testear

  • Performance Managmente:

    • Dice tipos de errores

  • Analytics

    • Da información sobre los usuarios que entran y en don están ellos o si hay un error

MARKETPLACE


DEVELOPMENT PROCUCTIONS
* Las plataformas que soporta para dispositivos móviles es

iOS iPhone, iPad,

Andorid

Blacberry


iOS--- Usa simulador.- Es más preciso y rápido

Andorid --- Usa un emulador.- Que es una maquina virtual.


* Cross-Plataform in Titanium
*APIIS de Titanium:

Podemos crear archivos, guardarlos, acceso par acámara, gps, sonido, face...etc

*

Node.js --- Script que ayuda a interpretar el código


iOS, usa el motor JavaScriptCore

Android, usa el motor v8
# Descargar documentación de Titanium

docs.appcelerator.com

Developers

Documentación


developer.appcelerator.com/questions/newest

Encontramos la respuesta a preguntas sobre Titanium



jira.appcelerator.org

Para postear buggs que tienen en Titanium
* PATH & Environment

Para correr la aplicación en Windows, necesitamos cambiar el Path y cinfigurarlo para Win32
* Try it

Android SDKs -- Para descargar actualizaciones… (no estoy segura de esto)

* iOS: Xcode
*Handy Tools
PRACTICA

Abrir Titanium Studio

En área de trabajo, clic derecho

New- App Proyect

Alloy

Default Alloy Project



Nombre del proyecto,

App Id: com.NOMBREEMPRESA.NOMBREPROJECTO

Finish

*TIAPP.XML EDITOR – GUI MODE


¿Para que son las Production Key y Development Key de Cloud Services?

Cloud Services es la herramienta que nos brinda acelerator para usar el servicio de base de datos de objetos y se habilitan en TiApp Editor en la esquina inferior derecha, pulsando un clic en el botón enable.

JavaScript
CommonJs.- Estándar para crear clases, donde se define la clase con sus propiedades y métodos(pub,priv), con js los métodos son privados a menos que lo cambiemos.

Prototype.- Maneja la herencia

* Jsbin.com ---- Probar uso de JS
Otra forma de codificar el If else anidado, solo acepta una línea de código, pues al encontrar ; lo termina
var foo = (isGreen == true) ? 'green' : 'blue';

Funciones síncronas (Ejecutar procesos a la par) y asíncronas (Ejecutar procesos )

Generar callBacks, para hacer que se espere JS par que el web service responda, sin importar lo que tarde, lo guarda en variable, se ejecuta el proceso y guarda la inf que requiere guardar. La función CB, se dispara al final de…


var getAsyncData = function(fn) { // esta es una función anónima

// this function does something that takes a long time to finish,

// such as getting data from the network

fn(networkData);

}
var saveData = function(data) {

// this function does something with the data when it's finally available return successCode;

}
// then use like this:

var success = getAsyncData(saveData);

Función anónima.- función a la que no le ponemos nombre, el nombre de la variable es el nombre de la función.


*OBJECTS.
JSon.- Es una estructura con funciones

JavaScriptObjectNotation (JSON)


var cat = {

breed: 'tiger',

color: 'orange',

hasStripes: true,

growl: function() {

// make scary noise!

}

}

if(cat.hasStripes == true) {

cat.growl(); // llama la función

}

* ECMA & JavaScript Evolution

ECMA.- Define estándares, métodos, etc para Java Script


  • Original release in late 1995

  • Standardized by ECMA in 1998

  • Current ECMA standard is ECMAScript 5 (2010)

  • JavaScriptCore is Apple's JavaScript engine, used by Titanium on iOS

  • V8 is the Chrome JavaScript engine, used by Titanium on Android

  • V8 & JSCore, thus Titanium, support nearly all of ECMAScript 5



* Type Conversions

Si uno de los datos es string se concatena


var one = '1', two = 2, three='three';
// JavaScript will concatenate if either operand is a string

console.log(one + 1); // = 11
// it will convert when a NaN value might result

console.log(one * 2); // = 2
// you can force a data type

console.log(parseInt(one) + 1); // = 2 // Cambiar a Int … ?

console.log(String(1) + one); // = 11 // Cambiar a String … ?
// unless NaN would result

console.log(String(one) * 2); // = 2
isNaN(parseInt(three)); // == true // para evaluar si es un número


*Variable Scope


var foo = 'bar'; // defined in the global scope

var fn = function() {

var one = 1; // local to the function

console.log(foo); // works!

oops = 'global'; // omitting 'var' defines

// this in the global scope

}; fn(); // run function, outputs 'bar'

console.log(oops); // outputs 'global'

console.log(one); // throws error

Si no tiene “Var” la declaración de una variable, la convierte global en todo el archivo.


*Variable Hoisting


Declarar las funciones y variables y después mandarlas llamar
*What's the Output?

En Titanium, saca la declaración de las funciones del If y sobre escribe el valor de la última.


Si las funciones fueron declaradas fuera del if, si respeta la que aplique.
*Arguments

Arguments, ,es una palabra definida que contiene todo el arreglo de las variables que estamos usando.

(Se emplea cuando una función manda más parámetros que los que debería, y con el arguments, se obtienen todos los parámetros que mandaron y tienes oportunidad de corregir lo que se necesita.)

* Pass by Reference or Value?

Si tenemos una variable, pasamos el valor.

Si tenemos un objeto, pasamos la referencia.


  • Simple variables passed by value

  • Objects passed by reference

  • Pedantically, everything is passed by value, but with objects that value is a reference to the object


Con una variable
function changeIt(y) {

y = 5;

}

var x = 4;

console.log(x); // x is equal to 4

changeIt(x);

console.log(x); // x is still equal to 4
Con un objeto
var cat = {

color: 'orange'

};

function changeCatColor(feline) {

// obj reference passed in

feline.color = 'black';

feline.claws = 'sharp';

feline = {

color: 'brown'

};

}

changeCatColor(cat);

console.log(cat.color); // outputs 'black'

console.log(cat.claws); // outputs 'sharp'

*What is "this"?

THIS.- Hace referencia al scope que lo contiene. Toma la referencia del objeto padre.

  • Refers to the object associated with the function

  • When functions are methods, 'this' = the object

  • With 'normal' functions, 'this' = the object, but the object is the global object



var obj = {};

obj.fn = function () {

// 'this' == obj

};

function fn() {

// this == global object

};

// because we're basically saying

window.fn = function();


* Using 'call'

Call es una función de las funciones.

Reemplaza el THIS, por el 1er parámetro de la función CALL.



  • Defines what 'this' is for the function

  • Without call, you're essentially passing the global object with call


function hello(thing) {

console.log(this + " says hello " + thing);

}

hello.call("Bart", "world") // => Bart says

// hello world

// without call

hello('world');
// essentially means

hello.call(window, 'world');

* Self-calling Functions

Self-calling functions.- Es una función que se manda llamar a sí misma.

La defines y ejecutas al mismo tiempo.

Su ámbito es privado y no global


  • Define, then execute, a function

  • Wrap function definition in ()

  • Add () at the end (to call it)

  • Works with function statements


// define & declare Counter

var Counter = (function() {

var privateCounter = 0;

return {

increment: function() {

privateCounter++;

},

decrement: function() {

privateCounter--;

},

value: function() {

return privateCounter;

}

};

})();

* Closures

Su uso es para encapsular las variables de un objeto.




  • Variables within functions go out of scope when the function ends

  • Closures let you preserve a local variable's value

  • In this example, increment(), decrement(), and value() are all closures

  • Closures can cause "memory leaks"


var Counter = (function() {

var privateCounter = 0;

return {

increment: function() {

privateCounter++;

},

decrement: function() {

privateCounter--;

},

value: function() {

return privateCounter;

}

};

})();
Counter.increment();

console.log(Counter.value()); // outputs 1

Counter.decrement();

console.log(Counter.value()); // outputs 0

* Object literals

  • Define objects with {}

  • Add properties later or access via dot-notation

  • Define properties as map during creation


var person = {};

// equivalent to

// var person = new Object();

person.name = 'Ralphie';
var person = {

name: 'Ralphie',

speak: function() {

console.log('You\'ll shoot your eye out');

}

};

*Functions as Constructors

El “NEW” indica que se reemplaza al THIS



  • Functions that create objects

  • Use care omitting 'new'

  • 'this' == object being instantiated with 'new'

  • 'this' == global object without 'new'


function Person(name) {

this.name = name;

}
var jim = new Person('Jimmy');

console.log(jim.name); // outputs 'Jimmy'
var jane = Person('Jane');

console.log(jane.name); // throws error
// though in browser environment:

var jane = Person('Jane');

console.log(window.name); // outputs 'Jane'

* Implicit vs. Explicit Returns

En las funciones que se usa THIS no se necesita el THIS

Es mejor utilizar returns (y THIS), así no necesitamos ponerle “NEW” y nos va a regresar el objeto.


  • Implicit = no return statement

  • Used with a constructor, returns the object that was created

  • Implicit returns can cause problems — if you later forget 'new'


function Person(name) {

this.name = name;

}
function Android(name) {

return {

name: name

};

}
var jim = new Person('Jimmy');

alert(jim.name); // => Jimmy

var jane = Person('Jane');

alert(jane.name); // => undefined!

alert(window.name); // => 'Jane'
var data = new Android('Cmdr Data');

console.log(data.name); // => Cmdr Data

var lore = Android('Lore');

console.log(lore.name); // => Lore


* Prototypal Inheritance

La herencia se pasa por prototipo no por clase.



Todos los objetos tienen prototype excepto el objeto MAIN.

"I have learned to fully embrace prototypalism, and have liberated myself from the confines of the classical model." -- Douglas Crockford

  • JavaScript is a class-free, object oriented language

  • Inheritance is via prototypes, not classes

  • A prototype is an object from which other objects inherit properties

  • Any object can be a prototype

  • Every object has a prototype except the top-level Object

  • __proto__ is a way to access an object's prototype


* Prototype Example


Ejemplos de cómo usar el prototype:

El prototype, encapsula lo que se va a heredar y en el objeto que lo heredará se le manda llamar con .prototype
function Parent() {

this.whoami = 'parent';

}
Parent.prototype = { // Es para encapsular lo que va a heredar

speak: function() {

console.log('Hello');

}

};

// Child will inherit from Parent
function Child() {}
// Set Child's prototype to a new instance of Parent

Child.prototype = new Parent();

Child.prototype.bye = 'Goodbye';
var son = new Child(); // create an instance
console.log(son instanceof Child); // true

console.log(son instanceof Parent); // true

son.speak(); // says 'Hello'

console.log(son.whoami); // 'parent'

* Inheritance - Property/Method Lookup


Es mejor verificar primero que exista.


  • Looks first at specific object
    son.hasOwnProperty(whoami)==false


  • Looks to up the prototype chain
    Child.hasOwnProperty(whoami)==false
    Parent.hasOwnProperty(whoami)==true

  • Continues till it reaches Object, the prototype of all objects. If not there, returns undefined

function Parent() {

this.whoami = 'parent';

}

Parent.prototype = {

speak: function() {

console.log('Hello');

}

};
function Child() {}

Child.prototype = new Parent();
var son = new Child();

console.log(son.whoami);

console.log(son.foo); // undefined


* Parasitic Inheritance


Otra forma de pasar la herencia.

Simple pattern for inheritance in JavaScript.

var Person = function(name, age) {

this.name = name;

this.age = age;

};

var Employee = function(name, age, group) {

var e = new Person(name, age);

e.group = group;

return e;

}; var alex = new Employee('Alejandro', 25, 'Developer');

* CommonJS


  • Standard way to create self-contained, exportable functionality. See commonjs.org for the spec.

  • Goals:

    • Private scope within the module

    • Explicitly exported API

    • Decoupling and reusability

  • Inside a module, exports is an object to which you can attach properties

  • You can replace that object by setting module.exports

  • Modules "imported" with the require() global function



* Helper / Library Pattern

En titanium todo los archivos son commonJS.


El exports sirve para exportar funciones y para sobre escribir el mismo método.
Exports es un objeto que es contenido por el objeto global (el objeto global es el archivo general)
// file is network.js
exports.getData = function() {

// get data from the network

};

exports.postData = function() {

// post data to the network };


// how to use it

var net = require('network'); // no '.js'!!

var someData = net.getData();

button.addEventListener('click', function() {

net.postData(someData);

});
* Factory Pattern
Para crear cualquier elemento gráfico como bottom, lable, ver mapas o aceleradores. Necesitamos teclear Ti.Ui (para una interfaz gráfica de Titanium), Ti.Map (para los mapas)

// file is Button.js

// creates a UI component we'll need many copies of

var Button = function(title) {

return Ti.UI.createButton({ title: title }); //Este es código de Titanium.

};
module.exports = Button; // return the constructor
// how to use it

var Button = require('ui/Button');

// now make some instances

var button1 = new Button('foo');

var button2 = new Button('bar');

* Modules in Titanium

  • Caching — module isn't re-evaluated with subsequent require()'s

  • Omit leading '/' ... require('ui/somemodule')

  • Paths are relative to Resources directory

  • Pass in live data the module will need (e.g. a user object)

  • Require in any libraries/modules the module will need (e.g. your database module)

  • In Titanium, a module has access to its parent's global object -- but don't count on it

* Code for Readability

  • Naming variables and objects

  • Spacing and indentation

  • Pass {} rather than a list of arguments

  • Comments

var a; // not so good var object_user_level_superadmin; // ugh var admin; // Goldilocks! myFunc(1, 2, 1, 3); // unclear myFunc({ height: 1, width: 2, left: 1, right: 3 }); // much clearer



* Garbage Collection

  • Automatic via "mark & sweep"

  • Objects collected when no references remain

  • Nothing in the global space is ever collected!

  • "Force" collection by encapsulating within functions or modules that will go out of scope

* Avoiding Memory Leaks

  • Don't store variables in the global scope

  • Set objects = null when no longer needed

  • Watch for "hidden" references in functions, closures, event listeners, accidental global assignments

  • Profile your app


*Performant Coding

  • Defer execution — load modules as needed & don't Ti.include() code

  • Modules cache code so it's not re-evaluated

  • Avoid the global scope

  • Use closures sparingly

  • Avoid eval() and implicit evals

  • Don't change data types stored in a variable


Performant Loops


Si vamos a utilizar ciclos no utilizar .. arr[arr.length] = newMember

hay que asignarle el resultado a una variable y de allí hay que usarlos.

También es importante declarar la longitud del arreglo fuera del ciclo para que sea más claro y menos repetición de instrucciones al correrlo.


  • Set upper bound before loop

  • For/in loops slower than for or while

  • Define local references

  • Operators a little faster than functions


// with arr.length = 10000

for(var i=0, j=arr.length; i < j; i++) {}

// is faster than

for(var i=0; i < arr.length; i++) {}
var foo = bar.someproperty.anotherproperty

while(foo < 10) { }

// faster than

while(bar.someproperty.anotherproperty < 10) { }
for(var i=0; i < 100; i++) {

someVal = (a < b) ? a : b;

// is a tiny bit faster than

someVal = Math.min(a,b);
arr[arr.length] = newMember

// is faster than

arr.push(newMember) }

Summary


In this lesson, you:

  • Examined JavaScript language basics

  • Gained an understanding of variables and scope

  • Learned how to create and use functions

  • Learned how to create and use objects and manage inheritance

  • Examined CommonJS modules

  • Examined code that implements JavaScript best practices

Q&A

Lab Objectives


In this lab, you will:

  • Take the "JavaScript Scope Quiz"
        
    http://madebyknight.com/javascript-scope/

  • Homework: Take Baranovskiy’s JavaScript quiz
        
    http://dmitry.baranovskiy.com/post/91403200
        See www.nczonline.net/blog/2010/01/26/answering-baranovskiys-javascript-quiz/ for answers


  • Homework: Work through John Resig's Learning JavaScript tutorial
        
    http://ejohn.org/apps/learn/

Tips: Use http://jsbin.com/ with the HTML pane off; and JavaScript, Console, & Output panes on to test code

2do día de curso

Análisis de los archivos de el proyecto prueba1

index.xml - Cuerpo del proyecto

index.tss – tss que le corresponde al controlador

index.js - Es el controlador

alloy.js - Crear clases, variables globales

Config.json - Asignamos propiedades



Las view

Absolute—no afecta hijos, no necesitamos configurarlo

Layout vertical.- lo ordena

Layout horizontal.- lo ordena



* Event Handling

* Events Documentation

docs.appcelerator.com -- documentación de todos los elementos gráficos

Esta página será de utilidad para el examen.



*App icons - iOS

En qué ruta hay que poner las imágenes?


Place in:

  • Traditional: Resources or Resources/iphone

  • Alloy: app/assets or app/assets/iphone

* App icons - Android

* Using the strings

L() is an alias for Ti.Platform.getString()



* i18n Notes

En esta carpeta se guardan los string

L(NOMBRE ESCRITO COMO CADENA , ES DECIR CON COMILLAS) ---- Esto es para que se muestre en el idioma requerido

* Lab Objectives


wiki.appcelerator.org/display/td/04.+User+Interface

**Alloy Overview***
Titanium Certified Developer (TCD) Training

El modelo vista controlador, lo hace modular y permite la modificación. ALLOY es un modelo vista controlador exclusivo para Titanium.

* Models

Un modelo es una tabla (no una BD), un archivo, propiedades, registros, entity o cualquier cosa donde metamos datos. Mediante el modelo accesamos a los datos.



* Convention over Configuration

Themes – Clases

Widgest- Podemos crear una barra de navegación en ella

* Namespaces

Contenedor de librerías



Se debe de poner Ns=

* Style Files

Dentro de la carpeta de Styles no se encuentra



* Dynamic Styles - Add/remove Classes

El $ es la forma en que se manda llamar al objeto Alloy.



$.button is a Ti.UI.Button

* Controllers

* Dynamically Creating Views

Si lleva index la extensión js cuando lo mandamos llamar

// controller file something like index.js

// we're dynamically loading and showing some other view

var foo = Alloy.createController('foo').getView();

foo.open();


* Platform & Form Factor


* Platform Overrides

Dentro de las carpetas de Views, Controllers, models, styles… tenemos que crear la carpeta de Andorid y poner el archivo correspondiente, para que la aplicación corra en Android también y no solo en iOS.



TEMARIO PARA EL DÍA 2

* Models & Collections

Una colección es un grupo de modelos

En Alloy Cada registro es un Modelo

Los modelos son los registros de la base de datos y su estructura

La colección es como un arreglo de objetos, registros o modelos

* Model Anatomy

*Data types

+ Alloy acepta los mismos tipos de datos que acepta MySQL y los convierte a estos tipos de datos: Null, string, float, integer, real

+Alloy no acepta todos los tipos de datos que acepta la SQLite3


  • SQLite: TEXT, INTEGER, REAL, BLOB

  • Alloy: text, string, varchar, int, tinyint, smallint, bigint, double, float, decimal, number, date, datetime and boolean

  • Map logically (int, tinyint, etc. → INTEGER)

  • Unknown types map to TEXT

*Underscore methods

Es un método para agrupar



  • Alloy includes the underscore.js library

  • Use its methods to provide group-by and other data selection techniques

  • See http://underscorejs.org/#collections

_.each(yourCollection, someFunction);

_.sortBy(yourCollection, fieldName);

_.groupBy(yourCollection, fieldName);

*Binding

* Releasing the model binding

Con esta línea destruimos el controlador al terminar de usarlo



$.destroy();
Con esta línea saca los datos

Alloy.Collections.movies.fetch();
Networking (TEMA)
* Lifecycle Callbacks

  • onload: function called when HTTP request returns (200 status code)

  • onerror: function called when HTTP error received (404, 500, etc.)

  • onreadystatechange:low-level handler for HTTP state

  • onsendstream/ondatastream:file upload/download

* Working With JSON



Recommended data transport format for Titanium Mobile - compact and efficient

Super easy to serialize/rehydrate data

JSON.parse() — convert string to JavaScript object

JSON.stringify() - convert JavaScript object to string
var character = { name: 'Thomas Anderson', nickname: 'Neo'};

var asJSON = JSON.stringify(character);

var sameCharacter = JSON.parse(asJSON);

* Working With XML

  • XML DOM Level 2 API built in

  • XML document by referring to this.responseXML

  • XML related functions in the Ti.XML namespace

  • See XML/XHR examples in Kitchen Sink

  • More data over the wire, but still commonly used

* XML Example

var xhr = Titanium.Network.createHTTPClient();
xhr.onload = function() {

var doc = this.responseXML.documentElement;

var elements = doc.getElementsByTagName("screen_name");

var screenName = elements.item(0);

Ti.API.info("screenname = " + screenName.text);
// el ScreenName.text nos permit obtener el texto con HTML

Ti.API.info("Raw XML returned: " + this.responseText);

}; xhr.open('GET','http://api.twitter.com/1/users/show.xml?screen_name=appcelerator');

xhr.send();

*A Few Words on SOAP

'Simple Object Access Protocol'- possibly the most ironic acronym in tech history

At the end of the day, it is just a layer of abstraction over the top of XML and HTTP

Plan A: Use a server-side proxy to return JSON

Plan B: Use the Suds helper library (github.com/kwhinnery/Suds)

Plan C: Manually construct SOAP envelopes

WebService.-

Practica

Lab: wiki.appcelerator.org/display/td/07.+Networking



Multimedia

* Still Image APIs

Display using ImageView or backgroundImage

Can either be local or remote










* Sound

// with


// in controller:

$.play.addEventListener('click', function() {

var sound = Titanium.Media.createSound({

url: 'cricket.wav' // could be http url too!

});

sound.play();



});

* Recording (iOS)

// with


// in controller:

var recorder = Ti.Media.createAudioRecorder({

compression: Ti.Media.AUDIO_FORMAT_ULAW,

format: Ti.Media.AUDIO_FILEFORMAT_WAVE

});

$.record.addEventListener('click', function() {



recorder.start(); // inicia a grabar

Ti.Media.startMicrophoneMonitor(); // lo manda

});
* From the Gallery

$.galleryButton.addEventListener('click', function() {

var options = {

success: function(e) {

// fired when user selects from gallery

// e.media == the image data /// carga la foto

},

cancel: function() {

// fired when user cancels

},

error: function(error) {

// fired when there's an error

// error.code is a constant, like Titanium.Media.NO_CAMERA

},

allowEditing: true,

mediaTypes: [Ti.Media.MEDIA_TYPE_PHOTO]

}

Ti.Media.openPhotoGallery(options);

});

Filesystem (Tema)

* Filesystem Example

Blob.text nos permite leer el texto



var file = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, "myfile.txt");

var blob = file.read(); // binary representation of blob (file)

var textOfFile = blob.text;

var path = file.nativePath; // path to the file

var mimetype = blob.mimeType;

// dispose of file handle and blob

file = null;

blob = null; (no close() method)

*Demo: File I/O

Persistence app —

github.com/appcelerator-training/Persistence

181.19


JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript



Declarar


dfdf


La base de datos está protegida por derechos de autor ©absta.info 2016
enviar mensaje

    Página principal