Creación de ViewController(files, storyboards)

main
Juan David Lopez Regalado 1 month ago
parent 9e5d3e5c09
commit e701f66cb8

BIN
.DS_Store vendored

Binary file not shown.

@ -1,37 +1,107 @@
# Introducción al Uso de ResearchKit: Innovación en Ensayos Clínicos con Tecnología Wearable
ResearchKit ha demostrado ser una herramienta bastante util en la obtención de datos para ensayos clínicos como lo es el consentimiento informado, historias clínicas, tareas entre otras. Por ello, es importante aprender a utilizar los recursos que este ofrece para poder hacer uso de ellos cuando se requiera programar un software para uso médico.
ResearchKit ha demostrado ser una herramienta útil en la recolección de datos para ensayos clínicos, permitiendo gestionar actividades como el consentimiento informado, el manejo de historias clínicas, y la realización de tareas específicas. Esto resalta la importancia de aprender a utilizar los recursos que ResearchKit ofrece para facilitar el desarrollo de software en el ámbito médico.
## Creación de documento
### Creación de proyecto
El primer paso será crear un proyecto nuevo en Xcode recordando tenerlo actualizado a su última versión, al abrir Xcode, mostrará un menú en el que se seleccionará la opción "Create New Project..."
El primer paso consiste en crear un proyecto nuevo en Xcode, asegurando que esté actualizado a la última versión. Al abrir Xcode, se desplegará un menú en el que debe seleccionarse la opción "Create New Project...".
![](imagenes/createP.png)
Posteriormente al presionar, mostrará una ventana con las opciones de proyecto, para este caso, se seleccionará App de iOS, debido a que la aplicación será para uso de iPhone y iPad al que se le asignará un nombre, el tipo de interfaz, el lenguaje a utilizar entre otros datos, además de ubicar el lugar donde se alojará
Luego, al hacer clic, se abrirá una ventana con opciones de proyecto. En este caso, debe seleccionarse "App de iOS" ya que la aplicación estará destinada a iPhone y iPad. A continuación, se asignará un nombre, se definirá el tipo de interfaz, el lenguaje a utilizar, entre otros datos, además de especificar la ubicación del proyecto.
![](imagenes/appios.png)
![](imagenes/nameApp.png)
![](imagenes/ubiApp.png)
Cuando se termina la creación del proyecto, se muestra el entorno con el que trabaja Xcode, aquí podemos observar las diferentes áreas con las que se trabaja cuando se desarrolla una app para iOS.
Una vez completada la creación del proyecto, se mostrará el entorno de trabajo de Xcode, que permite visualizar las áreas involucradas en el desarrollo de una app para iOS.
![](imagenes/entornoXcode.png)
Teniendo listo el proyecto, se hará la descarga del framework de ResearchKit, que es la parte principal de este repositorio, por lo tanto, se hará la descarga del repositorio en ZIP del Framework ResearchKit alojado en [GitHub](https://github.com/ResearchKit/ResearchKit), donde en el botón que dice **Code** se dará click y posteriormente en **Download ZIP**
Con el proyecto listo, el siguiente paso es descargar el framework de ResearchKit, la parte central de este repositorio. Para ello, se descargará el repositorio en formato ZIP desde [GitHub](https://github.com/ResearchKit/ResearchKit), seleccionando el botón **Code** y luego **Download ZIP**.
### Integración de Frameworks
![](imagenes/descargaZIP.png)
Al descargarse el Repositorio en ZIP, podremos hacer uso del Framework, y para importarlo solo se tiene que arrastrar el archivo *ResearchKit.xcodeproj* al navegador de proyectos solo por debajo del proyecto general.
Después de descargar el repositorio en ZIP, se puede acceder al framework. Para importarlo, basta con arrastrar el archivo *ResearchKit.xcodeproj* al navegador de proyectos, ubicándolo justo debajo del proyecto general.
![](imagenes/ArrasRK.png)
![](imagenes/ArrasRK2.png)
para posteriormente activar los Frameworks de Researchkit; se dirjirá a el navegador de proyectos, en el proyecto principal, en el target unico que está, se dará hacia abajo hasta el menú *Frameworks, Libraries, and Embedden Content* sobre el botón "+" y ahí se seleccionará los frameworks de Researchkit.
Para activar los frameworks de ResearchKit, se debe dirigir al navegador de proyectos, seleccionar el proyecto principal y, en el único target disponible, desplazarse hasta el menú *Frameworks, Libraries, and Embedden Content*. En este menú, seleccionando el botón "+", se eligen los frameworks de ResearchKit.
![](imagenes/frameRK1.png)
![](imagenes/frameRK2.png)
Estos 3 frameworks serán los encargados de hacer que nuestra aplicación funcionecon las actividades, formularios y actividades de esta herramienta de Apple.
Estos tres frameworks permiten que la aplicación funcione con las actividades, formularios y tareas que ofrece esta herramienta de Apple.
### Estructura de la aplicación
Para comenzar la creación de la aplicación, en el archivo *Main.storyboard* es necesario crear dos controladores de vista adicionales: uno para el inicio, otro para el consentimiento y un tercero para las actividades.
Para agregar estos controladores de vista, se abre el archivo *Main* en el navegador de proyectos. En la esquina superior derecha aparecerá un signo "+", en el cual se hace clic y se escribe **View Controller**. Luego, se arrastra dos veces hacia la ventana de visualización para crear los controladores de vista adicionales.
![](imagenes/vc1.png)
![](imagenes/vc2.png)
![](imagenes/vc3.png)
![](imagenes/vc4.png)
![](imagenes/vc5.png)
En uno de los controladores de vista, se necesita añadir un botón para "unirse al estudio", ya que antes de comenzar a recolectar datos es esencial contar con el consentimiento de los usuarios. Para añadir el botón, se hace clic en el "+" de la esquina superior, y se arrastra el elemento "button" hacia el controlador de vista deseado.
![](imagenes/bt1.png)
![](imagenes/bt2.png)
A continuación, el botón puede posicionarse, y su texto, tamaño, colores y otros elementos se modifican desde el inspector, ubicado en la esquina superior derecha.
![](imagenes/bt3.png)
Para mantener la posición del botón en diferentes dispositivos, se añaden *constraints*. Esto se logra haciendo clic en el icono de un cuadro con cotas, ubicado en la parte inferior, para acceder y configurar las restricciones de acuerdo con las necesidades, como se muestra en la imagen siguiente:
![](imagenes/constrains.png)
Es necesario asignar una clase a cada controlador de vista: **IntroViewController**, **ConsentViewController** y **TaskViewController**. El controlador principal, donde se encuentra la flecha de navegación, es el *IntroViewController*; el que contiene el botón para unirse al estudio es el *ConsentViewController*, y el controlador en blanco es el *TaskViewController*. Los identificadores se asignan seleccionando cada controlador de vista, luego haciendo clic en el menú del inspector en el icono de identificación y modificando la clase con el nombre correspondiente.
![](imagenes/ident.png)
Cuando cada controlador ha sido asignado a su clase correspondiente, el menú de controladores de vista se verá de la siguiente manera:
![](imagenes/identAll.png)
De esta manera, se tiene la base estructurada para el desarrollo de la aplicación.
Para la unión de los diferentes controladores de vista se hará uso de segues o transiciones entre vistas de la aplicación, por ello, desde **IntroViewController** se arrastra con click derecho la *Vista* a los 2 ViewController restantes y al soltar, se selecciona el segue manual *Custom*.
![](imagenes/segue1.png)
![](imagenes/segue2.png)
Se realiza para los 2 ViewControllers y quedaría de la siguiente manera:
![](imagenes/seguef.png)
Los segues de igual manera deben tener un identificador, por ello, al selecionar un segue, se abrirá el Inspector y los identificadores a poner será *toConsent* y *toTasks* para cada uno de los segues creados anteriormente.
![](imagenes/identSegue.png)
Para cada controlador de vistas se necesita crear un archico de tipo **Cocoa Touch Class** con el mismo nombre que la clase, para crear un archivo de este tipo, en la pestaña *File* hay una opción de *New* y se selecciona la opción *File from Template...*.
![](imagenes/newfile.png)
Se desplegará un menú y se seleccionará la opción Cocoa Touch Class, asegurandose que esté en iOS.
![](imagenes/type.png)
Pedirá una clase, se pone las creadas en los controladores de vista con subclase UIViewController.
![](imagenes/type2.png)
y se guardará en la misma ruta del archivo, como viene predeterminado.
![](imagenes/savefile.png)
al termino de los 3 archivos, deberálucir de la siguiente forma:
![](imagenes/allVC.png)

@ -1,24 +1,86 @@
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="13122.16" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="23094" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
<device id="retina6_12" orientation="portrait" appearance="light"/>
<dependencies>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13104.12"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="23084"/>
<capability name="Named colors" minToolsVersion="9.0"/>
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
<capability name="System colors in document resources" minToolsVersion="11.0"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--View Controller-->
<!--Intro View Controller-->
<scene sceneID="tne-QT-ifu">
<objects>
<viewController id="BYZ-38-t0r" customClass="ViewController" customModuleProvider="target" sceneMemberID="viewController">
<placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
<viewController id="BYZ-38-t0r" customClass="IntroViewController" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<color key="backgroundColor" xcode11CocoaTouchSystemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
<viewLayoutGuide key="safeArea" id="6Tk-OE-BBY"/>
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
</view>
<connections>
<segue destination="B7d-i6-kuM" kind="custom" identifier="toConsent" id="TbN-Vd-3aC"/>
<segue destination="JfP-LC-owM" kind="custom" identifier="toTasks" id="nyl-qu-GeR"/>
</connections>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="-1260" y="56"/>
</scene>
<!--Task View Controller-->
<scene sceneID="cjp-pL-hfK">
<objects>
<viewController id="JfP-LC-owM" customClass="TaskViewController" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="ICa-LQ-fV8">
<rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<viewLayoutGuide key="safeArea" id="juQ-Ke-iUj"/>
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
</view>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="5pU-sM-lm9" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="-211" y="456"/>
</scene>
<!--Consent View Controller-->
<scene sceneID="acU-c7-nQQ">
<objects>
<viewController id="B7d-i6-kuM" customClass="ConsentViewController" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="qDt-sx-u4m">
<rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="pj0-Qw-cYF">
<rect key="frame" x="60" y="191" width="273" height="35"/>
<fontDescription key="fontDescription" type="system" pointSize="23"/>
<inset key="imageEdgeInsets" minX="0.0" minY="0.0" maxX="2.2250738585072014e-308" maxY="0.0"/>
<state key="normal" title="Unirse al estudio">
<color key="titleColor" name="AccentColor"/>
</state>
</button>
</subviews>
<viewLayoutGuide key="safeArea" id="Sil-rc-UTE"/>
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
<constraints>
<constraint firstItem="pj0-Qw-cYF" firstAttribute="top" secondItem="Sil-rc-UTE" secondAttribute="top" constant="132" id="3HR-ak-QGq"/>
<constraint firstItem="Sil-rc-UTE" firstAttribute="trailing" secondItem="pj0-Qw-cYF" secondAttribute="trailing" constant="60" id="DQQ-ho-ugA"/>
<constraint firstItem="pj0-Qw-cYF" firstAttribute="leading" secondItem="Sil-rc-UTE" secondAttribute="leading" constant="60" id="RAH-5B-qP1"/>
<constraint firstItem="Sil-rc-UTE" firstAttribute="bottom" secondItem="pj0-Qw-cYF" secondAttribute="bottom" constant="592" id="Xi6-DA-aF0"/>
</constraints>
</view>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="Lae-n8-OZT" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="-211.4503816793893" y="-184.50704225352115"/>
</scene>
</scenes>
<resources>
<namedColor name="AccentColor">
<color red="0.0" green="0.46000000000000002" blue="0.89000000000000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
</namedColor>
<systemColor name="systemBackgroundColor">
<color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</systemColor>
</resources>
</document>

@ -0,0 +1,29 @@
//
// ConsentViewController.swift
// RK-Journals
//
// Created by Juan David Lopez Regalado on 11/11/24.
//
import UIKit
class ConsentViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
/*
// MARK: - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
// Get the new view controller using segue.destination.
// Pass the selected object to the new view controller.
}
*/
}

@ -0,0 +1,29 @@
//
// IntroViewController.swift
// RK-Journals
//
// Created by Juan David Lopez Regalado on 11/11/24.
//
import UIKit
class IntroViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
/*
// MARK: - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
// Get the new view controller using segue.destination.
// Pass the selected object to the new view controller.
}
*/
}

@ -0,0 +1,29 @@
//
// TasksViewController.swift
// RK-Journals
//
// Created by Juan David Lopez Regalado on 11/11/24.
//
import UIKit
class TasksViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
/*
// MARK: - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
// Get the new view controller using segue.destination.
// Pass the selected object to the new view controller.
}
*/
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 311 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 510 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 335 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 377 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 275 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 119 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 240 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 605 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 581 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 121 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 211 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 319 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 321 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 495 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 225 KiB

Loading…
Cancel
Save