HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO TESTFLIGHT FROM APPLE (PART I)

Frederic Petrignani

WHAT IS TESTFLIGHT?

You know when you want a user to test your

Android app, you can just send them the

.apk file and they can download it to their

mobile device and install it themselves?

It doesn’t work like that with Apple.

TestFlight =

• Beta build in App Store

• Send email invites to test users

• Link in email allows installation

• Apple: “Beta testing made simple”

2

Getting it INTO TestFlight is NOT made simple

Mendix documentation refers to

GitHub documentation and how-to’s

which refer to other documentation

and other how-to’s which refer to

OpenSSL, Node.js, PhoneGap Build

and Apple documentation.

There is not one single how-to

explaining the end-to-end process.

3

4

THE BIG PICTURE: 3 STEPS

1. Use the Mendix portal, Visual Studio Code and Node.js

2. Use PhoneGap Build, OpenSSL & Apple Developer Center

3. Use Application Loader, App Store Connect and TestFlight

to get your customized phonegap package

to get your .ipa file

to get your app installed with test users

5

THE BIG PICTURE: “3” STEPS

1A. The Mendix portal

1B. Visual Studio Code

1C Node.js

2A. PhoneGap Build

2B. OpenSSL

2C Apple Developer Center

2D OpenSSL

2E Apple Developer Center

2F PhoneGap Build

3A. Application Loader (MacBook!)

3B. App Store Connect

3C. TestFlight

Use:

customizable phonegap package

edited code

customized phonegap package

“unsigned” .ipa file

private key and Certificate Signing Request (.csr)

certificate (.cer)

P12 file

distribution profile

signed .ipa file

.ipa file into the Apple App Store

app into TestFlight and

app installed with test users

To get your:

6

STEP 1A

7

STEP 1A

8

STEP 1A Change the

selection to

Do it yourself

9

STEP 1A Change the

selection to

Do it yourself

10

STEP 1A

Create a folder

for the project,

put this file there

and unzip it

Change the

selection to

Do it yourself

11

STEP 1B

12

STEP 1B Look for entry.js in src/www/scripts

and open it with Visual Studio Code

13

STEP 1B Look for entry.js in src/www/scripts

and open it with Visual Studio Code

This is where you put

your customized code

14

STEP 1B

Don’t forget to manually save the

changes. Closing Visual Studio Code

without saving won’t do.

Look for entry.js in src/www/scripts

and open it with Visual Studio Code

This is where you put

your customized code

15

STEP 1B Look for entry.js in src/www/scripts

and open it with Visual Studio Code

Good to know:

The default timeout for online apps is 5000 ms, so setting it to 15000 ms would increase the timeout.

The default time for offline apps is 30000 ms. so setting it to 15000 would decrease the timeout.

16

STEP 1C

17

STEP 1C

Open a Node.js command prompt and navigate to the root directory of the unzipped phonegap package

18

STEP 1C

Open a Node.js command prompt and navigate to the root directory of the unzipped phonegap package

Run this

command

19

STEP 1C

Open a Node.js command prompt and navigate to the root directory of the unzipped phonegap package

Then this

command

20

STEP 1C

Your customized phonegap package is in the dist folder.

Open a Node.js command prompt and navigate to the root directory of the unzipped phonegap package

21

STEP 1C

Your customized phonegap package is in the dist folder.

Open a Node.js command prompt and navigate to the root directory of the unzipped phonegap package

Run these

two commands

22

STEP 2A

23

STEP 2A

24

STEP 2A

25

STEP 2B

26

STEP 2B

In the installation wizard, choose to

Copy OpenSSL DLLs to:

- The OpenSSL binaries (/bin) directory

27

STEP 2B

In the installation wizard, choose to

Copy OpenSSL DLLs to:

- The OpenSSL binaries (/bin) directory

Now you have a

Certificate

Signing

Request

(.csr file)

28

STEP 2C

29

STEP 2C

30

STEP 2C

31

STEP 2C

Now you can download

a .cer file

32

STEP 2D

testflight.cer

testflight.pem

33

STEP 2D

testflight.cer

testflight.pem

testflight.pemtestflight.key

testflight.p12

34

STEP 2E

35

STEP 2E

36

STEP 2E

37

STEP 2F

38

STEP 2F

39

STEP 2F

Rebuild

40

THE BIG PICTURE: “3” STEPS

1A. The Mendix portal

1B. Visual Studio Code

1C Node.js

2A. PhoneGap Build

2B. OpenSSL

2C Apple Developer Center

2D OpenSSL

2E Apple Developer Center

2F PhoneGap Build

3A. Application Loader (MacBook!)

3B. App Store Connect

3C. TestFlight

Use:

customizable phonegap package

edited code

customized phonegap package

“unsigned” .ipa file

private key and Certificate Signing Request (.csr)

certificate (.cer)

P12 file

distribution profile

signed .ipa file

.ipa file into the Apple App Store

app into TestFlight and

app installed with test users

To get your:

Thank you

41