Crear una simple webapp para OSX

Si dispones de un sitio web y tienes la necesidad de crear una aplicación para OSX basada en dicho sitio no es necesario complicarse en exceso con ella, puede bastar simplemente con crear una App con una WebView.

Vamos pues a crear una simple webapp para OSX con Xcode y unos sencillos pasos.

Paso 1, abriendo Xcode. Si no lo tienes instalado puedes hacerlo desde la App Store.

Crea un nuevo proyecto y selecciona OSX > Application > Cocoa Application

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/09/Abriendo-Xcode.png” alt=”Abriendo Xcode” align=”center” lightbox=”off” caption=”Abriendo Xcode” captionposition=”center”]

Dale un nombre, en mi caso la llamaré ‘Toni DG’.

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/09/Las-opciones-para-nuestro-proyecto.png” alt=”Las opciones para nuestro proyecto” align=”center” lightbox=”off” caption=”Las opciones para nuestro proyecto” captionposition=”center”]

Paso 2, importando el framework WebKit.

Haz click en (+) dentro de la sección Linked Frameworks and Libraries, haz una búsqueda con el texto ‘webkit‘ y añádelo.

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/09/Importando-frameworks.png” alt=”Importando frameworks” align=”center” lightbox=”off” caption=”Importando frameworks” captionposition=”center”]

Paso 3, empezar a codificar.

No te asustes por el título del paso, no hay nada complicado.

Haz click sobre AppDelegate.m en la barra lateral izquierda y añade la siguiente linea debajo de #import “AppDelegate.h”, Esto hará una llamada al framework WebView importado anteriormente, puedes ver la captura de pantalla.

#import <WebKit/WebKit.h>

Tras esto añade la siguiente línea entre @property (weak) IBOutlet NSWindow *window;@end para crear una variable objeto webview.

@property (strong) IBOutlet WebView *webview;

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/09/Empezar-a-codificar.png” alt=”Empezar a codificar” align=”center” lightbox=”off” caption=”Empezar a codificar” captionposition=”center”]

Paso 4, diseñando la App.

Haz click en MainMenu.xib y selecciona y selecciona el ícono con el nombre de tú App a la izquierda.

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/09/Vista-de-la-App.png” alt=”Vista de la App” align=”center” lightbox=”off” caption=”Vista de la App” captionposition=”center”]

Ahora presiona CMD + ALT + 0 para abrir las utilidades en la barra derecha (si no las tienes ya abiertas) y busca Webview dentro del ícono Show the Object Library. Ahora arrastralo a tú ventana, puedes centrarlo utilizando las guías de ayuda.

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/09/Insertando-webview-en-la-vista.png” alt=”Insertando webview en la vista” align=”center” lightbox=”off” caption=”Insertando webview en la vista” captionposition=”center”]

No necesitas escalar el objeto más tarde lo haremos mediante código.

Ahora haz click derecho sobre el ícono App Delegate (a la izquierda), se abrirá una ventana emergente. Apunta el ratón sobre el círculo (cuando aún no tienes el puntero encima) o (+) cuando ya lo tienes dentro, de la sección Outlets > Webview. Ahora arrástralo hasta el objeto en el centro de la vista.

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/09/Seleccionado-la-webview.png” alt=”Seleccionando la webview” align=”center” lightbox=”off” caption=”Seleccionando la webview” captionposition=”center”]

Paso 5, volviendo al código.

Después de acabar con el diseño vamos a codificar algunas cosas.

Vuelve a seleccionar AppDelegate.m en la barra izquierda e inserte el siguiente código dentro de – (void)applicationDidFinishLaunching:(NSNotification *)aNotification {

NSURL*url=[NSURL URLWithString:@”https://tonidg.es"];
NSURLRequest*request=[NSURLRequest requestWithURL:url];
[[_webview mainFrame] loadRequest:request];

La primera parte carga la URL en la webview (cámbiala poniendo la dirección de tú sitio). Ten especial cuidado con las comillas dobles en el momento de hacer un copiar y pegar.

Seguidamente inserta la siguiente línea.

[self.window setContentView:self.webview]; // webview == tamaño de ventana

Esta segunda parte hace que tú webview aparezca a tamaño completo dentro de la ventana de la App.

Por último y a continuación inserta:

[self.window setCollectionBehavior:
NSWindowCollectionBehaviorFullScreenPrimary]; // Permitir pantalla completa

Esta tercera parte permite a la App redimensionar a pantalla completa.

Ahora deberías tener algo parecido a la siguiente captura de pantalla.

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/09/Todo-el-codigo.png” alt=”Todo el código” align=”center” lightbox=”off” caption=”Todo el código” captionposition=”center”]

 

Por último vamos a cambiar el tamaño por defecto de la ventana de la App, dirígete a MainMenu.xib en la barra lateral izquierda, haz click derecho y selecciona Open As > Source Code.

Navega al final del código y busca la línea <rect key=”contentRect” x=”335″ y=”390″ width=”480″ height=”360″/>

Cámbiala por:

<rect key=”contentRect” x=”0" y=”0" width=”1200" height=”700"/>

Los parámetros x e y dan las coordenadas de la parte superior izquierda de la ventana y width y height el ancho y alto de esta.

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/09/Cambiando-el-tamanio-de-la-ventana-de-la-App.png” alt=”Cambiando el tamaño de la ventana de la App” align=”center” lightbox=”off” caption=”Cambiando el tamaño de la ventana de la App” captionposition=”center”]

 

Y esto es todo, pulsaremos el ícono Play de la barra de herramientas de Xcode y podremos ver nuestra App.

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/09/La-app.png” alt=”La app” align=”center” lightbox=”off” caption=”La app” captionposition=”center”]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *