PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | English EN
New WINDEV Mobile 26 feature!
  • In this lesson you will learn the following concepts
  • Overview
  • Project configurations
  • First Android test and deployment
  • First Android test
  • First deployment on an Android device
  • First iOS test and deployment
  • iOS test
  • First deployment on an iOS device
Lesson 2.2. First tests and application deployment
In this lesson you will learn the following concepts
  • 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.
Duration

Estimated time: 1 h
Previous LessonTable of contentsNext Lesson
Overview
In the previous lesson, we created our first cross-platform project, with its first window. In this lesson, we will test and deploy the application on both Android and iOS.

  • 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. This project contains all the windows of the application. 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.
Project configurations
In the previous lesson, we created a project that can run on both Android and iOS. WINDEV Mobile automatically associated two project configurations to the project, each corresponding to a platform.

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 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, simply double-click the name of the desired configuration.
To test or deploy a WINDEV Mobile application, select the project configuration that corresponds to the desired platform..
First Android test and deployment

First Android test

With WINDEV Mobile, you can test the application directly on the development computer via the simulation mode. This test simulates an Android device on the development computer. This test is useful when the developer has no access to an Android device. However, this test does not allow using the hardware components of the device (GPS, SMS, camera, etc.).

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 Test window in the quick access buttons (or press F9).
    3. Validate (if necessary) the information message regarding the simulator mode.
    4. Choose (if necessary) the management mode of editor during the test (editor minimized or not).
    5. The created window is started in execution.
    6. Click "Display".
    7. Validate the system window that is displayed.
      Window test
  • Any developer knows that running a program test can be a long and tiresome job. 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 "x" in the menu above the simulator box to close the window.
  • The editor of WINDEV Mobile is redisplayed.

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:
Test project
  • in the simulator available in WINDEV Mobile: select " Debug on Generic Android phone simulator Debug on XXXX simulator" among 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 Debug on mobile device" among the quick access options: the generation will be performed and the application will be copied and run on the cell phone connected to the current computer. You can test the application directly on your device.

First deployment on an Android device

To run the application in stand-alone mode on the Android device, you must:
  • 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.
Let's take a look at these different steps.

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:
  1. On the phone, select the "Parameters" menu.
  2. Select "About the device".
  3. Click "Build number" several times to enable the developer mode.
  4. Move one level up.
  5. The "Development option" choice appears. Select this option.
  6. Check "USB debugging".
Remark: The operations to perform may change according to the phone version and to its make. For example, for a Samsung Galaxy Notes 3, you must "tap" several times the "Version number" control found in the "About the device" option in order to enable "Development option". 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" pane, in the "Generation" group, click "Generate" (you can also click Android generation among the quick access buttons).
    2. WINDEV Mobile proposes to select the first project window. In our example, select "WIN_Welcome" and validate ("OK" button).
      First project window
    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 (corporate fleet, private store, etc.)". Go to the next step.
    5. The next step of the wizard is to check the tools needed to generate the Android application.
      Generation tools
      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, all you have to do is specify the setup paths of Gradle and 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 image catalog of WINDEV Mobile.
        General information
    8. Go to the next step. This step is used to define:
      • the application splash screen,

        Express

        Remark: The application splash screen is not available in Express version.
      • the information saved in the manifest,
      • the options of the application:
        • the start mode of the application (when starting the device or not).
        • the management of maximized windows (multi-window management or not).
    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 is used 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 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 you have a device connected to the PC, use "Detect hardware automatically". Thus, next time an application is generated, this type of device will be automatically selected.
    13. Go to the next step.
    14. The wizard allows you to include specific files (data files, images, etc.). This possibility will not be used 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 have the ability to restrict the download of the application on Google Play Store to the devices equipped with the features used. 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.
      Advanced configuration
    20. Go to the next step.
    21. Finish the wizard. The generation is automatically performed in the background. The Generating icon indicates that the generation is in progress.
    22. When the generation is ended, a popup window appears in the editor:
      Completed generation

      Note

      This window can be displayed at any time by clicking the Generation icon.
    23. To copy and run the application on the device linked to the computer or on an emulator, click “Deploy”.
    24. A new window is displayed, allowing you to select the runtime device. If you own an Android device connected to the development computer, select the device connected to the PC.
That's it, our first application is generated and run on the Android device.
First iOS test and deployment

iOS test

For an iOS application, WINDEV Mobile offers several types of tests:
  • 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 when 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 Test window 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 is displayed.
      Window test
    7. Click "x" in the menu above the simulator box to close the window.
    8. The WINDEV Mobile editor appears again.
  • Do you have an iPhone? Now, let's test the project directly on the device.
  • First of all, make sure all the following conditions are met:
    • the iPhone/iPad and the development workstation 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.
  • Among the quick access buttons, select " Debug on a new iPhone or iPad Debug on new iPhone/iPad". The window for connecting to an iOS device appears. This window contains a specific QR code.
    Connecting to an iOS device
    1. Start WMDev on the mobile device (iPhone or iPad).
      • Click on "+" and then on the button displaying a bar code.
      • Scan the barcode displayed under WINDEV Mobile in the connection window of an iOS device.
    2. WINDEV Mobile proposes to select the first project window. In our example, select the "WIN_Welcome" window and validate ("OK" button).
      First project window
    3. The mobile application starts on the iOS device.

First deployment on an iOS device

To run the application in stand-alone mode on the device, you must:
  • 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" pane, in the "Generation" group, click "Generate" (you can also click iOS generation in the quick access buttons).
    2. The wizard for generating an iPhone/iPad application starts.
      iOS application generation wizard
    3. The first step of the wizard allows you to:
      • define the application name, the company and the copyright.
      • enter the bundle identifier.

        Note

        This identifier is the unique identifier of your application for Apple. 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 proposes an identifier that respects the development standard of Apple. This identifier can be modified.
      • 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 have the ability to specify the path of different application icons. Several icons can be supplied:
      • icons for iPad and iPad Retina (only if the application proposes 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 is used to include specific files (data files, images, etc.). This possibility will not be used in our example. Keep the default options.
    9. Go to the next step. This step is used to specify:
      • whether the application is allowed to be resized or not (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.
    10. Go to the next step. This step is used to define the signature options.
      For more details on the available options, see Signature of iOS applications.
    11. Validate the wizard ("Finish"). The generation is performed in the EXE 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 is the directory that must be copied to the Mac. Click "Open generation directory".
The other operations must be performed on Mac. You must:
  • 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 directory to an external location (USB drive, external hard disk, shared directory with Mac on 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 Mac and open the file “Project_name.xcodeproj”.
    4. The project is opened in Xcode.
WINDEV Mobile automatically generates an Xcode project for your iOS compilations. To simplify the implementation of applications, WINDEV Mobile generates a “Scheme” for 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 ("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 the device.
You can then test your application directly on your iPhone or iPad.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 26
Comments
Click [Add] to post a comment