Skip to main content

Hybird App Development with SammyJS Full Series - #46


Like what you see, support the channel.

Published: December 28, 2020


Estimated Reading Time
3 minutes
Video Duration
2:29:51 minutes

Become a Patreon to show support and get exclusive access to content: https://www.patreon.com/devdrawer

Let's start building a mobile hybrid app using Cordova, Sammy JS, and HTML. A hybrid app is a website that can be converted into a mobile application using Cordova, PhoneGap, or Iconic. This conversion creates "native" code that can be run on a multitude of devices including Android, iOS, Windows Phone, and a Desktop.

Using SammyJS, we are able to build routes like you can in Laravel without PHP. This gives us flexibility and allows us to build an app-friendly code base. With routing, we can utilize caching and storage on the device better and can also still use databases and scripting via APIs and AJAX / JSON.

You can build this app to work with any type of external API as long as the app can hit the server's API correctly.

Let's take it further and add an external "API" using PHP accessible with AJAX.

This will allow us to build a flat HTML app for iOS and Android but still be able to have dynamic data. In this tutorial, we set up our remote server, set up our database, and build the AJAX queries.

Once this implementation is in place, we can pull external data from any server regardless of programming language.

We used AJAX to get content from a remote PHP API and we add content to our pages. We also use AJAX to created our SammyJS routes dynamically.

We create a desktop and mobile flexible view and get content from a remote API we created using simple PHP code.

Let's take that idea and build a REST API using PHP code. The new REST API will utilize PDO, controllers, and classes to build a reusable and scalable API.

The new REST API works better with our existing code base and can be expanded into a fully-functional CRUD application for your app backend. The newly created object-oriented JSON code helps deliver better responses and error codes.

Lastly, we are going to create the CRUD (create, read, update, delete) operations for the API. Instead of creating an admin, we will be using Postman to manage our API and test the functionality and responses.

Postman is a free application you can download and test APIs quickly and efficiently. You can install it on your computer and run your local as well as public APIs to see results and access.

Individual Series Videos

1. Build A Hybrid Web App Using SammyJS, Cordova, and HTML - Setup SammyJS: https://youtu.be/D3gVKS4eBKQ

2.Integrate AJAX Into Hybrid App with SammyJS: https://youtu.be/sKKQQ4QQFhI

3. Dynamically Adding Content Using An API and SammyJS: https://youtu.be/gNBH4Wg67GY

4. Use PHP to Build Your Own REST API: https://youtu.be/oylDnIIYiXU

5. Use Postman to Test Your PHP REST API: https://youtu.be/1g-mFGECt3g

Applications Used

Visual Studio Code v1.43: https://code.visualstudio.com/

WAMP v3.2.0: http://www.wampserver.com/en/

Computer Hardware:

Windows 10 Pro: https://amzn.to/3q5TyZw (Amazon)

Samsung 500GB External SSD: https://amzn.to/2ViAAAF (Amazon)

Samsung 970 EVO Plus SSD 1TB - M.2 NVMe: https://amzn.to/36jDwDy (Amazon)

Rosewill Hive-750S R750W PSU: https://amzn.to/36jiDbs (Amazon)

Phanteks Eclipse Tempered Glass Case: https://amzn.to/39qou0B (Amazon)

MSI Arsenal Gaming AMD Ryzen Motherboard: https://amzn.to/36hpAKm (Amazon)

MSI Gaming GeForce RTX 2060 Super 8GB: https://amzn.to/36hMyRm (Amazon)

LG 34UM69G-B 34-Inch 21:9 UltraWide IPS Monitor: https://amzn.to/2HSRxyI (Amazon)

Corsair 64GB (4 x 16GB) DDR4 Memory: https://amzn.to/3mlmQkI (Amazon)

AMD Ryzen 7 2700X Processor: https://amzn.to/3qdQIBF (Amazon)

Dell XPS 15 9500 15.6" Laptop / Windows: https://amzn.to/3fKEz2w (Amazon)

Lenovo ThinkPad T15 15.6" Laptop / Linux: https://amzn.to/2Jnmn33 (Amazon)

Camera:

Fujifilm X-T3: https://amzn.to/3llKBb5 (Amazon)

Fujinon XF18-55mmF2.8-4: https://amzn.to/3mfTkNb (Amazon)

Audio:

Audio Technica AT2020: https://amzn.to/2VgxU6K (Amazon)

Blue Snowball iCE: https://amzn.to/3lo1jGC (Amazon)

DISCLAIMERS:

I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.