hola, mi nombre es stuart lynch y en este video estoy muy complacido de poder ofrecerle un tutorial sobre cómo crear una aplicación de barra de menú mac. Esta es una aplicación que se ejecuta desde y está adjunta a un ícono en la barra de menú Es probable que tenga muchos de estos en este momento en su barra de menú. Tengo tantos que uso una aplicación llamada bartender para administrarlos y tengo un monitor de 39 pulgadas, entonces, ¿qué vamos a construir? Soy un anciano y mi hijo gime.
Cuando le digo una broma patética, estos son comúnmente conocidos como bromas de papá, bueno para mí y mis viejos amigos , nos hace sonreír, así que quiero obtener una nueva broma cada vez que lo desee. Encontré este sitio web alojado por gillian gilsing. un estudiante holandés y desarrollador web que genera una broma al azar tiene una API abierta que nos permite obtener una broma de una de cuatro categorías diferentes la API es una API json para que podamos usar nuestras habilidades rápidas para crear una estructura codificable que podamos use los nuevos métodos asincrónicos de ios 15 para obtener los datos y luego decodificarlos para presentarlos él bromea ahora voy a tomar prestado el código que usé en otra serie que preparé para chris y habrá un enlace en la descripción el objetivo principal de este video es crear una aplicación de barra de menú y esto es lo que queremos va a crear cuando construimos y ejecutamos nuestra aplicación, verá un nuevo código con el ícono de chris en la barra de menú cuando toca el menú por primera vez, se le presenta un nuevo chiste de la categoría de chistes de papá, puede tocar en él una vez más y se genera otro chiste al tocar cualquiera de los otros botones generará y presentará un chiste de esa categoría y guardará su selección para que cuando regrese al menú la próxima vez que el chiste generado sea de esa categoría esta vista aquí hay una vista simple creada con una interfaz de usuario rápida, además, aunque hay algunos otros elementos de menú, hay un menú acerca de que genera la información acerca de su aplicación y recupera información de info.plist para mostrar en la pantalla, incluido un ícono de aplicación y nosotros estamos presentando algunas costumbres adicionales información aquí que nos permite proporcionar créditos a aquellas personas cuyo conocimiento ha ayudado en la creación de esta aplicación hay otro menú llamado código con chris que simplemente abre su navegador web y va al código con el sitio web de chris y finalmente está el menú para salir con un atajo de tecla de comando que podemos usar para salir de la aplicación y eliminarla de nuestra barra de menú, eso es lo que vamos a construir y también le mostraré cómo puede certificar su aplicación para que pueda pasarla a otros para que puedan instalarlo sin tener que pasar por la tienda de aplicaciones si está interesado siga viendo bien lo primero que debemos hacer es crear una nueva aplicación lo importante es que seleccione la plantilla mac os y la aplicación de la aplicación haga clic en siguiente y llámalo papá bromea asegurándose de que la interfaz sea rápida ui en el idioma haga clic rápido en siguiente y guárdelo en su propia ubicación de elección como siempre para mí creo un repositorio git esto es importante para mí porque en realidad codifico th La siguiente parte del video primero en preparación y luego vuelvo a mi compromiso de clase y lo codifico nuevamente mientras grabo este video .
He creado una serie de recursos para este tutorial para acelerar un poco las cosas y puede encontrarlos y descargarlos. ellos desde el enlace en la descripción tengo este icono de la aplicación para que pueda ir a la carpeta de activos de mi aplicación y eliminar la carpeta app.icon aquí y reemplazarlo con el de esa carpeta de recursos es un código con el icono de chris y solo tiene los activos de mac, no los de ios, también tengo dos imágenes que usaremos primero es el padre, es decir, yo, así que arrástrelo y suéltelo en la carpeta de activos, esto creará una imagen 1x que está bien, aunque no es óptima en grande monitores, pero servirá aquí, el segundo es una imagen svg del código con la imagen de Chris y la usaremos para el ícono de la barra de menú, así que arrástrelo a la carpeta de activos también, pero para este elemento podemos cambiar la escala a una sola escala y lo hacemos revelando el inspector y cambiando la escala allí y finalmente, como mencioné, voy a obtener datos de la api, así que usaré un servicio de api que creé en esa serie nuevamente, los enlaces están en la descripción, así que agréguelo a su proyecto asegurándose de copiar elementos si es necesario y que el objetivo de bromas de tu padre está seleccionado, la mayor parte de la acción de nuestra aplicación ocurre en esta vista de broma única, así que lo que quiero hacer es cambiar el nombre de la vista de contenido para que sea vista de broma y podamos hacerlo a través del menú de refactorización no olvide cambiar también las vistas previas de la vista de contenido, así es como se verá nuestra vista, pero antes de hacerlo, debemos configurar nuestras categorías de chistes y para esto voy a crear una enumeración con un tipo asociado de cadena así que cree un nuevo archivo y llámelo tipo broma dentro de ese archivo cree una enumeración del mismo nombre con un tipo de cadena asociado tendrá cuatro casos, cada uno representando uno de los diferentes tipos o categorías y para la representación de cadena simplemente use una cadena más descriptiva, así que chuck norris, que es el nombre chuck space norris se dividirá broma de papá para ser bromas de papá al azar se escribirá en mayúsculas al azar y tu mamá será tu mamá espacial a continuación quiero tener otra propiedad computada que se llame tipo y que es una propiedad de cadena que será exactamente la igual que la representación de casos como una cadena para que podamos activarnos y luego dejaremos que xcode genere los casos para nosotros y devuelva lo mismo también porque estaremos decodificando desde la API, necesitaremos hacer que la enumeración se ajuste a codificable y también voy a recorrer cada caso para crear cuatro botones , así que también lo haré iterable, así que volvamos a esa API y veremos que la API proporciona un formato estándar en json cada solicitud devuelve un solo objeto json con cuatro pares de valores clave, uno para estado como int, uno para respuesta, uno para broma y otro para tipo, y todos son cadenas , por lo que podemos volver atrás y crear una estructura llamada broma que tendrá estas cuatro propiedades y como siempre que esté marcado como codificable, podemos n decodificar a un objeto de ese tipo, así que volveremos a xcode y crearemos ese nuevo archivo llamado broma dentro, crearemos una nueva estructura llamada broma y la ajustaremos al protocolo codificable, luego crearemos esas cuatro propiedades y desde solo estaremos leyendo y no actualizando estas propiedades, todas pueden estar en el estado como mencioné como una respuesta int como una cadena de broma como una cadena y escribir como una cadena, bueno, ahora tenemos suficiente información para codificar la vista de broma y realmente pruébelo en el lienzo ahora la vista de broma necesitará tres propiedades, una para la broma real, por lo que esta era una propiedad de estado de cadena que llamaré cadena de broma y la inicializaremos primero simplemente diciendo que no hay ninguna broma disponible mientras buscamos nuestra broma, queremos mostrar una vista de progreso giratorio para que podamos mostrar esto u ocultarlo usando una propiedad de estado booleano, así que llamémoslo buscar e inicializarlo como falso y finalmente quiero poder recordar mi última categoría seleccionada bien puedo use el almacenamiento de aplicaciones para eso y asígnele un tipo de chiste clave y declare una variable con el mismo nombre que el tipo de chiste y establezca de forma predeterminada el caso de chiste de papá, de modo que la primera vez que se inicie la aplicación obtendrá un chiste de la categoría de chiste de papá para la vista, entonces yo quiero reemplazar el contenido del cuerpo con un v-stack ahí adentro quiero un h-stack vamos a cambiar esa alineación del h-stack para centrarnos en el lado de la mano quiero mostrar esa imagen del padre yo estableceré es redimensionable y luego configura un marco para que sea de 60 por 60.
A la derecha de eso, quiero una pila v con cuatro botones para cada una de nuestras cuatro categorías diferentes o casos de enumeración y, debido a que es iterable, podemos usar un para cada ciclo en nuestro tipo de broma puntea todos los casos siempre que especifiquemos la identificación como propia, esto nos proporciona un elemento que podemos reiterar, así que voy a crear un botón y la etiqueta será una vista de texto que muestra el valor sin procesar del elemento ahora i parece estar recibiendo un error aquí, no reconoce el tipo de broma, oh, veo que tengo un error tipográfico en la definición de enumeración así que permítanme arreglar que eso es mejor para el color de primer plano, que es el color del texto en el botón si el elemento es el mismo que nuestro tipo de broma de propiedad almacenada, entonces lo haremos rojo ; de lo contrario, cambiaremos el color al primario.
Color También voy a configurar el marco de toda la pila en V para que tenga una altura de 130. Ahora, si buscamos un nuevo chiste, queremos mostrar una vista de progreso; de lo contrario, se mostrará una vista de texto usando nuestra cadena de chiste buscado. y en caso de que sea demasiado largo para caber, podemos establecer un factor de escala mínimo de 0.5 , empujémoslo todo hacia la parte superior de la vista usando un espaciador y luego agreguemos algo de relleno . También voy a establecer el marco de nuestra vista previa en se parecerá más a lo que voy a tener en nuestro menú, así que voy a configurar el marco aquí para que tenga un ancho de 225 y una altura de 225 para obtener el json, déjame volver al sitio web y veo que tienen Aquí hay una función asíncrona.
Esto no es rápido, pero puedo capturar la cadena de URL, así que déjame hacer eso y copiarlo en mi portapapeles en nuestra vista de broma. Voy. para crear una nueva función llamada get joke que tiene un parámetro y ese es el tipo que es una cadena y esta será una función asíncrona, pegaré esa url copiada y cambiaré las comillas simples a comillas dobles y usaré interpolación de cadenas para el tipo si revisamos los servicios api obtener la función json que creamos en otra serie, veo que buscará y decodificará el json de forma asíncrona y devolverá algún tipo y tendremos que especificar que es una broma si hay un error, arroja un error al usar un error de api y ese error de api tiene una cadena de error de descripción localizada que podemos usar , por lo que ahora podemos crear una instancia de esa clase de servicio de api y puedo pasar la URL como la cadena antes de buscar sin embargo, podemos alternar el booleano de búsqueda para que la vista de progreso comience a girar y luego podemos usar un bloque diferido para que cuando se complete esta búsqueda del servicio api , vuelva a alternar y elimine ese control giratorio ahora ya que la función get json es una sincrónico y puede arrojar un error, podemos usar un bloque do catch, dejaremos que la broma de tipo broma sea el resultado de intentar y esperar a que el servicio api obtenga el resultado json cuando se complete, estableceremos la cadena de broma nuestra propiedad estatal para que sea la propiedad de broma de los chistes decodificados y luego, si hay un error, simplemente podemos configurar esa cadena de broma para que sea la descripción localizada de los errores ahora, cada vez que aparece la vista, podemos usar la función de tarea para hacer que json pase el tipo de broma y esperarlo desde también es asincrónico cuando tocamos el botón para cambiar el tipo, estableceremos el tipo de broma en la propiedad de tipo de ese tipo y luego crearemos una unidad de trabajo llamada tarea que nuevamente esperará a que regrese el json para ese tipo si reanudo el lienzo ahora veo que hay un error en nuestra cadena y este es un error de seguridad de transporte y eso significa que estamos usando http en lugar de https , afortunadamente, esta URL también puede ser https, así que puedo resolver ese problema ahora mismo produce otro error diciendo que el nombre de host podría no se encuentra y creo que eso se debe a que estamos en un espacio aislado y dado que esto no se enviará a la tienda de aplicaciones, puedo ir a los derechos y cambiar esto ahora mismo para que sea no si vuelvo a la vista de broma estoy obtener una broma si hago clic en el botón de vista previa a diferencia de ios , una vista previa de mac genera una nueva ventana que puedo mostrar y puedo tocar en todas las diferentes categorías para obtener nuevas bromas perfectas, ahora es el momento de mover esta vista a nuestro menú en orden para crear una aplicación de barra de menú, necesitaremos crear un menú mac y este es un menú ns y debemos hacer esto cuando la aplicación se inicie en el delegado de la aplicación, bueno, aún no tenemos uno, pero lo haremos.
Primero, creemos una clase que generará ese menú que muestra nuestra vista de broma personalizada, así que cree un nuevo archivo y llámelo menú de aplicación, importe la interfaz de usuario rápida , cree una clase llamada menú de aplicación que se ajuste al objeto ns , luego cree una propiedad llamada menú e inicialícelo como un ns objeto de menú a continuación, cree una función a la que podamos llamar cuando obtengamos cada cosa configurada en nuestro delegado de aplicación que agregará todos nuestros elementos de menú en este momento, solo tendremos uno y llamémoslo crear menú y devolverá nuestro menú ns completo con todos sus elementos dentro crear una instancia de vista de broma a continuación, cree otra propiedad llamada vista superior que es un controlador de alojamiento ns donde la vista raíz es nuestra vista de broma, por lo que esta será la parte superior de nuestra aplicación en nuestra barra de menú, por lo que configuraremos el tamaño del marco de la vista de vistas superiores para que sea un tamaño cg de 225 por 225 y ese fue el tamaño de marco que usamos en nuestra vista previa recuerde que a continuación crearemos un elemento de menú personalizado y lo inicializaremos como un elemento de menú ns estableceremos la vista de este elemento de menú en la vista superior ver y ahora necesitaremos agregar este elemento al menú, voy a seguir esto con un separador porque tendré más elementos de menú para seguir y luego puedo devolver el menú , bueno, ahora tenemos que regresar a donde nuestro la aplicación se inicia y ya no se inicia en la vista de broma , en su lugar, tendremos que presentar esto como un elemento de la barra de menú o para esto, necesitaremos un delegado de aplicación, así que comience creando una clase de delegado de aplicación que se ajuste al objeto ns y al protocolo de delegado de aplicación ns .
Podemos declarar una variable de conjunto privado estática llamada instancia de tipo delegado de aplicación . A continuación, declaramos perezosamente un elemento de la barra de estado. variable que es un elemento nsstatusbar.system.status con una longitud que es una longitud variable y un elemento de estado a continuación, podemos dejar que el menú sea una instancia de nuestra nueva clase de menú de aplicación. Ahora podemos crear una aplicación que terminó la función de inicio primero.
Asignarse a la instancia de delegado de la aplicación; a continuación, podemos asignar la imagen de los botones del elemento de la barra de estado para que sea la imagen que tenemos en nuestra carpeta de activos. Esta es una imagen ns llamada ns image.name cwc para el código con chris , estableceremos la imagen del botón. posición para ser líder de imagen, entonces podemos crear el menú llamando a la función de menú de creación de menús de aplicaciones que acabamos de crear en nuestra estructura ahora tenemos que configurar el adaptador de delegado de aplicación ns para appdelegate.self para que sea nuestro appdelegate variable y luego podemos reemplazar el cuerpo simplemente con la configuración de una vista vacía, eso es todo, es hora de probar si ejecuta su aplicación ahora debería ver un nuevo código con el elemento de la barra de menú de chris y cuando lo toca, se muestra la rueda giratoria y luego se genera un chiste aleatorio de papá y se publica en la pantalla .
Puede hacer clic en cualquiera de los botones y se genera y presenta un chiste aleatorio en esa categoría . Hay un problema, aunque este ícono no solo está en la barra de menú, sino que también está en el dock y no lo necesitamos en el dock, tendremos que eliminarlo de allí, así que regrese a xcode y luego seleccione su objetivo y vaya a la pestaña info plist si pasa el cursor sobre el último elemento de la lista, haga clic en ese signo más y seleccione, entonces la aplicación es un elemento de la interfaz de usuario del agente, presione Intro y luego cambie el valor booleano de la entrada que acabamos de hacer a sí , la próxima vez que ejecute la aplicación, no habrá ningún ícono en el muelle , bueno, estamos llegando allí, pero aún así necesito hacer un par de cosas más y eso es agregar algo m elementos del menú mineral debajo de nuestra vista personalizada uno para mostrar un menú acerca de uno para llevar al usuario al código con el sitio web de chris y luego otro para salir de la aplicación, así que vamos a crear ese menú acerca de como deberían tener todas las aplicaciones de mac y lo hacemos creando un sobre el elemento de menú, pero necesitaremos una función que presente esto, por lo que dentro de nuestra clase de menú de aplicación, cree una función que esté marcada con el atributo del objeto c para que esté expuesta al tiempo de ejecución de Objective-C.
Llame a la función con un solo argumento, el remitente que es un elemento de menú ns y luego el cuerpo de esta función es simplemente nsapp dot order front estándar sobre el panel bueno, ahora podemos crear ese nuevo elemento de menú y ese es un elemento de menú ns que tiene tres propiedades para el título, será la cadena sobre Papá bromea diciendo que la acción será un selector que usará la función Acerca de que acabamos de crear y para esto no vamos a agregar ninguna tecla de comando equivalente, así que solo usaremos una cadena vacía ahora que podemos establecer el objetivo del elemento del menú Acerca de. ver Si y luego agregamos ese elemento al menú si ejecutamos la aplicación y elegimos chistes de papá en el elemento del menú que se muestra debajo de la vista personalizada, podemos ver el menú Acerca de que ha tomado su información directamente de la lista de información pero también quiero usar este panel para mostrar los créditos de los artículos que me ayudan a desarrollar esta aplicación en la carpeta de recursos hay un archivo de texto de créditos del menú acerca de que enumera los tres sitios web que he usado uno para la api uno para la inspiración y ayuda con el código y el último sobre lo que estamos haciendo aquí ahora, así que copie esta cadena aquí en su portapapeles, regrese a xcode y cree un nuevo archivo xcode y busque un archivo de texto enriquecido y llámelo exactamente créditos, asegúrese de usar una c mayúscula, puede pegue ese código allí y es simplemente un editor de texto enriquecido y seleccionaremos y centraremos ese código , eso es todo lo que tenemos que hacer si ejecuto la aplicación una vez más y selecciono el mismo elemento del menú , ahora verá los créditos, eso fue fácil.
Dos cosas más para ir a continuación quiero pr proporcionar un elemento de menú que abrirá safari y me llevará directamente al código con el sitio web de chris, así que, como antes, creemos la función primero , es como la anterior en la que le damos un atributo de objeto c llamaré a la función enlace abierto con ese remitente de argumento único que es un elemento de menú ns ahora voy a tener que dejar que el enlace sea el objeto representado por los remitentes. Todavía no lo tenemos, pero lo convertiremos en una cadena y luego puedo hacer una verificación de guardia. para ver si es una URL válida, de lo contrario, retrocederé y regresaré si lo es, entonces podemos llamar a la función de apertura nsworkspace.shareds para esa URL y abrirá el navegador web ahora, el elemento del menú ns se forma de la misma manera que el último, así que déjame copiarlo y puedo cambiar el nombre para que sea un elemento del menú de enlace web, el título que usaremos dirá código con chris y el selector será nuestra función de enlace abierto y dejaremos la clave equivalente para que esté vacío aquí también , estableceremos que el objetivo del elemento del menú del enlace web sea uno mismo, pero necesitamos ese complemento propiedad funcional ahora y ese es el objeto representado y para ese objeto representado podemos usar el código con la cadena del sitio web de chris y luego, una vez que lo tengamos, podemos agregarlo al menú ahora antes de probar, agreguemos un elemento final el menú de salida nuevamente primero la función y es otra función objetiva c a la que simplemente llamaremos quit de nuevo teniendo ese remitente de argumento único que es un elemento de menú ns en el cuerpo de la función, simplemente llamamos a la función de finalización de nsapps pasándose a sí mismo por el elemento de menú y luego copiemos el código de ese primer elemento del menú y cambiar los valores , lo llamaremos elemento del menú de salida, el título simplemente se cerrará y el selector es esa función de salida esta vez, sin embargo, voy a pasar una tecla de comando y usaré q este es el elemento del menú para salir y luego finalmente lo agregaremos al menú cuando probemos ahora vemos esos dos nuevos elementos del menú el último tiene la tecla de comando que se muestra primero si probamos el código con chris item se abre un navegador web y nos lleva directamente a th e codifique con el sitio web de chris y finalmente puedo usar el teclado equivalente al comando q para salir de la aplicación y eliminarlo de la barra de menú o simplemente seleccionarlo usar mi mouse una última cosa antes de que pueda compartir esto con otros tiene que autenticar el aplicación y eso significa que debe tener una cuenta de desarrollador de Apple para crear y certificar una aplicación.
Lo primero que debe hacer es desde el menú del producto, elija archivar . Una vez que se haya archivado, se mostrará la ventana del organizador. Elija su aplicación y haga clic en distribuir aplicación. de la lista y luego haga clic en siguiente, elija cargar para enviarlo al servicio notarial y luego vuelva a renunciar a la aplicación para su distribución, luego haga clic en siguiente una vez más y haga clic en cargar una vez que se haya cargado, puede cerrar esta ventana en breve obtendrá un correo electrónico de Apple como este que le dice que la aplicación ha sido notariada en el organizador, luego puede elegir su aplicación y hacer clic en exportar aplicación notariada, esta compilación ahora se puede compartir con otros puede comprimirlo y enviarlo para su distribución fue muy divertido armarlo y espero que tenga algunas ideas para sus propias aplicaciones de barra de menú muchas gracias a chris por alojar este video y gracias por verlo