Let's build a mobile application with Ionic Framework #1

Let's build a mobile application with
Ionic Framework
@ChihebNabil
Composants UI : http://ionicframework.com/docs/components
Slide
NB : Ensure that NodeJS is correctly installed on your machine




Slides
Cordova / Ionic / AngularJS ?
Native : The inconvenients
Is there an alternative?
Ionic CLI
Overview of UI components (http://ionicframework.com/docs/components)
Mini Project


Cordova / Ionic / AngularJS ?

Apache Cordova (6.x) :
open source framework developed by the Apache Foundation. It allows to create applications for different platforms (Android, IOS ...) in HTML, CSS and JavaScript.

Ionic (1.3):
it is a framework based on AngularJS facilitate the development of hybrid mobile applications


AngularJS (1.5.5) :
AngularJS is a JavaScript framework Open Source Powered by Google





Native : Les inconvénients
Mastering each platform is required
expensive development
entirely separate Source Code


Y at-il une alternative?
HTML5 Applications
Direct access to native APIs
Develop a single application (web platform)


Ionic CLI

npm install -g ionic cordova

ionic start myapp sidemenu

cd myapp ionic serve


Overview components UI : List



Overview components UI : SideMenu


Overview components UI : Pull to refresh


Mini Project
Develop a reader application of audio file (Audio Books)

   data.json  :  contains a list of audiobooks (Author, Category, Name Book, streaming link)
   source      : http://www.litteratureaudio.net/
                       

Comments

  1. Kavi PriyaMay 8, 2019 at 3:13 PM

    This is really helpful and informative, as this gave me more insight to create more ideas and solutions for my plan. Excellent and very cool idea and great content of different kinds of the valuable information's.
    Mobile App Development Company in Dubai
    Android App Development Company in Dubai
    Mobile App Development Company
    Mobile App Development Company in UAE

    ReplyDelete

Post a Comment

Popular posts from this blog

Twitter API with PHP

Image
In order to use a communicante with a website ( in this case twitter) , we need to call it's  api But there too many standars to communicate with api ( OAuth1, OAuth2...) , hopefully they provides api documentation . In this tutoriel we are gonna use twitter api ( 1.1  ) as exemple to get ou last tweets , but first we have to create twitter application Creating twitter application give us  some random strings `consumer_secret`, `consumer_key`, `access_token` and  `access_token_secret` We will use these strings later in OAuth process. Don't panic no need to knowing all OAuth process using  php , Moreover, there are many php libraries and packages to do this for us , there is a very popular one ( twitter-api-php ) first we create an empty folder for our project then require the package : composer require  j7mbo/twitter-api-php copy and past random strings from your twitter application in to this array  variable :  $settings = array ( ' oau
Read more

Realtime Chat Application with CakePHP and Socket.IO #1

Image
In this blog we will build a Realtime Chat Application with CakePHP and Socket.IO Your are free to use another framework, the idea is just learning the basics and a few (Socket.IO) tips Database :  To store our data for this application we need 4 tables :  users :         contains user's informations such as username and password hash ,email ...  messages : contains messages between users, it also store the information of sender and destination  user companies : or teams table ,in order to organise groups i add this table to give the user the freedom  of organizing his contact it stores the company name with his owner .   companies_users : it contains the users and their respective  companies here the SQL file fo database structure     file in the next tutorial we'r gone started building the frontend using cakephp  
Read more

Let's build a mobile application with Ionic Framework #3

Image
Today We 're gonna start to write some code , first is make a main controller to our ionic application , of course by controller i mean angularjs controller . we start by add ng-controller to our body tag , but this is just a reference to controller we need also to create this controller (MainController) .  The idea is just use http call to get the data.json AngularJS comes with built in $ http service  to make (GET,UPDATE,POST,DELETE) in our case we are are doing get call app.controller('MainController',function ($scope,$http) {   // body...   $http.get("data.json")     .then(function(response) {         console.log(response)     }); }) we are just login data in the console. NB : the http call could make some time before it returns the  data in , our case we are working localy, but in real life we have to work with web services and  probably internet connection like mine lol, you guessed it, we need to use some techniq
Read more