• Project configurations.
• Android configuration:
  • My first Android test.
  • First deployment on an Android device.
• iOS configuration:
  • My first iOS test.
  • First deployment on an iOS device.

	Estimated time: 1 h

• To follow this lesson, open the project you worked on in the previous lesson.
  1. Go to the WINDEV home page (Ctrl + <).
  2. On the home page, click "Open a project", then in "Recent projects", double-click "My_iOS_Android_Project".
     

     	Answers	A corrected project is available. To open the corrected project, go to the home page and click "Tutorial", then in "Part 2 - Lesson 2.1 - My first Android/iOS application", double-click "My Android/iOS project (Answers)".
  3. Open the WIN_Welcome window in the editor:
     • In the "Project explorer" pane, expand "Windows" and double-click "WIN_Welcome".
     • The WIN_Welcome window appears in the editor.

	Note	Project configurations make it possible to define the different types of generations supported by the project: Android, iOS, component, etc. The project elements can be: common to several configurations (a window used in iOS and Android for example). specific to a configuration (a class used by a component for example). You can work on a specific configuration at any time: the elements that do not belong to this configuration will be grayed out in the project editor. For more details, see Project configuration.

• You can check the different project configurations in the "Project explorer" pane:
  1. Expand "Configurations (iOS application)" at the top of the "Project explorer" pane.
  2. The two configurations are displayed:
     
  3. To select a specific configuration, double-click the desired configuration.

First Android test

	Note	For Android, WINDEV Mobile also allows you to test the application via the Android emulator (AVD) provided with the SDK. For more details, see Test with Android emulator.

• We will test the WIN_Welcome window in simulation mode in an Android configuration.
  1. Select the Android configuration of your project:
     • Expand "Configurations (iOS application)" at the top of the "Project explorer" pane.
     • Double-click the name of the Android configuration.
  2. Click in the quick access buttons (or press F9).
  3. Validate (if necessary) the information message regarding the simulator mode.
  4. The window you created is executed.
  5. Click "Display".
  6. Validate the system window that appears.
     

• Testing a program is often a long and tedious task. In WINDEV Mobile, you can test the window, report or procedure you are creating with one single click. This is both simple and fast!

• Click the "x" icon in the menu above the simulator box to close the window.

• The WINDEV Mobile editor appears again.

	Note	In this lesson, we test a window in the simulator. WINDEV Mobile allows you to run several types of tests of the entire application. You can test your application: in the simulator available in WINDEV Mobile: select " Debug on XXXX simulator" in the quick access options. This option allows you to quickly test the project on the PC. This is the option we use in this tutorial. directly on the mobile phone (default option): select " Debug on mobile device" in the quick access options: the generation will be started and the application will be copied and executed on the phone connected to the current computer. You can test the application directly on your device.

First deployment on an Android device

• Connect the device via a USB port.
• Generate the application. An "apk" file will be created. This file contains all elements required to run the application on an Android device.
• Select your device at the end of the generation. Copying the application ("apk" file) can take several seconds.

	Note	Caution: USB debugging must be enabled to run tests on the phone. If this operation is not performed, WINDEV Mobile will not detect the phone. To enable USB debugging: On the phone, go to "Settings". Select "About phone". Tap "Build Number" multiple times to enable the developer mode. Go back to the previous menu. The "Developer Options" entry appears. Select this option. Check "USB debugging". Remark: The actions to perform may change across phone versions and manufacturers. For example, in a Samsung Galaxy phone, you must "tap" the "Version number" multiple times in the "About Phone" option to enable "Developer Options". In any case, a Google search with "usb debugging <device name>" allows you to get the operating mode adapted to the device used.

• To generate the Android application:
  1. On the "Project" tab, in the "Generation" group, click "Generate" (you can also click in the quick access buttons).
  2. WINDEV Mobile proposes to select the first project window. In our example, select "WIN_Welcome" and validate ("OK" button).
     
  3. The Android application generation wizard starts.
  4. The first step of the wizard is to select the application generation mode. The generation format may change depending on the mode selected.
     For this tutorial, select "Generate for free deployment (Private Store, fleet of devices, etc.)". Go to the next step.
  5. The next step of the wizard is to check the tools needed to generate the Android application.
     
     The wizard proposes to:
     • Download and automatically install the Android SDK and Gradle: in this case, you will only have to validate the license. WINDEV Mobile takes care of everything. If an update is available, the generation wizard will prompt you to perform the necessary updates. Only an Internet connection is required. This option is only available if you have not previously downloaded and installed Gradle.
     • Use the tools automatically installed. This option is available if the tools have been downloaded and installed during a previous generation.
     • Specify the location of the tools already installed on your computer. In this case, you just need to specify the installation paths of Gradle and the Android SDK.
  6. Select the option corresponding to your configuration and go to the next step.
     Remark: If you have chosen to download and install the tools, the next step may be relatively long and require validating the license.
  7. The next step of the wizard allows you to:
     • define the application name (displayed below the icon used to start the application) and the corresponding package.
     • select the application icon in the WINDEV Mobile image catalog.
       
  8. Go to the next step. This step allows you to define:
     • the application splash screen,
       

       	Express	Remark: The application splash screen is not available in the Express version.
     • the information saved in the manifest,
     • the options of the application:
       • the application start mode (start when the device is started).
       • if maximized windows can be resized (multi-window).
  9. Go to the next step. The wizard allows you to define the version number of the application.
  10. Go to the next step. This step allows you to sign the application. The wizard proposes:
      • to sign the application.
        Remark: A specific signature is required to distribute the application.
        
      • to use a generic signature that can be used for testing the application.
        

        	Express	Remark: The application signature is not available in the Express version.
  11. Select "Use a generic signature".
  12. Go to the next step. As we have chosen to generate the application for a fleet of devices, the wizard proposes to choose the type of devices. Keep the default options.
      

      	Note	If a device is connected to the PC, use "Detect hardware automatically". Thus, next time an application is generated, this device will be automatically selected.
  13. Go to the next step.
  14. The wizard allows you to include specific files (data files, images, etc.). We will not use this option in our example. Keep the default options.
  15. Go to the next step. The wizard allows you to include specific libraries. Keep the default options.
  16. Go to the next step. The wizard allows you to include remote dependencies used by the project. Keep the default options.
  17. Go to the next step. The wizard allows you to define the application permissions. By default, according to the WLanguage functions used in the application, WINDEV Mobile detects the necessary permissions.
  18. Go to the next step. You can allow only the devices with the required features to download the application from Google Play. Keep the default options.
  19. Go to the next step. The wizard allows you to configure the options of the Android SDK. Keep the default options.
      
  20. Go to the next step.
  21. Finish the wizard.
  22. The generation is automatically performed in the background. Three small dots (...) appear in the WINDEV Mobile title bar to indicate that the generation is in progress. A popup window is also displayed, indicating the steps of the generation process.
      
  23. Once the generation is completed, the popup window displays the following information:
      
      
      

      	Note	This window can be displayed at any time by clicking the icon.
  24. To copy and run the application on the device connected to the computer or on an emulator, click “Deploy”.
  25. A new window appears, allowing you to select the runtime device. If an Android device is connected to the development computer, you will be able to select it from the list in this window.

iOS test

• Project or window test on the development computer using the simulation mode. This test simulates an iOS device on the development computer. This test is useful if the developer does not have a Mac or an iOS device to compile the application. However, this test does not allow using the hardware components of the device (GPS, SMS, camera, etc.).
• Project test directly on the device. This test is useful when the developer does not have a Mac to compile the application. All the components of the device are accessible.

• To test the WIN_Welcome window in iOS, in simulation mode:
  1. Select the iOS configuration of your project:
     • Expand "Configurations (Android application)" at the top of the "Project explorer" pane.
     • Double-click the name of the iOS configuration.
  2. Click in the quick access buttons (or press F9).
  3. Validate (if necessary) the information message regarding the simulator mode.
  4. The created window is started in execution, in a shell corresponding to the selected device (iPad or iPhone).
  5. Click "Display".
  6. Validate the system window that appears.
     
  7. Click the "x" icon in the menu above the simulator box to close the window.
  8. The WINDEV Mobile editor appears again.

• If you have an iPhone, you can follow the steps below to test the project directly on the device.

• First, make sure all the following conditions are met:
  • the iPhone/iPad and the development computer must be on the same network (Wifi, for example).
  • WMDev must be downloaded to the iPhone/iPad (https://itunes.apple.com/us/app/WMDev/id1437792304).
  • the following network ports must be open:
    • 64000 (64000 to 64005 if several WINDEV Mobiles are running simultaneously).
    • 27280
    If a firewall is used, it must be configured to allow the use of these ports.

• In the quick access buttons, select " Debug on a new iPhone/iPad". The window for connecting to an iOS device appears. This window contains a specific QR code.
  
  1. Start WMDev on the mobile device (iPhone or iPad).
     • Click "+" and then click the button displaying a bar code.
     • Scan the bar code displayed in WINDEV Mobile in the iOS device connection window.
  2. WINDEV Mobile proposes to select the first project window. In our example, select the "WIN_Welcome" window and validate ("OK" button).
     
  3. The mobile application starts on the iOS device.

First deployment on an iOS device

• Generate the iOS application (or Xcode project) in WINDEV Mobile.
• Transfer the generated Xcode project to the Mac in order to compile it.
• Compile the project in Xcode in order to generate the program.
• Then, the program can be installed on the connected device or started in the Xcode emulator. It will run in stand-alone mode.Let's take a look at these different steps.

• To generate the iOS application:
  1. On the "Project" tab, in the "Generation" group, click "Generate" (you can also click in the quick access buttons).
  2. The wizard for generating an iPhone/iPad application starts.
     
  3. The first step of the wizard allows you to:
     • define the application name, the company and the copyright.
     • enter the Bundle ID.
       

       	Note	This ID is a unique identifier for Apple applications. It is defined and registered on the Apple developer account. This identifier will allow you to register your application so that it can be tested and deployed. By default, WINDEV Mobile automatically generates an identifier that meets Apple's development requirements. You can change this ID.
     • type the email address that will be used by default to send the error reports generated by the application.
  4. Go to the next step. You can specify the path of the different application icons. Different icons can be specified:
     • icons for iPad and iPad Retina (only if the application has windows for iPad),
     • icons for all iPhone models (for example, iPhone 4S and iPhone 6 Plus have different resolutions).
  5. Go to the next step.
  6. Specify the characteristics of the splash screen.
  7. Go to the next step. Specify the version number of the generated application.
  8. Go to the next step. This step allows you to include specific files (data files, images, etc.). We will not use this option in our example. Keep the default options.
  9. Go to the next step. This step allows you to specify:
     • whether the application is allowed to be resized (Split View). The option allows the end user to display two windows of two different applications side by side on some devices.
     • whether files can be shared with iTunes. If this option is checked, you can copy the application files to the Mac during the synchronization. For example, if the application contains data files, iTunes will allow you to copy these files.
     • the minimum iOS version required to run the application.
     The "Advanced options" button is used to enter specific options for Xcode.
  10. Go to the next step. This step allows you to define the signature options.
      For more details on the available options, see Signature of iOS applications.
  11. Validate the wizard ("Finish"). The application is generated in the "EXE\<iOS configuration name>" folder of the project directory. The directory containing the source code that will be used on Mac is named "Project_name.xcode.gen" ("My_iOS_Project.xcode.gen" in our example). This directory must be copied to the Mac. Click "Browse generation directory".
      

      	Note	The generation directory of the current project configuration can be opened at any time: on the "Home" tab, in the "General" group, expand and select "Browse generation directory".

• Transfer the WINDEV Mobile project to the Mac.
• Compile the project in Xcode.

• To transfer the WINDEV Mobile project to the Mac:
  1. Copy the entire folder generated in the "EXE\<iOS configuration name>" directory to an external location (USB drive, external hard disk, directory shared with the Mac on the network). The name of this directory is <Project name>.xcode.gen.
  2. Paste this folder on the Mac that will compile the application.
  3. Open the folder on the Mac and open the "Project_name.xcodeproj" file.
  4. The project is opened in Xcode.

• To compile the project in Xcode:
  1. Select the compilation options from the drop-down list in the upper-left corner. Select the scheme (corresponding to your application) then the compilation target (device currently connected or a simulator).
  2. To start the compilation, select "Product .. Clean" then "Product .. Build".
  3. A compilation status report appears at the top ("Succeeded", or the number of warnings and errors). You can click these symbols to see the list of errors/warnings.
  4. Once the program has been compiled without errors, you can start the simulation (select "Product .. Run").
     • If the compilation target is the simulator, the application is started in the simulator window.
     • If the compilation target is the connected device, the application is started on this device.