Brainmatics

Hybrid Mobile Application with Ionic and AngularJS

Di era persaingan bisnis yang kian ketat, kebutuhan time to market sangatlah penting bagi perusahaan yang menjual produk atau jasa di bidang digital. Terlebih target consumer yang memiliki tingkat penggunaan smartphone yang tinggi, memaksa perusahaan untuk sigap dan cepat dalam memenuhi kebutuhan pasar dengan mengembangkan aplikasi yang multi platform. Kendala yang muncul tim pengembang sering mengalami dilema saat akan mengembangkan aplikasinya. Memikirkan technology stack yang mumpuni dan sesuai dengan kapabilitas dari developer yang dimiliki, umumnya menguras banyak waktu dan cost. Ditambah jika harus membuat aplikasi native untuk masing-masing platform seperti web, android, dan iOS membutuhkan waktu, biaya, dan kompetensi yang tidak sedikit. Maka dari itu butuh suatu teknologi cross-platform untuk mempercepat pengembangan aplikasi multi platform. Ionic adalah framework pengembangan aplikasi mobile yang memungkinkan anda untuk membuat aplikasi  untuk iOS, Android, Windows dan platform seluler lainnya menggunakan teknologi web seperti JavaScript, HTML, dan CSS.

Pada training ini mengajarkan web developer bagaimana membangun aplikasi mobile cross-platform untuk ponsel dan tablet di iOS dan Android menggunakan Ionic and AngularJS. Dengan Ionic, Anda dapat membuat aplikasi mobile hybrid menggunakan teknologi web seperti HTML, CSS, dan JavaScript, yang akan berjalan di kedua iOS dan Android. Selain itu, Anda dapat mempelajari cara membuat aplikasi menggunakan komponen UI yang dirancang untuk mobile, memanfaatkan location, terintegrasi dengan fitur kamera, gestur sentuhan, dan terintegrasi dengan sumber data eksternal.

OBJECTIVES

1. Mampu membuat aplikasi mobile yang dapat berjalan di platform web, android, IOS, dan Windows Phone
2. Memahami Ionic framework, AngularJS, dan Cordova plugin
3. Mampu mempublikasi aplikasi di Google Play dan AppStore

 

AUDIENCE

Programmer

 

PREREQUISITES

Mempunyai dasar HTML, CSS, dan Javascript

CONTENT

1. Introducing Ionic and Hybrid Apps

    1.1. Introduction to Ionic
    1.2. Types of Mobile Experiences
    1.3. Understanding How the Ionic Stack Works
    1.4. Prerequisites For Building Apps With Ionic
    1.5. Supported Mobile Devices and Platforms

2. Setting Up Your Computer to Build Apps

    2.1. Quick-start Guide
    2.2. Setting up Previewing Environments

3. What You Need to Know About AngularJS

    3.1. AngularJS at a Glance
    3.2. Setting up For the Chapter Project
    3.3. Basics For an Angular App
    3.4. Controllers: For Controlling Data and Business Logic
    3.5. Loading Data: Using the Controller to Load and Display Data in the View
    3.6. Handling Click Events to Select a Note
    3.7. Create a Directive to Parse a Note With Markdown
    3.8. Using Models to Manage Content Editing
    3.9. Saving and Deleting a Note
    3.10. Continuing with Angular

4. Ionic Navigation and Core Components

    4.1. Set up Chapter Project
    4.2. Setting up the App Navigation
    4.3. Building the Home View
    4.4. Using a Controller and Model For the Reservation View
    4.5. Loading Data Into the Weather View
    4.6. Infinite Scroll With Cards For the Restaurants View
    4.7. Using the Slidebox Component For App Intro Tour

5. Tabs, Advanced Lists, And Form Components

    5.1. Set up Chapter Project
    5.2. IonTabs: Adding Tabs and Navigation
    5.3. Adding IonNavView For Each Tab
    5.4. Loading and Displaying Current Bitcoin Rates
    5.5. Display a Currency’s Details In the Same Tab View
    5.6. Refresh the Bitcoin Rates and Display Help
    5.7. Charting Historical Data
    5.8. Currencies Tab With List Reordering and Toggles

6. Weather App, Using Side Menus, Modals, Action Sheets, and IonScroll

    6.1. Setting up the Chapter Project
    6.2. Setting up the Side Menu and Views
    6.3. Adding Settings View and Data Services
    6.4. Setting up the Weather View
    6.5. IonScroll: Building Custom Scrolling Content
    6.6. Action Sheet: Displaying a List Of Options
    6.7. IonModal: Displaying the Sunrise and Sunset Chart
    6.8. Popup: Alert and Confirm Changes to Favorites

7. Advanced Techniques For Professional Apps

    7.1. Set Up Chapter Project
    7.2. Custom Ionic Styling Using Sass
    7.3. How to Support Oline and Offline Mode
    7.4. Storing Data For Persistence
    7.5. Building One App For Multiple Platforms
    7.6. Modify Default Behaviors With $ionicConfigProvider

8. Using Cordova Plugins

    8.1. Cordova Plugins
    8.2. NgCordova
    8.3. Using a Camera and Photos in the Resort App
    8.4. Using Geolocation in the Weather App
    8.5. Chapter Challenges

9. Previewing, Debugging, and Automated Testing

    9.1. The Differences Among Previewing, Debugging, and Testing
    9.2. Setting up the Chapter Example
    9.3. Additional Ways to Preview Apps
    9.4. Debugging From a Device
    9.5. Automated Testing
    9.6. More Test Examples

10. Building and Publishing Apps

    10.1. Building For Production: an Overview
    10.2. Building Icons and Splash-Screen Assets
    10.3. Preparing Your App for Production
    10.4. Building Android Apps and Publishing to Google Play
    10.5. Building IOS Apps and Publishing to the AppStore

 

INSTRUCTOR

pak hendroHendro Steven Tampake. Lahir di Jakarta 19 November 1981. Menamatkan S1 Teknik Informatika di UKSW Salatiga pada tahun 2005, dan S2 Jurusan Ilmu Komputer di UGM Yogyakarta pada tahun 2011. Aktif sebagai Software Development Engineer, Instructor Training, dan Programmer dengan berbagai teknologi seperti: PHP/CodeIgniter, MySQL, JSE, JEE, JME, Ajax, PGSQL