Title: apps – Make WordPress Community --- # Tag Archives: apps [ ](https://profiles.wordpress.org/ctarda/) [Cesar Tardaguila](https://profiles.wordpress.org/ctarda/) 4:02 pm _on_ January 10, 2020 Tags: apps, [mobile ( 2 )](https://make.wordpress.org/community/tag/mobile/) # 󠀁[Proposal for an official WordCamp app for iOS, watchOS and tvOS](https://make.wordpress.org/community/2020/01/10/proposal-for-an-official-wordcamp-app-for-ios-watchos-and-tvos/)󠁿 ## **Summary** I have built a prototype of iOSiOS The operating system used on iPhones and iPads., iPadOS, watchOS and tvOS apps that I would like to propose to be adopted as the official WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. [Learn more](https://central.wordcamp.org/about/). apps for Apple platforms. ## **Context** Back in June 2019, Apple announced a new way of building user interfaces, called [ SwiftUI](https://developer.apple.com/xcode/swiftui/), in their annual[ developer’s conference](https://developer.apple.com/wwdc19/). Right after the announcement, I started playing with the new frameworks. My initial goal was to evaluate the new tools and the feasibility of using them in my daily practice, as well as having some fun chasing the new shiny thing. In order to really stretch the boundaries of the new tools offered by Apple, I decided to build something that could go beyond just a throwaway prototype, simple enough to be built fast, and complex enough to incorporate some challenges: something that would fetch data from a remote server, and render it on screen. The[ WordCamp Central API](https://make.wordpress.org/hosting/2017/02/10/building-a-machine-readable-list-of-wordpress-events/) seemed like a great candidate for this prototype. It provides structured, simple data, in a domain that I am familiar with and deeply care about. What started as a prototype has now reached a point where it provides enough functionality to be handed over to the community and released to the public. ## **Motivation and goals** The project started as a playground to learn and experiment about the language and frameworks that are soon going to become the standard building tools for IOS development. However, I soon realized that this could be more than just an internal mechanism for learning, as it started showing potential as an actual project, a project that could be shared and contributed back to the community. Currently, my goals for this project are: * Encouraging native iOS developers to interact with WordPress, building a contributor base for the official WordPress Apps. * Providing a playground to explore the strengths and limitations of the new frameworks released by Apple to all iOS developers and potential new best practices. * Giving an opportunity to native iOS devs to engage with [the WordPress Mobile team.](https://make.wordpress.org/mobile/) * Solving the current lack of an official WordCamp app for iOS. * Gathering and sharing anonymous usage data that could help when considering a reset of the app’s Android counterpart. ## **Project overview** The project provides, in a single codebase: * An iOS / iPadOS app. * A watchOS app. * A tvOS app. The functionality of the three apps is slightly different, as they adapt to the strengths (and limitations) of each platform, but the common denominator is: * A List of Upcoming Events. * A Details Screen with information related to a single event. * Data obtained from the WordCamp CentralWordCamp Central Website for all WordCamp activities globally. [https://central.wordcamp.org](https://central.wordcamp.org) includes a list of upcoming and past camp with links to each. APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.. The apps are implemented using stock controls, and provide basic integrations with the system, like Maps and directions, Voice Over, Dynamic Type, or Dark Mode. ### **iOS / iPadOS** This app provides the most functionality and maximizes information density. The app starts to a list of events: [⌊Screenshot of proposed WordCamp for iOS app displaying a list of events on a device in Dark Mode⌉⌊Screenshot of proposed WordCamp for iOS app displaying a list of events on a device in Dark Mode⌉[ Proposed WordCamp for iOS app. List of Events (Dark Mode) The list of events can be filtered: [⌊Proposed WordCamp app for iOS displaying a list of events filtered by the text" as", running on a device in Light Mode⌉⌊Proposed WordCamp app for iOS displaying a list of events filtered by the text "as", running on a device in Light Mode⌉[ Proposed WordCamp app for iOS displaying a filtered list of event. Light Mode And the details screen provides the most dense information of all the apps: location and dates, venue information, description, links to the event website, and the Twitter account. [⌊Proposed WordCamp app for iOS displaying detailed information about WordCamp Asia, including a map view, and information about dates and venue⌉⌊Proposed WordCamp app for iOS displaying detailed information about WordCamp Asia, including a map view, and information about dates and venue⌉[ Proposed WordCamp app for iOS. Details view, including map and venue information Tapping the map will open the venue location in Apple Maps. ### watchOS The watchOS app can be installed independently from the iOS app, and provides a list of upcoming events that can not be filtered:  [⌊Proposed WordCamp app for watchOS displaying a list of upcoming events⌉⌊Proposed WordCamp app for watchOS displaying a list of upcoming events⌉[ The proposed WordCamp app for watchOS, displaying a list of upcoming events and a details view with the location, dates, name of the venue, and a map that opens the default Maps app when tapped. * ![Proposed WordCamp app for watchOS displaying extended information for WordCamp Valladolid](https://make.wordpress.org/community/files/2020/01/IMG_6010.png) * The proposed WordCamp app for watchOS displaying extended information about a single event * ![The proposed WordCamp app for iOS displaying a map of the venue](https://make. wordpress.org/community/files/2020/01/IMG_6011.png) * The proposed WordCap for watchOS displaying the location of the venue in a map ### **tvOS** The tvOS app is a little behind in terms of functionality. At the moment, it provides a list of events, and a details screen with just the name, location,dates of the event, and the name and location of the venue. * [⌊Screenshot of the proposed WordCamp tvOS app displaying a list of upcoming events⌉⌊Screenshot of the proposed WordCamp tvOS app displaying a list of upcoming events⌉[ * Screenshot of the list of upcoming events displayed on an Apple TV * [⌊Screenshot of the proposed WordCamp tvOS app displaying a information for a single event⌉⌊Screenshot of the proposed WordCamp tvOS app displaying a information for a single event⌉[ * Screenshot of details screen for a single event ## **Proposal** The apps are reaching a point where they are almost ready for a public release, and the code is [available for review on GitHub](https://github.com/ctarda/WordCamp). I would like to propose that this project, and the associated apps, is adopted as the official WordCamp iOS/watchOS/tvOS apps, with the source code being moved to [https://github.com/wordpress-mobile/](https://github.com/wordpress-mobile/), and maintained by the Mobile team. ## Feedback Please share your feedback and thoughts about this proposal in a comment on this post! And if you have any design feedback or feature suggestions for the apps, I’d love to hear them! Thank you! +make.wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. [https://wordpress.org/](https://wordpress.org/)/mobile [#apps](https://make.wordpress.org/community/tag/apps/), [#mobile](https://make.wordpress.org/community/tag/mobile/) * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Fcommunity%2F2020%2F01%2F10%2Fproposal-for-an-official-wordcamp-app-for-ios-watchos-and-tvos%2F%23respond&locale=en_US) [ ](https://profiles.wordpress.org/marcusjwilson/) [marcusjwilson](https://profiles.wordpress.org/marcusjwilson/) 5:27 pm _on_ April 30, 2019 Tags: apps, [Improving WordCamp.org ( 17 )](https://make.wordpress.org/community/tag/improving-wordcamp-org/), [progressive web app ( 2 )](https://make.wordpress.org/community/tag/progressive-web-app/), [PWA ( 4 )](https://make.wordpress.org/community/tag/pwa/), [Regional WordCamps ( 4 )](https://make.wordpress.org/community/tag/regional-wordcamps/), [wordcamp ( 28 )](https://make.wordpress.org/community/tag/wordcamp/), [wordcamp sites ( 10 )](https://make.wordpress.org/community/tag/wordcamp-sites/), [WordCamps ( 247 )](https://make.wordpress.org/community/tag/wordcamps/)    # 󠀁[WordCamp PWA : An update](https://make.wordpress.org/community/2019/04/30/wordcamp-pwa-an-update/)󠁿 **_This is an update about plans to enhance the WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. [Learn more](https://central.wordcamp.org/about/). Europe website as a Progressive Web App for the 2019 Camp. Plans were first announced in this post in February 2019:_** [**https://make.wordpress.org/community/2019/02/13/wordcamp-pwa-plugin-proposal-and-designs/**](https://make.wordpress.org/community/2019/02/13/wordcamp-pwa-plugin-proposal-and-designs/)**** --- The organising teams from WordCamp Europe 2019 have been working on plans to enhance WordCamp websites by adopting Progressive Web App (PWA) features. The plan is to provide contextual information for attendees that is **served from** and **integrated with** the main WordCamp website, and which can be stored locally on the user’s devices for offline access. This would allow attendees to access key event information in a more immediate and flexible way. Initially, we had conceptualised this as an additional “layer” of content, which would load “over the top” of the existing Camp website for the duration of the event. After sharing these original plans, we received a lot of feedback and suggestions from the community. Thank you! There was much support for adding these progressive enhancements and contextual information for attendees. However, community members felt that progressive enhancements should be made to the existing site website and web pages themselves, rather than creating a separate and additional layer of content. Based on your feedback, we now intend to take a more integrated approach to this project. In practical terms, we will build on the great work of Weston Ruter and his Progressive Web App feature pluginFeature Plugin A plugin that was created with the intention of eventually being proposed for inclusion in WordPress Core. See [Features as Plugins](https://make.wordpress.org/core/handbook/about/release-cycle/features-as-plugins/), which brings PWA capabilities – including service workers and the web app manifest– to WordPress. Rather than create a new and separate “layer” of context based information over the WordCamp website, we will instead enhance key pages of the existing WordCamp site – for instance, the **Schedule **and **Speakers **pages – to be stored locally on a user’s device for offline access. In addition, we intend to create a new website homepage for the duration of the WordCamp event to display context based content on the Sessions that are “on now” and “up next”, alongside the latest Posts from the Camp website, to put this key information at the fingertips of attendees. #### WordCamp Alerts & Announcements There was initially some discussion of creating an **alerts** feed for important announcements at the Camp itself. During the feedback phase, a number of people felt this was unnecessary, overly complicated and could prove a barrier to wider adoption of the PWA functionality by other WordCamps. As a result, a decision has been made to use the existing Posts functionality from the WordPress installation for the news and alerts feed during the Camp. #### Visuals Below are some visuals of how the home page of the website might appear during the Camp itself. Whilst these designs here are specific to WCEUWCEU WordCamp Europe. The European flagship WordCamp event. 2019, the content would of course take on basic styles – fonts and colours – from its WordCamp site. [⌊Plans for the WordCamp Europe 2019 website homepage (mobile version)⌉⌊Plans for the WordCamp Europe 2019 website homepage (mobile version)⌉[ Plans for the WordCamp Europe 2019 website homepage (mobile version) [[ Plans for the WordCamp Europe 2019 website homepage (desktop version, screen 1) [[ Plans for the WordCamp Europe 2019 website homepage (desktop version, screen 2) We intend to complete this work in time for WCEU 2019. Beyond that, we hope that this enhancement to WordCamp websites would be available to WordCamps around the globe. [#apps](https://make.wordpress.org/community/tag/apps/), [#improving-wordcamp-org](https://make.wordpress.org/community/tag/improving-wordcamp-org/), [#progressive-web-app](https://make.wordpress.org/community/tag/progressive-web-app/), [#pwa](https://make.wordpress.org/community/tag/pwa/), [#regional-wordcamps](https://make.wordpress.org/community/tag/regional-wordcamps/), [#wordcamp](https://make.wordpress.org/community/tag/wordcamp/), [#wordcamp-sites](https://make.wordpress.org/community/tag/wordcamp-sites/), [#wordcamps](https://make.wordpress.org/community/tag/wordcamps/) * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Fcommunity%2F2019%2F04%2F30%2Fwordcamp-pwa-an-update%2F%23respond&locale=en_US) [ ](https://profiles.wordpress.org/marcusjwilson/) [marcusjwilson](https://profiles.wordpress.org/marcusjwilson/) 12:47 pm _on_ February 13, 2019 Tags: apps, [Improving WordCamp.org ( 17 )](https://make.wordpress.org/community/tag/improving-wordcamp-org/), [progressive web app ( 2 )](https://make.wordpress.org/community/tag/progressive-web-app/), [PWA ( 4 )](https://make.wordpress.org/community/tag/pwa/), [Regional WordCamps ( 4 )](https://make.wordpress.org/community/tag/regional-wordcamps/), [wordcamp ( 28 )](https://make.wordpress.org/community/tag/wordcamp/), [wordcamp sites ( 10 )](https://make.wordpress.org/community/tag/wordcamp-sites/), [WordCamps ( 247 )](https://make.wordpress.org/community/tag/wordcamps/)    # 󠀁[WordCamp PWA: Plugin proposal and designs](https://make.wordpress.org/community/2019/02/13/wordcamp-pwa-plugin-proposal-and-designs/)󠁿 **Planning is well underway to create a new look Progressive Web App (PWA) for WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. [Learn more](https://central.wordcamp.org/about/). events.** **The PWA will make accessing and providing content on mobile devices much easier for attendees and organisers. ** This builds on the work to create a PWA for previous WordCamp Europe (WCEUWCEU WordCamp Europe. The European flagship WordCamp event.) events. However, rather than developing a standalone PWA at a separate URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www. wordpress.org to the WordCamp site, as has been the case in the previous years, the plan is to create a layer of contextual information for Camp attendees that is **served from** and **integrated with** the WordCamp website, and which can be stored locally on the user’s devices for offline access. [WCEU Blog post on the PWA development](https://2019.europe.wordcamp.org/2019/02/13/wceu-invites-pwa-feedback/) The PWA will present a better mobile experience, taking advantage of touch screen gestures, and will put the most relevant information “at the fingertips” of Camp attendees. The PWA will enhance a WordCamp website, and will allow users to bookmark the website to their device’s home screen for offline access. This PWA functionality will initially be created as a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party., displaying an additional visual‘ layer’ of content aimed specifically at attendees, in an ‘App like’ way over the main WordCamp website content. However, both online and offline users will have access to this same layer of content. ![WordCamp PWA plugin design proposal v1 - PWA landing page displaying PWA controls over the main WordCamp website](https://make.wordpress.org/community/files/2019/ 02/pwa-homepage-v1-1-621x1024.jpg) WordCamp PWA plugin design proposal v1 – PWA landing page displaying PWA controls over the main WordCamp website The plugin should be simple to set up and configure, so that – in the longer term– any WordCamp event can take advantage of its features. This initiative is being led by the WordCamp Europe 2019 Organiser teams, with design prototyping by the WCEU Design team and development by the Attendee Services team. The Communications team is also actively guiding the design and development of the PWA. ### The plan * The WordCamp PWA plugin will present an additional ‘layer’ of mobile friendly content over the main WordCamp website – inheriting the basic colours and fonts of the website. However, individual WordCamps should be able to customise the look of the PWA further using CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. overrides. * This PWA layer can be switched on/off from plugin settings within WordPress admin, so that it is only available for the duration of the Camp. When viewing the site on touch screen devices during the Camp, users will see the PWA layer appearing over the top of the WordCamp site. * The PWA controls will look very like a native smartphone App, and will be optimised for touch screen devices, employing swipe gestures. * On loading the website on touch screen devices, the user would be presented with a range of PWA control, docked to the foot of the screen, offering PWA menu options as icons around a large, central, ‘always visible’ circular button that will be used to open/close the PWA layer. * Using the power of PWA, the content of the App will be downloaded and stored offline on the user’s local device, and can be bookmarked on the user’s home screen to be accessed at any time, with or without an internet connection. [⌊WordCamp PWA plugin design proposal v1 - Screen layouts⌉⌊WordCamp PWA plugin design proposal v1 - Screen layouts⌉[ WordCamp PWA plugin design proposal v1 – Screen layouts ### Content The PWA plugin will display a range of key content sections relevant to conference attenders. Each content section will animate open as a panel from the icon at the bottom of the screen. This will initially include the following screens (which relate from left to right to the icons in the image above): * **Attendees:** a full list of attenders with Gravatars, sorted alphabetically, with search field to look up attendees by name. _For GDPR reasons, attendees should not be downloaded and stored offline on the local device – although this may be reviewed in the future in line with GDPR and privacy regulations and with any permissions requested during attendee sign-up._ * **Speakers: **a full list of speakers with GravatarGravatar Is an acronym for Globally Recognized Avatar. It is the avatar system managed by WordPress.com, and used within the WordPress software. [https://gravatar.com](https://gravatar.com/), biog and links to relevant sessions, sorted alphabetically, with options to filterFilter Filters are one of the two types of Hooks [https://codex.wordpress.org/Plugin_API/Hooks](https://codex.wordpress.org/Plugin_API/Hooks). They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. by schedule date/topic group and search field to look up speakers by name. * **Schedule:** a full schedule for the WordCamp, with a single column per schedule date, and option to filter by Track. Users will have the ability to ‘favourite’ sessions, and these preferences will be stored on the local device. Columns can be swiped left/right to view previous/next day, and the sessions should be filterable to show just the sessions which the user has marked as their ‘favourite’. Depending on when the schedule is viewed, the schedule list should visibly scroll/animate down to the current time/session, so users can see ‘at a glance’ what is ‘on now’. * **Venue Map:** one or more graphical floor plans of the venue, with the ability to swipe/pinch to resize and re-position the maps within the viewable area of the screen. * **Announcements:** a chronological listing of announcements for attendees during the WordCamp, filterable by type (that is, catering, sessions, social, and so on) and can be determined by the WordCamp organisers. These five sections will be arranged as icons around a large central ‘Start’ button, docked to the bottom of the screen, to allow users to turn the PWA layer on/off. This circular arrangement would allow us to add additional buttons/sections at a later date, and have these icons ‘revolve’ around the main circular ‘Start’ button with swipe gestures. The content for all the above sections is already present with the WordPress database for WordCamp sites, apart from ‘Announcements’, which will need a new Custom Post TypeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. to be added, potentially with its own custom taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. [https://codex.wordpress.org/Taxonomies#Default_Taxonomies](https://codex.wordpress.org/Taxonomies#Default_Taxonomies).( to allow users to filter different types of announcements). Venue Map images may also require the use of one or more custom fields for storage and display. ### Tablet view proposals * [⌊WordCamp PWA design v1 - Tablet view (landing screen)⌉⌊WordCamp PWA design v1 - Tablet view (landing screen)⌉[ * Landing screen * [⌊WordCamp PWA design v1 - Tablet view (sessions)⌉⌊WordCamp PWA design v1 - Tablet view (sessions)⌉[ * Sessions * [⌊WordCamp PWA design v1 - Tablet view (attendees)⌉⌊WordCamp PWA design v1 - Tablet view (attendees)⌉[ * Attendees ### Timeframe The ambition is to pilot a version of the WordCamp PWA plugin at WordCamp London in April 2019, followed by a full launch at WordCamp Europe 2019 in Berlin in June 2019. --- ### Questions * Would you use this PWA plugin for your WordCamp event? * Is the content detailed above the most useful for WordCamp attendees – is anything missing or unnecessary? * Is the design/UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. proposed intuitive and accessible? * Any other feedback or observations? --- ## UPDATE: 17 April 2019 After posting these original plans to enhance WordCamp websites with Progressive elements, we received a lot of feedback and suggestions to enhance this development work. Thank you! Based on this feedback, we now intend to take a more integrated approach to the project. In practical terms, this will build on the great work of Weston Ruter and his Progressive Web App feature pluginFeature Plugin A plugin that was created with the intention of eventually being proposed for inclusion in WordPress Core. See [Features as Plugins](https://make.wordpress.org/core/handbook/about/release-cycle/features-as-plugins/), which brings PWA capabilities – including service workers and the web app manifest– to WordPress. This will mean that, rather than create a new and separate “layer” of context based information “over” the WordCamp website, we will instead allow key pages of an existing WordCamp site to be stored locally on a user’s device for offline access. In addition, we would intend to create a new homepage for the website for the duration of the WordCamp to display context based content on the Sessions that are “on now” and “up next”, alongside the latest Posts from the Camp website, to put this key information at the fingertips of attendees. We intend to complete this work in time for WCEU2019. Beyond that, we hope that this enhancement to WordCamp websites would be available to WordCamps around the globe. [#apps](https://make.wordpress.org/community/tag/apps/), [#improving-wordcamp-org](https://make.wordpress.org/community/tag/improving-wordcamp-org/), [#progressive-web-app](https://make.wordpress.org/community/tag/progressive-web-app/), [#pwa](https://make.wordpress.org/community/tag/pwa/), [#regional-wordcamps](https://make.wordpress.org/community/tag/regional-wordcamps/), [#wordcamp](https://make.wordpress.org/community/tag/wordcamp/), [#wordcamp-sites](https://make.wordpress.org/community/tag/wordcamp-sites/), [#wordcamps](https://make.wordpress.org/community/tag/wordcamps/) * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Fcommunity%2F2019%2F02%2F13%2Fwordcamp-pwa-plugin-proposal-and-designs%2F%23respond&locale=en_US)