We now have a sample application to help you get started using DreamFactory as the backend for your Ionic apps. This app is a simple address book that shows how to handle user authentication and registration, plus CRUD operations on SQL tables with related data. Ionic2 is used to create hybrid mobile apps. It's the latest framework built on top of Angular2 by Google.
Check out the code. It has simple and useful examples for organizing code and creating components in Ionic with Angular 2. The README.md file shows how to set up your DreamFactory instance and run the app. You can go to https://www.dreamfactory.com to create a trial DreamFactory instance, or install your own for free.
Hybrid mobile apps are written in HTML, CSS and JavaScript and can be installed on various operating systems. This way the developers have to write code only once that can be run on multiple environments. `Cordova` is the native wrapper which is responsible for loading your HTML/CSS/JavaScript in a web view when the mobile app is started. It also has a lot of plugins which can be used to communicate with the native components of the device, for example: bluetooth, gps etc.
For more information on Ionic please refer to the ionic documentation.
In order to communicate with your DreamFactory instance you need to edit the following configuration values in 'ionic-sdk/app/config/constants.ts'. The first one is the DreamFactory API key for your app. The second is the URL for your DreamFactory instance.
export const DREAMFACTORY_API_KEY: string = '[your API key]';<br>export const DREAMFACTORY_INSTANCE_URL: string = '[your url]';
These config values will be used by the address book app to communicate with your DreamFactory instance.
Use these commands to build and run the application:
(navigate to the ionic-sdk directory)<br><br>npm install -g grunt-npm-install<br>npm install -g gulp-cli<br>npm install<br>npm install -g ionic@beta (reference: https://ionicframework.com/docs/v2/getting-started/installation/)<br>npm install -g cordova (optional)<br>ionic serve -l
npm install should download the module inside your node_modules folder after which you can include and use all the components.
The first layer of the app is the services which communicate with the api and take care of any business logic.
Then come the components, which consume the above services and show the data in the UI. The code here only deals with the UI. It's good practice to keep your code separate. Any business logic related or api related stuff should go in services. Whereas the controllers and components should only take care of handling the UI.
Lets say for example you want to use contact-list component. So as mentioned above the first thing to do is work on services and create methods which will take care of the communication with the API:
export class ContactService {<br> baseResourceUrl: string = constants.DSP_INSTANCE_URL + '/api/v2/db/_table/contact';<br> constructor(private httpService: BaseHttpService) {<br> };<br><br>query (params?:URLSearchParams): Observable<Contact[]> {<br> return this.httpService.http<br> .get(this.baseResourceUrl, { search: params })<br> .map((response) => {WWW<br> var result: any = response.json();<br> let contacts: Array<Contact> = [];<br> result.resource.forEach((contact) => {<br> contacts.push(Contact.fromJson(contact));<br> });<br> return contacts;<br> });<br> };<br><br>}
There are still some major modifications to be done when it comes to writing apps in Ionic. Since there is no URL handling, NavController is used to push pages in the nav stack. Consider the following example:
In contact-list.ts:
// Inject Nav controller and navParams to access nav stack and parameters (just like route parameters)<br>constructor (private contactService: ContactService, private nav: NavController, navParams: NavParams) {<br> this.getList();<br>}
If we want to show a contact item or transition to a contact detail:
this.nav.push(ContactCmp, { id: contactId, animate: false });
The contact component constructor will also inject the same params: Navcontroller and NavParams. Using navparams the contact component can extract the `id` field used to fetch the contact data from the API via ContactService.
var contactId: string = navParams.get('id');
The HTML is another major change from what we had in our previous Angular sample apps. In this app the Ionic directives are used to display data, which is obvious because Ionic has control over how to display elements in different operating systems (iOS, Android, Windows). Consider the following example of contact list.
<ion-grid><br> <ion-row *ngFor="let contact of contacts"><br> <ion-col width-90><br> <button ion-item (click)="show($event, contact.id)"><br> <ion-icon name="" ></ion-icon><br> CONTACT.FIRSTNAME CONTACT.LASTNAME<br> </button><br> </ion-col><br> <ion-col right><br> <button name="trash" class="button icon-left button-positive" (click)="remove(contact.id)"><br> <ion-icon ios="ios-trash" md="md-trash"></ion-icon><br> </button><br> </ion-col><br> </ion-row><br></ion-grid>
Although this is a relatively simple app, it should give you the examples you need to connect your Ionic apps to DreamFactory. We also have similar apps for other frameworks. Just head to our GitHub account and search for 'sdk.'