Home
Documentation about the template devon4ng-ionic-application-template.
This is a very basic template for the ionic framework, with very basic functionalities that include a login and several optional choices, such as i18n, a grid with basic actions such as add, modify, or delete an item from a database.
Download the project or clone this repository, then generate with cobigen the desired functionality. Now to connect your device to the backend, you need to set the URL of your backend service in the files environments.ts, environments.prod.ts and environments.android.ts.
To run the front-end, the following steps have to be done:
-
run
npm installin the root folder -
run
ionic serve
After that, a browser window will be opened to show the app.
To display the results on an android device:
-
run
npx cap init "name-for-the-app (between quotes)" "id-for-the-app (between quotes)" -
run
ionic build --configuration=android -
run
npx cap add android -
run
npx cap copy -
run
npx cap open android
The last command opens Android Studio. Once it is opened, build the sdk and run an emulator/connect a device.
In the app.component.html we can generate the contents of the menu we’re going to use in all the aplication, which includes the diferent pages which we allow access from the menu, as well as manage the navigation when clicking those pages.
app.component.ts contains the array with the pages and its components, this is the place to add new pages that show on the menu.
app.module.ts is the big deal, we need to declare every component used in the application as well as the diferent providers (called services in angular).
Since its version 4, the way ionic manages the navigation is identical as angular, moreover, ionic generates the same app-routing.module.ts to manage angular’s routing.
First we have the exported URL of the backend service in the environments folder, environment.ts. This file only has the address we’re connecting with the application.
Secondly we have business-operator.service.ts, a service whose purpose is building the different paths needed in the application. It relies on the URL of environment.ts.
In auth.service.ts we manage the state of authentication of the user, and the storage of the jwt token, necessary for authenthication after the login. Related with this server, insided the file auth-guard.service.ts there is an authentication guard, which restricts the access to not allowed pages.
There is an interceptor implemented in http-interceptor.service.ts, his only role in the template application is to modify the messages we send by setting the jwt token stored in auth-Service in the headers of the messages out.
login.service.ts is a service that builds the http petition and returns it as a promise.
Finally, a service is needed to retrieve and modifiy data. This functionality can be found on sampledata-rest.service.ts.
There is only one component used globally in the application, the header component, as its name suggests his purpose is to service as header for the main pages. It has a menu button, whose content is defined in app.component.html, and its functionality is defined in app.component.ts, a button for language changes that changes depending on the current language and the logout button.
For the implementation of new languages you’ll need to define a new .json in assets/i18n.
The login page displays a login form with two mandatory fields: username and password.
In order to access to the rest of the pages, the correct credentials have to set. Once the correct data is introduced and the submit button is clicked, the app redirects the user to a home page.
|
Note
|
For testing purposes, user and password are equals: waiter |
Home is the first page a valid user see, it contains the Capgemini logo and a header with a side menu that lets the user go to other available pages.
Images and "custom" icons must be included in the corresponding folders in the assets\images or assets\icons folders found in src.
The purpose of the Sample data list page is to show the data that receives from a service, to do so, it uses an ionic list.
This page uses the same header as the home page, furthermore, it has another menu which allows the user to modify, add, delete and search data, however modify and delete options are only avaible when an element from the displayed list is clicked.
