Contenido
- Empezar a desarrollar
- Creación de proyecto y de aplicación
- Crear una experiencia: ‘PhotoExperience’
- Crear una regla: ‘TakePhoto’
- Ejecución de la aplicación
Empezar a desarrollar
Para empezar a desarrollar necesitarás instalar la Broker Client App, es decir la aplicación que sirve como herramienta de desarrollo para ir probando los avances tu aplicación.
Creación de proyecto y de aplicación
Si todavía no cuentas con ningún proyecto, puedes acceder a la sección Projects y crear un nuevo proyecto presionando el botón con el signo ‘+’ y completando los datos como se observa en la siguientes imagenes:
Luego creamos una nueva aplicación presionando el botón con el signo ‘+’ y completamos los datos como se observa a continuación:
Crear una experiencia: ‘PhotoExperience’
Cuando abras la aplicación, quedarás situado en la sección Model, que es el editor de código que provee la plataforma para nuestras aplicaciones y librerías. También observarás que el archivo main.ms ya fue creado por defecto, y se ve de la siguiente forma:
Este archivo ya trae una Experience y un RuleContext creados, que podemos modificar para los propósitos de nuestra aplicación.
Primero modificamos la experiencia para que se vea de la siguiente forma:
Experience PhotoExperience {
String info value("Take a visualize a photo!") as Label
Decision takePhoto action('MainContext.takePhoto') label('Take Photo')
String image as Image
}
RuleContext MainContext {
Rule takePhoto {
//TODO
}
}
Así estamos creando una experiencia, es decir un modelo para el cual se autogenerá una representación visual asociada, que denominamos Layout. Con este código estamos definiendo tanto los tipos de datos que contendrá el modelo, como su correspondiente visualización y asociación en la pantalla asociada (Layout).
En la primer sentencia:
String info value("Take and visualize a photo!") as Label
estamos creando un atributo de tipo String, que se visualizará como un componente de tipo Label con la leyenda “Take a visualize a photo!”.
Mediante la sentencia:
Decision takePhoto action('MainContext.takePhoto') label('Take Photo')
creamos un botón (sin atributo asociado), que se visualizará como un componente de tipo Button con el título “Take Photo”. Además, mediante la cláusula action('MainContext.takePhoto') estamos informando que al presionar el botón se ejecutará la regla ‘takePhoto’ del rule context ‘MainContext’ (que crearemos a continuación).
En la última sentencia:
String image as Image
agregamos un atributo de tipo String, que se visualizará como un componente de tipo Image y es la que utilizaremos para visualizar la foto.
Ahora si accedes a la sección Build UI, podrás ver el layout de la experiencia recién creada:
Crear una regla: ‘TakePhoto’
En el mismo archivo, main.ms, en el que creamos nuestra experiencia, vamos a crear nuestro primer bloque de lógica del programa, agregando una regla. Las reglas son el mecanismo que tenemos para agrupar sentencias de código a ejecutarse como reacción a diferentes eventos. Las mismas las agrupamos en contextos de reglas.
Lo primero que haremos será modificar el RuleContext y la Rule, que fueron creados por defecto, para que se vean de la siguiente manera:
RuleContext MainContext {
Rule takePhoto {
PhotoExperience exp = broker.ui.getDataSource()
MediaCameraConfigure mcc = MediaCameraConfigure()
MediaFile mf = broker.media.open(mcc)
if (mf != null) {
exp.image = mf.getURL()
}
}
}
De esta manera estamos definiendo nuestra lógica de ejecución, dentro del contexto MainContext y de la rule takePhoto.
Observemos que en la primera sentencia de código dentro de la regla:
PhotoExperience exp = broker.ui.getDataSource()
estamos creando una variable exp para referenciar la instancia del modelo PhotoExperience. Dicha instancia la obtenemos con la llamada broker.ui.getDataSource() que nos devuelve el modelo bindeado al layout que esta siendo visualizado (es decir la experiencia que lleva el mismo nombre).
En la siguiente linea:
MediaCameraConfigure mcc = MediaCameraConfigure()
creamos una instancia del tipo MediaCameraConfigure para configurar el acceso a la cámara de fotos del dispositivo. En este caso usamos la configuración por defecto.
Luego:
MediaFile mf = broker.media.open(mcc)
creamos una instancia del tipo de dato MediaFile. Con este tipo de dato podemos administrar la ubicación y el contenido de archivos multimedia. En este ejemplo usaremos un MediaFile para referenciar la imagen que obtendremos desde la cámara, por medio de la sentencia broker.media.open(mcc). Como se observa, le hemos pasado como parámetro la instancia creada en la línea anterior, mcc, esto abrirá la camara de nuestro dispositivo para tomar una foto.
Después de obtener la imagen:
if (mf != null)
comprobamos que la fotografía se obtuvo con éxito (mf es distinto a null), puesto que al entregar el control a la vista de cámara el usuario puede cancelar la toma de la imagen retornando null.
Por último:
exp.image = mf.getURL()
asi estamos asignando al atributo ‘image’ la ubicación de la fotografía en nuestro dispositivo mediante la llamada mf.getURL(). De esta forma podemos visualizar nuestra imagen en el layout.
Ya tenemos nuestra regla lista! Guardamos los cambios con el botón ‘SAVE’, y nuestra aplicación quedará lista para ejecutarse en el Broker Client App.
Ejecución de la aplicación
Ya hemos terminado de crear nuestra aplicación, ahora nos falta el último paso, la ejecución.
Una vez que nuestra aplicación haya sido creada y guardada con éxito podremos visualizarla y ejecutarla desde la Broker Client App.
Para este propósito: accedemos a la aplicación, ingresamos nuestras credenciales, seleccionamos nuestra organización, navegamos a nuestro proyecto ‘MyProjects’
y por último a nuestra aplicación ‘TakeAPhoto’. Desde allí, presionamos el botón ‘DRAFT’ que ejecutará nuestra app.
Una vez que la aplicación se haya cargado, ya podremos ejecutar nuestro código presionando en el botón ‘Take Photo’. Este abrirá la camara de nuestro dispositivo y podremos realizar la toma de una imagen. Al finalizar la captura y aceptar, podremos observar nuestra imagen en el layout que hemos creado.
Felicitaciones! Tu primer aplicación en Mat|r ha sido creada con éxito y ha sido ejecutada. Ya puedes continuar con los siguientes tutoriales y seguir aprendiendo!