Fasten Mobile Development using Angular and Nebular

Using Angular and Capacitor, we could make mobile development faster.
Nebular will help you create UI faster than ever.

Transcript

1. Fasten Mobile Development using Angular and Nebular Ridho Febriansa @ SurabayaJS x DevC Surabaya Sept 2019
2. Profile • Muhammad Ridho Febriansa • Working on my thesis at Ubaya • In love with web and video games technologies, can’t wait for mixed reality as our daily device! • an INFJ-T (pardon my awkward, please)
3. and I’m going to talk about: • Mobile Development Obstacles • Develop Mobile App using Angular? • Make your app more catchy using Nebular
4. but not gonna talk about: • How to install and code in Angular? • Practical implementation of Angular and Nebular
5. Mobile Development Obstacles
6. Mobile Development Obstacles
7. Mobile Development Obstacles
8. Mobile Development Obstacles • Development is heavily depends on spec of your PC ( especially if you have a potato PC ) • More development time = less income / productivity
9. Develop Mobile App using Angular?
10. Develop Mobile App using Angular Pros • Faster development process • Doesn’t need extra gigs of RAM to open stackoverflow • More profit! Cons • Limited usage of Android API (need extra improvement) • After publishing, the cycle might not as effective as making from stratch
11. Development Cycle: • Create Angular project using CLI / import previous project. • Develop your web app using Typescript, HTML, and CSS in mobile view on browser. • Ready to publish your mobile app? • ng build --prod • npx cap add android && npx cap add ios • npx cap run android
12. wait, what is npx cap?
13. Mobile Apps achieved FYI, • Android Studio is needed • We still need gradle to build apk • You can run using emulator or your mobile device
14. Make your app more catchy using Nebular
15. Why Nebular? • Client will love the design • It’s a component, it doesn’t need extra effort to set up • Well written docs • A lot of component that ready to use including icons
16. Import Nebular to existing project? call a syntax using Angular CLI: • ng add @nebular/theme
17. First Step on Nebular: Choose Layout
18. First Step on Nebular: Choose Layout Import the component both on app.module.ts and your component.ts import { NbLayoutModule } from '@nebular/theme'; @NgModule({ imports: [ NbLayoutModule.forRoot(), ],
19. First Step on Nebular: Choose Layout Copy the sample html and ts code into your component
20. and more Nebular components
21. and combine between components
22. Resources Capacitor: https://angularfirebase.co m/lessons/capacitor-five-a pps-in-five-minutes/ or https://github.com/ridhof/r eferences Nebular: https://akveo.github.io/ne bular/
23. Thank you! AMA at Twitter @ridhofebriansa