[REPRODUCCIÓN DE MÚSICA] ROGER ZURAWICKI: Hola, mi nombre es Roger Zurawicki, y voy a estar cubriendo el seminario CS50 Meteor. Meteor es un nuevo marco dedicado a la nueva clase de web, no el PHP hacer peticiones ida y vuelta clase de web que vimos en el conjunto PHPP, pero el JavaScript más dinámico partes de la web. Cosas Meteor puede hacer Incluye la actualización en vivo e inmediatamente comunicar entre usuarios de la misma página web. Para este seminario, tenemos código alojado en mi GitHub. Usted puede ir a esta dirección URL y descargarlo. Si usted sabe cómo usar Git, puede clonar el repositorio. Si usted no sabe cómo utilizar Git o no han utilizado GitHub, eso es completamente bien. Yo te mostraré muy rápido cómo podemos ir a GitHub, y hay una opción para descargar un zip justo ahí. Una vez que descargue este directorio, puede comenzar a jugar con nuestro código. Más información acerca de Meteor se puede encontrar en meteor.com. En la carpeta Seminario, en realidad tener algunos proyectos de meteoros que podemos utilizar. Una de las carpetas que tenemos en nuestra proyecto seminario es la aplicación todos. Así que si me voy en ella I, Meteor tiene instalado. Así que para ejecutarlo, sólo necesito para escribir Meteor, y Meteor instalarán. Como puedes ver, tenemos que asegurarse de que instalamos Meteor. Así que sólo voy a ejecutarlo una vez más para asegurarse de que Meteor está correctamente instalado. Aunque no tengo Meteor instalación, te puedo mostrar algunas demostraciones en vivo de sitios de meteoros ir en vivo ahora mismo en Internet. Tengo una demostración de nuestra aplicación. Puede acceder a él en la siguiente URL. Esta es la aplicación para eso tener en nuestro directorio seminario. La URL de este es rozu-rabbit.meteor.com. Verás que Meteor hará realidad alojar sus proyectos Meteor gratis. Y al final del seminario, podrás hacerlo también. Esta es una aplicación para hacer la lista. Y usted puede abrir una sesión, crear cuentas y agregar tareas. Puede crear una cuenta como tal. Y ahora, una vez que tenga una cuenta, usted puede agregar tareas. Por ejemplo, una de las tareas I podría tener que ir a recoger mi ropa. Y si estás en este sitio en línea, usted ver realmente esta tarea en su computadora en tiempo real. Puedo mostrarle una demostración rápida de esta abriendo Rozu-conejo en otra pestaña con la misma URL. Y vemos que los mismos datos aparece. También podemos ejecutarlo en un navegador diferente. Diga lo ejecuto en Safari. De esa manera no está registrado. Así que tenemos la misma Meteor aplicación, y una vez que se carga, vamos a ver los mismos datos lo hicimos en la primera. Como se puede ver, no estoy inscrito aquí. Y cuando los datos cheques de audiencia, se actualiza en todos los navegadores simultáneamente. Este es uno de los realmente características interesantes sobre Meteor. Casi sin trabajo, tener una aplicación de actualización en vivo que los cambios en todos sus dispositivos a la vez. Si marca la casilla de verificación aquí en mi lista de tareas, vamos a tener, en mi otro navegador Chrome, el elemento de comprobación off. Y esto sucede instantáneamente. Bien. Así que parece que Meteor instalación está lista ahora. Así que ahora vamos a volver a la Todos aplicación y ejecutar este local. Si usted tiene un proyecto Meteor, puede sólo ejecutarlo con el Meteor comandos. Una vez hecho esto, Meteor va a hacer un poco de preparación para asegurarse de que todos su código está en jaque. Y entonces te dirá que el proyecto está listo para ser servido. Puede que sea necesario para permitir su servidor de seguridad, si el ordenador bloquea ustedes. Entonces, ¿qué me está diciendo Meteor ahora mismo es que en esta web local para mi equipo, puedo ver lo que este proyecto Meteor es. Tenga en cuenta que en este momento, mi aplicación es no es accesible a la internet. Vamos a cubrir la forma de llevar su Meteor aplicación a un sitio en vivo un poco más adelante. Así que sólo voy a copiar este URL ahora y entra en Google Chrome. Y este es el que hacer lista del ejemplo. Se puede ver que implementan algunas características más aquí. Tenemos diferentes pestañas, nos tener las mismas características de la cuenta, y podemos añadir nuevas listas. Ahora, uno de los de verdad característica fresca sobre Meteor es que no sólo puede este trabajar en su navegador web, pero también puede crear iPhone nativa y Android aplicaciones a través de una herramienta llamada PhoneGap. Así que algunos proyectos vendrán pre-configurado para ejecutar en iOS, como esta aplicación todos. Así que todo lo que necesito hacer para ejecutarlo en iOS es escribir Meteor, correr, y luego iOS. Y cuando lo hago, Meteor preparará el paquete nuevo. Y luego, una vez que esté listo, va a cargar el simulador de iOS en mi comando. Nota Sólo puede ejecutar aplicaciones de iOS si usted tiene una computadora Mac. Puede ejecutar sus aplicaciones en Android en todas las plataformas. Así que ahora usted puede ver que mi iPhone simulador de vino en mi pantalla. Y en un momento, que va a cargar con la aplicación. Si hacemos un poco más pequeño para que quepa en la pantalla, vemos que tenemos nuestra aplicación para el iPhone. Y para que no lo hacemos confundirse, vamos a hacer Seguro que estamos en el mismo sitio web, el host local 3000. Así que aquí es un ejemplo de la aplicación del meteorito que tengo, la aplicación de todos, se ejecuta tanto en un teléfono y un navegador web. Y cuando cambio cosas en el navegador web, inmediatamente va al teléfono. Y puedo borrar algo en el teléfono, y cambia en el navegador web. Ahora, normalmente para crear nativa aplicación de teléfono para iOS o Android, lo que necesita saber Java o Objetivo C. La tecnología utiliza Meteor para permitir JavaScript para funcionar como su aplicación se llama PhoneGap. Lo que su aplicación esencialmente es es un navegador web. Y Meteor maneja todo las partes difíciles involucrados por mencionarlo navegador web para tu iPhone o dispositivo Android. Se puede ver que la interfaz de usuario es suave, y se ve y se siente muy al igual que una aplicación nativa. Tenga en cuenta que si voy a la casa pantalla ahora, también tengo un icono. Este no es un sitio web como que encontrarías en Safari. Esta es su propia aplicación. Puede instalar y eliminarlo si lo desea. Nosotros le podemos mostrar brevemente lo que el código para este tipo de Todos aplicación se parece. Si nos fijamos en la carpeta de todos, usted verá que hay muchas carpetas. Pero en el transcurso del seminario, vamos a entender lo que se utiliza cada carpeta para. Vamos a entrar en el terminal de manera que puede ver los archivos de un poco mejor. Voy a presionar Control C para detener el servidor, y ahora estoy de vuelta en la aplicación de todos. Tengo diferentes carpetas aquí, como la carpeta del cliente, la carpeta del servidor. Y estas carpetas simplemente significan que todo en la carpeta del cliente será ejecutado en su navegador web. Todo en una carpeta del servidor será ejecutado en el servidor. Lo que quiero señalar a cabo es que lo que teníamos cuando tuvimos nuestro teléfono en funcionamiento y nuestro navegador web, éstos eran clientes. Pero lo que se está ejecutando en un terminal, que es el servidor. Tenemos otras carpetas, como lib, que es el código de la biblioteca, como su ayudante funciones, que se puede utilizar tanto en el cliente y el servidor. Y entonces usted tiene un público carpeta y recursos carpeta necesaria para conseguir sus imágenes y otra CSS cargados. Si ha instalado Meteor, lo haremos continuar con el tutorial para Meteor. Usted puede ir a esta URL, meteor.com/install, para obtener la línea de comandos que yo que mostró que instala Meteor. Vamos a pasar por la primera pocos pasos para obtener una mejor sentir acerca de cómo instalar Meteor. Pero en primer lugar, creo que es importante que revisamos un poco de JavaScript. Para mostrar algunos ejemplos de cómo nuestro conocimiento C puede ser traducido tener JavaScript, he creado algunos ejemplos. Ellos están en el directorio js. Así que si en los seminarios de la carpeta que Mira, hay una carpeta llamada js. Y aquí, tenemos algunos ejemplos. Vamos a abrir la primera ejemplo y ver muy rápidamente. Lo que vemos es su norma hola comando mundo. Se nota en C que tener un buen número de líneas. Y como saben los alumnos CS50, necesitamos una función principal, y tenemos que incluirá la norma Biblioteca E / S con el fin de llamar a printf. Echemos un vistazo a cómo se compara JavaScript. Voy a abrir ex1.js. Comentadas cabo es lo que el C código se vería así, y la línea de abajo es todo tiene que ejecutar en el Nodo. Usted no necesita una función principal, no es necesario incluir todos los archivos, y que no es necesario volver. Tu solo console.log. Esto es el equivalente a su printf. Y se necesita la misma argumentos printf haría. Y con el fin de ejecutarlo, en vez de correr hacer ex1, usted acaba de llamar ex1.js. Nodos Usted escribe Nodo y después el archivo y que se ejecute. No consigue compilado. JavaScript es un lenguaje interpretado. Por lo tanto, no necesita ser compilado antes de que se ejecute. Si yo quería correr ex1.c, Tengo que hacer lo primero, y luego puedo correr el ejecutable para obtener el mismo resultado. Vamos a cubrir rápidamente algunas otros conceptos de JavaScript. Veamos ejemplo dos. En ex2.js, en ex2.c, podemos ver que tenemos algo de código. Déjame ir rápidamente a una mejor editor de texto que mostrará estos nuevas líneas un poco mejor. Bien. Aquí tenemos ejemplo 2.c. Aquí tenemos diferentes tipos que estamos imprimiendo. Y como sabemos, printf toma diferentes argumentos por ciento para acceder a diferentes piezas de datos. Si queremos imprimir una cadena, lo llamamos% s. Si queremos llamar a un flotante número de punto, nos llamó% f. Y no hay manera fácil de llamar a un Boolean por su valor verdadero o falso. Pero si utiliza% d, puede obtener un 0 o un 1 por falso y verdadero. JavaScript es un poco más agradable para nosotros. En JavaScript, echemos un vistazo a los pocos diferencias que tienen en este archivo. En primer lugar, observa que en C tenemos que inicializar cada variable con un tipo. S es una estrella de carbón. Es una cadena, y no puede ser cualquier otro tipo. N es un flotador. B es un Bool. Pero en JavaScript hay tipos dinámicos. Eso significa que usted no lo hace necesitar decirle JavaScript qué tipo serán sus variables. Usted acaba de decir var para la variable, el nombre de la variable, y entonces su valor. Así que una var puede ser cualquier cosa realmente. Puede ser una cadena. Puede ser un número de punto flotante. Puede ser un personaje. Puede ser un valor booleano. Y registro de la consola funciona un poco diferente. Si desea imprimir un número, llame% d. Pero la mayoría de los valores pueden ser impresa como cadenas bien. Vamos a correr en este nodo para ver lo que sucedería. Puedo llamar ex2.js nodo, y tenemos printf con el CS50 valores, N como el número de punto flotante, y luego B como el booleano convierte en una cadena cierto. ¿Y si hiciéramos ejemplo 2.c? Bueno, todavía tenemos algunos más molestias con printf. Observe que el punto flotante número tiene que ser el formato correcto, y que el booleana no puede simplemente se mostrará como verdadero o falso. Bien. Ahora echemos un vistazo a ejemplo tres. En el ejemplo tres, estamos mostrando como se puede utilizar un bucle for. De hecho, es muy simple. Una de las cosas buenas acerca de JavaScript es que se basa C. Eso significa que una gran cantidad de su código será muy similar y se sienten muy parecidos. En un bucle, lo único que realmente ha cambiado aquí es lugar de int i, tenemos var i. Todavía podemos asignarle a valorar cero, compruebe que está a menos de cinco, y incrementarlo en uno con el operador ++. Llamamos console.log en i, y que nos imprimir un número con cada línea. Vamos a correr realmente rápido para ver lo que emite. Tenemos un nuevo número en cada línea. Otra cosa que quiero a notar con console.log es que usted no tiene que escribir barra invertida n para la nueva línea. Console.log imprimirá todo en su propia línea. Eso es una buena característica que JavaScript nos da. Ahora vamos a abrir ejemplo cuatro. En el ejemplo de cuatro, por primera vez en la C, estamos llamando a unas pocas funciones. Tenga en cuenta que tenemos que declarar la funciones antes de que los utilizan en principal. Si tuviéramos principal primero y a continuación, añadir y luego alta, hacer, sonido metálico, o GCC sería darnos un error que dice que no sabe lo que es alta. No sabe lo que es complemento. Así que en C, usted tiene que ser exigente con la orden en el que se llama a sus funciones. Echemos un vistazo a cómo se puede hacer esto en JavaScript. Tenemos diferentes archivos porque no hay algunas maneras diferentes de hacer esto. Una forma es más o menos una traducción directa. Dado que las funciones en C tipos de retorno y JavaScript en realidad no sabe ni le importa sobre el tipo regresa, usted no escribe un tipo. En su lugar, sólo tiene a la función de escribir, y todo es bastante lo mismo que antes. Cuando se tiene una variable, como en añadimos, sólo tenemos que escribir x e y. No necesitamos decir x es un entero. No necesitamos decir que y es un int. Volvemos con la misma sintaxis. Por alto, lo declaramos con funcionar en lugar de vacío. Tenga en cuenta que si es nula o no vacío, aún así es todo la misma función. Y simplemente no ponemos nada entre paréntesis, y se ve muy parecido al código C. Y a continuación, podemos llamarlo a continuación. Si miramos ejemplo 4b, notamos que he cambiado algunas cosas. Lo único que he cambiado Realmente, aunque es el orden. Tenemos el mismo funciones, pero ahora son declarada después de que se utilizan en console.log y alta en las líneas 18, 19. Si hizo esto en C, hacer lanzaría un error. Aquí, esto funciona muy bien. Y puedo mostrar esto a usted por llamando Nodo el ejemplo 4b. Otra forma en que podemos llamar a funciones es por funciones de ahorro como variables. Como he dicho, una variable puede tener cualquier tipo. Uno de los tipos una variable puede tener es una función. Así que si nos fijamos en ejemplo 4c, lo he cambiado aquí es var agregar en lugar de la función add. Y ahora es igual a añadir una función. Esta función aquí es anónima. No tiene nombre, por lo que es justo FUNCTION y luego los paréntesis. La sintaxis después de eso no cambia, pero tiene que tener en cuenta que tiene una variable que eres almacenar la función en complemento, y un variable que se está almacenando en alto. Debido a añadir y ahora alto son las variables y no funciona, algo cambia. Esto es un error común que veo en una gran cantidad de archivos JavaScript de la gente, y algo a tener en cuenta. Cuando ejecuto esto, vamos a ver qué pasa. Me aparece un error. Es como decir no definido en este punto. Así que está diciendo que no sabe lo que es añadir. Porque ahora añadir no es un función, añadir es una variable. Y usted no ha dado realmente añadir un valor aún cuando se usó. Eso nos lleva al ejemplo 4d, donde si desea utilizar variables como funciones, sólo tiene que asegurarse de que obtener el valor antes de que sean utilizados. Pasemos al ejemplo de cinco a continuación. En este caso, hablamos de structs en C. En C, estructuras tener esta estructura fija a ellos porque hay que declararlos antes de usarlo, y te digo que tengo un estudiante, y cada estudiante tiene exactamente un nombre, un año, uno de los géneros. Tiene que tener a todos ellos. No puede haber ningún otro valor, y tienen que ser tipos específicos. Entonces podemos inicializar el struct en esta sintaxis agradable ya que conoce la orden. Por lo tanto, sabe que Roger es un nombre. Se sabe que 2016 es un años y M es un género porque nos dijeron que este lista es un estudiante struct. Y entonces usted puede imprimir que, accediendo s.name. Vamos a ver cómo lo haríamos convertir que a JavaScript. Observe que S es ahora un variables, y no hay ningún tipo. Es sólo una var de nuevo. Porque no importa si el tipo de esta variable es un puntero, es una estructura, o cualquier otra cosa. Tenemos una sintaxis ligeramente diferente. Esta sintaxis es la sintaxis de objeto. Es posible que haya visto en JSON. JSON en realidad significa la JavaScript Object Notation. Así es como se define objetos en JavaScript. Tenemos una clave, la cual es el valor, como el nombre. Y te damos la valora en el otro lado del colon. Y una cosa a tener en cuenta que usted es no es necesario tener un nombre y un año y un género de un objeto. Un objeto puede tener ningún valor. Puede tener tantos como desee. Podemos utilizar estos objetos sólo en el misma manera que usaríamos una estructura, s.name. Podemos correr realmente rápido haciendo nodo ejemplo 5.c. En realidad no podemos ejecutar un archivo de C en el Nodo. No sabe lo que C es. Sólo se sabe JavaScript. Cuando ejecutamos los ex5.js, obtenemos el valor, lo que nos esperábamos. Pasemos al ejemplo seis. Aquí sólo quiero hablar un poco poco más acerca de las matrices de JavaScript porque son un poco diferente de lo que eres utilizada en el C. Las matrices son anotada, no con los soportes como en C, con las llaves, pero paréntesis. Usted puede tener una matriz vacía, como arr en línea de cuatro. Usted puede tener matrices con múltiples valores. Y acceder a ellos de la misma manera en C. Hasta la línea siete, todo Parece bastante sencillo. Una pequeña diferencia es que aquí en la línea 10. La forma se obtiene una longitud de un matriz es simplemente llamando .length. Una matriz puede ser realidad tratado como un objeto, y este objeto tiene una propiedad length que llame para obtener la longitud de la misma. Tenga en cuenta que esto es diferente en C porque en C que tiene que saber la longitud de su objeto antes de tiempo. Así que otra cosa buena acerca de las matrices es que usted puede tener diferentes tipos. Si usted tiene una matriz en C, hay son matrices de un valor específico, o bien un puntero struct o flotadores o [inaudible]. Aquí, usted puede tener diferentes valores. La primera vez que tuve un número de punto flotante, a continuación, un booleano, luego otro número entero. Y, de hecho, pueden cambiar los tipos también. Mira la línea 16. Matriz de dos está cambiando de ser un número, un número entero, en una cadena. Otra cosa buena acerca de las matrices está aquí en la línea 19, que tienen tamaño infinito. Usted puede simplemente decir que quiero la centésima elemento que es la cadena de fiar. Y esto no parece hacer sentido porque la matriz sólo tiene espacio para tres elementos, por lo que el final debe ser dos. Pero al hacer esto, vamos a ver qué serie tres se convierte. Queremos correr así de rápido con ejemplos de nodo six.js. Recibimos esta muy larga array, y lo que sucede es que tenemos los primeros elementos y luego un montón de piezas en bruto hasta que consigamos nuestra cadena. JavaScript rellena el matriz como se necesita. Vamos a ir por fin a nuestro último ejemplo. Aquí tenemos una lista de los diferentes estudiantes. Quiero hablar un poco poco sobre algunos aspectos agradables de los bucles de JavaScript. En C, los bucles son tipo de limitación. Tienen una estructura fija, donde tener una variable, usted tiene una condición, y luego haces algo al final del bucle. Y por supuesto esto funciona en JavaScript como hemos visto en los ejemplos anteriores. Pero también tenemos maneras más agradables de hacer esto en JavaScript. Esto se llama un bucle foreach. Lo sentimos, volvamos al ejemplo de siete aquí. También podemos decir sección es una lista. Así que me dan cada io cada índice en esa lista. Entonces podemos conseguir que el estudiante con sólo la sección de i llamando. Así que todo el código de ajuste i igual a cero y asegurarse de i es menor que la longitud y sumando uno al i cada vez, eso es cuidar de usted en lugar muy bien con este bucle foreach. No sólo los bucles foreach trabajar en listas o matrices, también trabajan en los objetos, que es también agradable. Usted puede obtener el nombre de cada propiedad con sólo tomar un diccionario o un objeto, como estudiante, y luego simplemente diciendo dame cada llave. Una de las claves sería éstos propiedades, nombre o casa. Entonces, ¿qué va a pasar aquí es que imprimimos primero el nombre y después la casa de cada estudiante. Puedo ejecutar esta en Nodo muy rápido para mostrarle. Tenemos primero el estilo C de bucle, donde obtenemos cada objeto que se imprime. Y luego tenemos el JavaScript estilo, donde sólo se puede imprimir todas las claves y valorar individualmente. Bien. Ahora que hemos cubierto Node.js, creo estamos listos para empezar a trabajar con Meteor. Como he dicho, Meteor hizo un gran trabajo de escribir algunos ejemplos ya hechos para usted que se puede explorar a través de este tutorial o en la carpeta de seminario. Pero aquí quiero iniciar más de cero. Vamos a crear un sencillo de hacer la aplicación. Esta es una especie de la base de lo que el a hacer aplicación que te mostré anteriormente es. En este tutorial, verá que hay un Meteor comando crear a crear un nuevo proyecto Meteor. Es necesario llamar a este fin para ejecutar proyectos de meteoros porque ejecutará los comandos para crear el Meteor archivos necesarios para su proyecto. Si usted entra en la terminal, podemos entrar en la carpeta llamada paso uno. Y el paso uno corresponderá con el primer paso en el tutorial. Aviso existen carpetas, paso uno, el paso dos, todo el camino a cinco. Y cada uno se corresponde a un paso de este tutorial. Voy a abrirlo en mi editor de texto aquí por lo que podemos ver un poco de lo que fue creado. Nos damos cuenta de que hay cuatro partes principales. Hay un directorio Meteor, .meteor. Y que por lo general no es necesario tocar. Meteor se encarga de esa carpeta, y que sólo se asegura de que su proyecto funcionará correctamente. También tenemos tres archivos, un archivo HTML, un archivo de JavaScript, y un archivo CSS. Primero vamos a empezar con el archivo HTML. A primera vista, esto parece como un documento HTML normal. Pero note que hay hay algunas diferencias. Uno de ellos, esto no es en realidad un documento HTML completo. Nos faltan las etiquetas HTML. Esto es normal. En Meteor, usted no está esperabas para crear estas etiquetas HTML. Eso está hecho para ti. Usted quiere begin-- si que desee crear un sitio web, sólo tiene que empezar con la etiqueta de la cabeza, definir eso, y luego definir el cuerpo de la etiqueta. Pero si se observa en este Archivo HTML, tenemos una nueva etiqueta. Contamos con la etiqueta de plantilla. Esto no es HTML normal. Esta es una versión especial de HTML Meteor que pone a su disposición. Se llama bares espaciales. Puede definir plantillas como poco módulos, algo así como funciones de ayuda, en su C o código JavaScript. Esta plantilla lo haría tener un nombre llamado tarea. Y se puede ver a la derecha aquí en línea 13 que usted puede llamar a estas plantillas. Y lo del meteorito va a hacer es simplemente llenar en estas tareas para usted. Otra cosa que puede observar es un poco diferente es esto cada función. Cada uno de ellos tome la variable tareas y tipo de ir a través de él en que bucle foreach vio en el ejemplo siete. Este cada uno puede tomar un diccionario o una lista, un objeto o una lista, y sólo va a ir a través de toda la valores como un bucle foreach haría. Así que si tenemos un montón de tareas, este llamará a la plantilla en cada tarea. Vamos a ejecutar el proyecto Meteor sólo para ver que esto sucede. Corro el proyecto Meteor con sólo Meteor Meteor o correr. Y ahora Meteor sólo necesitará para preparar rápidamente el proyecto, iniciar la base de datos según sea necesario, y luego enviar la aplicación a nivel local. Podemos ir a nuestro navegador web ahora. Y veremos que tener una aplicación muy simple. Así que lo que vimos apareció fue en realidad el paso uno, el archivo de paso uno. Vamos a pasar al segundo paso sólo porque Creo que va a servir para el mismo propósito. Yo sólo voy a cambiar al paso dos directorio y de nuevo correr Meteor para que podamos ver la plantilla que sólo funcionaba con. Sí, una pregunta? AUDIENCIA: permiso Si estamos recibiendo negado, es que-- lo es todo llamado para eso? ROGER ZURAWICKI: Si usted está corriendo carrera Meteor, y que tiene permiso negado, algunos de sus archivos puede que no tenga activado el permiso adecuado. Así que hay que comprobar dónde los permisos están apagados. Podrían ser apagado en su proyecto Meteor, o podrían ser apagado en el Meteor propios archivos. AUDIENCIA: Si lo descargué hace un momento de su GitHub, entonces, ¿qué debo hacer [Inaudible]? ROGER ZURAWICKI: Si desea para asegurarse de que puede acceder a ella, hay un comando que se puede ejecutar. Déjame entrar rápidamente escribirlo para que otras personas puedan verlo. Voy a abrir una nueva pestaña aquí y entrar en mi carpeta de seminario. Chmod es el comando cambiar los permisos, y se puede decir r para hacerlo recursiva para cada archivo. Y permisos, puede probar 0755 para asegurarse de que tiene acceso pleno, y todo el mundo puede leer. Y si usted acaba de ejecutar este comando, que va a hacer que los permisos están en control para todo el directorio. Correr ls-l le puede mostrar la permisos en más detalle. Esto se ve bien. Lo más importante es que tiene los tres rwx para todos los archivos en el directorio de seminario. ¿Esto soluciona el problema? AUDIENCIA: Dice que falta operante [inaudible]. [Inaudible] ROGER ZURAWICKI: Usted tiene que asegurarse de que tener un punto al final de su mandato. AUDIENCIA: [inaudible]. ROGER ZURAWICKI: De acuerdo. Vamos rápidamente a la host local, la aplicación que tenemos. Y verá que tenemos una algunas tareas aquí, como se esperaba. Tenemos un montón de CSS, que usted no tiene que preocuparse. El tutorial Meteor sólo da esto a usted para hacer su lista de tareas mirada un poco más bonito que el HTML plano. Y tenemos el archivo de JavaScript, que Voy a entrar en más detalle un poco más adelante, pero sólo ofrece estas tareas. Esta es una tarea. Esto es tarea de dos. Esta tarea es tres. Así que este es el dato Meteor de conseguir. Una de las cosas interesantes acerca de Meteor es que los cambios pueden suceder automáticamente. Si quisiera cambiar la nombre de la primera tarea, por lo que dicen que esto no es tarea uno, y yo la salvo a ella entonces, cuando voy a la web navegador, puede actualizarlo, y dice de forma automática esto no es tarea uno. Usted puede hacer lo mismo en cualquiera de estos archivos. Hacer un cambio, en lugar de hacer lista, voy a tener a mi para hacer la lista. Y una cosa que te acabo de dar cuenta, que yo ni siquiera tengo que refrescar. La idea de refrescante es una especie de resolver para usted con Meteor. Cada vez que detecta los cambios en los archivos, que cargará los cambios para usted. Esto funciona en todos los archivos, ya sea es HTML, CSS, JavaScript o. Para mostrar lo que esta aplicación se vería como sin CSS, puedo quitarlo todo. Y cuando se vuelve a cargar, ahora tiene una no tan agradable de aspecto para hacer la lista. Pongamos que el contenido de nuevo. Y seguramente lo suficiente, refresca, y nuestro CSS está de vuelta. Grande. Ahora podemos seguir adelante con el tutorial. Vamos a hablar de la segunda etapa, las plantillas. Esto es lo que acabamos de ver con las diferentes tareas. Meteor le explicará a usted qué plantillas y cómo esta lógica funciona. Pero vamos a ver en el código para ver si podemos tener sentido fuera de él. En aplicaciones muy simples, como lo que tenemos en la sencilla hacer, paso uno, paso dos, paso tres, el cuarto paso, el paso cinco, no tenemos ninguna carpeta. No tenemos el servidor carpeta que mencioné. No tenemos el cliente carpeta que se ha mencionado. Así Meteor se ejecutará todos los archivos. Va dirigido tanto sobre la cliente, tanto en el servidor. Y si quieres partes de tu JavaScript código se ejecute sólo en el cliente, que necesitan para asegurarse de que usted tiene una sentencia if, algo así como lo que tenemos en nuestro archivo JavaScript aquí. Así Meteor, sólo si es el cliente, entonces yo querer definir una plantilla ayuda llamados tareas. Lo que este código realmente hace es que dice que hay una plantilla de objeto llamado Meteor que ofrece. Y vamos a añadir un ayudante. Los ayudantes son estas tareas, estas cosas como las tareas. Vas a ver que si nos remontamos a la Archivo HTML, se llama cada uno en las tareas. Las tareas no se define en el código HTML. Se define en el código JavaScript. Y Meteor necesita saber qué tareas es cuando entramos en el código JavaScript escrito aquí. Tareas es este helper. Consolador, para que se pueda imaginar como una variable de plantilla. Y ¿qué tareas hacer? Bueno, devuelve la lista de valores. Debido a que es una lista, podemos llamar a cada uno en el mismo. Así que por eso nos llamamos en las tareas. Y ahora tenemos la tarea. ¿Qué hace la tarea? Bueno, tiene esta flecha aquí después de las llaves. Eso significa que la tarea es una plantilla. No es un ayudante, parecido a lo que acabamos de ver. Es una plantilla que hemos definido. Y ¿dónde hemos definido? Hemos definido por debajo de aquí. Toda esta plantilla no es render un elemento de la lista, y se llama texto. Ahora, el texto parece ser una ayudante, pero te voy a mostrar que esto es en realidad todavía un miembro de datos de tareas. Cuando se llama a cada uno, de que entre en la estructura de datos un poco. Al igual que el bucle foreach, ahora sólo se ve en el primer elemento en nuestro objeto. Vemos que el texto es definido aquí en nuestro objeto. Así Meteor es inteligente para saber que estamos hablando de este texto, no el ayudante llamado texto. Simplemente se pone el valor de este texto aquí y lo muestra como HTML, y así es como van los datos del Javascript para el HTML. Pasando embargo, en este ejemplo que no modificable esos valores. Meteor hace dos realmente cosas buenas para nosotros. Además de la actualización en vivo que nos mostró, también gestiona la base de datos. Si tuvieras que trabajar con PHP, había que configurar phpMyAdmin. Había que asegurarse de que su mesas estaban bajo control. Había que hacer un montón de trabajo para hacer de que sus datos se ha formateado correctamente, y PHP podía comunicarse con ella. Ahora, Meteor utiliza un nuevo paradigma. Esta es una forma más moderna de manejar una base de datos. Es una tecnología llamada MongoDB. Al igual que en JavaScript, vimos que no importa qué tipos tenían los datos. Todo era una var. No era una charstar. No fue un int. No era una estructura. Era sólo var esto, que var. MongoDB trabaja tipo de la misma manera. Usted no tiene que definir sus mesas. Usted no tiene que decir una tabla tiene un nombre, que tiene un int. Tiene, no sé, un dólar, que es un decimal. Es sólo estos objetos JavaScript, todos estos vars, esencialmente. Y esta es una muy poderosa manera de un prototipo de su aplicación. Y es por eso Meteor se aprovecha de esto. Si pasamos a la etapa tres, vamos a ver lo que ha cambiado. Si nos fijamos en el código HTML todos, no mucho. CSS no ha cambiado en absoluto. Pero el pequeño cambio que vemos en HTML es que hemos cambiado cómo se definen las tareas. Tareas es ahora una función. Eso significa que cada tiempo queremos llegar tareas, vamos a ejecutar esta función. No devuelve la función como un valor. Meteor es inteligente para ejecutar realmente el función para ver lo que vamos a salir. Y vuelve esta cosa llamada tareas. Hemos definido las tareas en la línea uno, y es una colección de Mongo. Mongo se refiere a la base de datos utiliza Meteor, y este nuevo sólo significa que vamos a hacer una nueva colección, lo llaman tareas. En MySQL, esto sería equivalente a en busca de las tareas de mesa llamado. Mongo tiene colecciones, no mesas. Así que esto sólo se ve para las tareas. Ahora, en nuestra plantilla ayudante en la plantilla, todo que tenemos que hacer para conseguir toda la tareas se esta función, encuentra y este corsé vacía. Esto es más particular, a la sintaxis de Mongo. Hay un montón de documentación en línea de cómo usted puede hacer eficiente y realmente útil consultas Mongo. Pero algo como esto es bueno suficiente para sólo encontrar todos los datos. Ahora, uno de los problemas que puede ver es que nunca nos sumamos en realidad datos. Entonces, ¿qué sucede cuando realmente ejecutar el paso tres? Vamos rápidamente a entrar en paso tres y ejecutar Meteor. Tenga en cuenta que yo tenía otro Meteor proyecto se ejecuta en otro lugar, así Meteor no le gusta eso. Yo sólo voy a cerca rápidamente a Por otro Meteor con Control C, entrar en el paso tres, y de nuevo correr Meteor. Observe que está empezando MongoDB porque MongoDB es una parte de cada proyecto Meteor. Por lo que dice mi aplicación tiene errores. Eso es una buena característica Meteor tiene. Se asegura de que su HTML es bien validado. Echemos un vistazo rápido a por qué esto podría ser. Parece que tengo accidentalmente copiar el código HTML mal. Si salvo ahora, Meteor volver a arrancar automáticamente el servidor, y ahora la aplicación se está ejecutando según lo esperado. Aviso a arreglar esto, puede simplemente ejecutar el mismo archivo HTML desde el paso dos, copiarlo en el paso tres. Podemos volver a nuestro host local. Y ahora vemos que tenemos nuestra lista de tareas pendientes. Muy bien, pero está vacío. En realidad no tenemos ninguna tareas en nuestra base de datos Mongo. Así que vamos a hablar de un pocas formas en que pueden hacerlo. Si nos remontamos a la terminal, que puede cerrarla y ejecutar Meteor Mongo. Si está familiarizado con el funcionamiento de Meteor, esto en realidad le da acceso al MongoDB completo para Meteor. Tenga en cuenta que usted tiene que estar en ejecución Meteor primero para que esto funcione. Así que si ejecuto esto en una nueva pestaña, me puede volver al mismo directorio. Y ahora Meteor funciona bien. Este es un requisito. Permítanme dejar un poco más grande por lo que podemos ver. Esto parece un poco diferente que lo que podría ser utilizado a usted realmente no necesite usar Mongo. El punto entero de mí aquí es de modo que usted puede utilizar JavaScript. Pero si usted es curioso, la API no Mongo utilizar SQL, Structured Query Language. Utiliza su propio lenguaje que se parece mucho a JavaScript. Muy rápidamente, podemos encontrar la tabla a través de db.tasks. Y me está diciendo Resulta que si corremos encontrar, un poco similar a lo que teníamos con Meteor, podemos cargar todos los elementos. El problema es que no lo hacemos en realidad tienen las tareas definidas. Así que no puede obtenerlos. Podemos insertar, sin embargo. Así que podemos ejecutar inserto con inserción de comandos. Y acabamos de darle un objeto, y que sólo asegúrese de que el formato es lo que esperamos. Si nos fijamos en el paso dos, vimos que todas las tareas era un objeto con un texto como la clave y lo su artículo a hacer era como una variable. Por lo que podemos hacer algo aquí. Podemos tener que insertar una tarea Llamé Vengo de Mongo. Y pulsamos Intro y se ejecuta. Podemos correr encontrar de nuevo, y nos ver que hay un objeto aquí. Mongo le asigna una ID, que usted realmente no necesita preocuparse. Lo que es importante para usted son los datos se introduzca, son los datos que salga. Volvamos a nuestro sitio web, y bueno, nuestra tarea cargado. Y se puede ver que porque Meteor es muy inteligente y siempre refresca para ti, yo no tiene que tocar la página. Se cargará automáticamente. Vamos a ejecutar algún código en JavaScript aunque hacer esto. Como tenemos Nodo en la espalda terminar para ejecutar JavaScript cabo, también podemos ejecutar JavaScript directamente en nuestros navegadores. Usted puede hacer esto por una característica llamado Inspeccionar Elemento. Si hago clic derecho sobre una sección de la página, hay una opción llamado Inspeccionar Elemento. Si usted está funcionando un navegador como Safari, puede necesitar para que su desarrollador herramientas antes de llegar esta función. Lo que nos importa es la consola. Así que vamos a ir a la consola en la parte inferior. Ahora podemos ejecutar cualquier JavaScript aquí, al igual que el código JavaScript archivos que mostraron en el ejemplo js. Pero ahora veamos tareas. Podemos funcionar nuestro comando. Y espero que voy a ser capaz de hacer es un poco más grande para que podamos ver todo. Si corremos tasks.find, y usted ver que este es el mismo código exacto que utiliza el archivo JavaScript en el paso tres, este task.find. Podemos correr la misma cosa, y ahora tenemos algunas cosas raras. ¿Cómo conseguimos realmente los datos? Bueno, tenemos que ejecutar este comando llamado obtención de información. Esto es muy útil para la depuración. Lo que se obtiene aquí es un cursor, y esto es una manera agradable Meteor tiene de captación de datos optimizados. Este cursor tiene todas las características para actualización en vivo y actualizar la página cuando algo ha cambiado. Pero no nos va a obtener los datos. Podemos obtener los datos a través de obtención de información. Y ves que tenemos un objeto, y es como lo que teníamos en Mongo, con un ID y el texto que ponemos en. Entonces, ¿cómo insertar un elemento en Meteor? Bueno, sólo tenemos tareas. Y luego podemos ejecutar el mismo comando de inserción, dando un diccionario o un objeto con el mismo formato, texto y entonces yo vengo de la consola. Echa un vistazo por encima, porque cuando yo hacer esto, se muestra en la página web automáticamente. Observe que puede poner cualquier cosa que quiere en estos artículos. No tiene por qué tener una estructura fija. Que podría tener una igual a la número tres y b igual a falso. Y todas las obras. Incluso puedo elegir no incluir un texto en absoluto. Esto simplemente no es recomendable sin embargo porque entonces Meteor no saber lo que se vea. Pero en cada caso, obtener una identificación, y eso es el ID del objeto que puede utilizar. A medida que continuamos con paso cuatro y paso cinco, el tutorial le mostrará maneras que puede crear elementos de interfaz de usuario utilizando el HTML que sabes crear diferentes tareas. Veamos paso cuatro muy rápido. Veremos que hemos añadido una sección sobre los eventos. Las plantillas pueden tener ayudantes, que nos reciben datos. Pero también puede llamar a eventos. Y aquí es donde las cosas se vuelve útil, porque los eventos son lo que sucederá cuando se hace clic en diferentes cosas en su sitio web. Aquí, nuestro código está diciendo nos sumamos a este evento. Añádelo cuando hayas enviado algo con la nueva tarea de clase. Lo que tenemos aquí es un selector CSS. Así que esto sólo se ve un HTML elemento que tiene la tarea nueva clase. Y se ve para el evento, al igual que presentar. Otros eventos incluyen clic, vuelo estacionario, doble clic, similar a lo que se obtiene en HTML normal. Lo que das aquí es ahora una función. Y usted puede tener su código en esa función. Esta función es lo que termina recibiendo llamaste al momento de enviar esta nueva tarea. Veamos el HTML se utiliza para asegurarse entender lo que esta nueva tarea. Hemos añadido un formulario aquí con clase nueva tarea. Y tiene una entrada que lleva texto. Y aquí es donde estamos agregará nuestras nuevas tareas. Vamos a ejecutar el paso cuatro en la sitio web para ver lo que parece. Podemos dejar de primero en salir del MongoDB teníamos de nuestro anterior ejemplo con Control C. Y vamos a cambiar en el paso cuatro directorio. Correremos Meteor nuevo para iniciar el servidor. Y, por desgracia, tuve Meteor se ejecute en otro terminal. Así que sólo voy a asegurarse de que este cerrado. Dejemos de esto y cambio a la cuarta parte, el paso cuatro. DE ACUERDO. Ahora nuestro código Meteor está ejecutando. Y se puede ver que se actualiza, sin nosotros ni siquiera tener que actualizar la página. Lo que ha cambiado aquí es ahora que no tenemos ninguna tarea, pero tenemos una forma aquí, esta cuadro de texto, para agregar nuestras nuevas tareas. Y podemos escribir nuestra tarea aquí. Vengo de la página HTML. Al pulsar Intro, se quedó sometido. Podemos ver lo que pasó como definidos por el código JavaScript. Lo que hizo fue esta función tomar el texto de la forma, y luego simplemente llamado tasks.insert, como lo hicimos en la consola. También optaron por agregar una fecha createdAt. Esta es la forma en que lo haría especificar la hora actual. Después de eso, se aclara la forma haciendo Asegúrese de que el valor es una cadena vacía. Y entonces se llama return false para asegúrese de que no ocurre nada más. Cuando regresa falso de un evento de formulario, que detiene la ejecución. Diga una forma tiene una acción, como someterse a una página PHP. Si no hubieras regresado falsa, te vuelves cierto. Sería terminar haciendo esa solicitud. Falsos intercepta y detiene allí mismo. Así que fue una pequeña demostración sobre cómo funciona Meteor, y hemos estado siguiendo el tutorial por un tiempo. Y usted puede sentir por favor libre para seguir haciendo esto. Hay un montón de recursos, y el tutorial es en realidad muy bueno para explicármelo qué está pasando. Yo quiero mostrar ahora, en los pocos minutos que nos quedan, ¿cuáles son algunos de los características más frescas del Meteor, y cuáles son algunos de los paquetes más útiles. Una de las mejores cosas de Meteor es que tiene un sistema de paquetes. Usted puede incorporar fácilmente el código que muchos miles de desarrolladores han escrito en todo el mundo en su proyecto Meteor. Un ejemplo de esto es lo que podría hacer en el paso nueve de la guía de aprendizaje, donde usted está tratando de agregar cuentas a su proyecto Meteor. Si tenemos un PHP CS50 proyecto, tendríamos confiar en el marco o nuestro propio código para hacer seguro que con seguridad manejamos contraseñas y nombres de usuario y almacenar la base de datos y todo eso. Resulta Meteor tiene alguna paquetes que se pueden hacer eso para usted, y hacerlo muy fácilmente. Lo que podemos hacer es añadir algunos paquetes. Así que vamos a hacer ese derecho ahora en nuestra consola. Voy a dejar el proyecto y ahora ir a simple todos. Ahora, simple-Todos es el proyecto que tendrá después de haber sido hecho con el paso 11 o el paso 12, al final de este tutorial. Y vamos a ver rápidamente a él para ver ¿cuáles son las diferentes características que tenemos. Vamos a asegurarnos de que se está ejecutando. A veces se necesita un tiempo para refrescar, pero aquí está. Tenemos nuestra opción para ocultar completar tareas, y podemos acceder. Y esto se hizo con el paquete Meteor. Es genial. Ahora hemos username y el signo de la contraseña en. Pero lo que si queríamos añadir otro tipo de mecanismo de inicio de sesión? Digamos que quería iniciar sesión con mi cuenta de Meteor. Voy a correr meteoro complemento, y esto es la sintaxis para agregar paquetes. Puedo decir cuentas y accounts.meteor. Se va a encontrar ahora el paquete y lo cargará. Se puede ver que yo no tengo encontrado el nombre del paquete derecha. Entonces, ¿cómo te enteraste de paquetes? Bueno, hay un gran sitio web, hecho disponible por el pueblo de meteoros, llamado atmospherejs.com. Atmospherejs, una palabra, punto com, es un gran repositorio para encontrar toda la Meteor paquetes en el repositorio. Puedo buscar cuentas, y luego me voy a mostrar todo el material pertinente, todos los envases, el nombre de la cuenta. Mientras que carga, podemos intentar la adición de algunos otros paquetes. Tal vez el paquete Meteor no está funcionando en este momento, pero puedo añadir Facebook. Puedo agregar la cuenta y después ejecutar el proyecto Meteor nuevo. Una vez que esto comienza, vamos a ver ¿Qué ha cambiado en el sitio web. Puede ver-- yo podría tenga que actualizar aquí. Tengo un botón para configurar Facebook login. Y aquí, tengo todo las instrucciones de meteoros ha preparado para usted para la creación de una aplicación de Facebook. Y usted puede utilizar ese información para añadir sus identificaciones. Una vez hecho esto, tendrás Facebook login trabajar en su aplicación. Yo sólo voy a conseguir un ID de aplicación y un secreto, sólo para mostrar cómo podría funcionar esto. Usted necesitará una cuenta de Facebook utilizar Facebook Opciones para desarrolladores. Me dejaron de encontrar rápidamente la Llaves de meteoros que son necesarias. Tengo otro proyecto Meteor que voy a utilizar, y yo sólo voy a tomar las claves de ese archivo. Y una vez que me encuentro, yo sólo voy a poder copiar estas llaves en mi Facebook. Así que aquí está la clave. Y esto es secreto. Usted no debe ser compartir esto con la gente. Y luego le das tu aplicación secreto. Y esto es tan Facebook sabe que usted es usted. Y guardar la configuración. Creo que en el proceso de I han dejado de mi aplicación Meteor. Así que sólo quiero hacer Seguro que sigue allí. OK, vamos a asegurarnos de que nuestro servidor Meteor se ejecuta de modo que la página web se está ejecutando. Observe si dejamos el Meteor servidor, la página sigue ahí. Simplemente no se actualizará más. El servidor Meteor es necesario para asegurarse de que la página es en vivo. OK, yo he presentado, y ahora Puedo iniciar sesión con Facebook. Ahora es sólo una cuestión de tener un pop Facebook hasta y poniendo en su cuenta información y registro en. Una vez hecho eso, Facebook podría te dan la lata para algunos más seguridad. Así que sólo tendremos que parar allí. El punto es que cuando haya terminado con eso, tendrás Facebook login. Meteoro tiene un montón de otros paquetes también. Puede iniciar sesión con Google+. Puede iniciar sesión con GitHub. Puede iniciar sesión con Twitter. O si usted busca, usted encontrar un montón de otras cosas como Meetup, LinkedIn, y Meteor desarrollador. Así Meteor fue el desarrollador paquete que estaba buscando. meteoro agregar cuentas-meteoro-desarrollador. Mientras tanto, yo También quiero recomendar algunos otros paquetes para sus proyectos. Podría resultar útil incluir el paquete jQuery. Esto le permite utilizar jQuery en sus clientes. Usted sólo puede hacerlo con una línea, y Meteor será asegurarse de que está al día en jQuery. También recomiendo houston: admin. Esto es como una especie de phpMyAdmin tipo de herramienta para su MongoDB. Esto le permite editar sus datos con bastante facilidad sin tener que ir a la concha Mongo, como lo había hecho anteriormente en el seminario. Así que ahora que eso es correr, vamos a correr Meteor de nuevo y ver qué podemos hacer. Te das cuenta de que la adición de algunos paquetes podría tener los presentan algunas advertencias. Usted no tendrá que preocuparse de eso con houston. Así que ahora podemos tener la opción para configurar Meteor administrador. Y te dan las instrucciones si quieres poner esto en marcha. Ahora también podemos ir a / admin. Esta es traído a usted por el paquete de Houston. Y esta es la interfaz de administración de meteoros. Usted acaba de crear una cuenta de administrador, como tal. Y si se actualiza la página, es posible que tienen algunas colecciones aparecer. Es una herramienta muy útil, y lo recomiendo encarecidamente. Se puede ver que ya houston estaba dando algunos errores, nosotros no tenemos colecciones mostrando hasta ahora. La forma que usaría houston es asegurándose de esta función se pone llamado en sus simples-todos. Así houston no lo hace saben lo que mis tareas son. Montamos un Mongo colección llamada tareas. Vamos a entrar en simple Todos y justo asegurarse de que en el código JavaScript, hemos añadido tareas a nuestras colecciones. Ahora nos hemos salvado, y es la construcción la aplicación, refrescante. Y vamos a ver. Ahora tenemos algunas tareas. Y podemos añadir algunas tareas nuevas. Pero si queremos añadir tareas, vamos a hacerlo con la propia aplicación. Ahora podemos añadir algunos datos. Hola, este es una tarea. Parece un poco extraño que no estamos viendo ninguna tarea. Podríamos querer comprobar si tenemos cualquier errores aquí, o tal vez en otro lugar. Si entramos en administración, que parece extraño. Si tira el repositorio después de este seminario, Me aseguraré de que simple Todos trabaja con houston. Desafortunadamente, no parece estar trabajando en este mismo momento. ¿Hay alguna otra pregunta? Houston normalmente es una herramienta que funciona muy bien. Houston es específicamente un poco buggier que los otros, pero yo lo recomiendo cuando funciona. Sí. AUDIENCIA: ¿Qué puede hacer con el paquete de Facebook una vez que se registra un usuario con su Facebook? ROGER ZURAWICKI: Una vez un usuario de iniciada la sesión, usted puede hacer las llamadas a la API de Facebook. Mucho de eso está más en cómo Facebook abre su API. Meteor, asegúrese tener la conexión. Pero todo después de que es una cuestión de aprender a utilizar la API de Facebook. AUDIENCIA: [inaudible]. ROGER ZURAWICKI: De acuerdo. Muchas gracias por este seminario CS50 en Meteor. Si tiene alguna pregunta, usted me puede enviar por correo electrónico en mi dirección de correo electrónico se enumeran a continuación del seminario. Y voy a estar feliz de responder a sus preguntas. También voy a estar en el CS50 hackathon debe necesita ayuda con sus proyectos de meteoros. Gracias por su atención.