HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer...
Transcript of HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer...
![Page 1: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/1.jpg)
HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO TESTFLIGHT FROM APPLE (PART I)
Frederic Petrignani
![Page 2: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/2.jpg)
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
![Page 3: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/3.jpg)
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
![Page 4: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/4.jpg)
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
![Page 5: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/5.jpg)
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:
![Page 6: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/6.jpg)
6
STEP 1A
![Page 7: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/7.jpg)
7
STEP 1A
![Page 8: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/8.jpg)
8
STEP 1A Change the
selection to
Do it yourself
![Page 9: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/9.jpg)
9
STEP 1A Change the
selection to
Do it yourself
![Page 10: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/10.jpg)
10
STEP 1A
Create a folder
for the project,
put this file there
and unzip it
Change the
selection to
Do it yourself
![Page 11: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/11.jpg)
11
STEP 1B
![Page 12: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/12.jpg)
12
STEP 1B Look for entry.js in src/www/scripts
and open it with Visual Studio Code
![Page 13: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/13.jpg)
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
![Page 14: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/14.jpg)
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
![Page 15: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/15.jpg)
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.
![Page 16: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/16.jpg)
16
STEP 1C
![Page 17: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/17.jpg)
17
STEP 1C
Open a Node.js command prompt and navigate to the root directory of the unzipped phonegap package
![Page 18: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/18.jpg)
18
STEP 1C
Open a Node.js command prompt and navigate to the root directory of the unzipped phonegap package
Run this
command
![Page 19: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/19.jpg)
19
STEP 1C
Open a Node.js command prompt and navigate to the root directory of the unzipped phonegap package
Then this
command
![Page 20: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/20.jpg)
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
![Page 21: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/21.jpg)
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
![Page 22: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/22.jpg)
22
STEP 2A
![Page 23: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/23.jpg)
23
STEP 2A
![Page 24: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/24.jpg)
24
STEP 2A
![Page 25: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/25.jpg)
25
STEP 2B
![Page 26: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/26.jpg)
26
STEP 2B
In the installation wizard, choose to
Copy OpenSSL DLLs to:
- The OpenSSL binaries (/bin) directory
![Page 27: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/27.jpg)
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)
![Page 28: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/28.jpg)
28
STEP 2C
![Page 29: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/29.jpg)
29
STEP 2C
![Page 30: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/30.jpg)
30
STEP 2C
![Page 31: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/31.jpg)
31
STEP 2C
Now you can download
a .cer file
![Page 32: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/32.jpg)
32
STEP 2D
testflight.cer
testflight.pem
![Page 33: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/33.jpg)
33
STEP 2D
testflight.cer
testflight.pem
testflight.pemtestflight.key
testflight.p12
![Page 34: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/34.jpg)
34
STEP 2E
![Page 35: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/35.jpg)
35
STEP 2E
![Page 36: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/36.jpg)
36
STEP 2E
![Page 37: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/37.jpg)
37
STEP 2F
![Page 38: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/38.jpg)
38
STEP 2F
![Page 39: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/39.jpg)
39
STEP 2F
Rebuild
![Page 40: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/40.jpg)
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:
![Page 41: HOW TO GET YOUR CUSTOMIZED MENDIX APP INTO … · 2A. PhoneGap Build 2B. OpenSSL 2C Apple Developer Center 2D OpenSSL 2E Apple Developer Center 2F PhoneGap Build 3A. Application Loader](https://reader033.fdocuments.in/reader033/viewer/2022042812/5fad2771e01c5f6ec20865fa/html5/thumbnails/41.jpg)
Thank you
41