 Hi guys, welcome to EmberConference 2021. My name is Ramin Mahmood and I am from Pakistan. I am running a small IT service provider company named Allah Solutions and we use Ember on a daily basis to serve the needs of our clients. We used Ember for index to applications, mobile applications and as you know the web applications. So let's begin the journey. I would like to say big thanks to my cat because she really helped me during the preparation of this presentation and as you can see that she is really helpful. Okay, so as in every application there is a beginning to start a new application. We have this command Ember Nu and I next the project name. For the sake of this presentation we are going to use a simple listing of jobs and I have created a mock server with some jobs on there and to deal with that we are going to use a job model and here is the model and after creating the model we would be using an adapter because an adapter is needed to communicate with a server. Here you can see that I am using a rest adapter and my mock server is on this URL. So Ember should know that where the data is coming from. After that definitely some UI is very important because that's what the user will be seeing. For this example I have used Semantic UI and they have Ember component as well. You can use that but I just used their CSS from the cdn. So this is the current output so far. Let me show you some code. Okay, this is the model and this is the router. You can see that in the router I have two paths. One is home and this is going to be the root of the application and the other one is the details. So when user will click on a job it will open our details page and that detail page will show all the other information to the user which might help him score a job. Okay, let's okay and on the home I am just fetching the job from the store. This is a very standard Ember data model. This is how I am presenting the jobs. These classes are from the Semantic UI and when jobs are fetched used each helper to loop over all the jobs and created a link to the details out using the model ID and then presented some of the details. And if I show you the example this is the output on the Safari. Now when user would click on any of the job it will open the details and for the details I am just passing single record job ID which is coming from model from the link and passing that here in the details HPS file template file I am just presenting the contents. So that's pretty straightforward. Now let's move to the next step. Now let's create a progressive web app. To create a progressive web app we need couple of the add-ons to be installed. Number one is to make web app we need Ember web app component. Oh sorry pardon me Ember web app add-on because every progressive web app requires a manifest file which tells the browser how to deal with that. After that we are going to install Ember service worker which will take your application offline and there are bunch of add-ons for that. Ember service worker is the basic one to make offline. You need to install these one the index one just caches your the index file and gs file asset cache with cache the images folder the asset folder in the public path and the cache fallback will put cache your external URLs. I'll show you how. So in Ember CLI build we are going to add some configuration. Number one is the division strategy for the progressive web app. We need that version to be updated every build and for the cache part I'm going to cache the all the requests made to the mock server which I have mentioned here that application doctor and I'm also going to cache this semantic css from the cdm after that in the manifest file that can be found in the config folder. So here I would like my application to be full screen this is the name these are the colors and the icon and that's it. So let me show you a progressive web app just go to pwa.allasmission.com and here app is running click share icon add to home page and it is edit. Okay now if you open that you will see that it is showing all the contents and if I turn off my internet then if I run this application again okay you would see that yeah see content is loaded without the internet okay so this is the progressive web app now coming to the next step for the mobile development for that I have just created a separate branch to just save the time I have already installed different packages which were needed so the corboreio is a codewire app for single page applications to install corbore we just need to install the global package first you can use yarn or not npm package manager and then in your project just type corbore in it and corbore start and it would definitely start the project so let me show you how this is going to work start and you can just reinstall the package because I switch the branches and sometimes this happens that the yarn lock file is different for each one and we need to update and you can see that it is working okay let's run that in our simulator let me open this project next code so we are going to install this as a mobile application and if you already have worked with cordova you know how the process of that you can change the different settings like icon and the permissions and push notifications everything for that all the cordova add-ons like notifications camera access etc would definitely work with corbore as well okay so you can see that this is overrunning as an application and when you hit publish from the xcode you are going to definitely you need to provide the details and you would be able to publish this application on the app store and play store now let's move to the point there are some settings which you can check on the corboreio last part of my presentation is electron to use electron we need to install another add-on and then we can simply run to install electron i'm going to use the beta vision because they are using the latest electron vision which really supported us with the latest features like we need to install thermal printer for a pos module pos application which we have developed in amber and in the older regions that thermal printer was not accessible or giving us some trouble and that's why i would also recommend to you guys to use the beta version and after that just run on the electron and usually we are again i need to run the package here your desktop application is ready which is working now let me make a build a package for that this will create the package compile package for you guys which you can just hit send to your customers put online for downloading and there are other lots of settings like changing the icon adding custom menu items in the electron application for that you should go to the electron website and read the documentation i guess my package is ready here you would see that out folder and okay so my amber application is now ready to be used as an desktop application so that is that's it i would say big thanks to amber team i really enjoyed working with amber and i'm working for the with amber for a long time i would like to thank all of the e-services like amber service worker the amber web app corboraio electron gs and most definitely amber observer because for if i need to find any add-on for amber i would definitely search over here because this is the only best place to find amber okay guys thank you and please enjoy the rest of this dark conference take care bye