The Framework I Love
This is a modal window.
Das Video konnte nicht geladen werden, da entweder ein Server- oder Netzwerkfehler auftrat oder das Format nicht unterstützt wird.
Formale Metadaten
| Titel |
| |
| Serientitel | ||
| Anzahl der Teile | 23 | |
| Autor | ||
| Lizenz | CC-Namensnennung 3.0 Unported: Sie dürfen das Werk bzw. den Inhalt zu jedem legalen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen. | |
| Identifikatoren | 10.5446/62160 (DOI) | |
| Herausgeber | ||
| Erscheinungsjahr | ||
| Sprache |
Inhaltliche Metadaten
| Fachgebiet | ||
| Genre | ||
| Abstract |
|
EmberConf 20215 / 23
2
3
5
9
10
12
13
14
15
16
17
18
21
22
00:00
CodeComputeranimationJSON
00:15
Framework <Informatik>Virtual Home EnvironmentEndliche ModelltheorieProjektive EbeneWeb-ApplikationKartesische KoordinatenComputerunterstützte ÜbersetzungMobiles InternetFunktion <Mathematik>Prozess <Informatik>ServerMailing-ListeClientZusammenhängender GraphBasis <Mathematik>URLService providerDienst <Informatik>Coxeter-GruppeApp <Programm>CDN-NetzwerkFormation <Mathematik>Cross-site scriptingCodeJSONBesprechung/Interview
02:33
RouterInnerer PunktLokales MinimumWinkelHyperlinkKartesische KoordinatenProzess <Informatik>RouterKlasse <Mathematik>Endliche ModelltheorieDatenmodellInformationWeb-SeiteLoopVerschlingungStandardabweichungWurzel <Mathematik>InformationsspeicherungFunktion <Mathematik>Besprechung/Interview
04:00
SoftwareentwicklerSoftwareSystemprogrammierungSystemplattformPhysikalisches SystemWeg <Topologie>Euler-WinkelSkalierbarkeitCodeObjektrelationale AbbildungKontrollstrukturDienst <Informatik>PunktwolkeSoftwaretestFramework <Informatik>Prozess <Informatik>Funktion <Mathematik>Computeranimation
04:15
DatenmodellWalsh-FunktionensystemGammafunktionVerschlingungEndliche ModelltheorieInhalt <Mathematik>Elektronische PublikationTemplateProzess <Informatik>
04:47
Keilförmige AnordnungGammafunktionE-MailWeb-ApplikationZusammenhängender GraphZahlenbereichCachingArithmetische FolgeCLIURLBildgebendes VerfahrenElektronische PublikationAutomatische IndexierungDienst <Informatik>Installation <Informatik>BrowserKartesische KoordinatenBenutzerbeteiligungBesprechung/Interview
06:05
GammafunktionBimodulCachingMakrobefehlVersionsverwaltungCross-site scriptingWeb-ApplikationKartesische KoordinatenServerMereologieZahlenbereichKonfigurationsraumCDN-NetzwerkCachingArithmetische FolgeStrategisches SpielDivisionEndliche ModelltheorieGebäude <Mathematik>BildverstehenBesprechung/Interview
06:49
GammafunktionDatenmodellE-MailSpieltheorieVakuumMathematikVerschlingungTouchscreenGraphfärbungKartesische KoordinatenElektronische PublikationBildschirmsymbolKonfigurationsraumBesprechung/Interview
07:20
Lemma <Logik>HauptidealSoftwareentwicklerSoftwareTouchscreenHumanoider RoboterSpieltheorieVideokonferenzGesetz <Physik>PunktwolkeSystemprogrammierungCOMInhalt <Mathematik>Web-ApplikationSoftwareentwicklerInternetworkingArithmetische FolgeBildschirmsymbolGemeinsamer SpeicherApp <Programm>COMSkalarproduktFormation <Mathematik>HomepageKartesische Koordinaten
08:40
GammafunktionVerschlingungZehnVorzeichen <Mathematik>Lokales MinimumW3C-StandardMultiplikationsoperatorVerzweigendes ProgrammWrapper <Programmierung>DatenverwaltungKartesische KoordinatenWeb-SeiteEinfache GenauigkeitProjektive EbeneTypentheorieBesprechung/Interview
09:22
GammafunktionPhysikalischer EffektCMM <Software Engineering>WärmeübergangNichtlinearer OperatorBetafunktionSinguläres IntegralLemma <Logik>BildschirmsymbolBrowserSigma-AlgebraGEDCOMMarketinginformationssystemE-MailBildschirmsymbolSchnittmengeElektronische PublikationVerzweigendes ProgrammCodeApp <Programm>Projektive EbeneDifferenteProzess <Informatik>Formation <Mathematik>Besprechung/Interview
12:06
MenütechnikSoftwareentwicklerSystemplattformProgrammbibliothekSpieltheorieVideokonferenzProzess <Informatik>BrowserBrennflächeSoftwareWurzel <Mathematik>SpielkonsoleKartesische Koordinaten
12:31
Programmierbare logische AnordnungMarketinginformationssystemSoftwareentwicklerSoftwareSystemprogrammierungLemma <Logik>BrowserE-MailPunktwolkeGroßrechnerSLAM-VerfahrenSpieltheorieProzess <Informatik>Verhandlungs-InformationssystemKartesische KoordinatenFormation <Mathematik>InformationsspeicherungApp <Programm>PunktFontTelekommunikationMereologieSchnittmengeCoxeter-GruppeBesprechung/Interview
13:04
Produkt <Mathematik>Prozess <Informatik>GammafunktionVerhandlungs-InformationssystemImpulsW3C-StandardVersionsverwaltungKartesische KoordinatenBildverstehenTelekommunikationBimodulInstallation <Informatik>Besprechung/Interview
13:53
SpielkonsoleSpieltheorieGammafunktionQuantisierung <Physik>WinkelE-MailSoftwareentwicklerSoftwareKartesische KoordinatenTelekommunikationBesprechung/Interview
14:54
GammafunktionSpezialrechnerW3C-StandardLokales MinimumDatentypGesetz <Physik>E-MailSpieltheorieTermHyperlinkTelekommunikationWeb SiteKartesische KoordinatenSchnittmengeFormation <Mathematik>BildschirmsymbolMenütechnik
16:14
GammafunktionGoogolTelekommunikationDienst <Informatik>Web-ApplikationMultiplikationsoperatorBenutzerbeteiligungBesprechung/Interview
16:56
SoftwareJSON
Transkript: Englisch(automatisch erzeugt)
00:21
Hi guys, welcome to AMBER Conference 2021. My name is Ramin Mahmoud and I am from Pakistan. I am running a small IT service provider company named Alla Solutions and we use AMBER on a daily basis to serve the needs of our clients. We used AMBER for desktop applications, mobile applications,
00:41
and as you know, the web applications. So let's begin the journey. I would like to say a big thanks to my cat because she really helped me during the preparation of this presentation. And as you can see that she's really helpful.
01:04
OK, so as in every application, there is a beginning to start a new application. We have this command AMBER new and next the project name. For the sake of this presentation,
01:23
we are going to use a simple listing of jobs. And I have created a mock server with some jobs in there. And to deal with that, we are going to use a job model.
01:40
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'm using a REST adapter and my mock server is on this URL. So AMBER should know that where the data is coming from.
02:04
After that, definitely some UI is very important because that's what the user will be seeing. For this example, I have used Vantage UI and they have AMBER component as well. You can use that, but I just used their CSS from the CDN.
02:26
So this is the current output so far. Let me show you some code. OK, this is the model and this is the router.
02:43
You can see that in the router, I have two paths. One is home and this is pointing to the root of the application. And the other one is the details. So when the user will click on a job, it will open up a details page
03:02
and that details page will show all the other information to the user, which might help him score a job. OK, let's see. And on the home, I'm just fetching the job from the store.
03:26
This is a very standard AMBER data model. This is how I'm presenting the jobs. These classes are from the semantic UI and
03:44
when jobs are fetched, used each helper to move 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 from the Safari.
04:09
Now, when user would click on any of the job, it will open the details. And for the details, I'm just passing single record
04:26
job ID, which is coming from model from the link and passing that here. The details HPS file, template file, I'm just presenting the contents.
04:45
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 a couple of the add-ons to be installed. Number one is to make.
05:03
Web app, we need AMBER web app, web app component. Sorry, pardon me, AMBER web app add-on, because every progressive web app requires a manifest file, which tells the browser how to deal with that.
05:23
After that, we are going to install AMBER service worker, which will take your application offline. And there are a bunch of add-ons for that. AMBER service worker is the basic one to make offline
05:41
you need to install these one. The index one just caches your index file and JS file, asset cache, which caches the images folder, the assets folder in the public path and the cache fallback will cache your external URLs. I'll show you how.
06:03
So in AMBER CLI build, we are going to add some configuration. Number one is the vision strategy for the progressive web app. We need that vision to be updated every build.
06:25
And for the cache part, I'm going to cache all the requests made to the mock server, which I have mentioned here, the application model.
06:43
And I'm also going to cache this semantic CSS from the CDN. After that, the manifest file that can be found in the config folder.
07:08
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.
07:22
So let me show you. A progressive web app. Just go to PWA.alasmission.com
07:40
and here app is running. Click share icon. Add to homepage. And it is edit. OK, now if you open that.
08:00
You will see that it is showing all the contents. And if I turn off my Internet. Then if I run this application again.
08:21
OK, you would see that. Yeah, see content is loaded without the Internet. OK, so this is the progressive web app. Now coming to the next step for the mobile development.
08:41
For that, I have just created a separate branch to save the time. I have already installed different packages which were needed. So the Korber.io is a Cordova wrapper for single page applications.
09:03
To install Korber, we just need to install the global package. First, you can use Yarn or Node NPM package manager. And then in your project, just type Korber in it and Korber start and it would definitely start the project.
09:21
So let me show you how this is going to work. Korber start and you can reinstall the packages.
10:01
Because I switched the branches and sometimes this happens that the Yarn log file is different for each one. And we need to update
10:30
and you can see that it is working. Let's run that in a simulator.
10:54
Let me open this project. Next code. So we
11:33
are going to install this as a mobile application. And if you already have worked with Cordova,
11:42
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.
12:00
would definitely work with Korber as well. OK, so you can see that this is running as an application.
12:22
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.
12:41
Now let's move to the other point. There are some settings which you can check on the Korber IO. Last part of my presentation is Electron. To use Electron, we need to install another add-on
13:03
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,
13:24
which really supported us with the latest features, like we need to install a thermal printer for a POS application, which we developed in Amble and in the older versions that thermal printer was not accessible
13:44
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
14:02
and usually, again, I need to run the package.
14:45
Here, your textbook application is ready, which is working. Now let me make a build a package for that.
15:02
This will create the package, compile package for you guys, which you can just 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.
15:22
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 OK.
16:03
So here, my Amble application is now ready to be used as an desktop application. So that's it. I would say big thanks to the Amble team.
16:20
I really enjoyed working with Amble and I'm working for them with Amble for a long time. I would like to thank all of the services like Amble Service Worker, the Amble Web App, Corber.io, Electron.js and most definitely Amble Observer because if I need to find any add-on for Amble,
16:42
I would definitely search over here because this is the only best place to find Amble add-ons. OK, guys, thank you. And please enjoy the rest of the conference. Take care. Bye bye.