Creación de ViewController(files, storyboards)
@ -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.
|
||||
}
|
||||
*/
|
||||
|
||||
}
|
After Width: | Height: | Size: 57 KiB |
After Width: | Height: | Size: 311 KiB |
After Width: | Height: | Size: 510 KiB |
After Width: | Height: | Size: 335 KiB |
After Width: | Height: | Size: 377 KiB |
After Width: | Height: | Size: 275 KiB |
After Width: | Height: | Size: 92 KiB |
After Width: | Height: | Size: 119 KiB |
After Width: | Height: | Size: 240 KiB |
After Width: | Height: | Size: 92 KiB |
After Width: | Height: | Size: 605 KiB |
After Width: | Height: | Size: 581 KiB |
After Width: | Height: | Size: 34 KiB |
After Width: | Height: | Size: 121 KiB |
After Width: | Height: | Size: 86 KiB |
After Width: | Height: | Size: 211 KiB |
After Width: | Height: | Size: 319 KiB |
After Width: | Height: | Size: 321 KiB |
After Width: | Height: | Size: 495 KiB |
After Width: | Height: | Size: 225 KiB |