In this final installment of our three-part series on how to build an app, we'll be exploring the world of swift app development using the popular Ionic framework. If you're new to this series, don't worry – each part is designed to stand alone, so feel free to jump in whenever you like.
Installing the Ionic Framework
To get started with building your Ionic app, the first step is to install the framework itself. This can be done using Node Package Manager (NPM), which comes bundled with Node.js. To download and install Node.js, simply head over to the official website at https://nodejs.org and click on the v4.4.2 LTS link.
Starting Your Back-end REST API
Now that you have the Ionic framework installed, it's time to start building your app. If you're following along from our previous post, you should already have a back-end server set up using Django REST Framework. If not, don't worry – we've got you covered. Simply follow the same steps outlined in our previous article to get your server up and running.
Creating Your Ionic App
With your back-end server running, it's time to create your Ionic app. To do this, simply open up Command Prompt (or your favorite equivalent) and run npm install -g ionic. This will install the Ionic framework globally on your system.
Next, navigate to your Workspace directory and create a new project using the following command: ionic start miabApp blank. This will create a brand-new Ionic app for you to work with.
Adding Code to Your App
Now that you have your Ionic app set up, it's time to add some code. The first step is to add a proxy to your app, which will allow you to communicate with your back-end server. To do this, simply edit the ionic.project file and add the following code:
`json
{
"name": "miabApp",
"app_id": "",
"proxies": [
{
"path": "/api",
"proxyUrl": "http://192.168.43.243:8000/api"
}
]
}
`
Modifying Your App's Code
Next, it's time to modify your app's code to include the proxy you just set up. To do this, simply open up the js/app.js file and add the following code:
`javascript
// Define our app and include the following:
// - ionic - the framework.
// - ui.router - angular JS UI router for URLs.
// - miabApp.controllers - our custom controllers for adding functionality to our screens.
// - miabApp.services - our custom services for accessing the REST API.
app = angular.module('miabApp', [
'ionic',
'ui.router',
'miabApp.controllers',
'miabApp.services'
]);
app.run(function($ionicPlatform) {
// ...
});
app.config(function($stateProvider, $urlRouterProvider) {
// Default to the home state.
$urlRouterProvider.otherwise('/');
// Assign the home state to '/' for displaying the enter message screen.
$stateProvider.state('home', {
url: '/',
templateUrl: 'templates/enter_message.html',
controller: 'EnterMsgCtrl',
cache: false
});
// Assign the message state to '/message' for displaying a message.
$stateProvider.state('message', {
url: '/message',
templateUrl: 'templates/view_message.html',
controller: 'ViewMsgCtrl'
});
});
`
Creating a New File
Finally, it's time to create a new file at js/controller.js. This file will contain the code for your app's controllers. To do this, simply open up the file and add the following code:
`javascript
// Define our app module.
var app = angular.module('miabApp.controllers', []);
// Define our 'EnterMsgCtrl' controller and pass it the app $
app.controller('EnterMsgCtrl', function($scope) {
// ...
});
`
And that's it! With these steps, you should now have a fully functional Ionic app up and running. Of course, this is just the beginning – from here, you can customize your app to fit your specific needs and add all sorts of features and functionality. Happy coding!