Build Other Apps with Browser

Build Other Apps using a Browser

Once Loop 3 was released with the ability to build using a browser, a lot of other apps in the DIY universe added the same feature.

Only apps that are companions to Loop are included on this page.

• Loop Caregiver
• Loop Follow

If you want to build another DIY app that is not included here, look for the file fastlane/testflight.md in the GitHub repository associated with that app and open it in a browser. The instructions for that app should be located in that file.

The same technique is used and the same six Secrets are applied to each repository. Those secrets are tied to your Apple Developer ID and your GitHub account.

Update to Build with Browser for the Loop Caregiver App

The Loop Caregiver App Requires an App Group

As of 2023 December 8, the updated version of the Loop Caregiver app requires the addition of an App Group to an expanded list of Identifiers.

• To update the Loop Caregiver App you need to Update the Repository
• Then (one time only):
  • Run the Action to Add Identifiers
  • Follow the instructions in Add App Group to LoopCaregiver
  • Continue with Create Certificates
  • Finish with Build App

Optional Build Method

Optional - Set up a Organization Account

If you are going to be building a lot of different apps, you can choose to set up a free organization account with GitHub and use that to build.

Pros:

• The 6 Secrets can be added to the organization one-time and apply to every repository

Cons:

• The displays for an organization are slightly different than for a personal account but are not hard to navigate if you are computer literate and feel comfortable using a browser

For more information, see Use a GitHub Organization Account.

Multiple Copies of Loop Follow

For the convenience of caregivers who use Loop Follow to monitor multiple people, updates were added in v2.1.2 to make this more convenient. This works regardless of the build method. (Build with Browser or Build with Mac).

• Build up to three instances of Loop Follow
• Customize the name of the app that appears on your phone
• Display the custom name in the main Loop Follow screen

Prerequisites

• If you have already built using the Browser Build method, it is easy to build other apps which use the same method. Skip ahead to Fork and Add Secrets

  • If you decide you want to try the GitHub free organization method, review the instructions and then adjust as you work through the step-by-step instructions on this page which show graphics and instructions for using a personal GitHub account

• If this is the first repository you have built with the Browser Build method, you must first complete the initial steps found on Configure to Use Browser. When you reach the point where

  • You have created your Match-Secrets repository
  • You are told to Configure to Use Browser: Fork LoopWorkspace
    • Review the directions but don't do it
    • Return here and check the table below
    • Use that table to find the link of the repository you will fork

Use the repository for the application you are building

Many graphics on this page show LoopWorkspace, just remember to use the repository for the app you want to build, that is either Loop Caregiver or  Loop Follow.

Fork and Add Secrets

• You will return to this page after reviewing (but not doing) this step Configure to Use Browser: Fork LoopWorkspace
  • Use the same method as that section, but fork the repository for the app you plan to build
  • Loop Caregiver, expect the dev branch
  • Loop Follow, expect the main branch

Table of App Repositories

App	Fork from this Address	Documentation
Loop Caregiver	https://github.com/LoopKit/LoopCaregiver	LoopDocs: Loop Caregiver
Loop Follow	https://github.com/loopandlearn/LoopFollow	Loop Follow

The two repositories below are only if you need to follow a second or third looper. All others should use just the table above. The instructions for the second and third looper are otherwise identical to the first looper. Note that LoopCaregiver can follow multiple Loopers; you select the person inside the app.

Special Case	Fork from this Address
Loop Follow for a Second Looper	https://github.com/loopandlearn/LoopFollow_Second
Loop Follow for a Third Looper	https://github.com/loopandlearn/LoopFollow_Third

Update the Repository

If you just created the fork, you can skip this section.

If you are returning to this page to update an app, please follow these steps. Each step has a link to instructions on the Update LoopWorkspace page. Follow the Update Fork directions for the repository of the app you are updating:

1. Accept Agreements for the Apple Developer account
2. Update Fork

Then return to this page.

Normally you skip ahead to Build App after an update.

If you are updating the LoopCaregiver app after the 2023 December 8 update, you need to go to Add Identifiers after updating the fork.

Configure Secrets for this App

If you choose to use the optional GitHub organization method, you can skip this section:

• All repositories in your GitHub organization use the organization Secrets
• Make sure you complete Add Secrets to your GitHub Organization instead of this section
• Skip ahead to Validate Secrets

After successfully creating your fork of the repository for this app:

• If you have already built Loop using the Browser Build method, skip ahead to Add Existing Secrets

• If this is the first repository you have built with GitHub

  • You should follow the detailed steps at Configure to Use Browser: Configure Secrets, except you will apply the Secrets to the repository for the app you are planning to build
  • Once your 6 secrets have been added, return to this page and skip ahead to Validate Secrets on this page.

Add Existing Secrets

MATCH_PASSWORD

An early version of GitHub First-Time had incorrect information about the need to save MATCH_PASSWORD.

If you did not save your MATCH_PASSWORD in your file with all your Secrets, you will need to delete your Match-Secrets repository, create a new one and then add all your Secrets into all you repositories again and run all the Actions again.

Instructions are found at Reset Match-Secrets.

Open the text file in which you maintain a copy of your 6 Secrets so you can copy each value into the Secrets for this repository.

1. Click on the repository for your app

2. Click on the Settings Icon near the top right of your repository

   • On the left side, tap on Secrets and variables dropdown and choose Actions
   • After you select Actions, your screen should look like the graphic below

   

3. Tap on New repository secret and add each of the 6 Secrets

   • You will notices the New secret dialog looks a little different
   • As soon as you click on the Name* Box, the 6 Secret Names may show up as a dropdown as shown in the graphic below
   • Select each one in turn and paste the secret value into the Secret* box and hit Add secret
   • If they do not appear in a dropdown, enter them exactly as shown (suggest copy / paste from your text file)

   

Once all six Secrets are added, proceed to the first Action to validate your secrets.

Validate Secrets

The first action step is to Validate Secrets. Near the top middle of your Repository fork, click on the Actions tab.

• The first time you click on Actions with this repository you'll be informed that Workflows aren't being run on this forked repository
• Tap on the green button that says: I understand my workflows, go ahead and enable them

The workflows are now displayed: look at the list on the left side similar to that shown in the graphic below. (You can dismiss the Actions Enabled message using the X near the upper right side if it appears).

• The graphic below is an example from Loop, your screen will show your app and associated repository

This step validates most of your six Secrets and provides error messages if it detects an issue with one or more.

1. Click on the "Actions" tab of your Loop Follow or Loop Caregiverrepository and enable workflows if needed
2. On the left side, click on 1. Validate Secrets
3. On the right side, click Run Workflow to show a drop-down menu
   • You will see your default branch (main for LoopFollow, dev for LoopCaregiver)
   • You can select a different branch, but typically, you run the default
4. Tap the green button that says Run workflow.

The Validate Secrets  Action  should succeed or fail in a few minutes. Do not continue to the next step until this one succeeds.

• If you see the green check () continue to the next section
• If you see the red X ():
  • Examine the Error tells how to view the file needed to diagnose your problem.
  • Action: Validate Secrets Errors tells you what to search for in the file
  • Resolve the error and repeat the Action: Validate Secrets

Add Identifiers

Near the top middle of your Repository fork, click on the "Actions" tab.

• The graphic below is an example from Loop, your screen will show your app and associated repository

Refer to the graphic below for the numbered steps:

1. Click on the "Actions" tab of your repository
2. On the left side, click on "Add Identifiers"
3. On the right side, click "Run Workflow" to show a drop-down menu
   • You will see your default branch (main for LoopFollow, dev for LoopCaregiver)
   • You can select a different branch, but typically, you run the default

4. Tap the green button that says "Run workflow"

   

The Add Identifier  Action  should succeed or fail in a few minutes.

• If you see the green check () continue to the next section
• If you see the red X ():
  • Examine the Error tells how to view the file needed to diagnose your problem
  • Action: Add Identifiers Errors tells you what to search for in the file
  • Resolve the error and repeat the Action: Add Identifiers

Review App Identifier

Open this link: Certificates, Identifiers & Profiles: Identifiers List on the apple developer site.

After successfully performing the Add Identifiers Action, you will see the identifier for your app with a Name and Bundle ID matching that in the table below. You will see your unique TEAMID embedded in the identifier. (If you previously built this App with Xcode, the name may start with XC but the ending should match.)

App Name	Name	Bundle ID
Loop Caregiver	LoopCaregiver	com.TEAMID.loopkit.LoopCaregiver
Loop Follow	LoopFollow	com.TEAMID.LoopFollow

If you build from a second or third repository for Loop Follow, the Name will end in Second or Third and Bundle ID will have .Second or .Third at the end.

The Loop Caregiver app requires updates to the Identifiers after they are generated.

The Loop Follow app does not require this extra step. You can skip ahead to Create App in App Store Connect.

Add App Group to LoopCaregiver

As of 2023 December 8, the Loop Caregiver app requires the addition of an App Group to an expanded list of Identifiers. Follow these steps one time to be able to build the Loop Caregiver app after this update.

Check if App Group Exists

Open this link to view your applicationGroup Identifiers: App Group Identifiers

• No action is required if there is already an identifier with the NAME of LoopCaregiver App Group and the IDENTIFIER contains your TEAMID in this format: group.com.TEAMID.loopkit.LoopCaregiverGroup
• In that case, you can skip ahead to Add App Group to Identifiers

Create App Group for the Loop Caregiver App

Open this link: Register an App Group on the Apple Developer site.

1. For Description, use LoopCaregiver App Group
2. For Identifier, enter group.com.TEAMID.loopkit.LoopCaregiverGroup, substituting your team id for TEAMID.
3. Double-check the spelling - your TEAMID must be correct and the LoopCaregiverGroup App Group must match the format shown above
   • A mistake here means you will not be able to build the LoopCaregiver app until you fix it
4. Click Continue and then Register.

Add App Group to Identifiers

Click to open this link in a new tab: Certificates, Identifiers & Profiles: Identifiers List on the Apple Developer site.

Table with Name and Identifier for LoopCaregiver

All five of these identifiers should be found after running the Add Identifier action on GitHub.

If you do not see them, please sync your LoopCaregiver repository and then run the Add Identifier action. The NAME might begin with an XC if you previously built with Xcode. However, the IDENTIFIER column value should match.

NAME	IDENTIFIER
LoopCaregiver	com.TEAMID.loopkit.LoopCaregiver
LoopCaregiverIntentExtension	com.TEAMID.loopkit.LoopCaregiver.IntentExtension
LoopCaregiverWatch	com.TEAMID.loopkit.LoopCaregiver.watchkitapp
LoopCaregiverWatchWidgetExtension	com.TEAMID.loopkit.LoopCaregiver.watchkitapp.WidgetExtension
LoopCaregiverWidgetExtension	com.TEAMID.loopkit.LoopCaregiver.WidgetExtension

Add LoopCaregiverGroup to each Identifier

Find and click on the row for the LoopCaregiver on the Certificates, Identifiers & Profiles: Identifiers List page. Look in the IDENTIFIER column to find com.TEAMID.loopkit.LoopCaregiver. The NAME might begin with an XC if you previously built with Xcode. However, the IDENTIFIER column value should match.

NAME	IDENTIFIER
LoopCaregiver	com.TEAMID.loopkit.LoopCaregiver

The Edit Your App ID Configuration screen will open.

1. In the App Services column, scroll down to the App Groups row

   • Ensure the check box (under the Capabilities column) for App Groups is checked
   • Tap on the word Edit or Configure, whichever shows up
     • This opens the App Group Assignment screen
     • Check the box by LoopCaregiver App Group that uses your TEAMID in group.com.TEAMID.loopkit.LoopCaregiver
     • If the box by Loop App Group is checked, you should uncheck it
     • Your screen should be similar to the graphic below
     • If you made any changes, tap Continue, otherwise, tap Cancel

   

2. If you modified settings for an identifier, the Save button at the top right will become active. Click on Save before leaving this page - otherwise, the change does not take effect.

   • Tap on Save
   • This opens the Modify App Capabilities confirmation screen
   • Click on Confirm

3. If you did not need to make changes, the Save button will not be active.

   • Tap on the < All Identifiers button at the top left

4. The full list of Identifiers should be displayed again.

5. Continue down the list until every identifier in the table below has the App Group for LoopCaregiver App Group added to it. (DO NOT SELECT the Loop App Group) If you miss any, the GitHub action to 3. Create Certificates will succeed but the GitHub action to 4. Build LoopCaregiver will fail.

NAME	IDENTIFIER
LoopCaregiver	com.TEAMID.loopkit.LoopCaregiver
LoopCaregiverIntentExtension	com.TEAMID.loopkit.LoopCaregiver.IntentExtension
LoopCaregiverWatch	com.TEAMID.loopkit.LoopCaregiver.watchkitapp
LoopCaregiverWatchWidgetExtension	com.TEAMID.loopkit.LoopCaregiver.watchkitapp.WidgetExtension
LoopCaregiverWidgetExtension	com.TEAMID.loopkit.LoopCaregiver.WidgetExtension

Create App in App Store Connect

Same procedure as for the Loop app

You will follow the same procedure as you did with the Loop app.

You will also want to edit your new app once you create it to Remove Apple Vision Pro.

You will be following the directions below to create an App in App Store Connect if you don't already have one.

This requires you to provide some information. Examine the table below for the bundle ID associated with your app.

App Name	Bundle ID
Loop Caregiver	com.TEAMID.loopkit.LoopCaregiver
Loop Follow	com.TEAMID.LoopFollow

If you build from a second or third repository for Loop Follow, the Bundle ID will have .Second or .Third at the end.

1. Open this link: App Store Connect / Apps to view your apps; log in if needed.

2. If this App already exists, you can continue to Create Certificates

3. Click the Add Apps button or the blue "plus" icon and select New App as shown in the graphic below

   

4. The New App dialog box opens and should appear similar to the graphic below. Before you fill anything out, make sure your Bundle ID is available in the dropdown menu. If you do not see the Bundle ID for your app; back out of this screen and follow the directions in Configure to Use Browser: Find My Loop, where you'll be finding App Name instead of Loop.

   • Select "iOS". For Loop Follow you can also select "macOS" if you own a Mac with macOS 11 or later.
   • Enter a name: this will have to be unique
     • You could start with "App Name ABC" where ABC are your initials
     • If that is already taken, you can add a number, for example, "App Name ABC 123"
     • This name is what you see on the App Store Connect list and in the TestFlight app
     • Once installed on your phone, you will see the actual app name
     • You can Change the App Store Connect Name later if you want
   • Select your primary language.
   • Choose the bundle ID for your app
   • SKU can be anything; for example "123" but must be unique across all your apps, so try 1234 or 12345 depending on how many apps you build with this method
   • Select "Full Access".

   

5. Click Create but do not fill out the next form. That is for submitting to the app store and you will not be doing that.

6. Edit your new app to Remove Apple Vision Pro

You are done with this activity. Before you close this browser window, note the TestFlight tab at the top of the page. You'll be using that tab after you complete the next two actions.

Create Certificates

• The graphic below is an example from Loop. Your screen will show your app and associated repository.

Refer to the graphic below for the numbered steps:

1. Click on the "Actions" tab of your Repository repository
2. On the left side, click on "Create Certificates"
3. On the right side, click "Run Workflow" to show a drop-down menu
   • You will see your default branch (main for LoopFollow, dev for LoopCaregiver)
   • You can select a different branch, but typically, you run the default

4. Tap the green button that says "Run workflow".

   

5. Wait a minute or two for the action to finish

   • If this action fails, head over to Action: Create Certificates Errors
   • Once you've resolved the error, repeat the Actions Add Identifiers and then Create Certificates. (The Add Identifiers might not be required but it is fast and should be done as a matter of routine.)

Build App

The graphic below is an example from Loop, your screen will show your app and associated repository

If you are building the Loop Caregiver app, skip ahead to Build Action.

Display Name Customization for Loop Follow

If you build Loop Follow for one, two or three loopers, you may choose to customize your fork or forks to insert a custom display name.

• Find and click on the file LoopFollowDisplayNameConfig.xcconfig
• Tap the pencil icon so you can edit the file
• The last line says display_name = LoopFollow (or LoopFollow_Second or LoopFollow_Third)
• Insert your custom name so the last line says display_name = LF custom name
• Click on commit changes and chose to commit directly into the main branch

Continue to build as instructed below. After you install the app on your phone, iPad or Mac via TestFlight, that custom name is what is displayed. The prefix LF is suggested to make it easier to find the custom named Loop Follow app in the list of apps, but is not required.

Build Action

Refer to the graphic below for the first four steps:

1. Click on the "Actions" tab of your Repository repository.
2. On the left side, click on "Build App Name".
3. On the right side, click "Run Workflow" to show a drop-down menu
   • You will see your default branch (main for LoopFollow, dev for LoopCaregiver)
   • You can select a different branch, but typically, you run the default

4. Tap the green button that says "Run workflow".

   

5. Wait a few minutes to make sure there is not an early failure

   • If this action fails, head over to Action: Build Loop Errors
   • Once you've resolved the error, it's a good idea to repeat all three steps in this order:
     • Add Identifiers
     • Create Certificates
     • Build Loop
6. If the process appears to be happening without an error, go do something else for a while. The build should take about 20-30 minutes.
7. Your app should eventually appear on App Store Connect.

Add Users to TestFlight for App

Once the first build completes, you will be able to configure TestFlight for the app - follow the template for setting up TestFlight for Loop found in Configure to Use Browser: Set Up Users and Access (TestFlight).

Install on Phone

The Install on Phone walks you through the steps to install the app to a phone. When going through those steps, replace your App Name for Loop. Everything else is the same.

Use a GitHub Organization Account

This section is optional. It is provided to assist:

• Users who are using GitHub for other reasons and want to segregate their DIY app building from their existing accounts
• Mentors who want to do a lot of testing of many DIY apps to support people and get tired of entering the 6 Secrets repeatedly
• Users who are comfortable with the GitHub web interface who want the convenience of entering the 6 Secrets just one time instead of entering them for each repository individually

Set up a Free GitHub Organization

Prerequisite: You need a personal GitHub account.

In the instructions below, use your GitHub username instead of my-name.

1. Follow the directions below to create a new GitHub organization account with a username of my-name-org (of course naming is up to you)
   • There is documentation at this link, New GitHub Organization, or you can follow the bullets below
   • Log into my-name and click on your icon (at upper right) and choose Settings
   • On the left side-bar, click on Organizations
   • In the new view, click on New Organization and choose Free for the plan by clicking on Create a free organization.
   • In the Set up your organization screen:
     • Enter my-name-org into the Organization name box
     • Enter the same email you use for my-name account
     • Select this organization belongs to My personal account
     • Check the box to accept the terms of service
     • Tap on the next button
2. You now see a Welcome screen
   • Unless you plan to collaborate with others, just tap Complete setup
   • You can always add others at a later time
3. Confirm access by entering the same password as you use for my-name

GH_PAT comes from personal my-name account

The GitHub personal access token used as one of the 6 Secrets is associated with your personal account (my-name); so if you already have one, you just keep using it.

Use the Free GitHub Organization

There are three steps to using this account moving forward:

1. One-time only: You need to add your 6 Secrets to this organization account (instructions are in next section)

2. One-time only: Create a Match-Secrets repository in the my-name-org account

   • Start out at the top-level of your organization (github.com/my-name-org)
   • Click on Repositories
   • Click on New repository
   • Choose my-name-org as owner and enter Match-Secrets as the name
   • Make sure to choose Private and tap on the Create button
   • If you want to see graphics for the steps above, refer to the instructions written for a personal (instead of organization) account in Create Match-Secrets

3. For each repository: you need to fork for each app you wish to build to the new my-name-org account

   • When you do the fork, there will be a drop-down menu under Owner for you to select the account for the fork
   • Choose the organization account
   • Other than that extra step, follow the standard fork directions
     • This link provides instructions to Fork LoopWorkspace
     • Refer to the Table of App Repositories when building apps other than the Loop app

Then, for every build, you will use just the organization account. The original account is maintained to give you access to GitHub and holds your GitHub personal access token.

WARNING - If you have forks of DIY apps in your original my-name account that are configured to build automatically, you want to disable that and have only the my-name-org account be configured for automatic building. Refer to Disable Building for Personal GitHub account.

Add Secrets to your GitHub Organization

Adding the Secrets to an organization is similar to adding them to each repository for a personal GitHub account. The difference is you add them at the organization level and then they are available to each repository in that organization.

Follow the directions below to prepare to add secrets to the organization and then skip (when provided the link) to the per-repository directions for more details about adding each secret.

Make sure you are in the organization for GitHub:

• Click on your icon at upper right of GitHub browser
• Select Your Organizations
• In the new screen, select my-name-org
• Make sure the URL is github.com/my-name-org
• Click on Settings (it is optional to fill in the information shown under general)
• In the left pane, scroll down to find Secrets and variables and click on the drop-down symbol and choose Actions
• Your screen should look like the graphic below

• At this point, tap on New organization secret
  • Refer the instructions at this link, Enter the Secrets, for adding Secrets
  • Those instructions show the graphics for a personal repository and indicate the button will says New repository secret - your screen will show New organization secret
  • Continue until all six Secrets are entered for your organization account my-name-org
• Once the organization Secrets are entered, they are used by every repository you fork with this organization as the owner

The GitHub personal access token used as one of the 6 Secrets is associated with your personal account (my-name); so if you already have one, you just keep using it. If not, follow these instructions to get or configure a new one.

Disable Building for Personal GitHub account

Once you have your apps building as you expected from the my-name-org organization account, you should configure your personal account to stop any automatic building that may be taking place.

Option 1: Delete repository

You can delete the DIY repositories from your personal account

• Pro: You can't get confused about where you should be building
• Cons:
  • If you have already generated some customizations there, it is safest to not delete the repository
  • If you have pull requests open from your personal account, DO NOT DELETE that repository - that would automatically close those open PR
• Here are the instructions if you decide to delete the repositories
  • Click on your icon at upper right of GitHub browser
  • Select Your Repositories
  • Notice the github address now says my-name instead of my-name-org
  • Select the repository you wish to delete and follow these instructions
  • GitHub Docs: Delete a repository

Option 2: Disable Build Action

You can disable the build actions from the repositories in your personal account

• Pro: You leave any work you previously did alone in your personal account
• Con: You might get confused and try to build in your personal account instead of your organization account
• Here are the instructions to disable the build actions:
  • Click on your icon at upper right of GitHub browser
  • Select Your Repositories
  • Notice the github address now says my-name instead of my-name-org
  • Select the repository you wish to disable build actions for and follow these instructions
  • GitHub Directions to Disable and Enable a Workflow
  • It is the Build action that kicks off the update and build steps, so simply disabling the one action is sufficient