From version 4.0.19.10 and higher, users can create an Application only from AppSpace. The User can then create a Page inside the Application. Once the page is created, AppSpace will redirect you to Page Designer to design the pages.
Now let you see how to create a simple Hello World mobile page.
How to create a Mobile Page from AppSpace. To create an application on AppSpace first log in to AppSpace, and then click on the Create new app button.
When creating an application, users can create it as a Web Application or a Mobile App. Choose the Mobile platform for your application and enter the details.
Click on Create button to create an application.
When the status shows 100% that means your application is created. Click on the Done button to close the status window.
Click on the application icon to open your app. The System will redirect the user to the components page.
Click on Create Pages icon.
Enter page details and click Start Design to redirect to Page Designer.
Once inside the Page Designer screen for designing web pages, the User can follow the below steps to create a simple mobile app
The system redirected the user to the page setup screen where you can add the content to your page. For adding content, the user can simply drag and drop the desired UI elements under the components panel, into the designing screen.
Now to create the sample 'Hello World' mobile page, click the icon to upload images into the application and also to browse through already uploaded images. Drag the image from the images panel on the left side and drop it on the top of the Container.
Drag Handle: Use this to drag the Text to a different row.
Select Container: Use this to select the Div., Col., Row or full container.
Duplicate: Copy and duplicate the selected component.
Edit: Use this to write, edit or change content font or style of this text box.
Connect to Data: Connect to data from Microflow or store or local database to create dynamic contents.
Translation: To support multiple language in the Pages.
Delete: Remove the text block from your web page.
From version 4.0.0.19 ONEWEB Page Designer can build the mobile application as APK for android or IPA for iOS and push it to the store. The screen for page CI/CD is available in the deployment section of the mobile App. User can choose either Android or iOS. The following section explains the step-by-step procedure to upload your mobile app to the store for both Android and iOS.
Note: CI stands for Continuous Integration and CD stands for Continuous Deployment.
To build Android App For Unsigned APK, you can the start the build immediately. But for Signed APK you need to add the following details to start the build. Keystore file “.jks” Alias name Keystore password Password. For more information on Signing the app please follow .
Signed APK can be released to internal test on Google Play Console. For that you need to do the following
Create a Google Developer account.
Create a Service account for project "Google Play Android Developer" and you will get an email and a private key in JSON format.
Add user from the email which you get in step 2 and provide permission for the application.
Upload private key (JSON) to Page Designer.
To build iOS App To build an iOS App you must have an Apple Developer account. Please follow the below steps once you have a valid apple developer account.
Create provisioning profile on Apple Developer account.
Login to your Apple Developer account, choose Select Certificates, Identifiers & Profiles.
Select the type of Provisioning Profile that you need and press Continue.
Select App ID and press Continue.
Select the Certificate you wish to include in this provisioning profile (the certificate the app was signed with) and click Continue.
Select the devices you wish to include in the provisioning profile. The certificate is a public/private key-pair, which identifies who developed the app.
Create a name for your profile and click Generate.
Upload Certificate and Provisioning Profile on the App in Page Designer
Now, you can build the iOS for Development/Distribution.
The built IPA for Distribution can be released to testflight on App Store.
Enter the Apple ID, App ID and Application Specific Password to connect to App Store
Customizing mobile apps with complex native features
Page Designer provides a feature rich SDK for developing mobile apps. It provides ad hoc tools to integrate with external systems, with databases, enable push notification or even provide offline storage. But modern-day apps require much more complex features that needs to communicate with the native platform directly.
To allow your app to use native device capabilities, ONEWEB allows importing custom plugins on the Page Designer. There is a host of Cordova plugins already available for import. But if an app requires a very specific feature, user can write their own Cordova plugins using Objective-C. Once the plugin is built and upload to github, user can import the plugin on to the mobile app settings on Page Designer.
Drag and drop component Heading. Click at the component Heading and select in the menu bar on top of heading for edit.
Rename default text "Heading" to "Hello World" by using an Edit icon.
Save the changes to your page by clicking on the save icon at the top panel.
Once you enter the details, you can press the Build Android button under the Release section to build the signed APK.
Press action button of the signed build and select Play Store.
Export the Certificate file in ".p12" format from Keychain Access program in Mac OS or use Certificate Signing Request (CSR) of Page Designer to generate Certificate (.cer). For more information on iOS Certificates please follow .
Press action button on the built IPA for Distribution and select App Store.
Once you finish creating the app screen in Page Designer, you can test & preview your app using a built-in utility provided by Page Designer called PlayMe. To preview, click on the PlayMe button provided on the top right of page designer screen.
It is also provided on the settings screen in Page Designer.
When you click on the PlayMe, wait for a few moments for your mobile application to build all the pages inside your application. Once it completes, a "Build successful" message will be displayed along with a URL, indicating that the build was successful. The User can now preview the App at the URL provided with the message.
To preview this page on the browser in the new tab or a new window, a user simply can simply access the URL: http://(IP Application server)/preview/(userId)/(Namespace). In this sample example, Namespace is 'com.team'.
Users can also download the PlayMe App from Google Play.
Once the Play Me is installed on your mobile, you can preview the ONEWEB App you created by scanning QR Code on the Play Me App.
For generating QR Code for your application, go to the Deployment tab in your Page Designer.
The System shows the QR Code to scan for the application.
Now you can preview the app on your mobile phone.
Build a zip file of your application if it does not exist already. To build a zip file click on the Build Zip button. . Once the zip file is built on the server, the user can see the version and status of the build. Click on the to expand the menu option and Select Play Me.
Security is a very important feature to be taken into consideration while developing a mobile app. Given below are a few pointers to keep in mind while developing a mobile app.
Since a Cordova application is built from HTML and JavaScript assets that get packaged in a native container, you should not consider your code to be secure.
Always validate all user inputs. All the validations should be done on server side before passing the data to backend services. Because an attacker could manipulate your HTML and JS assets.
Never cache sensitive information as it could potentially be retrieved later by an unauthorized user or application.
Use the InAppBrowser when opening links to any outside website. This is much safer than whitelisting a domain name and including the content directly in your application because the InAppBrowser will use the native browser's security features and will not give the website access to your Cordova environment.
