|
| 1 | +--- |
| 2 | +title: Playground in native iOS apps |
| 3 | +slug: /guides/wordpress-native-ios-app |
| 4 | +description: WordPress Playground in native iOS apps |
| 5 | +--- |
| 6 | + |
| 7 | +<!-- |
| 8 | +## How to ship a real WordPress site in a native iOS app via Playground? |
| 9 | +
|
| 10 | +Blocknotes is the first iOS application that ran WordPress natively on iOS devices by leveraging WordPress Playground. Developed by [Ella van Durpe](https://profiles.wordpress.org/ellatrix/), a core committer for WordPress, Blocknotes represents a significant leap in the capabilities of mobile applications by utilizing WebAssembly to run WordPress without the need for a traditional PHP server. |
| 11 | +
|
| 12 | +This case study explores the features, technical implementation, and potential implications of Blocknotes for the future of mobile and web development. |
| 13 | +
|
| 14 | +**Important!** The current version of Blocknotes isn't running WordPress Playground anymore. Since the initial release, the app was rewritten to only use the WordPress block editor without the rest of WordPress. This case study covers the early versions of Blocknotes that opened an entire world of new possibilities for WordPress. |
| 15 | +--> |
| 16 | + |
| 17 | +## Como enviar um site WordPress real em um aplicativo iOS nativo via Playground? |
| 18 | + |
| 19 | +Blocknotes é o primeiro aplicativo iOS que executou WordPress nativamente em dispositivos iOS aproveitando o WordPress Playground. Desenvolvido por [Ella van Durpe](https://profiles.wordpress.org/ellatrix/), uma committer principal do WordPress, Blocknotes representa um salto significativo nas capacidades dos aplicativos móveis ao utilizar WebAssembly para executar WordPress sem a necessidade de um servidor PHP tradicional. |
| 20 | + |
| 21 | +Este estudo de caso explora os recursos, implementação técnica e implicações potenciais do Blocknotes para o futuro do desenvolvimento móvel e web. |
| 22 | + |
| 23 | +**Importante!** A versão atual do Blocknotes não está mais executando WordPress Playground. Desde o lançamento inicial, o aplicativo foi reescrito para usar apenas o editor de blocos do WordPress sem o resto do WordPress. Este estudo de caso cobre as versões iniciais do Blocknotes que abriram um mundo inteiro de novas possibilidades para o WordPress. |
| 24 | + |
| 25 | +<!-- |
| 26 | +## Blocknotes features |
| 27 | +
|
| 28 | +Blocknotes allows users to create and edit notes using the WordPress block editor. The notes are automatically saved as HTML files to the user's iCloud Drive and seamlessly synchronized across devices. |
| 29 | +--> |
| 30 | + |
| 31 | +## Recursos do Blocknotes |
| 32 | + |
| 33 | +Blocknotes permite aos usuários criar e editar notas usando o editor de blocos do WordPress. As notas são automaticamente salvas como arquivos HTML no iCloud Drive do usuário e sincronizadas perfeitamente entre dispositivos. |
| 34 | + |
| 35 | +<!-- |
| 36 | +## Technical Implementation |
| 37 | +
|
| 38 | +Blocknotes operated as a WebView running an HTML page where a WebAssembly version of PHP was running WordPress. That HTML page was packaged as a native iOS via [Capacitor](https://capacitorjs.com/). This setup allowed WordPress to function in environments traditionally not supported. |
| 39 | +
|
| 40 | +In [Blocknotes GitHub repository](https://github.com/blocknotes-org/blocknotes/tree/e08535883332be9a45a0c75b750c54a4e17f6748) you can review the last Playground-based release. Here are the most important parts: |
| 41 | +
|
| 42 | +- [A WordPress build](https://github.com/blocknotes-org/blocknotes/blob/e08535883332be9a45a0c75b750c54a4e17f6748/src/js/wp-6.2.data) (packaged as a `.data` file). |
| 43 | +- [Static WordPress assets](https://github.com/blocknotes-org/blocknotes/tree/e08535883332be9a45a0c75b750c54a4e17f6748/public). |
| 44 | +- [A WebAssembly build of PHP](https://github.com/blocknotes-org/blocknotes/tree/e08535883332be9a45a0c75b750c54a4e17f6748/node_modules/%40php-wasm/web) (via [@php-wasm/web](https://npmjs.com/package/@php-wasm/web)). |
| 45 | +- [A web worker running PHP and WordPress](https://github.com/blocknotes-org/blocknotes/blob/e08535883332be9a45a0c75b750c54a4e17f6748/src/js/worker.js). |
| 46 | +- [Hypernotes](https://wordpress.com/plugins/hypernotes) WordPress plugin ([installed here](https://github.com/blocknotes-org/blocknotes/blob/e08535883332be9a45a0c75b750c54a4e17f6748/src/js/index.js#L160)) to turn wp-admin into a note-taking app. |
| 47 | +- A layer to [load WordPress posts from iOS files](https://github.com/blocknotes-org/blocknotes/blob/e08535883332be9a45a0c75b750c54a4e17f6748/src/js/index.js#L39) and [save changes as iOS files](https://github.com/blocknotes-org/blocknotes/blob/e08535883332be9a45a0c75b750c54a4e17f6748/src/js/save-data.js). |
| 48 | +--> |
| 49 | + |
| 50 | +## Implementação Técnica |
| 51 | + |
| 52 | +Blocknotes operava como uma WebView executando uma página HTML onde uma versão WebAssembly do PHP estava executando WordPress. Essa página HTML foi empacotada como um iOS nativo via [Capacitor](https://capacitorjs.com/). Esta configuração permitiu que o WordPress funcionasse em ambientes tradicionalmente não suportados. |
| 53 | + |
| 54 | +No [repositório GitHub do Blocknotes](https://github.com/blocknotes-org/blocknotes/tree/e08535883332be9a45a0c75b750c54a4e17f6748), você pode revisar o último lançamento baseado no Playground. Aqui estão as partes mais importantes: |
| 55 | + |
| 56 | +- [Uma build do WordPress](https://github.com/blocknotes-org/blocknotes/blob/e08535883332be9a45a0c75b750c54a4e17f6748/src/js/wp-6.2.data) (empacotada como um arquivo `.data`). |
| 57 | +- [Recursos estáticos do WordPress](https://github.com/blocknotes-org/blocknotes/tree/e08535883332be9a45a0c75b750c54a4e17f6748/public). |
| 58 | +- [Uma build WebAssembly do PHP](https://github.com/blocknotes-org/blocknotes/tree/e08535883332be9a45a0c75b750c54a4e17f6748/node_modules/%40php-wasm/web) (via [@php-wasm/web](https://npmjs.com/package/@php-wasm/web)). |
| 59 | +- [Um web worker executando PHP e WordPress](https://github.com/blocknotes-org/blocknotes/blob/e08535883332be9a45a0c75b750c54a4e17f6748/src/js/worker.js). |
| 60 | +- Plugin WordPress [Hypernotes](https://wordpress.com/plugins/hypernotes) ([instalado aqui](https://github.com/blocknotes-org/blocknotes/blob/e08535883332be9a45a0c75b750c54a4e17f6748/src/js/index.js#L160)) para transformar wp-admin em um aplicativo de anotações. |
| 61 | +- Uma camada para [carregar posts do WordPress de arquivos iOS](https://github.com/blocknotes-org/blocknotes/blob/e08535883332be9a45a0c75b750c54a4e17f6748/src/js/index.js#L39) e [salvar alterações como arquivos iOS](https://github.com/blocknotes-org/blocknotes/blob/e08535883332be9a45a0c75b750c54a4e17f6748/src/js/save-data.js). |
| 62 | + |
| 63 | +<!-- |
| 64 | +## Building your own iOS app with WordPress Playground |
| 65 | +
|
| 66 | +Although Blocknotes proved releasing a WordPress-based iOS app is possible, this is still a highly exploratory area. There are no established workflows, libraries, or knowledge bases. |
| 67 | +
|
| 68 | +The best documentation we have is the Blocknotes repository. Use it as a reference and a starting point for exploring your new app. Review the key components like the WebAssembly build of PHP, the integration of the WordPress block editor, and how web workers are utilized to run WordPress efficiently. By dissecting these elements, you can gain insights into building your own iOS app with WordPress Playground, pushing the boundaries of what's possible with mobile web applications. |
| 69 | +
|
| 70 | +As you navigate this innovative space, share your findings and challenges with the Playground team and the broader WordPress community. Publishing your learnings will not only aid in your development but also contribute to a collective knowledge base, driving forward the future of WordPress on mobile. |
| 71 | +--> |
| 72 | + |
| 73 | +## Construindo seu próprio aplicativo iOS com WordPress Playground |
| 74 | + |
| 75 | +Embora Blocknotes tenha provado que lançar um aplicativo iOS baseado em WordPress é possível, esta ainda é uma área altamente exploratória. Não há fluxos de trabalho, bibliotecas ou bases de conhecimento estabelecidas. |
| 76 | + |
| 77 | +A melhor documentação que temos é o repositório do Blocknotes. Use-o como referência e ponto de partida para explorar seu novo aplicativo. Revise os componentes-chave como a build WebAssembly do PHP, a integração do editor de blocos do WordPress e como os web workers são utilizados para executar WordPress eficientemente. Ao dissecar esses elementos, você pode obter insights sobre como construir seu próprio aplicativo iOS com WordPress Playground, expandindo os limites do que é possível com aplicações web móveis. |
| 78 | + |
| 79 | +Conforme você navega neste espaço inovador, compartilhe suas descobertas e desafios com a equipe do Playground e a comunidade WordPress mais ampla. Publicar seus aprendizados não apenas ajudará no seu desenvolvimento, mas também contribuirá para uma base de conhecimento coletiva, impulsionando o futuro do WordPress no mobile. |
| 80 | + |
| 81 | +<!-- |
| 82 | +## Potential and the future |
| 83 | +
|
| 84 | +Blocknotes paves the way for a new generation of applications that are more accessible, flexible, and powerful. |
| 85 | +
|
| 86 | +Once the app-building workflows mature, we may see an automated pipelines for packaging Playground sites as iOS apps. It would make it extremely easy to run the same codebase on the server, in the browser, and as a mobile app. |
| 87 | +
|
| 88 | +By working together and sharing our findings, we can push the boundaries of what's possible with WordPress and mobile app development |
| 89 | +--> |
| 90 | + |
| 91 | +## Potencial e o futuro |
| 92 | + |
| 93 | +Blocknotes abre caminho para uma nova geração de aplicações que são mais acessíveis, flexíveis e poderosas. |
| 94 | + |
| 95 | +Uma vez que os fluxos de trabalho de construção de aplicativos amadureçam, podemos ver pipelines automatizados para empacotar sites do Playground como aplicativos iOS. Isso tornaria extremamente fácil executar o mesmo código base no servidor, no navegador e como um aplicativo móvel. |
| 96 | + |
| 97 | +Trabalhando juntos e compartilhando nossas descobertas, podemos expandir os limites do que é possível com WordPress e desenvolvimento de aplicativos móveis. |
0 commit comments